Atributo Role - Acessibilidade Web

O atributo role vem do termo papel ou funcionalidade, esse atributo serve para dar sentido a uma determinada área ou conteúdo do site, isso ajuda muito os leitores de tela para identificar que tipo de conteúdo uma determinada área ou elemento apresenta.

Hoje o HTML5 já está implantando esse papel de semântica, mas ainda assim, para o leitor há diferença quando existe o role setado no elemento.

Como por exemplo para dizermos que um conteúdo é o header da página utilizamos o role banner, para o conteúdo principal usamos o main, para o artigo usamos o article, para o conteúdo auxiliar usamos o complementary, para o footer usamos o contentinfo.

Isso não parece familiar para você? Como vemos no exemplo abaixo, podemos utilizar esses roles setados da seguinte forma...

<header role="banner">
    <!-- Cabeçalho -->
</header>
<main role="main">
    <!-- Conteúdo principal -->
    <article role="article">
        <!-- Artigo do site -->
    </article>
    <aside role="complementary">
        <!-- Conteúdo auxiliar -->
    </aside>
</main>
<footer role="contentinfo">
    <!-- Rodapé -->
</footer>

Além das novas tags do HTML5, os roles dão uma semântica ainda maior para o conteúdo e principalmente para a acessibilidade da página.

Existem diversos roles, vou citar os principais e suas funções.

alert: Usado para mensagem importantes, alertas, ou informações em geral.

alertdialog: Usado para mensagem de diálogos, cujo o foco vá para o elemento que causou o diálogo.

application: Uma região declarada como uma aplicação web, ao contrário de um documento web.

article: Uma sessão da página que consiste uma parte separada do site, como um artigo principal.

banner: O cabeçalho da página, como logos, banner, etc...

button: Um input type button, ou algum elemento que simule um botão com a opção de clicar e acionar um evento.

checkbox: Checkboxs dos formulários.

columnheader: Uma célula que contém informações de cabeçalho para uma coluna .

complementary: Um conteúdo auxiliar que não faz parte do conteúdo principal.

contentinfo: Conteúdo do rodapé da página. Para informar dados do site, como endereço e informações.

definition: A definição de um termo ou conceito.

dialog: Uma caixa de diálogo é uma janela de aplicação que é projetada para interromper o processamento atual de um aplicativo a fim de solicitar ao usuário que digite as informações ou exigem uma resposta.

directory: Uma lista de referências a membros de um grupo , como uma tabela estática de conteúdos.

document: A região que contém informações relacionadas que é declarada como o conteúdo do documento , ao contrário de uma aplicação web.

grid: Uma grade que contém células de dados dispostos em linhas e colunas , como uma tabela.

gridcell: A célula de uma grade.

group: Um conjunto de objetos de interface de usuário que não seriam incluídos em um resumo de página ou tabela de conteúdo por uma tecnologia de apoio.

heading: Cabeçalhos para sessões, como h1, h2 etc...

img: Uma área para uma coleção de elementos que formam uma imagem.

link: Um link.

list: Um grupo de itens de lista não- interativas.

listbox: Um widget que permite ao usuário selecionar um ou mais itens de uma lista de opções.

listitem: Um item de lista sozinho, como um LI.

main: O conteúdo principal do documento.

menu: Um tipo de widget que oferece uma lista de opções para o usuário.

menubar: O menu que geralmente permanece visível e é normalmente apresentado na horizontal.

menuitem: Os itens do menu.

menuitemcheckbox: A menuitem verificável que tem três valores possíveis: verdadeiro, falso , ou mistos.

menuitemradio: Um item de menu verificável num grupo de papéis itens radios, onde apenas um dos quais pode ser selecionados.

navigation: O menu em si, onde há vários links para navegar pelo site.

option: O select dos forms.

progressbar: Uma barra de progresso para informar o andamento de uma determinada ação.

radio: Uma entrada verificável num grupo de funções de rádio , apenas um dos quais pode ser verificado.

radiogroup: Um grupo de radio buttons.

search: O local de pesquisa da página.

slider: A entrada do usuário onde o usuário seleciona um valor de dentro de um determinado intervalo.

timer: Um contador numérico que indica a quantidade de tempo decorrido desde um ponto de partida , ou o tempo restante até um ponto final .

tooltip: Um pop-up contextual que exibe uma descrição de um elemento ao passar o mouse ou o teclado.

Como falei ainda existem outros que não foram citados, mas com esses já deixa a página muito mais acessível para quem usa um leitor de tela. E acredite faz diferença.

Referência:

www.w3.org/TR/2009/WD-wai-aria-20090224
www.w3.org/1999/xhtml/vocab