Projetando para acessibilidade não é tão difícil

Sete diretrizes fáceis de implementar para projetar uma web mais acessível ??

A acessibilidade digital refere-se à prática de criar conteúdo digital e aplicativos que podem ser usados ??por uma ampla gama de pessoas, incluindo indivíduos com deficiências visuais, motoras, auditivas, de fala ou cognitivas.

Há um mito de que tornar um site acessível é difícil e caro, mas não é necessário. Projetar um produto do zero que atenda aos requisitos de acessibilidade não adiciona recursos ou conteúdo extras; portanto, não deve haver custo e esforço adicionais.

Consertar um site que já está inacessível pode exigir algum esforço, no entanto. Quando eu trabalhava na Carbon Health, verificamos a acessibilidade do nosso site usando a extensão do Chrome AX . Encontramos 28 violações que precisávamos resolver apenas na home page. Parecia complicado, mas descobrimos que esses problemas não eram tão difíceis de corrigir; era apenas uma questão de investir tempo e pesquisa para resolvê-los. Conseguimos chegar a zero erros em alguns dias.

Quero compartilhar com você algumas das etapas simples que adotamos para que você também possa tornar seus sites mais acessíveis. Esses princípios se concentram na acessibilidade da Web e de dispositivos móveis.

Mas antes de começarmos, vamos falar sobre o porquê disso ser importante.

Por que projetar para acessibilidade? ?

Como designers, temos o poder e a responsabilidade de garantir que todos tenham acesso ao que criamos, independentemente de habilidade, contexto ou situação. O melhor de tornar nosso trabalho acessível é que ele traz uma experiência melhor para todos.

Existem mais de 56 milhões de pessoas nos Estados Unidos (quase 1 em 5) e mais de 1 bilhão de pessoas em todo o mundo que têm uma deficiência. Em 2017, houve 814 processos de acessibilidade de sites apresentados em tribunais federais e estaduais. Esses dois dados, por si só, devem nos convencer da importância de projetar para acessibilidade.

Há também um forte argumento comercial para a acessibilidade : estudos mostram que sites acessíveis têm melhores resultados de pesquisa, atingem um público maior, são amigáveis ??com SEO, têm tempos de download mais rápidos, encorajam boas práticas de codificação e sempre têm melhor usabilidade.

Essas sete diretrizes são relativamente fáceis de implementar e podem ajudar seus produtos a se aproximarem do nível AA das Diretrizes de Acessibilidade ao Conteúdo da Web (WCAG 2.0) e trabalharem nas tecnologias assistenciais mais usadas – incluindo leitores de tela, ampliadores de tela e reconhecimento de fala. Ferramentas.

1. Adicione contraste de cor suficiente ?

Botões com bom contraste de cores são mais fáceis de ler para Guadalupe.

O contraste de cores é um problema de acessibilidade da web frequentemente negligenciado. As pessoas que têm baixa visão podem ter dificuldade em ler texto a partir de uma cor de fundo se tiver baixo contraste. Em uma folha de dados sobre deficiência visual e cegueira , a Organização Mundial de Saúde (OMS) estima que existam 217 milhões de pessoas com deficiência visual moderada a grave. Portanto, é essencial considerar o contraste suficiente entre texto e plano de fundo.

De acordo com o W3C , a relação de contraste entre o texto e seu fundo deve ser de pelo menos 4,5 para 1 (nível de conformidade AA). As proporções tornam-se mais complacentes com fontes maiores e mais pesadas, pois são mais fáceis de ler com menos contraste. Se o seu tipo tiver pelo menos 18 pt ou 14 pt em negrito, a taxa mínima de contraste cai para 3 para 1.

Algumas ferramentas ajudarão você a verificar isso rapidamente. Se você usa um Mac, recomendo o aplicativo Contrast . Com essa ferramenta, você pode verificar instantaneamente o contraste usando um seletor de cores. Se você quiser obter uma pontuação mais detalhada, recomendo que você insira seus valores de cor no verificador de contraste de cores WebAIM . Essa ferramenta calculará a pontuação para tamanhos de texto regulares e maiores em diferentes níveis de conformidade (A, AA, AAA). Você pode alterar os valores das cores e ver os resultados em tempo real.

Fonte: WCAG Visual Contrast

2. Não use apenas a cor para tornar as informações críticas compreensíveis ?

René fica feliz quando os gráficos são daltônicos!

Quando você estiver comunicando algo importante, mostrando uma ação ou solicitando uma resposta, não use a cor como única indicação visual. Pessoas com baixa acuidade visual ou daltonismo terão dificuldade em entender seu conteúdo.

Tente usar um indicador diferente de cor, como rótulos ou padrões de texto. Ao mostrar erros na tela, não confie apenas em texto colorido, adicione um ícone ou inclua um título na mensagem. Considere adicionar uma sugestão visual, como peso da fonte ou estilo de texto sublinhado, ao texto vinculado em um parágrafo, para que os links se destaquem.

Elementos com informações mais complexas, como gráficos e tabelas, podem ser especialmente difíceis de ler quando você usa cores apenas para distinguir os dados. Use outros aspectos visuais para comunicar informações como forma, rótulos e tamanho. Você também pode tentar incorporar padrões em seus preenchimentos para tornar as diferenças mais aparentes. Um ótimo exemplo desta diretriz é o modo daltônico do Trello . Quando ativado, os rótulos se tornam mais acessíveis adicionando textura.

Um bom truque é imprimir seu gráfico em preto e branco e ver se você ainda consegue entender tudo nele. Você também pode usar um aplicativo como o Color Oracle , que mostra em tempo real o que as pessoas com deficiências comuns de visão de cores veem. Essas dicas ajudam você a garantir que as informações em seu site sejam independentes de cor.

Fonte: WCAG Visual Contrast Without Color

3. Projetar estados de foco utilizáveis ???

Os estados de foco são fáceis de navegar com a mão protética de Tyler.

Você já notou os contornos azuis que às vezes aparecem em links, entradas e botões? Esses contornos são chamados de indicadores de foco. Os navegadores, por padrão, usam uma pseudo-classe CSS para mostrar esses contornos nos elementos quando eles são selecionados. Você pode achar esses indicadores de foco padrão não muito bonitos e ser tentado apenas a ocultá-los. No entanto, se você se livrar desse estilo padrão, certifique-se de substituí-lo por outra coisa.

Os indicadores de foco ajudam as pessoas a saber qual elemento tem o foco do teclado e ajudam a entender onde estão quando navegam no site. Eles são usados ??por pessoas cegas e requerem leitores de tela, indivíduos com mobilidade limitada, indivíduos que sofreram lesões como o túnel do carpo e usuários avançados que preferem esse tipo de navegação. Ah, e alguns de nós usam o teclado como principal forma de navegar na web!

Os elementos que devem ser focalizados são links, campos de formulário, widgets, botões e itens de menu. Eles precisam ter um indicador de foco que os faça parecerem diferentes dos elementos ao seu redor.

Você pode criar indicadores de foco que se ajustem ao estilo do seu site e combinem com sua marca. Crie um estado que seja altamente visível, com bom contraste, por isso, ele se destaca do restante do conteúdo.

Fonte: W3C Focus Visible

4. Use rótulos ou instruções com campos de formulário e entradas ??

O Sr. López continua tentando transformar um texto de espaço reservado em um rótulo.

Usar o texto de espaço reservado como rótulos é um dos maiores erros ao criar um formulário. Podemos ficar tentados a seguir essa tendência quando o setor imobiliário é limitado ou queremos tornar nosso projeto mais simples e moderno – não o faça. O texto do espaço reservado é geralmente cinza e tem pouco contraste, por isso é difícil de ler. Se você é como eu, geralmente esquece o que está escrevendo, por isso é difícil saber sobre o que os campos são quando o rótulo desaparece.

As pessoas que usam leitores de tela geralmente navegam por um formulário usando a tecla Tab para passar pelos controles de formulário. Os elementos <label> são lidos para cada controle de formulário. Qualquer texto sem rótulo, como texto de espaço reservado, geralmente é ignorado.

Sempre ajude as pessoas a entender o que devem fazer e escreva em um formulário. É melhor que os rótulos não desapareçam, mesmo quando a pessoa está preenchendo uma entrada; as pessoas nunca devem perder o contexto com o que estão escrevendo. Quando os designers ocultam descrições ou direções em seus formulários, eles estão sacrificando a usabilidade em favor da simplicidade .

Essa prática não significa que você tenha que confundir seu design com informações desnecessárias, apenas certifique-se de fornecer dicas essenciais. Muito texto instrutivo pode ser tanto um problema quanto um pouco. O objetivo é confirmar que o indivíduo tenha informações suficientes para concluir suas tarefas sem atrito.

Fonte: WebAIM Criando Formulários Acessíveis

5. Escreva um texto alternativo útil para as suas imagens e outro conteúdo não textual ?

Robin encontrou um novo amigo em uma foto.

Pessoas com baixa visão geralmente usam leitores de tela para “ouvir” a web. Essas ferramentas convertem texto em fala para que a pessoa possa ouvir as palavras em um site.

Existem duas maneiras de apresentar texto alternativo.

  • Dentro do atributo <alt> do elemento da imagem.
  • Dentro do contexto ou arredores da própria imagem.

Tente descrever o que está acontecendo na imagem e como isso é importante para a história, em vez de apenas dizer algo como "imagem", o contexto é tudo.

Se a imagem é puramente decorativa ou se cria redundância porque o contexto circundante já explica o conteúdo. Em seguida, adicionar um atributo <alt> vazio fará com que os leitores de tela o ignorem. Se você não escrever nenhum texto alternativo, alguns leitores de tela lerão o nome do arquivo para o indivíduo. Essa é a pior experiência que você pode oferecer.

O Google está trabalhando em uma AI de legendagem de imagens que pode descrever fotos com 94% de precisão . Este modelo é de código aberto e ainda está em pesquisa – esperamos que começaremos a vê-lo usado em diferentes produtos. Enquanto isso, devemos fornecer manualmente um texto que descreva o significado e a função das imagens em nosso conteúdo.

Fonte: W3C Usando Atributos Alt

6. Use marcação correta em seu conteúdo ?

Noah sempre quis ser arquiteto.

Cabeçalhos marcam onde o conteúdo começa – são tags dadas ao texto para definir seu estilo e propósito. Os cabeçalhos também estabelecem a hierarquia do conteúdo da página.

Títulos com grandes tamanhos de fonte ajudam o leitor a entender melhor a ordem do conteúdo. Da mesma forma, os leitores de tela também usam tags de cabeçalho para ler o conteúdo. Dessa forma, pessoas com baixa visão obtêm uma visão geral da página lendo cada cabeçalho em um fluxo hierárquico.

É importante usar elementos estruturais adequados ao desenvolver um site. Os elementos HTML comunicam ao navegador que tipo de conteúdo eles contêm e como o navegador deve processar ou tratar esse conteúdo. Os componentes e a estrutura de uma página são o que organiza uma árvore de acessibilidade. Esta árvore é o que capacita os leitores de tela que são usados ??por pessoas cegas para que possam “ouvir” uma página.

Não usar marcação afeta corretamente a acessibilidade. Não use tags HTML apenas para um efeito de estilo. Os leitores de tela navegam em páginas da Web por estrutura de cabeçalho (cabeçalhos verdadeiros, não apenas texto com estilo grande e em negrito) hierarquicamente. As pessoas que usam seu site podem ouvir uma lista de todos os títulos, pular o conteúdo por tipos de títulos ou navegar diretamente para os títulos de nível superior <h1> .

Fonte: Estrutura Semântica da WebAIM

7. Suporte para navegação no teclado ??

Gael navega com um teclado enquanto “ouve” a web.

A acessibilidade do teclado é um dos aspectos mais críticos da acessibilidade da web. Pessoas com deficiência motora, pessoas cegas que dependem de leitores de tela, pessoas que não têm controle muscular preciso e até mesmo usuários avançados dependem de um teclado para navegar pelo conteúdo.

Se você é como eu, normalmente usa a tecla Tab no teclado para navegar por elementos interativos em uma página da Web: links, botões ou campos de entrada. O estado de foco que discutimos anteriormente fornece um indicador visual do componente atualmente selecionado.

Conforme você navega por uma página, a ordem dos elementos interativos é essencial, e a navegação deve ser lógica e intuitiva. A ordem das guias deve seguir o fluxo visual da página: da esquerda para a direita, de cima para baixo – cabeçalho, navegação principal, botões e entradas de conteúdo e, finalmente, o rodapé.

Uma boa prática é testar seu site usando apenas um teclado. Use a tecla Tab para percorrer links e formulários. Teste usando a tecla Enter para selecionar um elemento. Verifique se todos os componentes interativos são previsíveis e estão em ordem. Se você pode navegar por todo o seu site sem um mouse, você está em um bom lugar!

Por último mas não menos importante. Tenha cuidado com o tamanho da sua navegação – isso inclui o número de links e o tamanho do texto. Tabulação através de menus longos pode ser exigente para pessoas com deficiências motoras. E ouvir links longos pode ser complicado para pessoas que usam leitores de tela – tente ser conciso. O fornecimento de elementos estruturais ARIA landmark ou HTML5, como <main> ou <nav> , facilitará a navegação.

Fonte: Teclado W3C

Além dessas diretrizes ??

Essas sete diretrizes são um ótimo começo, e se você quiser fazer mais para tornar seu produto mais acessível, recomendo que você

  • Obtenha uma auditoria de acessibilidade. Use um serviço de auditoria para descobrir se o seu produto funciona com tecnologias assistivas e atende ao nível WCAG 2.0 AA. Use os resultados da auditoria para corrigir problemas e fazer outro teste.
  • Indique um Auditor. Você pode nomear alguém em sua empresa para realizar auditorias de acessibilidade recorrentes. Isso pode ser alguém da sua equipe de controle de qualidade. Se você não tem alguém com a experiência, você pode contratar um fornecedor externo.
  • Torne a acessibilidade parte de sua pesquisa de design. Ao fazer uma pesquisa, verifique se suas suposições sobre acessibilidade estavam corretas e se há alguma oportunidade potencial para melhorar. Recrutar pessoas com deficiência requer um pouco mais de trabalho. Não hesite em entrar em contato com associações e comunidadesas pessoas estão dispostas a ajudar.