A reestruturação do HTML para sua versão 5 propõem elementos mais semânticos. Porém, as novas tags do HTML5 não são suficientes para permitir que os documentos sejam corretamente acessíveis a softwares leitores de tela.
O comportamento dos novos elementos ainda não é reconhecido por estes programas e o conteúdo da página pode não ser interpretado de forma correta. Em alguns testes que fiz com o conhecido leitor de telas JAWS, ele para de interpretar o conteúdo da página logo após o título.
O HTML continua a possui limitações de acessibilidade e, como é cada vez mais utilização para construir aplicações web, é cada vez mais necessária a supressão destas dificuldades para adequar o reconhecimento do conteúdo à tecnologias assistivas.
Para atender esta demanda de acessibilidade e tecnologias assistivas, o grupo Web Accessibility Initiative (WAI) do W3C tem desenvolvido uma tecnologia complementar para o HTML5 chamada Accessible Rich Internet Application ou simplesmente ARIA.
O ARIA provê uma ontologia de funções, estados e propriedades que definem elementos acessíveis de interface. Ele estende a semântica do HTML provendo informações sobre widgets, estruturas e comportamentos, de modo a permitir que tecnologias assistivas reconheçam e transmitam informações adequadas.
Neste artigo abordaremos um dos conceitos básicos do ARIA: roles.
Roles
Como os leitores de tela não reconhecem novas tags do HTML5, é preciso informar qual o papel de cada tag, ou seja, qual o tipo de informação que ela estará representando. E para isso, o ARIA possui o atributo role, que possui um conjunto definido de valores para representar cada tipo de informação. O ARIA define roles abstratas (apenas para definição de conceitos gerais, não devem ser utilizadas), de widget (elementos de formulário, em sua maioria), de estrutura de documento e de landmark (áreas onde o usuário pode encontrar acesso rápido, como navegação, busca, etc.)
Exemplo
O exemplo abaixo mostra o fragmento de uma página em HTML5 utilizando uma estrutura trivial de um blog. Com este código, se a página fosse acessada por um leitor de tela, o conteúdo não seria interpretado.
Fazemos, então, a aplicação das roles nos seguintes elementos:
- header: role=”banner”. Define uma região que possui, principalmente, conteúdo de orientação do site e não conteúdo específico da página.
- nav: role=”navigation”. Define uma coleção de elementos de navegação (geralmente links) para navegar no documento ou em documentos relacionados.
- section: role=”main”. Define o conteúdo principal do documento.
- div: role=”application”. Declara uma região para uma aplicação web, geralmente contendo formulários, em oposição a um simples documento.
- article: role=”article”. Define uma seção de uma página que consiste em uma composição que forma uma parte independente do documento.
- aside: role=”complementary”. Define uma seção de suporte do documento para complementar o conteúdo principal.
- footer: role=”contentinfo”. Define uma região que contém informações sobre o documento.
Com isso, nosso exemplo fica dessa forma:
Com estas marcações, os leitores de tela poderão informar o conteúdo que o usuário irá encontrar em cada seção do código. Esta é apenas uma das aplicações do ARIA, que possui outras propriedades para permitir que elementos interativos sejam acessíveis e interoperáveis.