Pular para o conteúdo principal
Versão: 1.3.2

accessibility

title: Acessibilidade sidebar_position: 10​

Acessibilidade​

O Raaghu Design System segue as melhores práticas de acessibilidade para garantir que os componentes funcionem com tecnologias assistivas e atendam aos padrões WCAG 2.1 AA.

Contraste de Cores​

As escolhas de cores padrão estão em conformidade com os requisitos do nível AA do WCAG 2.0:

  • Texto normal: Contraste mínimo de 4.5:1
  • Texto grande: Contraste mínimo de 3:1
  • Elementos interativos: Contraste mínimo de 3:1

Diretrizes:

  • Não dependa apenas da cor para transmitir informações
  • Use múltiplas pistas visuais (ícones, texto, padrões)
  • Teste combinações de cores com ferramentas de acessibilidade

Suporte a Alto Contraste​

Suporte de Navegador:

  • Principal: Microsoft Edge e Internet Explorer 11
  • Secundário: Mozilla Firefox

Melhores Práticas:

// ✅ Use elementos HTML semânticos
<button>Clique aqui</button>

// ❌ Evite elementos não semânticos para interações
<div onClick={handleClick}>Clique aqui</div>

CSS de Alto Contraste:

@media (-ms-high-contrast: active) {
  .custom-element {
    background-color: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
}

Suporte a Leitores de Tela​

Suporte principal: Microsoft Edge com Windows Narrator

Implementação ARIA:

// Rótulos descritivos
<button aria-label="Fechar diálogo">×</button>

// Indicadores de progresso
<div
  role="progressbar"
  aria-valuenow={50}
  aria-valuemin={0}
  aria-valuemax={100}
>
  50%
</div>

// Regiões dinâmicas
<div aria-live="polite">{statusMessage}</div>

Texto Apenas para Leitores de Tela:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

Gestão de Foco:

.interactive-element:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Interações de Tecla:

  • Tab/Shift+Tab: Navegar entre elementos
  • Enter/Espaço: Ativar botões e links
  • Setas: Navegar dentro dos componentes
  • Esc: Fechar modais ou cancelar ações

Exemplos de Componentes​

Botão Acessível:

<RdsButton
  label="Enviar formulário"
  aria-describedby={hasError ? "mensagem-erro" : undefined}
/>

Formulário Acessível:

<label htmlFor="email">Email *</label>
<input
  id="email"
  type="email"
  aria-invalid={hasError}
  aria-describedby="email-erro"
/>
{hasError && (
  <div id="email-erro" role="alert">
    Por favor, insira um email válido
  </div>
)}

Modal Acessível:

<div
  role="dialog"
  aria-labelledby="titulo-dialogo"
  aria-modal="true"
>
  <h2 id="titulo-dialogo">Confirmar ação</h2>
  {/* Conteúdo do modal */}
</div>

Ferramentas de Teste​

Checklist de Teste:

  1. Navegação apenas por teclado
  2. Teste com leitor de tela
  3. Modo de alto contraste
  4. Simulação de daltonismo
  5. Scans automatizados de acessibilidade