Acessibilidade

29 set, 2016

Sobre WAI-ARIA: acessibilidade e semântica

Publicidade

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

O 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 si 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 característica do projeto, você pode ter utilizado a tag <a>

Então, vamos 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 onde 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 aqui tem 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 os mais importantes 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 até 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.