Demo

Assista a uma introdução em vídeo ao histórico e às funcionalidades do verificador, ou experimente editar o conteúdo de demonstração abaixo, abrindo e dispensando alertas, e usando a barra de ferramentas (Captura de tela da barra de ferramentas do Editoria11y, exibindo 4 erros.) para visualizar o esboço de cabeçalhos. Esta demonstração inclui tanto os testes principais quanto o conjunto CSA.

Esta demonstração usa um editor TinyMCE. O Editoria11y é compatível com a maioria dos editores de texto e tem implementações prontas para CKEditor e Gutenberg no WordPress e no Drupal.

Cabeçalhos

Este cabeçalho pulou um nível:

Oops

Este cabeçalho não tem nenhum texto:

Esta citação curta pode ser um cabeçalho:

I'm a fake heading

Este parágrafo todo em negrito pode ser um cabeçalho:

I am a fake heading

Este cabeçalho é muito longo:

Headings and subheadings create a navigable table of contents for assistive devices. The numbers indicate indents in a nesting relationship. Very long headings probably mean the author is saying too much in the heading.

Alternativas de texto para imagens

Este cabeçalho é composto por uma imagem de texto sem alt:

Imagem sem nenhum atributo alt:

Imagem com atributo alt inválido, ex.: alt=”'”

'

Imagem com um nome de arquivo como alt

filename.jpg

Imagem com texto redundante no alt, como “imagem de:”

Image of a dog.

Imagem com link com texto redundante no alt, como “imagem de:”

Image of a dog.

Imagem com alt provisório:

TBD

Imagem com link com alt provisório:

TBD

Imagem com alt gerado por máquina:

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

Imagem com link com alt gerado por máquina:

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

Imagem com texto alt muito longo:

Look at this doggy. This doggy is so happy. This doggy got to go on a walk and the walk went to a lake and there were all kinds of fascinating smells. What an amazing day this doggy had.

Imagens em links onde o texto alt pode estar descrevendo a imagem em vez do link

This link has text and an image.A lovely gray box

Hello there

Imagem em figura marcada como decorativa:

Figcaption is present.

Imagem em figura com alt igual ao figcaption:

Figcaption is the same as alt
Figcaption is the same as alt

Imagem em carrossel sem alt:

Contraste

Combinação de cores ilegível:

Super legible.

Cor requer verificação manual:

And incalculable.

Gráfico SVG sem contraste suficiente

Gráfico SVG cujo contraste requer verificação manual

Incorporações e mídia

Vídeo sinalizado como necessitando de verificação manual de legendas:

Playback disabled to prevent cookies.

Áudio requer uma transcrição:

Iframe sem título que também requer verificação manual:

Iframe sem possibilidade de foco:

Componentes interativos aninhados

Accordion
AccordionSurprise!

Tabelas

Tabelas sem cabeçalhos válidos

A table without a TH header is invalid

Outline headers do not count

Disable should be content header test inside tables

Empty headers
I found 700 Videos of Turtles
Each 2 Seconds Long

Legibilidade

VÁRIAS PALAVRAS EM SEQUÊNCIA EM CAPS LOCK IRÃO ACIONAR 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 é tolerável, claro, mas há limites, e um parágrafo inteiro já é demais. Este, por exemplo, é um parágrafo inteiro. É um pouco difícil de ler, não é? Mas este teste só é acionado quando o texto é tão longo assim, portanto você não deve ver falsos positivos no seu conteúdo, a menos que escreva parágrafos muito longos regularmente como este.

Texto justificado

Uso excessivo de sobrescrito ou subscrito; o subscrito deve ser usado para referências pequenas e notas de rodapé, não para frases ou parágrafos inteiros.

Fontes minúsculas

* Listas falsas usando caracteres comuns,

* letras, números e emoji.

  • Tag UL ausente

    • Formulários

    Botão sem rótulo

    Campos com rótulo invisível, verificando se há também um rótulo visível.

    Campos com apenas um rótulo placeholder, verificando se há também um rótulo visível.

    Botão com rótulo acessível diferente do rótulo visível.

    Botão com atributo aria-labelledby inválido.

    Botão com rótulo redundante.

    Botão de redefinição.

    Jumbling the tab index