A introdução de Acessibilidade na Web que eu gostaria de ter tido!

#Boas práticas

A acessibilidade afeta todos os usuários, não apenas aqueles com deficiências específicas

A acessibilidade é sobre desenvolver para diversos casos, casos esses que referem-se a quaisquer condições médicas ou situacionais que afetem qualquer pessoa, o tempo todo, ou em diferentes momentos de suas vidas. Algumas situações mais comuns são:

Idade avançada
Condições médicas crônicas, como artrite
Estar do lado de fora com um brilho forte do sol
Comprometimento cognitivo devido a medicamentos ou falta de sono
Necessidade de usar um site em dispositivos diferentes
WiFi instável que afeta o carregamento de assets

Apenas alguns desses exemplos se aplicam a pessoas com deficiências específicas. Os demais se aplicam a condições médicas que afetam a todos eventualmente. Alguns são situacionais, mas ainda afetam a todos em algum momento.

Isso é importante, pois muda sua ideia de acessibilidade de “não é importante, pois apenas algumas pessoas têm X deficiência” para “precisamos cobrir todos os usuários”. Isso nos ajuda a ver melhor por que a acessibilidade é tão importante.

As Quatro Chaves para Acessibilidade na Web

1. Perceptível

Simplificando, seu código não não deve impedir os usuários de ler, assistir ou ouvir seu conteúdo.

Tipografia

O conteúdo deve ser legível! Maneiras fáceis de tornar o texto mais legível é dar às cores do texto e do fundo contraste suficiente para que pessoas com visão ruim ou com iluminação ruim ainda possam lê-lo. A tipografia também deve se inclinar para tamanhos maiores e ser fácil de ajustar o tamanho, pelas mesmas razões.

Imagens

O mais importante com imagens é o texto alternativo. Pessoas cegas ou que não conseguem carregar imagens devido ao wi-fi instável ainda terão uma ideia básica do que é a imagem.

Áudio e vídeo

Para pessoas com dificuldades auditivas, ou que estão em locais muito barulhentos, ou apenas preferem ler, não podem ou não querem ouvir, as transcrições de vídeo são a solução mais fácil, mas as legendas também funcionam.

2. Operável

Significa que seu código não impede os usuários de acessar todas as páginas e preencher os formulários.

Interfaces e navegação

Este ponto é óbvio, os usuários devem ser capazes de interagir com o que precisam, como:

Links para outras páginas
Formulários para preencher
Botões para clicar
Qualquer outra situação onde precisam navegar pelo site ou enviar / receber informações

Parece óbvio, mas é a parte mais importante da web, por isso vale a pena conferir tudo mais de uma vez.

Navegação pelo teclado

Pegue o último ponto faça isso apenas com um teclado. A navegação pelo teclado cobre muitos casos: leitores de tela, problemas médicos relacionados a tontura e controle muscular, um mouse pad não confiável ou apenas preferência pessoal.

Progressive Enhancement

Progressive Enhancement ajuda em casos onde, mesmo se alguns ou todos os estilos falharem, as coisas ainda devem estar operacionais. Os formulários não devem ser inutilizados em navegadores mais antigos que não suportam recursos CSS mais recentes — eles podem parecer mais simples, mas ainda devem funcionar. Progressive Enhancement ajuda começando com uma base sólida e operacional e adicionando recursos disponíveis quando possível.

3. Compreensível

Significa que seu código ou conteúdo não impedem os usuários de compreender o significado pretendido pelo site.

Seja simples e explícito

A melhor linguagem é simples, honesta e direta. Escrever com jargão corporativo parece impressionante para designers, mas repele os usuários. A escrita direta é compreensível e ajuda os usuários a desenvolverem a confiança em seu site. Caso contrário, é menos provável que prestem atenção ou comprem o que você está vendendo.

Evite suposições

Você terá muita resistência de designers sobre isso. Muitos elementos do site funcionam com base no pressuposto de que os usuários já entendem seu significado. Por exemplo, supondo que um ícone de “estrela” marcará um item como favorito. Isso é óbvio para você, mas você nunca saberá o quão óbvio é para os usuários. Pode não ser óbvio devido a problemas cognitivos, diferenças culturais ou apenas a pessoas novas na web. Nunca confie no simbolismo implícito. É rápido, fácil e infinitamente mais acessível adicionar uma caption ou legenda para garantir que sejam compreendidos.

4. Robusto

Significa basicamente que os usuários conseguem acessar o conteúdo de uma ampla variedade de dispositivos.

Marcação Semântica

A marcação semântica é a melhor maneira de criar conteúdo robusto e acessível como um todo. Para a web, isso significa:

Tags HTML semânticas
Uso adequado de tags ária
Ordenação lógica de elementos DOM
Renderização do lado do servidor para garantir que seja entregue corretamente

Isso torna o conteúdo amigável para navegação por teclado, leitores de tela e até mesmo uma interface utilizável se o CSS não carregar, e muito mais! A marcação semântica e acessível leva você a um site acessível.

Design Responsivo

O exemplo mais óbvio de variedade de dispositivos é o tamanho da tela, como:

Smartwatches
Celulares
Tablets
Monitores externos grandes
Telas de projetor

O tamanho da tela provavelmente afeta os aplicativos da web mais do que você imagina, especialmente com o surgimento de PWA. Embora nenhum site vá ter a mesma experiência em tantos tamanhos ou ser o mesmo pixel a pixel, eles ainda devem ser utilizáveis e funcionais.

Testes de acessibilidade automatizados

Alguns ítens para testar automaticamente com uma ou mais ferramentas são:

Contraste de cor
HTML semântico
Elementos div desnecessários
Texto traduzido
ARIA e outros atributos de acessibilidade, como títulos

Testes automáticos cobrem pelo menos 75% dos problemas de acessibilidade. Mas apenas com um adendo: o teste de acessibilidade deve ser adicionado o mais cedo possível em um projeto. Quanto mais tarde isso acontecer, mais será visto como “algo a ser acrescentado mais tarde”.

Alguns sites e extensões onde você pode testar a acessibilidade do seu site a qualquer momento do desenvolvimento:

O que você não pode automatizar

Os testes de acessibilidade ajudam a medir alguns fatores, mas não todos. A melhor forma é fazer você mesmo os outros testes. Algumas sugestões iniciais são:

Navegue com um teclado
Navegue com um teclado e leitor de tela
Use um telefone celular
Use um telefone celular sob luz solar forte
Diminua a velocidade de sua conexão com a Internet
Quebre alguns ou todos os CSS
Chame algumas pessoas menos familiarizadas com o site para navegar e realizar tarefas básicas
Use um filtro de cor em escala de cinza (para daltonismo)
Use apenas uma mão
Use enquanto agita as mãos para simular artrite ou dor muscular

Minha recomendação é fazer uma lista de verificação de diferentes casos e cobrir tantos quanto possível, do mais importante ao menos importante. Dessa forma, se você não puder recriá-los todos, pelo menos obterá aqueles que afetam a maioria dos usuários.

Nunca se esqueça da acessibilidade!

Se há algo que você deve lembrar, é o que escrevi no início: acessibilidade é sobre casos que afetam a todos. É por isso que é mais do que um “nice to have”. Acessibilidade é tão fundamental quanto gerenciamento de banco de dados, arquitetura de aplicativo ou segurança de dados — sem eles, as coisas dão problemas rapidamente.

Infelizmente, poucos cursos colocam foco suficiente nisso. Portanto, você mesmo precisa continuar pesquisando métodos de acessibilidade, defendendo-os, trazendo-os aos aplicativos antecipadamente, testando-os e compartilhando essas informações com outras pessoas. É um longo caminho, com certeza, mas sempre vale o investimento para você, para sua empresa e para o bem da web aberta.

Existem outros pontos de enfoque para a acessibilidade que você acha que precisam de mais atenção? Compartilhe nos comentários :)