Regras de acessibilidade, explicadas

As 70 verificações automáticas que o Rampsight executa em cada página, cada uma ligada ao critério de sucesso das WCAG 2.2 a que pertence. Todas correspondem a uma falha que o navegador consegue comprovar, com uma correção aplicável hoje.

ARIA

Atributos ARIA precisam ser permitidos pelo papel — aria-allowed-attr
Rótulos em braille exigem um equivalente em texto — aria-braille-equivalent
Botões, links e itens de menu em ARIA precisam de nome — aria-command-name
Alguns atributos ARIA contradizem o elemento nativo — aria-conditional-attr
Papéis ARIA obsoletos não funcionam mais — aria-deprecated-role
O corpo da página não pode ser ocultado das tecnologias assistivas — aria-hidden-body
Campos de entrada em ARIA precisam de nome — aria-input-field-name
Medidores precisam de nome — aria-meter-name
Barras de progresso precisam de nome — aria-progressbar-name
Alguns elementos não podem receber nome em ARIA — aria-prohibited-attr
Alguns papéis exigem atributos próprios — aria-required-attr
Alguns papéis exigem filhos específicos — aria-required-children
Alguns papéis exigem um pai específico — aria-required-parent
aria-roledescription precisa de um papel para descrever — aria-roledescription
Papéis ARIA precisam existir e estar escritos corretamente — aria-roles
Abas precisam de nome — aria-tab-name
Interruptores, botões de opção e caixas de seleção precisam de nome — aria-toggle-field-name
Dicas de tela precisam de conteúdo — aria-tooltip-name
Os nomes dos atributos ARIA precisam ser válidos — aria-valid-attr
Os valores dos atributos ARIA precisam ser válidos — aria-valid-attr-value

Cor e contraste

O texto precisa de contraste suficiente com o fundo — color-contrast
Links no meio do texto precisam de mais do que cor — link-in-text-block

Formulários

autocomplete precisa usar os valores padronizados — autocomplete-valid
Um campo, um rótulo — form-field-multiple-labels
Campos de formulário precisam de rótulo — label
Listas de seleção precisam de nome — select-name

Teclado

Ofereça um caminho para pular a navegação — bypass
Não tire da ordem de tabulação um iframe que tem conteúdo — frame-focusable-content
Não aninhe controles interativos — nested-interactive
Áreas roláveis precisam ser alcançáveis pelo teclado — scrollable-region-focusable

Idioma da página

A página precisa de idioma — html-has-lang
O código de idioma precisa ser válido — html-lang-valid
lang e xml:lang precisam concordar — html-xml-lang-mismatch
Códigos de idioma no texto precisam ser válidos — valid-lang

Nomes e papéis

Elementos ocultos não podem continuar acessíveis pelo teclado — aria-hidden-focus
Botões precisam de nome — button-name
Botões do tipo input precisam de valor — input-button-name
Links precisam de nome — link-name
Resumos de bloco expansível precisam de texto — summary-name

Marcação

Ids usados por ARIA precisam ser únicos — duplicate-id-aria
Remover <marquee> — marquee

Semântica

O nome acessível precisa conter o texto visível — label-content-name-mismatch
Parágrafos estilizados não são títulos — p-as-heading

Pistas visuais

Não bloqueie o zoom — meta-viewport
Alvos de toque precisam ser grandes o suficiente — target-size

Estrutura

Espaçamento de texto não pode ser travado com !important — avoid-inline-spacing
Não trave a página em uma orientação — css-orientation-lock
Listas de definição precisam dos filhos corretos — definition-list
<dt> e <dd> precisam estar dentro de uma lista de definição — dlitem
Listas precisam de itens de lista como filhos — list
Itens de lista precisam estar dentro de uma lista — listitem

Tabelas

Use uma legenda de tabela de verdade — table-fake-caption
Células de dados precisam de cabeçalhos — td-has-header
headers precisa apontar para células da mesma tabela — td-headers-attr
Cabeçalhos precisam de células para descrever — th-has-data-cells

Alternativas textuais

Áreas de mapa de imagem precisam de texto alternativo — area-alt
Toda página precisa de título — document-title
iframes precisam de título — frame-title
Títulos de quadros precisam ser distintos — frame-title-unique
Imagens precisam de texto alternativo — image-alt
Botões de imagem precisam de texto alternativo — input-image-alt
<object> precisa de alternativa textual — object-alt
Elementos com role="img" precisam de nome — role-img-alt
Substitua mapas de imagem do lado do servidor — server-side-image-map
Imagens SVG precisam de nome — svg-img-alt
Vídeos precisam de legendas — video-caption

Áudio e vídeo

Áudio precisa de legendas ou transcrição — audio-caption
Remover <blink> — blink
Não recarregue nem redirecione a página por tempo — meta-refresh
Não reproduza som automaticamente — no-autoplay-audio

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.