Squad Front

Appearance

Acessibilidade (a11y) - Teoria ​

Acessibilidade na Web significa garantir que pessoas com deficiência possam perceber, compreender, navegar e interagir com a web. É um direito fundamental e uma responsabilidade técnica.

1. Os Quatro Pilares (POUR) ​

As diretrizes do WCAG (Web Content Accessibility Guidelines) são baseadas em quatro princípios:

  1. Percebível (Perceivable): A informação e os componentes da interface devem ser apresentados de forma que o usuário possa percebê-los (ex: texto alternativo para imagens).
  2. Operável (Operable): Os componentes da interface e a navegação devem ser operáveis (ex: navegação completa via teclado).
  3. Compreensível (Understandable): A informação e a operação da interface devem ser compreensíveis (ex: mensagens de erro claras).
  4. Robusto (Robust): O conteúdo deve ser robusto o suficiente para ser interpretado por uma ampla variedade de tecnologias assistivas (ex: leitores de tela).

2. WAI-ARIA ​

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) é uma especificação técnica que adiciona atributos ao HTML para ajudar tecnologias assistivas a entenderem componentes complexos.

  • Roles: Define o que um elemento é (ex: role="button", role="tablist").
  • States: Define a condição atual (ex: aria-expanded="true", aria-disabled="true").
  • Properties: Define características do elemento (ex: aria-label, aria-labelledby).

Regra de Ouro: A primeira regra do ARIA é não usar ARIA se você puder usar um elemento HTML nativo que já tenha a semântica correta (ex: use <button> em vez de <div role="button">).

3. Semântica HTML ​

O uso correto de tags HTML é a forma mais barata e eficiente de garantir acessibilidade.

  • <main>, <nav>, <header>, <footer>: Ajudam usuários de leitores de tela a saltar para seções específicas.
  • <h1> a <h6>: Devem seguir uma ordem lógica e não serem usados apenas para tamanho de fonte.

4. Por que isso importa na Saúde? ​

Nossas plataformas de Telemedicina são usadas por pacientes de todas as idades e condições. Um paciente com baixa visão, tremores motores ou daltonismo deve conseguir agendar uma consulta sem barreiras. Acessibilidade aqui é inclusão médica.

Como fazer vs Como não fazer ​

✅ Como fazer ​

  • Garanta contraste mínimo de 4.5:1 para textos (Padrão AA).
  • Use aria-label em botões que contêm apenas ícones.
  • Teste a navegação do seu site usando apenas a tecla Tab.

❌ Como não fazer ​

  • Remover o outline de foco do CSS (outline: none) sem fornecer uma alternativa visual clara.
  • Usar cores como único meio de transmitir informação (ex: "campos em vermelho são obrigatórios").
  • Esquecer o atributo alt em imagens informativas.