O HTML serve para apenas uma coisa: dar significado à informação. Ele faz isso marcando a informação com as famosas tags. Feito isso você passa para o CSS e o Javascript, que ficarão com as responsabilidades de formatar essa informação e manipular seu comportamento.
O ponto é que a semântica não fica apenas na hora de marcar a informação com HTML puro. Como você faz para que um usuário com deficiência visual saiba que a informação que ele procura está dentro de um collapse, e esse collapse está fechado? Como você avisa que aquele lugar onde ele está navegando é o lugar mais importante da página? Que aquele monte de links que o leitor de tela está falando é o menu principal do site?
A WAI-ARIA serve para estender o significado das interações do seu site. Quando as tags do HTML5 vieram, elas já começaram um trabalho importante de dar significado às estruturas do layout. Você consegue marcar agora o que é um menu de navegação, uma sidebar, um header, um footer etc. Esse trabalho é muito importante por que ajuda a definir a importância dos elementos que cada elemento contém.
A semântica que as Microdatas trazem também são uma maneira de estender o significado do conteúdo. Conteúdo este que pode levar informações importantes, mas que passam despercebidos pelos robôs de busca e outros meios de acesso.
A WAI-ARIA vai ajudar muito em aplicações onde a informação é dividida em várias porções na tela em diversos elementos que precisam de interação para que a informação seja visualizada, como um clique, fazendo com que a acessibilidade seja prejudicada e o usuário não consiga acessar todas as partes desse layout de maneira linear.
Roles, states e properties
A WAI-ARIA é divide a semântica em duas partes: Roles, que define que tipo de elemento o usuário está interagindo e States/Properties que são suportadas pelas Roles, que definem o estado daquele elemento.
Com a Role você fala que determinado elemento é uma collapse, com o States/Properties você diz se esse collapse está aberto ou fechado.
Isso tudo você vai definir direto no elemento, via atributos. Coisa simples.
Roles
São 4 tipos de roles. Cada tipo de role é responsável por um determinado gênero de elemento.
- Abstract para definição de conceitos gerais. Não devemos usar para marcar conteúdo. Confesso que ainda estou tentando entender esse tipo de Role. “Conceitos abstratos” é algo muito abstrato para eu entender. 🙂
- Widgets para marcar elementos de interface soltos, como caixas de alerta, botões, checkbox, links, tabs etc.
- Document Structure para definir estruturas de organização da página. Estruturas que não são interativas como o header, footer, sidebar, main, essas coisas.
- Landmarks para regiões de página que são pontos importantes para onde o usuário navegaria, por exemplo: buscas, conteúdo principal, sidebar, formulários etc…
Não dá para mostrar aqui todas as roles que existem. São muitas. Para ver toda a lista, vá direto no site do W3C. Lá você vai encontrar todas as categorizações das roles. Aqui vou dar alguns exemplos simples de cada tipo.
Role Document Structure
As roles dessa categoria servem para indicar que aquele elemento faz parte da estrutura do layout. Veja um exemplo bem básico:
Claro, da forma escrita acima, fica muito redundante. Mas suponha que você esteja usando outro elemento para envolver o texto do artigo/post/conteúdo do seu site:
Ou se você for fazer um menu:
Ou uma sidebar ou algum elemento que complementa a informação da página:
Role Widget
Tabs é um elemento muito comum nos websites. Ajuda bastante a organização de conteúdos. Mas pode ser um parto para quem usa leitores de tela e está tentando navegar no site. Um código comum de tabs seria este:
Agora, aplicando a WAI-ARIA, fica assim:
Role Landmarks
As landmarks servem para conduzir a navegação do usuário. Com as roles de landmarks você vai marcar áreas na página importantes para que o usuário encontre os blocos de informações mais importantes. Veja um exemplo:
Para um bloco que contém links para navegação:
Ou para o bloco principal da página:
Eu sei, você deve estar se perguntando: “Poxa, mas as novas tags do HTML5 já não fazem este trabalho?”, aí eu respondo: “Sim, fazem!”.
Mas pode ser que você precisou marcar áreas da página sem usar as tags do HTML5. Nesse caso você tem toda a liberdade de marcar qualquer elemento do HTML essas roles.
Mesmo assim, existem algumas roles de landmarks que não tem tags relativas no HTML. Veja algumas:
role=”banner” Uma região que contém uma imagem principal ou um título de destaque que introduz a página. Pode ser aplicado também em áreas onde por exemplo você coloca logos de outras empresas, banires de publicidade e etc.
role=”complementary” para marcar uma seção do documento que agrega mais informações ao conteúdo principal da página. Uma sidebar, um footer, blocos de navegação relacionada e etc podem ser marcadas com essa role.
role=”content info” usado para marcar dados que indicam mais informações sobre o site. Como por exemplo notas de rodapé, informações de copyright, links para termos de uso e etc.
Portanto, mesmo que alguns elementos fiquem redundantes, é interessante você saber que a WAI-ARIA precisa ser genérica para dar flexibilidade para os devs colocarem esse tipo de informação em qualquer tipo de elemento. Saiba também que grande parte dos leitores de tela não conhecem as tags do HTML5 e dão ênfase para as WAI-ARIA em vez das novas tags.
Estados e Propriedades
Aqui você marca os estados ou as propriedades de cada elemento. É muito simples também. Por exemplo, suponha que você tenha um collapse com o código abaixo:
Quando o collapse abre, o código pode ficar assim:
Note que o atributo aria-expanded="true" indica que o collapse está aberto. Quando ele está fechado, basta mudarmos o valor para aria-expanded="false"
Há também o caso de algum elemento que controle uma modal ou tenha um submenu. Veja como é simples:
Note o atributo aria-haspopup="true" que indica que aquele LI controla um submenu.
Ou, suponha que você tenha um botão de enviar. Essa ação precisa de uma descrição explicativa. Como o exemplo abaixo:
O atributo aria-describeby="id-do-elemento-descricao" indica qual elemento está descrevendo aquela ação.
Outro exemplo muito interessante:
Eu sei que é chato customizar essas coisas, mas às vezes é necessário. Se tiver que fazê-lo, faça do jeito certo. Assim:
Observações importantes
Existem algumas restrições e observações importantes que você precisa estar ciente. Alguns devs acham que é só sair colocando os atributos do WAI-ARIA que tudo passa a fiar semântico, o que é mentira.
Prefira sempre usar os elementos corretos
Eu sei que WAI-ARIA é muito, muito bom. Mas não prefira usá-las ao invés de usar os elementos padrão do HTML. Eles trazem mais semântica do que elementos neutros usando WAI-ARIA.
Nunca faça isso:
Prefira fazer assim:
Sempre a semântica natural do HTML é a mais indicada e sempre prevalece.
Interação com o teclado
Todas as interações com WAI-ARIA devem ser usadas via teclado.
Se você cria um widget que o usuário pode clicar, fazer drag and drop, slide, scroll etc, o usuário deve também interagir com o widget e performar essa interação com uma ação equivalente usando o teclado.
Todos os “widgets” devem responder aos comandos e combinações padrão de teclas dos sistemas operacionais. Por exemplo, se você desenha um botão com uma tag span e coloca um role="button", este elemento deve trabalhar como um botão, ou seja, se o usuário der foco a este elemento e apertar ENTER, o botão deve agir.
Inserindo atributos do WAI-ARIA via script
Prefira colocar estes atributos via Javascript. Não há problema algum fazer dessa forma.
Sugiro até que você faça isso integrando com as respectivas funções. Por exemplo: se há uma função que fazem as tabs funcionarem, coloque as roles correspondentes às tabs nesta função.
Por outro lado, se você sabe que o seu público usa Javascript desabilitado (o que é muito, muito difícil), prefira colocar diretamente no código HTML do elemento. Assim você garante que o WAI-ARIA vai funcionar mesmo que o usuário desabilite o JS.
Apresentação
Fiz uma apresentação na Conferência do W3C este ano falando sobre esse assunto. Veja ela aqui:
WAI-ARIA – Interações acessíveis na web de Diego Eis
Para ler mais:
Veja vários exemplos no site OpenAjax.
Aqui tem a documentação oficial do W3C.
Mais de WAI-ARIA no MDN da Mozilla.
Usando WAI-ARIA Landmarks.