Imagem de código demonstrando a semântica de um logo

Sobre WAI-ARIA, acessibilidade e semântica

WAI-ARIA já é um assunto bem antigo. Porém, observo que muitas pessoas desconhecem sua existência ou não sabem como utilizar nos projetos.

Vou demonstrar que é simples, não machuca, não vai aumentar o tempo de desenvolvimento e ainda vai melhorar a semântica e consequentemente a acessibilidade do projeto.

O que é WAI-ARIA

WAI-ARIA é dividido em duas categorias: roles e states / properties.

Roles

A maioria das roles foram definidas no ARIA 1.0, e acabaram sendo adicionadas no HTML5 mais tarde.

Elas servem para dar significado (ou mais significado) aos elementos, já que nem sempre a tag HTML fornece por sí só o comportamento esperado.

Vamos ver exemplos de uso prático para você começar a usar AGORA. :)

button

Quantas vezes você já criou um link que não levava para lugar nenhum, simplesmente colocando um [href='#' e mudando o comportamento via JavaScript?

Na maioria das vezes o correto seria utilizar a tag <button>, mas por alguma limitação ou caracteristica do projeto, você pode ter utilizado a tag <a>

Então, bora dar um significado para esse botão!

<a href="#" data-modal="#modal-1" role="button">Abre o modal!</a>

logo

Antigamente era comum utilizarmos a tag <h1> e adicionar a imagem e esconder o texto via CSS.

<h1 class="logo">
  <a href="#">
    Empresa foda!
  </a>
</h1>
.logo {
  background: url
  height: 80px
  text-indent: -999em
  width: 160px
}

Pare de fazer isso o quanto antes!

A imagem do logo é uma das informações mais importantes do projeto, e pode ter certeza que o cliente espera que ela (e não um texto) esteja sempre disponível.

O WAI-ARIA nos ajuda a fornecer significado.

<a class="logo" role="logo">
  <img src="/img/logo.svg" alt="Empresa foda!">
</a>

banner

É possível ter vários <header> no projeto, então essa role ajuda a informar aonde está o header principal, geralmente o do topo.

<header class="header" role="banner">
</header>

contentinfo

Também é possível que um projeto tenha vários <footer>, com essa role podemos marcar o rodapé da página.

<footer class="footer" role="contentinfo">
</footer>

search

Ainda não temos um elemento search no HTML. Mas podemos dar uma mãozinha.

<form class="search" role="search">
  <input type="search" class="search--control" placeholder="Faça uma busca :)">
  <button class="search--btn">Buscar!</button>
</form>

dialog

Normalmente usado para elementos como modal. Que só estarão ativos após a ação do usuário.

<div class="modal" role="dialog" tabindex="-1">
</div>

Vamos falar sobre redundância

Os exemplos a seguir, são redundantes, e sempre vejo discussões sobre a utilização ou não dessas roles.

Pode acompanhar uma discussão sobre o tema no nosso fórum.

E um ótimo artigo sobre o tema aqui.

main

Essa role também deve ser única na página, normalmente utilizada em conjunto com a tag <main>.

<main class="main" role="main">
</main>
navigation

Essa role auxilia elementos de navegação.

<nav class="navbar" role="navigation">
</nav>

complementary

Sabe aqueles conteúdos e informações que não são as mais importante da página, mas são complementares, onde você geralmente usa o <aside>?

Podemos usar essa role para informar tal função.

<aside class="content__complementary" role="complementary">
</aside>

!important

Como qualquer propriedade, as roles podem ser alteradas via CSS. Você sempre devia usar classes, mas caso você tenha algum problema quanto a isso, também é possível usar assim.

<a role="logo">
  <img src="/img/logo.svg" alt="Empresa foda!">
</a>
a[role="logo"] {
  margin: 2rem
}

Existem MUITAS roles, que cobrem praticamente qualquer situação, você pode ver a lista completa aqui.

Status / Properties

Você consegue usar essas propriedades para informar se determinado elemento está escondido ou visível para o usuário, fornecer informações de texto ou mesmo, esconder elementos visuais desnecessários.

aria-hidden

<a href="#" title="Acessar o Facebook">
  Facebook
  <svg aria-hidden="true" class="icon">
    <use xlink:href="/assets/svg/icons.svg#facebook"></use>
  </svg>
</a>

No exemplo acima, o link tem um ícone com um significado apenas visual, já que a informação importante está no texto. Sendo assim, o aria-hidden="true" faz com que leitores de tela ignorem esse elemento.

aria-label

É usado para fornecer informações sobre o elemento caso o texto não esteja disponível na tela.

De novo um exemplo com ícone.

<svg aria-label="Facebook" class="icon">
  <use xlink:href="/assets/svg/icons.svg#facebook"></use>
</svg>

Ao contrário do outro exemplo, dessa vez não tínhamos um texto ao lado, tornando o ícone um elemento importante na navegação. Então ao invés de usar o aria-hidden="true", usamos o aria-label para informar o significado do ícone.

Super exemplo!

O Deivid Marques adicionou no CSS Components, um dos melhores exemplos que já vi de aria-label. Aqui é possível ver CSS e HTML trabalhando juntos para melhorar semanântica e acessibilidade.

<div class="tooltip" aria-label="Informações em tooltip"></div>
.tooltip:after
  content: attr(aria-label)

Conclusão

Acredito que na maioria dos casos, os exemplos acima serão os mais utilizados no dia a dia.

Mas tenha em mente que o assunto é extremamente extenso e existem milhares de propriedades WAI-ARIA, englobando várias situações para te ajudar a fornecer mais significado e semântica ao seu projeto.

Portanto, vou deixar alguns links que costumo acessar quando tenho dúvidas ou quero procurar alguma propriedade.