README.md

Oficina de Acessibilidade

Abner Joia

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 🔗

Objetivos da Oficina

• 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.

O que foi abordado na oficina?

1. Uso de Tags HTML Semânticas

• 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.

2. Atributos de Acessibilidade

• 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).

3. Navegação com o Teclado

• Como garantir que a navegação seja possível apenas com o teclado, utilizando o tabIndex corretamente.
• Implementação de atalhos de navegação usando accessKey para facilitar o acesso a seções principais do site.

4. Contraste de Cores

• 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).

5. Formulários Acessíveis

• Relacionamento entre <input> e <label> usando os atributos htmlFor e id.
• Uso de <fieldset> e <legend> para agrupar e descrever elementos de formulário.

6. WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications)

• 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.

Ferramentas e Recursos

• 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.

Referências

• MDN Web Docs - Acessibilidade
• Diretrizes WCAG - W3C
• V-Libras - Documentação
• Desafio de Acessibilidade - GitHub
• WAI-ARIA - W3C
• Acessibilidade.gov.br
• Access Monitor
• React Native Acessibilidade
• EMAG - Governo Eletrônico
• NBR 17060 - Acessibilidade em Aplicativos Móveis