Artigo Transforme a compaixão em ação evitando esses 8 erros de design acessíveis

O design acessível respeita a singularidade de todos os indivíduos, independentemente da idade e capacidade. Começa com o reconhecimento de que nem todas as pessoas são como você.

Para melhor atender a diferentes usuários, é imperativo entender e ter empatia com todos os tipos de pessoas. Seguir as diretrizes WCAG 2.0 AA torna o conteúdo acessível a uma ampla gama de pessoas com deficiência, incluindo cegueira e deficiência visual, surdez e perda auditiva, deficiências de aprendizado, limitações cognitivas, movimentos limitados, deficiências de fala ou fotossensibilidade. Para garantir que você esteja atendendo a cada usuário que visita seu site, evite esses oito erros de design acessíveis.

1. Armadilhas de teclado

Algumas pessoas que usam tecnologia assistiva contam com ações visíveis na tela. Um bom design, portanto, garante que todo o conteúdo relacionado à navegação seja visível. Certifique-se de ordenar os itens de forma lógica (canto superior esquerdo para canto inferior direito) para ajudar os usuários a entender o conteúdo e fazer escolhas informadas sobre a navegação.

Pontas:

• Conteúdo principal: considere fornecer uma maneira para os usuários pularem facilmente a navegação de nível superior para acessar o conteúdo principal.
• Padrões de interface do usuário: siga a semântica de padrões comuns, como Toggle, Tabs, Tables, Modal Windows e atributos ARIA.
• Uso de foco: não esconda texto ou ações atrás de um estado de foco. Se um usuário apenas de teclado não puder ver que um conteúdo/botões existe, ele não poderá navegar pela página.

Bom exemplo de links ignorados nº 1

Bom exemplo de links ignorados nº 2

2. Contraste de cor insuficiente

O contraste de cores insuficiente afeta a capacidade das pessoas de receber informações visualmente. Verifique se há contraste suficiente entre o texto e o plano de fundo para garantir que o texto seja legível. A taxa de contraste entre o texto e o plano de fundo do texto deve ser no mínimo de 4,5 para 1. No entanto, se o texto tiver pelo menos 24 pixels ou 19 pixels em negrito, o mínimo cai para 3 para 1.

Pontas:

• Paletas de cores: Esteja consciente das cores primárias. Além disso, lembre-se dos requisitos de contraste de cores ao escolher as cores.
• Não confie apenas na cor: use combinações de forma, cor e texto (não apenas um por si só) para transmitir significado e seja consistente. Forneça pelo menos dois indicadores para que as pessoas que não conseguem distinguir facilmente as cores ainda possam entender seu conteúdo.
• Exceções: Texto, imagens de texto, imagens e logotipos que não são necessários para entender o significado do conteúdo ou são pura “decoração”.

Exemplo de contraste insuficiente

3. Texto em Imagens

Evite usar imagens de texto que se destinam a ser lidas. Use texto real estilizado com CSS em vez de apresentação de texto baseada em imagem. Nas situações em que devam ser utilizadas imagens de texto, o texto alternativo deve conter o mesmo texto apresentado na imagem.

Pontas:

• Diagramas, gráficos, tabelas: use texto real em visualizações de dados. Se o texto real não for possível, uma representação textual das informações essenciais transmitidas pela imagem é essencial. Ex: Descrição longa ou visualização de lista.
• Exceções: logotipos, elementos de marca e gráficos que tenham boas alternativas de texto descritivo.

Exemplo de bom texto na imagem

4. Estados de foco ocultos

Os estados de foco ajudam os usuários a navegar e entender onde estão. Nunca os esconda. Os estados de foco são importantes para os usuários de teclado. Isso os ajuda a entender onde estão em uma página. Para testar seu site, tente navegar por sua página e encontre seu foco.

Pontas:

• Estados de foco: se você remover os estados de foco padrão, certifique-se de substituí-los por algo que funcione melhor do que o fornecido pelo seu navegador.
• Estados de entrada: considere o que acontece com os rótulos quando você foca dentro de uma entrada.
• Ações da página: defina claramente os efeitos colaterais do foco das ações.

Estados de foco ocultos

Bons estados de foco

5. Estrutura hierárquica confusa

Crie relacionamentos claros entre o conteúdo que é perceptível e o que pode ser determinado programaticamente. Projete páginas que façam sentido semanticamente para que os desenvolvedores possam traduzi-las do design para o código e um leitor de tela possa determinar a sequência de leitura correta.

Pontas:

• Semântica: Inclua campos e rótulos obrigatórios nos formulários. Crie tabelas com títulos de coluna.
• Agrupamentos Lógicos: Agrupe elementos relacionados com amplo espaço ou cores de fundo. Apresente informações sequencialmente, como diagramas de processo ou instruções passo a passo.
• Divulgação progressiva: Design para manipulação direta. Apresente as coisas certas na hora certa. Exercite a divulgação progressiva.
• Localização de caminho: crie pistas consistentes para navegação. Use títulos para criar pontos de referência claros na página.
• Consistência: Apresente coisas que são iguais da mesma maneira.
• Diferenciar: Diferencie diferentes tipos de conteúdo.

Hierarquia ruim

Boa Hierarquia

6. Carga Cognitiva Excessiva

Comunicar claramente informações que sejam fáceis de entender. Projete informações de uma maneira que facilite o consumo para aqueles que vivem com transtorno de déficit de atenção e hiperatividade (TDAH) e autismo ou transtornos do espectro do autismo.

Pontas:

• Seja conciso: use frases curtas e dicas visuais para separar as informações. Ex: listar grupos usando números ou marcadores.
• Minimize a carga cognitiva: crie uma narrativa que apresente as informações no lugar certo na hora certa. Evite apresentar parágrafos densos de informações que possam ser divididos. Evite medidas de fila longa.

7. Hiperlinks indiferenciados

Os links são um dos elementos mais comuns na web e muitas vezes são vitais para navegar em sites. Os links devem se parecer com links, e nada mais deve. Os usuários podem ficar frustrados se tentarem clicar em frases textuais ou gráficos que parecem links, mas não são. Os links devem fazer sentido fora do contexto.

Pontas:

• Seja específico: use palavras descritivas para botões em vez de terminologia vaga para que o resultado seja previsível.
• Links não sublinhados: o texto do link deve ter uma proporção de contraste de 3:1 em relação ao texto sem link ao redor.
• Não confie apenas na cor: O link deve apresentar um "designador sem cor" tanto no foco do mouse quanto no foco do teclado. Ex: sombras projetadas, escala, transições/transformações, alterações de cores ou sublinhado.

Hiperlinks ruins

Bons hiperlinks

8. Tipografia Ilegível

A maioria das informações nos sites é comunicada por meio de texto, portanto, o tipo deve ser legível e legível. Isso ajuda as pessoas com baixa visão a distinguir facilmente os personagens. Pode reduzir a tensão da leitura para alguém com deficiência de aprendizagem. Use tipografia limpa e simples com bom espaçamento. Aplique kerning e entrelinha confortáveis ​​para garantir que o texto seja lido facilmente.

Pontas

• Dê controle aos usuários: não impeça que os usuários personalizem sua própria experiência de leitura alterando o tamanho da cópia do corpo para um tamanho de fonte menor. Você pode fazer isso definindo o tamanho da fonte para 100% e usar tamanhos relativos para estabelecer hierarquia entre os títulos. O texto ainda deve ser legível em 200%.
• Reduza sublinhados, itálicos e maiúsculas: essas formas de letras são mais difíceis de reconhecer e ler.
• Alinhe o texto de formato longo à esquerda: crie layouts consistentes com caminhos lineares para os olhos seguirem.

Zoom em 100%

Redimensione seu texto. Verifique se suas páginas são acessíveis e utilizáveis ​​por usuários com deficiência visual e usuários com baixa visão. Redimensione o texto e verifique se tudo na página funciona. Repita até chegar a 200% de zoom. Parece simples? Isso é.

Etapas para verificar sua tipografia:

1. Abra seu navegador e redimensione o texto para 200%. Clique em Exibir, selecione Zoom e clique em Ampliar (Ctrl/Cmd ++) para aumentar o tamanho do texto.
2. Dê uma olhada em como o conteúdo na tela respondeu. Todo o conteúdo da página ainda deve ser legível e nenhuma funcionalidade deve ser perdida.
3. Verifique se as interações ainda funcionam, se o texto está sobreposto, se o texto importante foi truncado ou se o texto foi cortado.

Zoom em 200%

Pontas:

1. Abra seu navegador e redimensione o texto para 200%. Clique em Exibir, selecione Zoom e clique em Ampliar (Ctrl/Cmd ++) para aumentar o tamanho do texto.
2. Dê uma olhada em como o conteúdo na tela respondeu. Todo o conteúdo da página ainda deve ser legível e nenhuma funcionalidade deve ser perdida.
3. Verifique se as interações ainda funcionam, se o texto está sobreposto, se o texto importante foi truncado ou se o texto foi cortado.

Recursos

Aproximadamente uma em cada oito pessoas nos Estados Unidos tem uma deficiência. Se a definição for expandida para incluir aqueles que são moderadamente deficientes, esse número salta para quase um em cinco.

A incapacidade de acomodar um público tão grande limita o impacto positivo que um site pode ter em seus negócios – sem mencionar a capacidade da sua marca de ressoar com as pessoas e inspirar crença. Construir um site acessível que possa ser usado em tantos navegadores e pelo maior número de pessoas possível pode ajudar sua empresa – mas também é simplesmente a coisa certa a fazer. Por isso, reunimos alguns outros recursos sobre o tema.

• Descubra por que é importante que as empresas considerem a acessibilidade na Web (e evitem uma ação judicial corporativa).
• Sintonize no Podcast Solving for B° sobre a importância da acessibilidade na web.

Contraste de cores

• Verificador de contraste do Web AIM
• Verificador de contraste colorido

Estrutura

• Extensão do Chrome do mapa de títulos
• Biblioteca de padrões de projeto A11Y

Créditos

• Projeto A11Y
• w3.org- WCAG 2.0
• w3.org- Padrões e Visão Geral
• Usabilidade.org
• Pesquisa de Acessibilidade na IBM
• Carnegie Museums of PittsburghDisney.com boa hierarquia