ARIA Roles

As especificações ARIA introduziram o atributo role que permite definir o papel que alguns elementos desempenham na página. Por exemplo, permite definir o que faz um determinado widget (ex: um slider), ou definir a estrutura de um elemento numa página (ex: a zona da navegação principal ou a pesquisa).

O problema é que no HTML, cada elemento já tem um papel pré-definido, e apesar de haver elementos cuja semântica é acessível à partida (ex: um cabeçalho é o título de um conteúdo) há outros elementos cujo papel na página não corresponde àquilo que se pode fazer com eles usando JavaScript, como por exemplo usar uma imagem como controlo de um slider. Neste caso, o papel da imagem (elemento <img>) terá de deixar de ser simplesmente uma imagem e passar a comportar-se como o controlador de um slider.

É aqui que entra o atributo role que permite dar um outro significado aos elementos HTML em que é aplicado.

Landmark roles

O atributo role pode ser usado em qualquer elemento de HTML. Pode também ser usado para definir a estrutura do elemento na página, ou para definir um funcionamento.

A forma mais simples de usar o role é definindo áreas no site que identifiquem determinado tipo de secções. São os chamados "landmark roles" e servem para, por exemplo, identificar as zonas da navegação, da pesquisa ou do conteúdo principal, entre outras.

<div id="header" role="banner">...

<div id="menu" role="navigation">...

<form id="pesquisa" role="search">...

<div id="conteudos" role="main">...

Em HTML5, alguns elementos não precisam que lhes seja definido um role específico, pois a própria tag já tem essa informação. No entanto, não há problema nenhum em adicionar o atributo criando redundância:

<!-- Algumas tags de HTML5 já incluem a informação semântica do "role" -->
	
<header> = <header role="banner">...

<nav> = <nav role="navigation">...

Lista completa de landmark roles

Roles de estrutura do documento

Muito parecidos com os "landmark roles" existem ainda os "roles" de estrutura do documento. Estes descrevem a estrutura de organização da informação na página, como por exemplo os artigos, listagens, imagens, etc. A maior parte das tags de HTML5 já incluem esta informação, mas podem ser úteis em determinadas situações.

<div id="artigo" role="article"> = <article>...

<ul role="list"> = <ul>...

Lista completa de roles de estrutura

Widget roles

Finalmente, existem os widget roles, que dão significado a ações que podem ser executadas pelos elementos de HTML aos quais são atribuídos esses "roles". Por exemplo, permite identificar mensagens de alerta, janelas modais, barras de progresso, etc...

Alguns exemplos:

<!-- Mensagem de erro/aviso/sucesso -->
<div class="erro" role="alert">Conteúdo da mensagem</div>

<!-- Janela modal -->
<div class="modal" role="dialog"> ... </div>

<!-- Janela modal com mensagem de aviso/erro -->
<div class="modal" role="alertdialog"> ... </div>

<!-- Tooltip -->
<div class="tooltip" role="tooltip"> ... </div>

Lista completa de widget roles

ARIA States & Properties

Alguns "roles" necessitam de informação adicional para se comportarem corretamente conforme o papel que lhes damos.

Por exemplo, no caso de uma imagem ser usada como controlo de um slider, podemos adicionar o atributo role="slider" para indicar que o comportamento deste elemento passa a ser um slider. Mas para que a imagem se possa comportar verdadeiramente como um slider, temos de adicionar algumas propriedades adicionais como o valor mínimo, valor máximo, e o valor e nome que estão selecionados por omissão:

<!-- Usar uma imagem como um slider para escolher um dia da semana -->
<img src="..." 
	role="slider" 
	aria-valuemin="1" 
	aria-valuemax="7" 
	aria-valuenow="1" 
	aria-valuetext="segunda-feira" 
/>

Outro exemplo será o de uma barra de progresso, em que além de indicarmos que um determinado elemento se deve comportar como uma barra de progresso, temos também de lhe adicionar as propriedades que permitem que esse elemento se possa comportar como o pretendido:

<!-- Barra de progresso a 50% -->
<div class="progressbar" 
	role="progressbar" 
	aria-valuemin="0" 
	aria-valuemax="100%" 
	aria-valuenow="50%" 
/>

Cada "role" pode ter várias propriedades diferentes. Recomendamos a consulta detalhada de cada um para perceber quais as propriedades obrigatórias e as opcionais que se podem usar. Lista completa de todos os roles

Atributos aria-*

A inclusão de propriedades nos elementos de HTML é sempre feita através de atributos aria-. Isto permite adicionar contexto e semântica a todos os elementos de HTML, mesmo sem lhes definir um "role". Por exemplo, podemos usar estes atributos para definir os campos de preenchimento obrigatório de um formulário; as zonas que permitem fazer "drag&drop"; ou se estamos a ver uma lista com itens expandidos ou colapsados; entre outros.

Alguns exemplos de aplicação:

<!-- Campo de preenchimento obrigatório -->
<form> 
	<label for="email">Endereço de E-Mail</label>
	<input id="email" type="email" aria-required="true" required /> 
</form>

<!-- Tabs em que cada link no topo abre uma tab de conteúdos em baixo -->
<ul class=”tablist” role=”tablist”> 
	<li id=”tab1″ class=”tab” aria-controls=”panel1″ role=”tab”>Frutas</li>
	<li id=”tab2″ class=”tab” aria-controls=”panel2″ role=”tab”>Vegetais</li>
</ul>

<div id=”panel1″ aria-labelledby=”tab1″ role=”tabpanel”>
	<h3>Frutas</h3>
	<ul>
		<li>Maça</li>
		<li>Laranja</li>
		<li>Banana</li>
	</ul>
</div>

<div id=”panel2″ aria-labelledby=”tab2″ role=”tabpanel”>
	<h3>Vegetais</h3>
	<ul>
		<li>Batata</li>
		<li>Cenoura</li>
		<li>Cebola</li>
	</ul>
</div>