Disponibilidade UX e interfaces para todos

1) Por que isso é importante

Legal e eticamente, a interface não deve excluir pessoas com deficiências visuais, auditivas, motoras ou cognitivas.
Efeito empresarial: mais usuários, maior conversão e retenção, melhor SEO e qualidade de código.
Operacionalmente, a disponibilidade é um processo, não um fixe aleatório.

2) Fundamentos e princípios (PUR)

Perceivable (Percepção): contraste, texto-alternativa, legendas.
Operable: tudo está disponível a partir do teclado, do foco visível, da pausa/paragem das animações.
Understandable: navegação previsível, erros claros, formulações simples.
Robust (Confiabilidade): Semântica HTML/ARIA correta, compatibilidade com tecnologia assistida.

3) Semântica, manchetes e ARIA

A sinalização semântica é anterior ao ARIA: '<button>', '<nav>', '<forma>', '<mesa>' - por destino.
Hierarquia de cabeçalhos: um '<h1>' por página e a estrutura lógica '<h2>' - '<h3>' segue.
Landmarks: '<header>', '<principal>', '<aside>', '<footer>', '<nav>' - ajudam as capturas de tela.
A ARIA é apenas «role», «aria-label», «aria-describedy», «ária-expanded», «aria-live», se necessário.
Estados/erros através de 'aria-invalid', 'aria-errormessage'.

4) Teclado e gestão de foco

Controle total do teclado: 'Tab/Shift + Tab' - Ordem, 'Enter/Space' - Ativa, 'Esc' - Saída.
Foco visível sempre; não desligar o outline.
Armadilhas de foco: em modais, foco cíclico, foco voltado para a origem após o fechamento.
Os itens ocultos não devem entrar na ordem de «display: none», «aria-hidden =» true «».
Links skip: Ir ao conteúdo principal - no início da página.

5) Cor, contraste e tipografia

Contraste de texto: pelo menos 4. 5:1 para texto normal e 3:1 para texto grande.
Não se baseia apenas na cor: duplique com ícone/pattern/assinatura.
Tamanho de alvos clicabados: mínimo de 40-48 px, campos suficientes ao redor.
Fontes: auriculares legíveis, entre linhas 1. 4–1. 6, 45-90 caracteres de comprimento.

6) Movimento, animação e flash epileptógeno

Respeite a bandeira prefers-reduced-motion do sistema - adicione animações simplificadas/desliga o paralelo.
Evite os pontos> 3 vezes/segundo.
Todos os movimentos automáticos devem ter Pausa/Stop/Hide.

7) Formas, erros e validação

Vincule claramente as marcas e os campos: '<label for =' id '>'.
O playsholder não é uma marca.
Mensagens de erro ao lado do campo e no resumo de erros na parte superior; ligue através de 'ária-describedy'.
Explique o formato de entrada, exemplo, máscara; especifique unidades e divisas.
Não reinicie os campos preenchidos em caso de erro; mantenha o foco no campo problemático.

html
<label for="email">Эл. почта</label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id="email-hint" class="hint">Мы не рассылаем спам</div>
<div id="email-err" class="error" role="alert">Укажите адрес в формате name@example.com</div>

8) Componentes e : pattern

Botões vs link: ação = '<button>', transição = '<a>'.
Taba/acordeons: flechas de navegação, 'aria-controls', 'aria-selected'.
Modalks/diálogos: 'role =' dialogog ',' aria-modal = 'true', 'true', 'Esc' encerra '.
Tooltip/Popover: disponibilidade por teclado, tempo não interfere na leitura.
Drag & Drop: Alternativas - botões «mover para cima/para baixo», setas de teclado; os eventos não são apenas um rato.

9) Mídia: vídeo/áudio/gráficos

Vídeo: legendas, descodificação (transcript), trilha alternativa de descrição de áudio (AD).
Áudio: transcrição de texto.
Gráficos/gráficos: currículo de texto («o que importa»), tabela de dados, assinaturas de eixos descritivas.
"Aria-live =" polite "/" assertive "- cuidado para não" gritar "muitas vezes.

10) Tabelas e listas

11) i18n, Locais e o'SE '

Atributo 'lang' na raiz html; formatos locais de números/datas/moedas.
O Apoio de Ajuda (Árabe/Hebraico): espelhamento de ícones, ordem de navegação, cursores.
Evite palavras inseridas em ícones (o texto deve ser traduzido).
Formulação simples, evitar jargão; glossário de termos.

12) Hora, sessões, capches e alternativas

Os temporizadores são um aviso e uma oportunidade para prolongar.
CAPTCHA: prefira alternativas (questões, analisadores invisíveis de bots, confirmação por e-mail/telefone); se usar uma alternativa de texto e não apenas visual.
Autenticação: suporte a gerentes de senhas, «mostrar senha», WebAuthn.

13) Disponibilidade para distúrbios sensoriais e motores

Os gestos devem ser equivalentes a um clique/teclado.
Não exija retenção prolongada/tapas duplas sem alternativa.
«Ponter cancellation»: A ação deve ser executada para soltura, não para «clicar» para permitir a anulação.

14) Estados, notificações e alertas

Use 'role =' status '/' alert 'para mensagens dinâmicas.
Não bloqueie o foco com banners pegajosos.
Notificações Toast - com foco/hover e acesso do teclado.

15) Plano de teste (manual e automático)

• Passar todos os cenários-chave apenas pelo teclado.
• Verificar a visibilidade do foco em cada item.
• Aumentar a escala para 200% - a interface permanece funcional sem scroll horizontal.
• Ativar o modo de sistema de redução de movimento - a animação não interfere.
• Passe o guião com a tela (NVDA/VoiceOver), certifique-se dos papéis/marcas/ordem corretos.

• Lentes de disponibilidade no nível de componentes.
• Verificar o contraste, os textos alternativos, a ordem dos títulos, a validade do ARIA.
• Sempshots de semântica (role tree) para telas críticas.

16) Métricas de qualidade de disponibilidade

A11y Coverage: proporção de componentes com folhas de cheque passadas.
Keyboard-only Pass Rate: porcentagem de cenários passados pelo teclado.
Contrast Violations/1k elementos.
SR Flow Time: Tempo em que o cenário de ecrã passa.
User-feedback: queixas de disponibilidade, tempo de resposta e correção.

17) Folha de cheque do componente

• Semântica/papel correto sem ARIA redundante
• Marcas assinadas, 'aria-' são corretas
• Controle total do teclado, foco visível
• Contraste texto/ícone/limites normal
• Erros e estados são relatados por uma tela de tela
• Respeito ao Prefers-reduced-motion
• Tamanho de área clicada ≥ 40-48 px
• A localização e o SE não quebram o layout

18) Anti-pattern

Botões Dive sem papel/teclado.
Ocultar o foco 'outline: none' sem alternativa.
Playsholder em vez de label.
Erros apenas de cor.
Modalks sem truque e sem 'Esc'.
Drag-only sem teclado.
Longos carros/paralax sem opção de desligamento.

19) Papéis e processo

O dono A11y está no comando (Product/Design/Dave).
O Definishn-of-dan (DoD) inclui disponibilidade.
Design-revezamento, teste de contraste, foco, editoras.
Código-revezamento semântica/ARIA, teste de teclado.
Auditorias regulares e planos de melhorias.

20) Implementação por iterações

• Semântica/cabeçalho, contraste, foco e teclado, formas básicas e erros.

• Modalks, abas/acordeons, tabelas/gráficos com currículo de texto, legendas de vídeo, animação reduzida.

• Auto em CI, SE/i18n, métricas, auditorias regulares, treinamento de equipe.

21) Modelos e snippets

html
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
<h2 id="dlg-title">Подтвердите действие</h2>
<p id="dlg-desc">Эта операция необратима.</p>
<button>Отмена</button>
<button>Подтвердить</button>
</div>

html
<a class="skip-link" href="#main">Перейти к основному содержимому</a>
<main id="main">...</main>

css
@media (prefers-reduced-motion: reduce) {
{ animation-duration: 0.01ms!important; animation-iteration-count: 1!important; transition: none!important; }
}

22) Mini-FAQ

Precisamos de uma versão para deficientes visuais?
Não. Uma versão adaptável disponível para todos com configurações.

Basta verificar apenas o contraste?
Não. O contraste é apenas uma parte. É preciso teclado, foco, semântica, formas de erro, mídia, etc.

A ARIA vai resolver tudo?
A ARIA não vai corrigir a semântica errada. Primeiro as marcas de formatação corretas, depois as especificações ARIA.

Resultado

Disponibilidade é uma disciplina de sistema: semântica → teclado/foco → contraste/cor → forma/erro → mídia/gráficos → i18n/RENAULT → plano de teste e métricas. Faça da acessibilidade parte da DoD e cultura da equipe - e seu produto será verdadeiramente universal, confiável e fácil para todos.