Acessibilidade a temas
Ao personalizar o seu tema, é boa ideia fazer escolhas de design e conteúdo que ajudem a manter a sua loja online acessível. Um website acessível é concebível para que possa ser utilizado por todos, incluindo pessoas portadoras de deficiências. A acessibilidade à sua loja online é essencial para proporcionar uma experiência inclusiva aos seus clientes.
As diretrizes abaixo foram criadas com as Diretrizes de acessibilidade de conteúdo da Web (WCAG) em mente. Como existem muitos fatores a serem considerados ao criar um website acessível, cumprir apenas as diretrizes abaixo não garante que a sua loja online seja totalmente acessível. Pode saber mais sobre acessibilidade na web, visitando o website da WCAG ou vendo as funcionalidades listadas abaixo.
Nesta página
Acessibilidade de texto
É importante que o texto na sua loja online seja legível para clientes com deficiência visual ou que tenham dificuldade em ler blocos densos de texto.
Contraste de cor
Ao editar as cores da sua loja online, verifique se todo o seu texto está acessível a clientes daltónicos ou com alguma deficiência visual. Esses clientes contam com um contraste de cor adequado para diferenciar visualmente uma coisa da outra. Pode utilizar uma ferramenta de relação de contraste online para verificar o contraste das partes diferentes da sua loja.
No exemplo abaixo, o texto tem uma relação de contraste de 2.4:1 face ao segundo fundo e é difícil de ler por alguns clientes.
No próximo exemplo, o texto tem uma relação de contraste de 4.8:1 e é fácil de ler para muitos clientes.
Teste o contraste de todo o texto, incluindo o corpo do texto, títulos, ligações e campos de formulário. Utilize as seguintes diretrizes:
- A cor do texto do corpo e do texto do botão tem uma relação de contraste de pelo menos 4.5:1 face ao plano de fundo.
- A cor dos títulos e outros textos grandes (tamanho do tipo de letra de 24 px e mais) têm uma relação de contraste de pelo menos 3:1 face ao plano de fundo.
- A cor de todo o texto sobre as imagens, incluindo apresentações de diapositivos, faixas e vídeos, tem relações de contraste suficientes face ao plano de fundo. Para texto grande (tamanho do tipo de letra de 24 px ou mais), o contraste é de pelo menos 3:1. Para texto mais pequeno, o contraste é de pelo menos 4.5:1.
- A cor dos elementos não texto, incluindo limites e ícones de entrada, tem uma relação de contraste de pelo menos 3:1 face ao plano de fundo.
Títulos de texto
Quando adiciona títulos à sua página com o editor de rich text, é importante mantê-los em ordem sequencial (1 - 6). Os títulos são utilizados por tecnologias de apoio para comunicar como o conteúdo da página é organizado. Ignorar níveis, como um nível de título 2 seguido por um nível de título 4, pode ser confuso para os utilizadores. Utilize a seguinte diretriz:
- Os títulos são utilizados em ordem sequencial e não ignoram níveis.
Tamanho e alinhamento do texto
Ao editar as definições de tipografia do tema, verifique se o texto é grande o suficiente para que os clientes possam ler confortavelmente.
O texto também deve ter um espaçamento consistente entre palavras e letras para facilitar a leitura. No exemplo abaixo, o alinhamento do texto é justificado, o que cria espaçamento inconsistente entre as palavras.
No próximo exemplo, o alinhamento do texto é alinhado à esquerda, o que cria um espaçamento consistente entre as palavras.
Ao personalizar o tamanho e o alinhamento do texto, utilize as seguintes diretrizes:
- O tamanho mínimo do tipo de letra para o texto do corpo é equivalente a 16 px.
- O alinhamento do texto não é justificado. O texto justificado cria espaçamento inconsistente entre palavras.
Ligações do texto
Ao adicionar ligações ao seu texto, verifique se podem ser identificadas por todos os seus clientes. Como alguns clientes têm problemas para ver cores, não é possível confiar apenas numa alteração de cor para diferenciar uma ligação do texto normal. No exemplo abaixo, o texto Descobrir a nossa história está sublinhado para que não dependa da mudança de cor para comunicar que o texto é uma ligação:
Se editar a folha de estilo do seu tema, não remova os estilos de ligação do texto. Utilize a seguinte diretriz:
- As ligações do texto estão sublinhadas ou têm outro diferenciador visual do texto normal.
Texto alternativo para imagens
Quando adiciona imagens à sua loja online, é importante torná-las acessíveis a clientes cegos ou com visão reduzida. Pode tal, adicione texto alternativo que descreva com precisão cada imagem. Os clientes que utilizam leitores de ecrã confiam no texto alternativo para comunicar o conteúdo das imagens na sua loja online.
Pode adicionar texto alternativo às imagens do seu produto no admin Shopify. Pode adicionar texto alternativo às outras imagens no seu tema no editor de temas.
Quando adiciona texto alternativo a uma imagem, uma boa prática é fingir que está a descrever a imagem para alguém com os olhos fechados. Ajude-os a criar uma imagem na sua mente. O modo como descreve uma imagem também depende do contexto da sua página web. Por exemplo, pode descrever uma imagem de maneira diferente se o seu negócio for uma agência de viagens ou se for uma loja de equipamentos para atividades ao ar livre. Considere a seguinte imagem:
Para uma agência de viagens, pode fazer referência ao país e à região para onde os dois amigos estão a viajar e ao nome do oceano ou ao mar para o qual estão a olhar. Por outro lado, para uma loja de equipamentos para atividades ao ar livre, pode concentrar-se nas marcas e características das mochilas dos dois amigos.
Se o seu negócio for uma agência de viagens, um exemplo de texto alternativo mau pode ser: "Duas pessoas em frente ao oceano." Para a mesma agência, um exemplo de texto alternativo bom pode ser: " Dois amigos a viajar em Lagos, Portugal, a olharem para a enseada da Praia do Camilo num dia de sol."
Apresentação de diapositivos e acessibilidade de vídeo
Quando adiciona vídeos à sua loja online, certifique-se de que considera as necessidades dos clientes com visão reduzida, os clientes surdos ou com deficiência auditiva ou clientes suscetíveis a distúrbios vestibulares.
Alguns destes clientes dependem da capacidade conversão de texto em voz dos leitores de ecrã, que lê em voz alta os conteúdos de uma página web. O áudio adicional de vídeos e músicas, especialmente quando é inesperado, pode dificultar esta experiência. Para clientes surdos ou com deficiência auditiva, é uma boa ideia adicionar legendagem de áudio aos seus vídeos para que esses clientes possam aceder ao conteúdo.
Os clientes com distúrbios vestibulares podem sentir tonturas com conteúdo móvel. Por este motivo, é importante que as apresentações de diapositivos e vídeos não sejam reproduzidos automaticamente.
apresentações de diapositivos
Ao adicionar uma apresentação de diapositivos à sua loja online, utilize as seguintes diretrizes:
- As apresentações de diapositivos não são reproduzidas automaticamente.
- Se as apresentações de diapositivos forem reproduzidas automaticamente, incluem uma definição que os clientes podem utilizar para pausar ou interromper a apresentação de diapositivos.
Vídeos
Ao adicionar um vídeo à sua loja online, utilize as seguintes diretrizes:
- Os vídeos não são reproduzidos automaticamente.
- Se os vídeos forem reproduzidos automaticamente, o áudio será silenciado.
- Para vídeos que incluem áudio, o vídeo é totalmente visível e não é obstruído por outros elementos da página. Isto permite que a legendagem de áudio permaneça visível.
- Para vídeos que incluem diálogos, estão disponíveis transcrições de texto. Estas são incluídas na página ou numa ligação para uma página separada.
Estas diretrizes também se aplicam a vídeos que estão numa apresentação de diapositivos.
Assistência de teclado
Os clientes com deficiência visual ou motora podem utilizar um teclado para navegar e concluir tarefas online. Estes clientes contam com um indicador visual para comunicar onde o foco do teclado está numa página web. No exemplo abaixo, o campo E-mail possui um indicador de foco visual:
Se editar a folha de estilos do tema, certifique-se de que não remove o estilo de foco do teclado de nenhum elemento da página. Utilize a seguinte diretriz:
- Todos os elementos da página interativa têm um indicador visual claro quando têm foco do teclado. Estes elementos incluem ligações, botões e campos de formulário.
Recursos
Para saber mais sobre acessibilidade na web para os tópicos discutidos neste artigo, consulte os seguintes recursos.
Recursos de contraste de cores
- Colors with Good Contrast, um artigo da Web Accessibility Initiative
- Contrast Ratio, uma ferramenta online que pode utilizar para encontrar a relação de contraste entre duas cores
- Color Contrast Analyzer, uma aplicação de relação de contraste para uma transferência desenvolvida pelo Paciello Group
Recursos de texto
- 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake, um artigo da Smashing Magazine
- Text alignment, um artigo da Web AIM
- Link Appearance, um artigo da Web AIM
- Using Headings for Content Structure, um artigo da Web AIM
Recursos de texto alternativo
- Text to Speech, um artigo da Web Accessibility Initiative
- Alternative Text, um artigo da Web AIM
- Considerations when writing alt text, um artigo no Medium.
Recursos de vídeo e apresentação de diapositivos
- A Primer to Vestibular Disorders, um artigo do The A11Y Project
- Text to Speech, um artigo da Web Accessibility Initiative
- Video Captions, um artigo da Web Accessibility Initiative
- Use automatic captioning, um artigo de Ajuda do YouTube
- Captions and subtitles, um artigo do Centro de ajuda do Vimeo
Recursos de assistência de teclado
- Keyboard Compatibility, um artigo da Web Accessibility Initiative
- Introduction to Focus, um artigo do Google Developers