Este repositório tem como objetivo apresentar e aplicar os conceitos de acessibilidade na web, capacitando desenvolvedores a criar experiências web inclusivas para todos os usuários, independentemente de suas habilidades. A oficina busca fornecer um guia prático sobre como melhorar a acessibilidade de aplicações web, com foco em boas práticas, diretrizes e implementações técnicas.
Acesso a apresentação 🔗
- Construção de HTML estruturado: Ensinar como utilizar tags semânticas do HTML5 para melhorar a acessibilidade.
- Navegação via teclado (TAB): Garantir que a navegação do site seja intuitiva e acessível através do teclado.
- Uso de texto alternativo: Aprender a aplicar textos alternativos para imagens, ícones e outros elementos visuais.
- Atributos WAI-ARIA: Uso de atributos adicionais para melhorar a acessibilidade em aplicativos web complexos e interativos.
- Ajuste de contraste e fontes: Garantir que o contraste entre o texto e o fundo seja adequado e permitir que o tamanho das fontes seja ajustável.
- Atalhos de navegação: Implementar atalhos de navegação por teclado para melhorar a experiência do usuário.
- Como utilizar tags HTML5 de forma estruturada e semântica (ex:
<header>,<footer>,<main>,<nav>,<article>,<section>, etc.). - Evitar o uso excessivo de
<div>e outras tags genéricas, priorizando o uso de tags que representem o significado do conteúdo.
- alt: Texto alternativo para imagens e elementos gráficos.
- aria-label: Descrição de elementos que não possuem texto visível, como botões ou links.
- aria-pressed: Indicação de estado de botões booleanos (ex: Ativado/Desativado).
- Como garantir que a navegação seja possível apenas com o teclado, utilizando o
tabIndexcorretamente. - Implementação de atalhos de navegação usando
accessKeypara facilitar o acesso a seções principais do site.
- Como garantir um contraste adequado entre texto e fundo para usuários com baixa visão.
- Ferramentas para verificar as taxas de contraste (ex: calculadora de contraste).
- Relacionamento entre
<input>e<label>usando os atributoshtmlForeid. - Uso de
<fieldset>e<legend>para agrupar e descrever elementos de formulário.
- Como usar atributos WAI-ARIA (
role,states,properties) para melhorar a acessibilidade de aplicativos interativos. - Exemplos de como aplicar
role,aria-label,aria-live, entre outros.
- Leitores de tela: Ferramentas como o Leitor de tela do Chrome ajudam a testar a acessibilidade para deficientes visuais.
- Access Monitor: Ferramenta para análise de acessibilidade que verifica se o site atende aos critérios da WCAG.
- V-Libras: Ferramenta de tradução para Língua Brasileira de Sinais (Libras). Documentação V-Libras.