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-20090224www.w3.org/1999/xhtml/vocab
