6

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

#Boas práticas
Aline Bastos
Aline Bastos

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 :)

2
266

Comentários (2)

2
Dannilo Fernandes

Dannilo Fernandes

03/03/2021 10:53

Ótimo artigo! Assunto extremamente necessário. Temos que aprender a considerar todas essas variáveis levantadas no texto na hora de desenvolver softwares.

Como você bem disse, é um longo caminho...


2
Mario Menezes

Mario Menezes

02/03/2021 11:02

Muito legal o artigo. Tem algum curso na dio com esse tema?

Front-End Software Engineer

Brasil