Acessibilidade e títulos: design para usuários com deficiência visual

Publicados: 2021-07-19

Um pequeno detalhe, por exemplo, como você usa títulos em seu site ou aplicativo, pode custar clientes em potencial ou vendas. Continue lendo para descobrir por que seu site deve ser acessível, o que poderia acontecer se não fosse e algumas práticas recomendadas sobre como usar cabeçalhos para guiar os usuários por uma página corretamente.

O caso para acessibilidade

Os títulos podem ser facilmente esquecidos ao projetar um novo site ou atualizar o antigo. Os profissionais de marketing tendem a se concentrar mais no lado estético do design e menos no lado prático. É verdade que os elementos visuais desempenham um papel importante na experiência do usuário (UX) de um site, no entanto, torná-lo mais acessível para usuários com deficiência visual pode aumentar o número de visitantes que realizam conversões.

As estatísticas fortalecem nosso caso de acessibilidade:

aproximadamente 253 milhões de pessoas em todo o mundo sofrem de deficiência visual
todos os dias 250 pessoas começam a perder a visão no Reino Unido
mais de 2 milhões de pessoas no Reino Unido vivem com perda de visão que tem um impacto significativo em suas vidas diárias, por exemplo, incapacidade de dirigir
a degeneração relacionada à idade é a principal causa de cegueira em adultos.

homem cego usando telefone

Com 4,1 milhões de pessoas sendo afetadas pela perda de visão no Reino Unido até 2050 , as empresas não podem deixar de adaptar seus sites a todos os públicos. Isso é especialmente importante se o mercado-alvo for um grupo demográfico mais antigo, que tem maior probabilidade de ter problemas de visão.

Um aspecto simples, como usar os títulos corretamente, pode fazer uma grande diferença e não é difícil de aplicar. Isso também pode economizar os custos de entrar em um processo judicial.

Estojo de dominó

O Domino's Pizza é um bom exemplo de como pode custar caro negligenciar a acessibilidade para usuários com deficiência visual.

Um cliente cego nos Estados Unidos registrou uma reclamação em 2016 depois de lutar para escolher coberturas, usar um código de desconto e até mesmo concluir seu pedido no aplicativo para iPhone do restaurante. O problema era que o aplicativo não se integrava ao software de leitura de tela do telefone, que vocaliza o conteúdo com base no texto sendo usado corretamente e nas imagens marcadas com texto. O aplicativo e o site da empresa não tinham o código correto para permitir que o iPhone lesse as opções.

acessibilidade pesquisa por voz

Embora os juízes tenham ficado do lado da Domino's inicialmente, o tribunal de apelação decidiu a favor do cliente na semana passada, alegando que “ A alegada inacessibilidade do site e do aplicativo da Domino's impede o acesso aos bens e serviços de suas franquias físicas de pizza - que são locais públicos alojamento ”.

No Reino Unido, o Royal National Institute of Blind People também acolheu a decisão, comentando para o BCC : "Todas as organizações têm a responsabilidade de acordo com a Lei da Igualdade de 2010 para garantir que seus sites e aplicativos possam ser usados por pessoas cegas e amblíopes, incluindo aqueles que usam leitores de tela ”.

Existem diferentes maneiras pelas quais as empresas podem tornar seus sites mais acessíveis e usar as tags de título corretamente ajuda muito o usuário a navegar na página.

Prática recomendada de títulos para acessibilidade

Existe um pouco de confusão e mau uso dos títulos, em parte devido ao fato de os desenvolvedores seguirem um design muito de perto ou os designers não estarem cientes da maneira correta de usar os títulos.

Se você não tem certeza do que é um título, o W3C tem uma boa definição e o Yoast explica seu uso de SEO.

W3C define o uso correto como:

“Os seis elementos de cabeçalho, H1 a H6, denotam cabeçalhos de seção. Embora a ordem e a ocorrência dos títulos não sejam restringidas pelo HTML DTD, os documentos não devem pular níveis (por exemplo, de H1 para H3), pois converter esses documentos em outras representações costuma ser problemático. ”

O uso correto dos cabeçalhos não só influencia como as pessoas e o Google leem sua página, mas também como os leitores de tela apresentam seu conteúdo ao usuário. As pessoas que usam ferramentas de acessibilidade podem navegar na página por meio de seus títulos, portanto, se você tem algo importante a dizer, deve ser apresentado estrutural e visualmente como você deseja.

Não há trabalho extra necessário para tornar os títulos acessíveis ao criar sua página. Se você seguir o uso correto, os critérios de acessibilidade serão atendidos. Os conselhos de acessibilidade do W3c para títulos explicam isso muito bem e, como você pode ver, não só faz sentido para a acessibilidade, mas também estrutural e visualmente.

Como faço para verificar os títulos?

Se seus desenvolvedores ou tema seguirem o uso correto dos títulos, então você deve ser capaz de simplesmente adicionar seu conteúdo e adicionar seu título da maneira correta por meio de seu editor / CMS.

Como uma observação lateral, você não precisa adicionar títulos em todos os lugares, um simples H1 (que geralmente é o título da página) seguido por um H2 seria suficiente - mas digamos que você deseja estruturar corretamente uma página particularmente longa ou está verificando a de outra pessoa trabalhos? Tente usar um destes plug-ins para o seu navegador favorito:

Mapa de títulos para o Chrome
Mapa de títulos para Firefox

Depois de instalados, eles são muito fáceis de usar e quaisquer títulos incorretos aparecem destacados em vermelho na barra lateral quando você clica no botão do plugin. Este recurso também será uma opção padrão no editor Gutenberg na versão do WordPress 5.0 e é explicado neste site.