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.
Top comments (2)
como os seus artigos sao incriveis,sabe?
Olha, vindo de vc é um elogio muito especial, sou teu fã!!!