Glossário de HTML Semântico e Acessibilidade

Termos essenciais para devs front-end que querem aprofundar em acessibilidade web. Definições curtas e práticas, com referência aos conceitos da WCAG 2.2.

A

ARIA
Sigla de Accessible Rich Internet Applications. Conjunto de atributos que complementam o HTML para descrever papéis, estados e propriedades de componentes de interface dinâmicos. A primeira regra do ARIA é: prefira sempre a semântica nativa do HTML antes de adicionar ARIA.
aria-label
Define um nome acessível para um elemento quando não há texto visível que o nomeie. Útil em botões que contêm apenas ícones, por exemplo.
aria-labelledby
Aponta para o id de outro elemento que serve como rótulo. Permite reaproveitar texto já visível na página em vez de duplicá-lo.
aria-describedby
Associa um elemento a um texto descritivo complementar (uma dica ou mensagem de erro). O leitor de tela anuncia essa descrição após o rótulo.
aria-live (regiões dinâmicas)
Informa às tecnologias assistivas que uma região terá conteúdo atualizado dinamicamente. Os valores polite (anuncia ao terminar a fala atual) e assertive (interrompe) controlam a urgência.
aria-current
Indica o item atual dentro de um conjunto — por exemplo, a página atual em um menu (aria-current="page") ou a etapa atual em um fluxo.
alt (atributo)
Texto alternativo de uma imagem (<img>). Descreve o conteúdo visual para quem não pode vê-lo. Em imagens puramente decorativas, use alt="" para que o leitor de tela as ignore.
AT
Sigla de Assistive Technology — tecnologia assistiva. Qualquer software ou hardware que ajuda pessoas com deficiência a usar o computador — leitores de tela, ampliadores, teclados adaptados, controle por voz, entre outros.
Axe DevTools
Extensão de navegador da Deque que audita automaticamente uma página contra critérios WCAG, apontando violações e sugerindo correções.

B

Breadcrumb (semântica)
Trilha de navegação que mostra a posição da página dentro da hierarquia do site. Semanticamente, usa-se uma <nav> com aria-label e uma lista ordenada (<ol>), marcando a página atual com aria-current="page".

C

CAPTCHA acessível
Mecanismo anti-robô que não depende exclusivamente de reconhecer imagens ou texto distorcido. Alternativas acessíveis incluem desafios não visuais, validação por comportamento e tokens invisíveis, evitando barreiras a quem usa leitor de tela.
Contraste de cor (mínimo, AA, AAA)
Relação de luminância entre texto e fundo. A WCAG exige no mínimo 4.5:1 para texto normal e 3:1 para texto grande no nível AA; o nível AAA sobe para 7:1 e 4.5:1, respectivamente.

E

eMAG
Sigla de Modelo de Acessibilidade em Governo Eletrônico. Conjunto de recomendações brasileiro voltado a sites e portais do governo. Padroniza a aplicação de acessibilidade na administração pública, alinhado aos princípios da WCAG.

F

Focus Indicator (indicador de foco)
Marca visual que mostra qual elemento interativo está atualmente focado pelo teclado. É essencial para quem navega sem mouse e deve ter contraste suficiente para ser percebido em qualquer fundo.
Focus Order (ordem de foco)
Sequência em que os elementos recebem foco ao pressionar Tab. Deve seguir uma ordem lógica e previsível, normalmente coincidente com a ordem de leitura do conteúdo.
Focus Trap
Situação em que o foco do teclado fica preso em uma área e não consegue sair. É um bug grave — exceto quando intencional e gerenciado, como dentro de um modal aberto, de onde o foco só deve sair ao fechá-lo.
Form Validation acessível
Validação de formulário que comunica erros por texto (não só por cor), associa a mensagem ao campo via aria-describedby, marca o campo com aria-invalid e anuncia o erro por uma região role="alert".

H

Heading hierarchy (hierarquia de cabeçalhos)
Estrutura lógica dos títulos <h1> a <h6>. Cada página tem um único <h1> e os níveis descem sem saltos. Leitores de tela usam essa hierarquia como um sumário navegável.
HTML Semântico
Uso de elementos que descrevem o significado do conteúdo (<nav>, <article>, <button>) em vez de elementos genéricos (<div>, <span>). É a base da acessibilidade: a semântica nativa já entrega papéis e comportamentos às tecnologias assistivas.

K

Keyboard Navigation (navegação por teclado)
Capacidade de operar toda a interface usando apenas o teclado — Tab para avançar, Shift+Tab para voltar, Enter e Espaço para acionar. Requisito do critério WCAG 2.1.1.

L

Landmark (region, role)
Região de referência da página que permite pulos rápidos por leitores de tela. Elementos como <header>, <nav>, <main>, <aside> e <footer> geram landmarks automaticamente.
Lei Brasileira de Inclusão (LBI)
Lei 13.146/2015. Em seu Art. 63, torna obrigatória a acessibilidade de sites na internet para uso da pessoa com deficiência, garantindo acesso à informação no Brasil.
Live Region
Região marcada com aria-live (ou papéis como status e alert) cujas atualizações são anunciadas automaticamente pela tecnologia assistiva, sem que o usuário precise mover o foco até ela.

N

NBR 17225
Norma da ABNT publicada em 2025: a primeira norma brasileira oficial de acessibilidade em conteúdo e aplicações web, que consolida requisitos técnicos alinhados às diretrizes internacionais.
NVDA (leitor de tela)
Leitor de tela gratuito e open-source para Windows, mantido pela NV Access. É amplamente usado em testes de acessibilidade por ser gratuito e popular entre usuários reais.

P

POUR
Sigla de Perceivable, Operable, Understandable, Robust. Os quatro princípios que estruturam a WCAG: o conteúdo deve ser perceptível, operável, compreensível e robusto. Todos os critérios derivam de um desses pilares.

R

Reflow (critério WCAG 2.2)
Critério 1.4.10: o conteúdo deve se reorganizar para caber em uma única coluna a 320 CSS px de largura (ou zoom de 400%), sem exigir rolagem horizontal — exceto conteúdos que dependem de layout bidimensional, como tabelas.
Roles ARIA
Papéis que descrevem o que um elemento é ou faz (por exemplo, role="dialog", role="tab"). Devem ser usados apenas quando não existe um elemento HTML nativo equivalente.

S

Screen Reader (leitor de tela)
Software que converte o conteúdo digital em fala ou Braille, permitindo que pessoas cegas ou com baixa visão naveguem pela web. Exemplos: NVDA, JAWS, VoiceOver e TalkBack.
Skip Link
Link no topo da página que permite pular blocos repetitivos (como o menu) e ir direto ao conteúdo principal. Atende ao critério WCAG 2.4.1 (Bypass Blocks).
scope (atributo em <th>)
Atributo que associa um cabeçalho de tabela às suas células. scope="col" indica cabeçalho de coluna e scope="row", de linha — assim o leitor de tela anuncia o cabeçalho correto ao navegar pelos dados.

T

Target Size (tamanho mínimo de alvo)
Critério WCAG 2.5.8: alvos de toque/clique devem ter ao menos 24×24 CSS px no nível AA (com exceções). Uma área maior, como 44×44px, reduz erros de quem tem controle motor reduzido.
TalkBack (Android)
Leitor de tela nativo do sistema Android, do Google. É a principal tecnologia assistiva para testar acessibilidade de páginas e apps em dispositivos móveis Android.

V

VoiceOver (macOS/iOS)
Leitor de tela nativo dos sistemas da Apple. No iPhone e iPad é a tecnologia assistiva padrão para testar acessibilidade móvel em ambiente Apple.

W

WAI
Sigla de Web Accessibility Initiative. Iniciativa do W3C dedicada à acessibilidade web. Produz diretrizes, materiais educativos e especificações como a WCAG e o ARIA.
WCAG
Sigla de Web Content Accessibility Guidelines. Diretrizes internacionais de acessibilidade para conteúdo web, organizadas em três níveis de conformidade (A, AA e AAA). A versão 2.2 é a recomendação atual do W3C.
W3C
Sigla de World Wide Web Consortium. Consórcio internacional que desenvolve os padrões abertos da web, incluindo HTML, CSS e as diretrizes de acessibilidade mantidas pela WAI.