- Utilize a valorize usar o HTML respeitando a sua semântica proposta. Isso é importante para diversos recursos do leitor de tela.
- Mantenha apenas um
<h1>nor página. Esse título deve ser o mais importante. - Fazer a divisão adequada dos textos com títulos usando tags HTML. Seja elas
<p>,<h2>, entre outros. - Toda imagem precisa ter um alt associado para descrever a imagem. E descrever de forma simples e essencial. Além da a11y, isso ajuda no SEO também e quando a imagem não carrega, o alt ajuda a fazer todos entenderem o que era ilustrado ali.
- Se o alt tem valor apenas para visualização, então coloca alt vazio.
- Não use
clique aquipara links. Os textos dos links não fazem sentido para quem varre o site pelo leitor de tela buscando os links. - Não associar informações somente a cores. Vermelho para errado ou categorias por cores. Isso prejudica o entendimento para quem tem algum problema de visão.
- Declarar a linguagem do documento é importante para o leitor saber qual o idioma dos textos.
- Usamos o tributo
<lang>no início do arquivo html ou sempre que tivermos uma frase em um idioma do resto do arquivo.
- Podemos usar como exemplo esse carousel da W3.
- Tentar fazer algo com CSS puro normalmente é bem bacana, mas devemos tomar cuidado com isso quando falamos de projetos em produção.
- Carousel do bootstrap é melhor em a11y. O só com CSS tem problemas para acessar as notícias. Por isso recomenda-se usar JS.
- Curso de Acessibilidade na WEB do Alura
- Documentação do WAI-ARIA
- A11Y Style Guide
- Todos os roles disponíveis
👤 Thaiane Braga
- Website: thaiane.github.io
- Twitter: @ThaiiBraga
- Github: @Thaiane