Banner propaganda da DevMedia - Cursos de desenvolvimento web

Acessibilidade na HTML5 com WAI-ARIA Roles

Publicado em: 01/05/2012

logo html5 Autor: Virginia DeBolt
URL do original: http://www.webteacher.ws/2012/04/16/improve-accessibility-in-html5-with-wai-aria-landmark-roles/
Título original: Improve Accessibility in HTML5 with WAI-ARIA Landmark Roles
Este artigo é uma tradução do original em inglês publicado sob licença Creative Commons

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.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo