Demo
Veja uma introdução em vídeo ao historial e às funcionalidades do verificador,
ou experimente editar o conteúdo de demonstração abaixo, abrir e dispensar alertas,
e utilizar a barra de ferramentas () para ver o esboço dos cabeçalhos. Esta demonstração inclui tanto os testes principais como o conjunto CSA.
Esta demonstração utiliza um editor TinyMCE. O Editoria11y é compatível com a maioria dos editores de texto e dispõe de implementações prontas a usar para CKEditor e Gutenberg no WordPress e no Drupal.
Cabeçalhos
Este cabeçalho saltou um nível:
Oops
Este cabeçalho não tem qualquer texto:
Esta citação curta pode ser um cabeçalho:
Sou um cabeçalho falso
Este parágrafo todo a negrito pode ser um cabeçalho:
Sou um cabeçalho falso
Este cabeçalho é demasiado longo:
Os cabeçalhos e subcabeçalhos criam um índice navegável para tecnologias de apoio. Os números indicam níveis de indentação numa relação hierárquica. Cabeçalhos muito longos provavelmente significam que o autor está a dizer demasiado no próprio cabeçalho.
Alternativas em texto para imagens
Este cabeçalho é constituído por uma imagem de texto sem texto alternativo:
Imagem sem nenhum atributo alt:

Imagem com um atributo alt inválido, por exemplo, alt=”'”

Imagem com um nome de ficheiro como texto alternativo

Imagem com texto redundante no alt, como por exemplo «imagem de:»

Imagem com hiperligação e texto redundante no alt, como por exemplo «imagem de:»
Imagem com texto alternativo de substituição provisória:

Imagem com hiperligação e texto alternativo de substituição provisória:
Imagem com texto alternativo gerado por máquina:

Imagem com hiperligação e texto alternativo gerado por máquina:
Imagem com texto alternativo excessivamente longo:

Imagens em hiperligações em que o texto alternativo pode estar a descrever a imagem em vez da hiperligação
Esta hiperligação tem texto e uma imagem.
Qualquer imagem com hiperligação (teste desativado por defeito)
Imagem em figura marcada como decorativa:
Imagem em figura com um alt igual à legenda:
Imagem numa apresentação de diapositivos sem texto alternativo:
Contraste
Combinação de cores ilegível:
Super legível.
A cor requer uma verificação manual:
E incalculável.
Gráfico SVG sem contraste suficiente
Gráfico SVG cujo contraste requer uma verificação manual
Incorporações e multimédia
Vídeo assinalado como necessitando de verificação manual das legendas:
O áudio necessita de uma transcrição:
Iframe sem título e que também necessita de verificação manual:
Iframe sem possibilidade de foco:
Componentes interativos aninhados
Acordeão
Acordeão
Surpresa!Hiperligações com significado
Hiperligações sem qualquer texto
Hiperligações apenas identificadas por um URL:
https://www.youtube.com/watch?v=DLzxrzFCyOs
Hiperligações apenas identificadas por símbolos:
Hiperligações com o mesmo nome que apontam para destinos diferentes
Hiperligações apenas identificadas por um número DOI:
doi.org/10.1145/3493612.3520468
Hiperligações com rótulos sem significado:
Ícones com hiperligação sem alternativas em texto:
Hiperligações que abrem numa nova janela sem ícone de ligação externa ou aviso textual
Alerta para teste de abertura em nova janela.
Hiperligações para ficheiros PDF
Hiperligações para outros documentos
Uma hiperligação para documento falso.
Hiperligações com atributos title redundantes
Hiperligações com atributos que as removem da ordem de tabulação:
Hiperligações com atributos aria-labelledby a apontar para elementos sem texto:
Hiperligações com termos genéricos na etiqueta aria:
Imagem com hiperligação sem texto alternativo:
Imagem com hiperligação e texto alternativo impronunciável:
Imagem com hiperligação sem atributo alt:
Imagem com hiperligação sem atributo alt numa hiperligação com texto:
Imagem com hiperligação cujo texto alternativo é apenas um nome de ficheiro:
Imagem com hiperligação e texto alternativo suspeito de ser demasiado longo:
Hiperligações internas quebradas
Não existe nenhum ID com esse nome.
Hiperligações para servidor de desenvolvimento
Âncoras duplicadas
Tabelas
Tabelas sem cabeçalhos válidos
| Uma tabela sem cabeçalho TH é inválida | Os cabeçalhos de esboço não contam | Desativar deve testar o conteúdo dos cabeçalhos dentro de tabelas |
| Cabeçalhos vazios | |
|---|---|
| Encontrei | 700 vídeos de tartarugas |
| Cada um | com 2 segundos de duração |
Legibilidade
VÁRIAS PALAVRAS SEGUIDAS EM MAIÚSCULAS ATIVARÃO UM AVISO DE VERIFICAÇÃO MANUAL.
Texto sublinhado
Um pouco de itálico é aceitável, mas grandes blocos de texto enfatizado não são muito legíveis. Um pouco é sempre tolerável, claro, mas há limites, e um parágrafo inteiro é demasiado. Este, por exemplo, é um parágrafo inteiro. É um bocado difícil de ler, não é? Mas este teste só é acionado quando o texto é tão longo quanto este, portanto não deverá ver falsos positivos no seu conteúdo a menos que escreva regularmente parágrafos tão extensos como este.
Texto justificado
Superíndice ou subíndice excessivo; o subíndice deve ser utilizado para referências curtas e notas de rodapé, não para frases ou parágrafos inteiros.
Tipos de letra minúsculos
* Listas falsas utilizando caracteres comuns,
* letras, números e emoji.
Formulários
Botão sem etiqueta
Campos com uma etiqueta invisível, a perguntar se existe também uma etiqueta visível.
Campos com apenas um marcador de posição como etiqueta, a perguntar se existe também uma etiqueta visível.
Botão com uma etiqueta acessível diferente da sua etiqueta visível.
Botão com um atributo aria-labelledby inválido.
Botão com etiqueta redundante.
Botão de reinicialização.