Acessibilidade na HTML5 com WAI-ARIA Roles

Introdução

A HTML5 criou vários elementos com forte valor semântico no sentido em que eles descrevem com precisão o tipo de conteúdo neles inserido o que não acontece com elementos genéricos tal como o elemento div.

Esses novos elementos melhoram a acessibilidade devido exatamente a semântica que carregam com eles. Os elementos em questão são: header, footer, section, article, aside e nav. Usar esses elementos sem qualquer indicação adicional tal como a definição do atributo role da WAI-ARIA, que estudaremos nessa matéria, já implementa por si só uma melhoria na acessibilidade.

Contudo, há um porém: nem todos os dispositivos suportam HTML5 e em consequência não entendem o atributo role da ARIA. Convém notar que já existe um movimento no sentido de fazer com que os dispositivos sejam capazes de oferecer o suporte a ARIA. O leitor de tela JAWS suportará ARIA em breve. Pensando no futuro, os autores já podem começar a usar as funcionalidades de ARIA para os dispositivos que as suportam, ainda que parcialmente, sem causar qualquer problema para dispositivos que não a suportam.

Os valores do atributo role que eu descreverei nessa matéria são: banner, complementary, contentinfo, form, main, navigation e search. Os nomes dos valores dão uma indicação clara do seu uso, mas alguns deles têm destinações bem específicas.

O elemento <header>

Em HTML5 o elemento <header> pode ser usado mais de uma vez em uma página. Ele poderá marcar o topo (ou cabeçalho) da página como um todo, ou o topo de subseções da página, tais como aquelas marcadas pelos elementos <section>, <article> ou <aside>.

Se o elemeno <header> marca o topo da página como um todo devemos usar o valor banner para o atributo role. Somente o elemento <header> que marca o topo da página deve receber o valor banner no atributo role como mostrado a seguir.

<header role="banner">
	Conteúdos do topo do site
</header>

Havendo elementos <header> destinados a marcar cabeçalhos de elementos <article>, <section> ou <aside>o valor do atributo role, nesses casos, deve ser heading como mostrado a seguir.

<article>
  <header role="heading">
    Cabeçalho do artigo
  </header>
    Conteúdos do artigo
</article>

O valor heading pode também ser usado em tabelas.

O elemento <footer>

Em HTML5 o elemento <footer> pode ser usado mais de uma vez em uma página. Ele poderá marcar o rodapé da página como um todo, ou o rodapé de subseções da página, tais como aquelas marcadas pelos elementos <section>, <article> ou <aside>.

Se o elemeno <footer> marca o rodapé da página como um todo devemos usar o valor contentinfo para o atributo role. Somente o elemento <footer> que marca o rodapé da página deve receber o valor contentinfo no atributo role como mostrado a seguir.

<footer role="contentinfo"> 
  Conteúdo do rodapé da página
</footer>

Dependendo da natureza da informação inserida no rodapé de artigos ou outras pequenas seções da página devemos usar o valor complementary para o atributo role inserido no elemento footer nesses casos, como mostrado a seguir.

<footer role="complementary"> 
  Conteúdo informativo de um artigo
</footer>

O elemento <aside>

O elemento <aside> destina-se a marcar conteúdos complementares ao conteúdo principal da página, ou seja conteúdos não cruciais, mas suplementares. Assim o valor complementary para o atributo role é perfeito para esses casos, como mostrado a seguir.

<aside role="complementary">
  Conteúdo suplementar
</aside>

main, navigation, form e search

Vimos como é fácil definir o atributo role para um elemento e acredito não ser necessário fornecer mais exemplos. Sobre os valores main, navigation, form e search para o atributo role creio não haver dúvida sobre seu uso, pois o nome já dá uma indicação inequívoca das suas finalidades. Contudo convém ressaltar que o valor main deve ser usado uma única vez na página para indicar seu conteúdo principal normalmente tendo como container um elemento div ou section. O uso apropriado do valor main elimina a necessidade dos links do tipo “pular para conteúdo principal” tão largamente usados nos sites web.

ARIA roles não se aplica somente à HTML5

O último ponto a considerar nessa matéria é que ARIA roles se aplica a qualquer versão da HTML. Eles não dependem da HTML5 para tornar o seu site mais acessível. Mesmo que você tenha decidido não migrar para a HTML5 você pode começar a usar ARIA roles.

Compartilhe essa matéria com seus amigos