Qual é a diferença entre semântica e acessibilidade (a11y)?

A semântica ajuda as máquinas (navegadores, analisadores, robôs de pesquisa) a entender a estrutura e o significado do conteúdo. A acessibilidade (a11y) destina-se a que o conteúdo seja compreensível e útil para pessoas com diferentes limitações físicas ou cognitivas que utilizam tecnologias de assistência.

Etiquetas semânticas

O uso de etiquetas HTML semânticas, como <article>, <nav>, <aside>, <footer>, <h1>-<h6>, atribui significado aos elementos da página. Por exemplo:

<article>
  <h2>Título do artigo</h2>
  <p>Texto do artigo...</p>
</article>

Isto ajuda os navegadores a interpretar corretamente a estrutura do documento.

Acessibilidade (a11y)

A acessibilidade abrange muitos aspetos:

• Semântica: O uso correto de etiquetas semânticas já faz parte da acessibilidade, pois ajuda as tecnologias de assistência (leitores de ecrã) a entender a estrutura e a função dos elementos.

• Atributos ARIA: Atributos adicionais, como aria-label, aria-describedby, aria-hidden, role, fornecem informações adicionais para as tecnologias de assistência quando a semântica HTML não é suficiente.

  <button aria-label="Fechar janela de diálogo">
    <img src="close.svg" alt="">
  </button>
  

• Contraste: Contraste suficiente entre o texto e o fundo para pessoas com deficiência visual.

• Navegação por teclado: Capacidade de navegar na página e interagir com os elementos usando apenas o teclado.

• Texto alternativo para imagens (alt): Descrição do conteúdo da imagem para utilizadores que não a veem.

  <img src="cat.jpg" alt="Gata preta a dormir na janela.">
  

• Estrutura de cabeçalhos: Hierarquia lógica de cabeçalhos (<h1> - <h6>) para facilitar a navegação com leitores de ecrã.

Relação

A semântica é uma base importante para a acessibilidade. Uma página bem estruturada com elementos semânticos é muito mais fácil de tornar acessível. No entanto, a semântica por si só não é suficiente para uma acessibilidade completa – muitas vezes são necessárias medidas adicionais, como atributos ARIA, gestão do foco e garantia de contraste suficiente.

Aspeto	Semântica	Acessibilidade (a11y)
Objetivo	Dar significado aos elementos	Garantir a compreensão e utilização do conteúdo por todos
Ferramentas	Etiquetas HTML (<nav>, <article>, <h1>...)	Semântica, ARIA, contraste, foco, texto alt e outros
Utilizador	Navegadores, analisadores, motores de busca	Pessoas com diferentes necessidades, tecnologias de assistência