Semântica no HTML por debaixo dos panos

Vocês sabem explicar o que é semântica no HTML?
Eu sinto que a minha vida inteira as pessoas resumiram a "Usar as tags de HTML de forma correta", "ajuda com acessibilidade e SEO", mas nada disso responde a pergunta completamente, responde?

 

Perguntei no Twitter como as pessoas explicariam o que é semântica e, salvo algumas pessoas que tinham uma experiência muito forte em acessibilidade, as respostas foram em sua maioria muito parecidas com o que eu ouvi por toda a minha carreira

---

Semântica e significado

O que é significado pra gente? O que é significado pros robôs?

O que entendemos como significado em semântica é construído por 3 informações, que pra simplificar vou resumir em Name, Role e State.

Name

São os dados de nomenclatura do elemento - existem várias propriedades que aderem nome à elementos, como title, name, o conteúdo e as aria-properties, etc. Existe uma ordem pré-definida que calcula o nome de acordo com a prioridade delas.

 

👤 Para humanos
Nome e descrição são parte do conteúdo verbalizado pelos leitores de tela. No caso do botão, diria:

"<role> Botão. <name> Cancelar pedido"

🤖 Para máquinas
Sem o name, o elemento é considerado elemento não palpável (palpable content) e sua leitura pode ser ignorada.

 

Role

Descreve o comportamento esperado do elemento pro usuário, crawlers e tecnologias assistivas.
Esses elementos não dão só contexto, mas habilitam APIs que darão suporte pra todo tipo de usuário interagirem com as funcionalidades definidas de maneira equivalente.

A propriedade role="alert" não adere apenas "contexto", ela:

• Cria uma live-region - um observer de mutações do elemento filho que emite um evento pro user-agent
• Quando há um erro (ex: erro de formulário), a mensagem é injetada dinamicamente no elemento, emitindo um evento
• O evento é capturado por tecnologias assistivas e anunciado ao usuário

Tudo isso sem javascript! (só a parte de injetar a mensagem dinamicamente). Essa role habilita uma API nativa que garante que o usuário tenha acesso ao erro de uma forma além da puramente visual (letrinhas vermelhas com esse símbolo ❌).

👤 Para humanos
Atribui a descrição semântica do elemento.

🤖 Para máquinas
Habilita parte da API necessária pra fornecer a experiência esperada.

 

State

Se refere à API do DOM e aos métodos, getters, setters e defaults do elemento.

O atributo disabled não muda apenas a aparência do elemento, mas altera uma série de informações no objeto do mesmo:

• Elemento interativo se torna não navegável
• Não clicável
• Não emite eventos
• Não é lido por tecnologias assistivas

E esse estado é propagado recursivamente pra todos os filhos desse elemento.

Usando um botão de exemplo - mesmo elemento, diferentes atributos, métodos e comportamentos mudando apenas o contexto:

 

Uma vez no contexto de formulário, métodos relacionados à envio de formulário e até a criação de um FormData são habilitados pela adição do type="submit"implícito.

 

👤 Para humanos
Disponibiliza o comportamento esperado pra diversos tipos de interação do usuário.

🤖 Para máquinas
Fornece diversas formas de interação pra diferentes user-agents e tecnologias assistivas.

 

E sobre SEO e conteúdo?
Semântica ajuda nisso também?

---

Semântica e conteúdo

Se a gente pensar em semântica como aderir sentido a algo, a ordem, prioridade e relação do conteúdo mudam drasticamente o significado do conteúdo.

A criação dessa hierarquia é papel de outra API - a de outlines.

Outlines criam seções de conteúdo, tal como índices de livros ou trabalhos de faculdade.

As numerações que definem a hierarquia do conteúdo dos headings (h1 a h6) funcionam de forma parecida aos numerais de índices que demonstram cabeçalhos, títulos e subtítulos.

 

👤 Para humanos
Tamanho de fonte e hierarquia visual demonstram a ordem de leitura. Tecnologias assistivas formam índices usando a hierarquia dos headings.

🤖 Para máquinas
A hierarquia de outlines são também um mapa de hierarquia de conteúdo pra crawlers.

 

E não só headings tem esse papel, <section>, <aside>, <article> e <nav> são elementos do tipo sectioning content e criam um tipo de outline. Esses elementos podem receber <header> e <footer> cujo conteúdo vai estar associado à sua seção.

Entendem agora como isso tem super a ver com acessibilidade? Acessibilidade não é um favor, tampouco algo deslocado do HTML, CSS e JS, mas usar as APIs que essas tecnologias oferecem pra fornecer uma experiência equivalente a todos usuários.

Nas palavras da Sandyara Peres, especialista em acessibilidade, semântica é:

Semântica não é "usar as tags certas", pois tags por si só não cobrem todo tipo de componente e casos de uso que a web pode oferecer.

Semântica é uma coletânea de estados, atributos e métodos que viabilizam diversas formas de se acessar e entender conteúdo.

---

Pra fechar

Ninguém nunca me ensinou semântica dessa forma, sempre pareceu algo meramente moralista, como "escrever HTML certo", "usar as tags certas"

Talvez agora possamos ver como:

"Habilitar as ferramentas adequadas pra interpretação do conteúdo"

O HTML como linguagem de marcação, não deve ser interpretado como apenas um veículo pra implementação de design (CSS) e funcionalidade (JS).

Design e funcionalidade são apenas estrelas que orbitam ao redor do conteúdo. Valorizar o conteúdo é valorizar os usuários.