O atributo role é um atributo criado para dar mais semântica aos elementos de documentos baseados em marcação, como o HTML, além de oferecer mais acessibilidade. A partir de Março de 2013, este atributo passou a ser um recurso recomendado para uso pela W3C. Portanto, vamos entender melhor o que ele é, em que contexto mais amplo ele está situado e como usá-lo na prática.
O que é o atributo role?
"Role" é uma palavra em inglês, que em português significa "papel". Não o material papel, onde podemos escrever, mas o papel com sentido de cargo/função desempenhado. Ou seja, é um atributo que é colocado nos elementos de uma linguagem de marcação para indicar qual é o papel daquele elemento em algum contexto.
É fácil compreender o que é o role, mas você deve estar se perguntando: cada elemento do HTML já não possui um papel bem definido? Sim, uma tag <p> tem o papel de um parágrafo, uma tag <a> tem o papel de um link, mas existem poucas tags no HTML e elas não podem descrever todos papeis possíveis. Por exemplo, podem existir links que tem o papel de interruptor para abrir ou fechar uma caixa de mensagem. Ou seja, o link continua sendo um link, mas ele tem um papel mais bem definido do que um link para outro documento.
Ganhando mais semântica, os navegadores (aplicações que interpretam os documentos marcados) podem prover facilidades de acessibilidade para alguns elementos, já que eles passam a conhecer o papel dos elementos no documento.
Como usar o atributo role?
Para começar, o documento que pretende usar o atributo role deve declarar o namespace do XHTML (http://www.w3.org/1999/xhtml), seja o documento um HTML 4.01, HTML 5, XHTML ou XML. Isso é simples e já bastante conhecido de quem utilizava XHTML. Veja o exemplo de como incluir o namespace em um documento HTML 5:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR"> ...
No exemplo acima, foi usado um "namespace sem nome". Mas como ele pode ser declarado em documentos XML, você pode dar um namespace com um nome específico, como no exemplo abaixo:
<?xml version="1.0" encoding="UTF-8"?>
<exemplo
xmlns="http://algum.lugar.com/a/especificacao/de/exemplo"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
...
Se você ainda não conhece bem a utilização de namespaces em documentos XHTML, recomendo que leia o artigo XML Namespaces, da W3C. Se preferir algo um pouco mais simples e didático, leia o XML Namespaces pela W3Schools.
Depois de incluído o namespace, basta usar o atributo role nos elementos (tags) que deseja agregar alguma semântica extra. O valor do atributo é uma string contendo um ou mais elementos separados por espaço. Cada elemento é uma referência para um termo de um vocabulário, que é definido em RDF. Existem três formas de especificar esta referência: um termo do vocabulário padrão, um CURIE ou um IRI absoluto.
Os "termos do vocabulário padrão" são os termos definidos no namespace padrão (o namespace declarado sem nome), que normalmente é o RDF do próprio XHTML (http://www.w3.org/1999/xhtml), que citamos acima. Só de incluir o namespace do XHTML, você pode usar os termos definidos no seu vocabulário, que podem ser consultados no Vocabulário do XHTML. Este vocabulário inclui, por exemplo, o termo "alert", usado em elementos que representam mensagens importantes e, normalmente, emitidas devido algum acontecimento na aplicação. Neste caso, podemos aplicar este termo a uma <div> (ou outro elemento qualquer), como no exemplo abaixo:
<div role="alert">Usuário cadastrado com sucesso.</div>
Mas, além dos termos definidos no vocabulário padrão, podemos usar termos definidos em vocabulários carregados por outro namespace, como neste exemplo, que usa o recurso de CURIE (URI compacto):
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:educ="http://www.exemplo.org/roles/educacao#">
<head>
...
</head>
<body>
<h1>Disciplina de Álgebra</h1>
<div>
Professor(a):
<span role="educ:professor">João da Silva</span>
</div>
...
Uma última forma de especificar o valor de uma role é pelo seu IRI absoluto, como no exemplo abaixo:
<div role="http://www.w3.org/1999/xhtml/vocab/#alert">
Usuário cadastrado com sucesso
</div>
Pode ser útil passar a IRI absoluta quando se utiliza uma única vez no documento. Caso contrário, pode ser mais útil declarar o vocabulário com o namespace e usar o IRI relativo (CURIE).
Vocabulário do XHTML
O Vocabulário de termos do XHTML está dividido em três partes:
- Vocabulário de Metainformações
- Vocabulário de Papeis do XHTML
- Vocabulário de ARIA
O vocabulário de Metainformações normalmente é usado nos elementos do HEAD do documento HTML. Ele possui vários papeis que representam links para outros documentos (resources) com significados próprios, como o link para a primeira página de uma série de páginas, link para última página, link para página home, link para página de ajuda, link para página de glossário, etc. Além disso possui o papel "copyright" para indicar que o elemento contém as notas de direito de cópia.
O vocabulário de Papeis do XHTML possui alguns papeis de propósito geral para documentos de hipertexto, tais como: banner, conteúdo complementar (complementary), bloco de meta-informações do conteúdo da página (contentinfo), a definição de um termo (definition), especificação de conteúdo principal da página (main), conteúdo de navegação (navigation), nota extra (note) ou elemento reservado para buscas (search).
Alguns destes papeis já possuem elementos do próprio HTML 5 e HTML 5.1 que podem ser mais adequados para uso, como a tag <nav> para navegação, a tag <main> (do HTML 5.1) para o conteúdo principal, ou a tag <aside> para conteúdo complementar. Estes termos estão no vocabulário pois eles podem ser usados por qualquer XML, não necessariamente um HTML. No caso do XML, pode ser que não seja possível utilizar as tags do HTML em função de seu protocolo de construção.
Já o vocabulário de ARIA é usado para apontar o papel de elementos de aplicações de acessibilidade rica, como menus, caixas de mensagens, botões, comboboxes, checkboxes, radioboxes, textos de cabeçalho, abas, logs e muitos outros papeis.
3 comentários
Boa tarde meu amigo, não vi nenhum link para contato por isso escrevo aqui.
Gostaria muito de fazer uma parceria de banner com seu blog. Me adiciona no Facebook para agente conversar mais sobre isso se te interessar.
http://www.facebook.com/fellipe.vale
att,
tirou uma duvidona :D
Eu gostei muito do seu artigo. E não sabia que o atributo era recomendado pelo W3C
Postar um comentário
Nota: fique a vontade para expressar o que achou deste artigo ou do blog.
Dica: para acompanhar as respostas, acesse com uma conta do Google e marque a opção "Notifique-me".
Atenção: o blogger não permite inclusão de tags nos comentários, por isso, use algum site externo para postar seu código com dúvidas e deixe o link aqui. Exemplo: pastebin.com