Acessibilidade para temas

Uma ótima como个性化temas创意é fazer escolhas de design e conteúdo que ajudem a manter sua loja virtual acessível。O projeto de sites acessíveis é详细说明形式所有权usar O site, até mesmo pessoas com deficiências físicas。Para proporcionar a seus客户uma experiência inclinclva, é imprescindível garantir a acessibilidade da sua loja virtual。

As diretrize abaixo foram criadas com foco nas网页内容无障碍指引(WCAG)。Como há muitos fatores a serem conseados ao criar um site acessível, somente as diretrise abaixo não garantem que sua loja virtual esteja totalmente acessível。Aprenda mais清醒的访问和访问的网站da WCAG,你卖os递归listados abaixo

Acessibilidade de textos

É重要的关于我们国家的问题legível pelos客户通信deficiências关于我们国家的问题的问题。

对比de core

Ao editar as cores da sua loja virtual, certificate -se de que todo o texto seja acessível a clients daltônicos ou com deficiências visuais。女客户确认他们的对比充分的para fazer distinção视觉入口,uma coisa e a oua。Você pode usar umaFerramenta de taxa de contrast在线对比验证,不同的部分。

No范例,o texto tem uma taxa de对比de 2,4:1 em relação ao plano de fundo, hard ultando a leitura para alguns客户。

Um bloco de texto cinza claro e Um fundo branco sólido。

没有próximo范例,o texto tem uma taxa de contrast de 4,8:1,促成对客户的自由。

恩布洛德texto cinza escuro em em fundo branco sólido。

texto对比测试,包括indo o texto do corpo, títulos, links e campos de formulário。用作影碟:

  • A cor do corpo do texto e o texto dos botões aprenam um índice de contraste de pelo menos 4.5:1 em relação ao fundo。
  • A cor dos cabeçalhos e de outros textos grandes (fontes com tamanho de 24 px e acima)呈现um índice de对比de pelo menos 3:1 em relação ao fundo。
  • 一个cor de todo o texto清醒图像,包括indo apresentações de slides, banner e vídeos, tem taxas de contraste em relação ao plano de fundo。Para textos grandes (tamanho da fonte de 24 px e maior), o contrast é de pelo menos 3:1。Para textos menores, o对比é de pelo menos 4,5:1。
  • A cor dos elementos contos não texto, incluindo ícones e bordas de entrada, arenam um índice de contraste de pelo menos 3:1 em relação ao fundo。

Títulos de texto

Ao adicionar títulos à página com o编辑器de富文本, é importante mantê-los em ordem sequence (de 1 a 6). Os títulos são usados por technologias assistivas para communicar como conteúdo da página é organizado。puular níveis, como um nível de título 2 seguido por um nível de título 4, pode ser confuso para os usuários。Siga esta diretz:

  • Os títulos são usados em ordem sequence e não pulam níveis。

Tamanho alinhamento do texto

Ao editar作为configurações de tipografia do seu tema,证明-se de texto seja grande o充分给予客户拥有合法权利的权利。

O texto também deve ter espaçamento始终如一地进入palavras e letra para facilitar a leitura。没有exemplo abaixo, o alinhamento do texto é正当理由,o que cria um espaçamento不一致的entre as palavras。

嗯,bloco de texto justify ado alinhado。Cada linha do texto preenche o espaço de ponta a ponta, forçando um espaçamento variado entre as palavras para torná-lo适当ado。

没有próximo exemplo, o alinhamento do texto está alinhado à esquerda, o que cria um espaçamento consistente entre as palavras。

Um bloco de texto alinhado à esquerda。Há espaçamento consistente entre cada palavra。

Ao personalizar o tamanho e o alinhamento do texto,用作引语:

  • 一个fonte do corpo do texto deve ter um tamanho mínimo de 16 px。
  • O alinhamento de texto não é理由。Texto jusicado cria espaçamento不一致entre as palavras。

在辅助链接中,验证这些链接是为客户提供的。Como algumas pessoas podem ter hard dade em ver cores, não dependa apenas de uma alteração de cor ao dienciar o URL do texto normal。Para evidence ciar que a informação é um link sem dependder da mudança de cor, sublinhe o texto。

Se você editar a folha de estilo do seu tema, certificate - Se de não remover os estilos de link do texto。Siga esta diretz:

  • Os链接de texto podem ser subblinhados ou表象差异or视觉差异do texto normal。

Texto alternativo para imagens

Ao adicionar imagens à sua loja virtual, é importante torná-las acessíveis a clients cegos ou com pouca visão。Para fazer isso, adicione um texto que descreva com precisão cada imagem。Os客户可使用的leitores de tela依赖的texto替代泄露o conteúdo das imagens na sua loja虚拟。

E possivelAdicionar texto alternativo às imagens DOS产品没有admin da Shopify, assim comoAdicionar texto alternativo às outas imagens do tema没有编辑de temas。

Ao adicionar o texto alternativo a uma imagem,推荐amos imaginar que você está descrevendo a imagem para alguém que está com os olhos fechados。Ajude a pessoa a criar uma imagem na mente。图像的格式取决于também do contexto da sua página web。Supondo que sua empresa fosse uma agência de viagens, a descrição da imagem poderia ser diente da descrição que você faria se a empresa fosse uma loja de equipamentos de lazer。观察esta图像:

我的朋友abraçados我们的海岸和大洋

Em uma agência de viagens, você poderia mencionar o país ea região pelos quais os dois amigos estão viajando e o oceano para o qual estão olhando。在激光的世界里,在激光的世界里,você在激光的世界里,características在激光的世界里,我们的朋友。

这是我们的海洋之巅agência我们的海洋之巅,teríamos我们的海洋之巅,我们的海洋之巅。Com relação à mesma agência,嗯texto alternativo bem精心制作的seria范例:“在葡萄牙拉各斯,我是朋友,我是朋友,我是葡萄牙拉各斯的朋友,我是葡萄牙拉各斯的朋友,我是葡萄牙拉各斯的朋友。”

Acessibilidade de vídeos e apresentações de幻灯片

Ao adicionar vídeos à sua loja virtual,必要证明dos clients com pouca visão, clients com deficiências auditivas ou clients possivelmente suscetíveis adoencas前庭

公司依赖客户递归的texto para fala DOS leitores de tela, que lê em voz alta o conteúdo de uma página da web。Áudio adicional de vídeos e músicas, specialmente quando é inesperado, pode difficult essa experiência。Para atender a clientes com deficiência auditiva,推荐que você adicione legendas a seus vídeos Para que esses clientes possession a essar o conteúdo。

客户doenças vestibulares podem sentir tontura com conteúdo em movimento。后果,é importante que apresentações de slides e vídeos não sejam自动复制。

Apresentação de slides

Ao adicionar uma apresentação de slides à sua loja virtual, siga estas diretrzes:

  • A reprodução da apresentação de slides não acontece automaticamente。
  • As apresentações de slides automáticas include uma configuração que os clients podem usar para pausar ou parar a apresentação de slides。

视频

Ao adicionar um vídeo à sua loja virtual, siga estas diretrise:

  • A reprodução de vídeos não acontece automaticamente。
  • Vídeos com reprodução automática não包括áudio。
  • Vídeos com áudio são totalmente visíveis e sofrem obstruções por outros elements da página。Dessa forma,就像legendas podem ser远景o tempo一样。
  • Para vídeos que include diálogos, transcrições de texto estão disponíveis。Elas estão incluídas na página ou em um link para uma página separada。

Essas diretrzes são válidas também para vídeos em apresentações de slides。

相容体do teclado

客户网站deficiência视觉ou motora podem usar um teclado para navegar e realizar tarefas在线。对客户进行视觉指示,对指示器进行视觉指示está em uma página da web。没有榜样,我的朋友电子邮件Tem um indicador de foco visual:

Uma tela de login de clientes nas lojas online que exbe campos de formulário para e -mail e Senha。O campo E-mail é contornado em azul。

奥编辑的一个页,为我们介绍,não为我们介绍,为我们介绍,为我们介绍,为我们介绍,página。Siga esta diretz:

  • Todos os元素交互达página aprenam um指标视觉claro quando装备com foco做teclado。Esses元素包括链接,botões e campos de formulário。

recurso项目

Para saber mais清醒访问网站参考aos tópicos discutidos neste artigo, consulte os recursos a seguir。

对比核的递归

递归式

文本的交替递归

递归vídeo e de apresentações de幻灯片

相容的递归

Tudo pronto para começar一个供应商com一个Shopify?

实验graça