Acessibilidade
Documentos acessíveis com ARIA em HTML5
A preocupação com acessibilidade tem aumentado gradativamente a cada nova versão do HTML e CSS, em vista de atender cada vez mais os usuários que possuem alguma deficiência.
Por Talita Pagani
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
1 | role |
, que possui um conjunto definido de valores para representar cada tipo de informação. O ARIA define
1 | 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.
Nome do Site
Título 1
Neste espaço pode ser inserido um formulário.
Um post do blog
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Outro post do blog
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Fazemos, então, a aplicação das
1 | 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:
Nome do Site
Título 1
Neste espaço pode ser inserido um formulário.
Um post do blog
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Outro post do blog
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
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.
Para saber mais
- Accessible Rich Internet Applications (WAI-ARIA) 1.0
- How screen readers speak a page with HTML5 and ARIA
- Introduction to WAI ARIA
Pingback: HTML5 Blog on: Evelling Castro: Documentos acessíveis com ARIA em HTML5 | MiloRiano: Computers news, tips, guides...