HTML Semantico

Você já criou um botão a partir de uma div? Adicionou um evento onClick e estilizou a div para se parecer com um botão? Sim, quem nunca né? Pronto pra sentir vergonha?

Se você se pergunta por que estou dizendo que deveria ter vergonha disso, aqui está o motivo: seu código é excludente. Se você não adicionar as funções corretas, o índice de abas, eventos de teclado e tudo mais, muitos usuários simplesmente não poderão usar esse botão. Alguns usuários nem irão saber que esse botão existe.

O que é HTML Semântico?

HTML semântico, ou marcação semântica, descreve o significado do conteúdo para o navegador e o desenvolvedor de maneira legível por humanos e por máquina. Assim, com os elementos semânticos, um humano saberá o que é esse elemento (por exemplo, um botão) e um navegador sabe como exibi-los e interagir com eles.

Um exemplo:

<button onClick={handleClick}>Eu sou um botão!</button>

vs.

<div id="button" onClick={handleClick}> Eu tento ser um botão! </div>

Como leitor do código, você provavelmente pode assumir que o primeiro é um botão do elemento button. Essa é uma tag semântica. <div> entretanto, não é um elemento semântico e sem esse id no div, você não seria capaz de dizer que é um botão (bem, ele diz "Eu tento ser um botão!", mas o texto pode ser qualquer coisa).

Da perspectiva do navegador (ou, eventualmente, de um leitor de tela), aquele primeiro é definitivamente um botão, como a tag semântica diz. O último, entretanto, é apenas texto, portanto, sem possibilidades de interação - os usuários de leitores de tela não sabem que existe um botão. Os usuários de teclado com visão vêem que é um botão (assumindo que foi estilizado como um), mas não podem interagir com ele, pois ele não obtém o foco.

Uma nota aqui - nem todos os elementos nativos são elementos semânticos. Elementos como <div> e <span> não carregam nenhum significado semântico e, portanto, não são elementos semânticos. Os elementos e recursos que discutirei na próxima seção são apenas aqueles com significado semântico. Para todos os curiosos, cada elemento HTML é explicado no WHATWG HTML Living Standard.

Gosto da observação sobre o elemento div:

Os autores são fortemente encorajados a ver o elemento div como um último recurso, quando nenhum outro elemento for adequado. O uso de elementos mais apropriados em vez do elemento div leva a uma melhor acessibilidade para os leitores e uma manutenção mais fácil para os autores.

A semântica pode ser comunicada de duas formas - semântica nativa e semântica adicionada com ARIA (Accessible Rich Internet Applications).

Semântica Nativa

A semântica nativa vem dos elementos HTML, o próprio elemento HTML transmite significado. Por exemplo: o elemento button que é um botão - e não precisa de nenhum atributo extra (como role ="button") para ser adicionado ao código. Isso talvez seja ainda mais claro com o elemento code. Quando o navegador encontra um bloco de código que foi declarado com a tag code, ele sabe que não há necessidade de tentar executar aquele código. É puramente para leitura e passa a ser código.

Os elementos HTML semânticos também carregam muitas outras vantagens - eles podem ser focalizados e podem ser usados pelo teclado por padrão na medida em que um determinado elemento deve ser. Não há necessidade de implementar esses recursos. Portanto, no exemplo do botão, ele pode ser ativado com enter e barra de espaço e não precisarems de código específico para observar a barra de espaço ou inserir eventos importantes.

Outros exemplos de elementos HTML semânticos (nativos) são cabeçalhos, parágrafos e pontos de referência, como header, main e footer. Eles podem ser agrupados em várias categorias, como metadados de documentos, semântica em nível de texto, agrupamento de conteúdo, etc. Consulte WHATWG HTML Living Standard para obter mais informações.

Uma observação sobre o uso de elementos semânticos: use-os por sua semântica, não por sua aparência. Um bom exemplo de uso indevido é usar o elemento blockquote para indentação e não para implicar uma citação.

Semantica com ARIA

Existe outra maneira de adicionar semântica aos elementos, que é com ARIA. Por exemplo, um intervalo com as seguintes propriedades não é entendido como um título por um leitor de tela:

<span>Eu quero ser um título!</span>

Mas quando a semântica é adicionada com ARIA, ela se torna um título do ponto de vista do leitor de tela:

<span role="heading" aria-level="2">Opa! Agora eu sou um Título!</span>

Observe, entretanto, que as tags de título semântico são a forma recomendada de comunicar títulos! E isso vale para qualquer coisa - os elementos HTML semânticos nativos são preferidos em vez de adicionar semântica com ARIA. A razão para isso é que, ao usar ARIA, há muitos itens a serem lembrados de implementar e adicionar em comparação com os elementos semânticos nativos.

Então, quando o ARIA seria uma solução adequada em relação ao HTML semântico? Existem várias ocasiões e um denominador comum é que quando os elementos semânticos não são suficientes, ARIA deve ser usado. Por exemplo, não há elemento semântico para uma interface com guias. Para torná-lo acessível, seriam necessários alguns atributos aria e funções extras. Se você está curioso sobre o que é possível, verifique as Práticas de autoria WAI-ARIA - elas lista os padrões de design para diferentes widgets contendo a interação de teclado esperada, os atributos aria necessários e também as informações para guias.

Há um aviso a ser dado quando se fala em ARIA. Nenhum ARIA é melhor do que um ARIA ruim - isso significa que ter os atributos aria errados no código pode criar uma experiência realmente confusa para os usuários com tecnologia assistiva. Além disso, ao usar funções, por exemplo, certifique-se de implementar todas as funcionalidades esperadas dessa função - é frustrante se um leitor de tela disser que o elemento é um botão, mas a funcionalidade do teclado não estiver implementada.

Portanto, quero enfatizar isso: adicionar ARIA adiciona apenas informações, não a funcionalidade. Ao usar atributos aria, certifique-se de implementar todas as funcionalidades esperadas!

Porque você deve usar HTML Semantico

As tags HTML que usamos devem descrever e transmitir o significado do conteúdo subjacente. Isso é útil de várias maneiras, mas as três coisas mais importantes são 1) tornar o site acessível, 2) ajudar com o SEO e 3) tornar o código mais fácil de ler e entender.

Accessibilidade

O primeiro ponto, tornar o site acessível, deve ser o objetivo de todo desenvolvedor front-end. Imagino que ninguém queira excluir nenhum usuário, certo? Tornar o site totalmente acessível a diferentes tipos de usuários exige muito trabalho - e tempo. Usar elementos semânticos (nativos) ajuda você, já que você não precisa implementar cada interação sozinho, já que as tags semânticas fornecem a maior parte da funcionalidade necessária.

SEO

A semântica também ajuda no SEO. Os mecanismos de pesquisa rastreiam os sites e podem "ver" apenas o contexto textual e o DOM, e com isso indexam o conteúdo que encontram. Isso significa que tudo o que está em formato textual conta. Por exemplo, dar às imagens textos alternativos descritivos, usar cabeçalhos semânticos e assim por diante, ajuda a tornar seu DOM legível por crawlers, resultando em uma pontuação de SEO melhor.

Legibilidade de Código

Usar elementos semânticos também ajuda a tornar o código mais legível.

Um exemplo:

<div>
  <div>
    <div onClick="{...}">Home</div>
    <div onClick="{...}">Sobre</div>
    <div onClick="{...}">Contato</div>
  </div>
  <div><span>Blog</span></div>
</div>
<div>
  <span>Título do post</span>
  <div>
      Mussum Ipsum, cacilds vidis litro abertis. Não sou faixa preta cumpadi.
  </div>
</div>

vs.

<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/sobre">Sobre</a></li>
      <li><a href="/contato">Contato</a></li>
    </ul>
  </nav>
  <h1>Blog</h1>
</header>
<main>
  <article>
    <h2>Título do Post</h2>
    <p>
      Mussum Ipsum, cacilds vidis litro abertis. Não sou faixa preta cumpadi.
    </p>
  </article>
</main>

Qual é mais fácil de ler e entender o que está acontecendo? 😏

Encerrando

Portanto, usar HTML semântico é o que devemos fazer por vários motivos; Ajuda a construir sites acessíveis, obter melhores pontuações de SEO e tornar o código mais legível. Você pode adicionar semântica usando os elementos nativos ou com ARIA. Se você usar ARIA, certifique-se de usar os atributos aria corretos e implementar a funcionalidade necessária.

Comments powered by Talkyard.