𝗖𝗼𝗻𝘀𝘁𝗿𝘂𝗶𝗻𝗱𝗼 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝗲𝘀 𝗱𝗲 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗔𝗰𝗲𝘀𝘀í𝘃𝗲𝗶𝘀

A acessibilidade é um requisito. Não uma escolha.

Planeje antes de codificar. Liste seus usuários.

  • Usuários de leitores de tela.
  • Usuários apenas de teclado.
  • Usuários daltônicos.

Use HTML nativo primeiro.

  • Use tags button para botões.
  • Use tags input para formulários.
  • Adicione ARIA apenas quando o HTML nativo falhar.

Priorize o teclado.

  • Garanta que cada controle funcione sem um mouse.
  • Mantenha os indicadores de foco visíveis.
  • Prenda o foco em modais.

Projete para além da visão.

  • Não use apenas a cor para indicar erros.
  • Adicione rótulos de texto aos alertas.
  • Verifique suas taxas de contraste.

Lide bem com erros.

  • Ofereça aos usuários formas claras de corrigir erros.
  • Use aria-invalid para entradas inválidas.
  • Use aria-live para atualizações.

Teste seu trabalho.

  • Use axe-core ou Lighthouse.
  • Teste seu site com um leitor de tela.
  • Teste cada botão com a tecla Tab.

Escolha elementos nativos em vez de divs customizadas. Isso economiza tempo. Funciona melhor.

Fonte: https://dev.to/therizwansaleem/building-accessible-inclusive-frontend-components-patterns-patterns-patterns-1aem