Este é o primeiro parágrafo do article.
Este é o segundo parágrafo da article.
O objetivo dessa página é oferecer uma biblioteca de componentes HTML, com acesso fácil e rápido, para realização de testes de Acessibilidade.
Possibilitando, dessa forma, testar seus comportamentos em diversas plataformas e tecnologias assistivas.
Escolha o tipo de componente a ser verificado na lista abaixo:
Elementos textuais
Parágrafos e quebra de linha
A tag p é um elemento usado para representar blocos de texto e a tag br é usada para criar uma quebra de linha. A quebra de linha pode ter diferentes comportamentos dependendo de for sua implementaç
Esta é a parte do parágrafo antes da quebra de linha
Esta é a parte do parágrafo depois da quebra de linha.
Agora iremos utilizar duas quebras de linhas.
Esta é a parte do parágrafo antes da quebra dupla
Esta é a parte do parágrafo depois da quebra dupla, um comportamento comum da quebra dupla é um elemento em branco.
Caso a tag BR seja omitida, com um aria-hiden, os espaços próximos a tag serão ignorados, o que resultará na junção das palavras para o leitor de tela.
Esta é a parte do parágrafo antes da quebra de linha Está é a parte do parágrafo depois da quebra de linha.
Texto em Negrito e itálico
São usadas para dar ênfase ao texto, o que é importante para destacar informações críticas.
Exemplo de negrito com a tag b: Texto com negrito.
Exemplo de negrito com a tag strong: Texto com negrito.
Exemplo de negrito com css: Texto com negrito.
Exemplo de itálico com a tag i: Texto com itálico.
Exemplo de itálico com a tag em: Texto com itálico.
Exemplo de itálico com css: Texto com itálico.
Níveis de título
Abaixo apresentamos todos os níveis de título do HTML. Incluiremos o nível 7 apenas para validar o comportamentos das tecnologias assistivas neste cenário inexistente.
Este é um título de nível 1
Este é um título de nível 2
Este é um título de nível 3
Este é um título de nível 4
Este é um título de nível 5
Este é um título de nível 6
Texto com Código, Marcação e Citação
Essas tags são usadas para representar conteúdo de maneira específica, como citações, títulos de obras, código-fonte e texto pré-formatado.
Exemplo da tag code: texto de teste
Exemplo da tag mark: texto de teste
A seguir apresentamos um exemplo de blockquote. Este é o elemento pai que envolve a citação em si. O texto da citação é geralmente colocado dentro de um parágrafo ou outros elementos de texto, dependendo do contexto. A tag cite é usada para indicar o título da fonte original da citação.
Esta é a citação de um texto de outra fonte. Pode ser um parágrafo longo ou um trecho curto, mas é importante indicar a fonte.
— Nome do Autor, Título da Fonte
Texto com Deleção e Inserção
A tag ins é usada para marcar o texto que foi inserido ou adicionado e a tag del é usada para marcar o texto que foi deletado ou removido de um documento em comparação com a versão anterior.
Exemplo da tag ins: Novo texto inserido
Exemplo da tag del: Texto removido
Texto com Subscrito e Sobrescrito
A tag sub é usada para representar texto que deve ser exibido em uma posição subscrita, ou seja, abaixo da linha de base normal do texto. É comumente usado para exibir fórmulas químicas, equações matemáticas e notas de rodapé.
Exemplo da tag sub: H2O é a fórmula da água.
A tag sup é usada para representar texto que deve ser exibido em uma posição sobrescrita, ou seja, acima da linha de base normal do texto. É frequentemente usado para representar expoentes, datas e notas de rodapé elevadas.
Exemplo da tag sup: 23 é igual a 8.
Abreviaturas com tag ABBR
Usamos HTML para estruturar nossos documentos da web.
Marcação de data e hora
Podemos marcar nas tags html o tempo e horário para uma leitura automatizada utilizando a tag time.
exemplo 1 com data dia, mês e ano:
exemplo 2 com data mês e ano:
exemplo 3 com Horário hora e minuto:
Separador
A Tag hr (horizontal rule) é uma tag de elemento vazio que é usada para criar uma linha horizontal no documento HTML, geralmente para separar seções de conteúdo.
Voltar ao início
Containers de conteúdo
Abaixo estão alguns containers utilizados na construção de estruturas html.
Divs
As divs são elementos genéricos usados para agrupar e organizar o conteúdo em uma página da web. Elas não têm significado semântico próprio, mas podem ser estilizadas e manipuladas com CSS e JavaScript.
Esta é a primeira div
Esta é a segunda div
Esta é a terceira div
Span
Spans são elementos inline que são usados para aplicar estilos ou manipular partes específicas de texto ou conteúdo dentro de outros elementos, como parágrafos ou divs. Eles são frequentemente usados em conjunto com CSS e JavaScript.
Esta é a informação dentro da primeira span. Esta é a informação dentro da segunda span. Esta é a informação dentro da terceira span.
No iOS o span quebra a leitura do voiceOver, utilizando a role text é possivel evitar esse comportamento.
Este é o início do parágrafo. Este é o span. E este é o final do parágrafo.
Utilizando a role text com a tag strong.
Este é o início do parágrafo. Este é o span. E este é o final do parágrafo.
Seções
Geralmente, seções referem-se a partes significativas e estruturadas de uma página da web que têm um conteúdo relacionado e um cabeçalho descritivo. Eles são frequentemente marcados com elementos como section, article, aside, entre outros, para indicar sua estrutura semântica.
Exemplo da tag section:
Este é o primeiro parágrafo do section.
Este é o segundo parágrafo do section.
Exemplo da tag article:
Exemplo da tag aside:
Regiões
A role region permite identificar e rotular áreas específicas de uma página da web que possuem alguma identificação ou significado particular.
A seguir apresentamos um elemento header, main e aside com a role region e aria-label descrevendo a finalidade da região.
Este é o primeiro parágrafo do header.
Este é o segundo parágrafo do header.
Este é o primeiro parágrafo do main.
Este é o segundo parágrafo do main.
Agora um exemplo de uma role region sem uma div sem aria-label
Este é o primeiro parágrafo da region sem aria-label.
Este é o segundo parágrafo da region sem aria-label.
Uso de Listas
Confira os 3 tipos de lista aceitas dentro da estruturação HTML.
Lista não-ordenada
- Banana
- Morango
- Limão
Lista ordenada
- Primeiro passo - dados da empresa
- Segundo passo - dados do departamento
- Terceiro passo - revisão de todos os dados
- Quarto passo - tela de resultados
Lista de definição
- Firefox
- Um navegador gratuito, de código aberto, multiplataforma desenvolvido pela Mozilla Corporation e centenas de voluntários.
- Chrome
- O Google Chrome é um navegador de internet desenvolvido pela Google. Foi lançado pela primeira vez em setembro de 2008
- Brave
- Brave é um navegador web livre e de código aberto desenvolvido pela Brave Software Inc., e baseado no navegador web Chromium. O navegador bloqueia anúncios e rastreadores de sites.
Uso de Tabelas
Confira os vários modelos de tabelas aceitas dentro da estruturação HTML, incluindo legenda, cabeçalhos de linhas/coluna, células mescladas, etc..
Tabela simples
| Nome | Função | Modelo de Notebook |
|---|---|---|
| Marco Telles | Coordenador | HP Probook |
| Joana Silva | Team Lead | Dell Latitude |
| Leopoldo Nogueira | PO | Lenovo Thinkpad |
| Pedro Santos | Designer | Dell XPS |
Tabela com caption/legenda
| Nome | Função | Modelo de Notebook |
|---|---|---|
| Marco Telles | Coordenador | HP Probook |
| Joana Silva | Team Lead | Dell Latitude |
| Leopoldo Nogueira | PO | Lenovo Thinkpad |
| Pedro Santos | Designer | Dell XPS |
Tabela com mescla de células
Esta tabela dos cursos possui linhas e colunas mescladas no cabeçalho
| Nome do curso | Setembro | Outubro | Coordenador | ||
|---|---|---|---|---|---|
| Dia | Horário | Dia | Horário | ||
| Introdução a administração de negócios | 01 | 08:00 | 01 | 09:00 | Alberto Rodrigues |
| Gestão financeira | 10 | 08:00 | 10 | 09:00 | Sérgio Santos Rodrigues |
| Fundamentos de economia | 20 | 14:00 | 18 | 12:00 | Marcos Santos Almeida |
Imagens e conteúdos em mídia
Elemento IMG
O elemento img é usado para incorporar imagens em uma página HTML.
Imagem com alt:
Imagem com figcaption:
Elemento SVG
O elemento svg é usado para incorporar gráficos vetoriais escaláveis em uma página HTML. Pode conter formas e elementos gráficos.
Elemento object
O elemento object é usado para incorporar objetos externos em uma página HTML, como arquivos de mídia ou outros documentos.
Elemento iframe
O elemento iframe é usado para incorporar outra página da web dentro de uma página HTML.
Elemento embed
O elemento embed é usado para incorporar conteúdo externo, como áudio ou vídeo, diretamente na página HTML.
Elemento canvas
O elemento canvas é usado para criar gráficos, desenhos e animações de forma programática em uma página HTML.
Voltar ao início