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客户。
没有próximo范例,o texto tem uma taxa de contrast de 4,8:1,促成对客户的自由。
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。
没有próximo exemplo, o alinhamento do texto está alinhado à esquerda, o que cria um espaçamento consistente entre as palavras。
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图像:
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:
奥编辑的一个页,为我们介绍,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。
对比核的递归
- 具有良好对比度的颜色(Cores com bom contraste)é嗯artigo da网络无障碍倡议
- 对比度(Índice de contraste)é uma ferramenta虚拟que pode ser usada para determinar o índice de contraste entre duas cores
- 颜色对比分析仪(Analisador de contraste de cores)é um app de índice de contraste disponível para download que foi desenvolvido pelo Paciello Group
递归式
- 16像素字体大小:为主体复制。(Fontes com tamanho de 16像素:para o corpo da cópia。我的心是这样的é嗯artigo da Smashing杂志
- Alinhamento do textoé嗯artigo da网络AIM
- 链接外观(Aparência de links)é嗯artigo da网络AIM
- Usar títulos para estrutura de conteúdoé嗯artigo da网络AIM
文本的交替递归
- 从文本到语音(De texto para fala)é嗯artigo da网络无障碍倡议
- 替代文本(Texto alternativo)é嗯artigo da网络AIM
- Considerações ao escrever um texto alternativoé嗯artigo da中等。
递归vídeo e de apresentações de幻灯片
- 前庭神经紊乱入门(Um compêndio sobre distúrbios vestibulares)é嗯artigo做A11Y项目
- 从文本到语音(De texto para fala)é嗯artigo da网络无障碍倡议
- 视频说明(Legendas em vídeos)é嗯artigo da网络无障碍倡议
- 使用自动字幕(Uso de legendas automáticas)é嗯artigo da Ajuda do YouTube
- 字幕(Legendas e subtítulos)é um artigo do Vimeo帮助中心
相容的递归
- 键盘兼容性(Compatibilidade do teclado)é嗯artigo da网络无障碍倡议
- Focus简介(Introdução ao foco)é um artigo do谷歌开发者