checklist básico de acessibilidade web antes de lançar seu projeto

Acessibilidade no desenvolvimento web não é algo opcional, é um requisito. Dito isso, criei um checklist para ser revisado antes de lançar seu próximo projeto.

HTML semântico

Use as tags HTML apropriadas para a finalidade pretendida (headings, listas, botões, seções, cabeçalhos, rodapés, formulários…).

Navegação pelo teclado

Garanta que todos os elementos interativos estejam acessíveis pelo teclado (tab, enter, espaço).

Focus state

Forneça indicadores de foco visíveis para elementos interativos.

Texto alternativo

Adicione o atributo alt de forma descritiva para imagens e conteúdos não textuais.

Atributos ARIA

Use funções, estados e propriedades aria pra melhorar a acessibilidade quando necessário.

Contraste

Garanta que há contraste suficiente entre as cores de fundo e de texto.

Redimensionamento de textos

Garanta que os textos estejam adaptáveis ao redimensionamento ou zoom da tela.

Labels corretas

Forneça labels claras e descritivas para seus inputs.

Descrição de links

Use um texto de link que tenham significado ao invés de frases genéricas como “Clique aqui” ou “Saiba mais”. Utilize o atributo title.

Multimídia acessível

Forneça legendas, transcrições ou descrições de áudio para conteúdo de áudio e vídeo sempre que possível.

Ordem lógica de leitura

Organize o conteúdo em uma ordem lógica e significativa.

Tabelas acessíveis

Use as tags corretas e que tenham significado na hora de criar suas tabelas (thead, tbody, tfoot).

Mensagens de erros

Forneça mensagens de erros claras e específicas para seus inputs.

Teste seu projeto com leitores de tela

Faça testes do seu projeto com leitores como NVDA, JAWS ou VoiceOver.

OBS: Esse é um checklist básico e você deve consultar a documentação do W3C pra encontrar um checklist completo