Tableless

Busca Menu

Documentos acessíveis com WAI-ARIA em HTML5

Seja o primeiro a comentar por

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.

<header>  
    <div>Nome do Site</div>
    <nav>
        <ul>...</ul>
    </nav>
</header>
 
<section>  
 
    <h1>Título 1</h1>
 
    <div><p>Neste espaço pode ser inserido um formulário.</p></div>
 
    <article>             
            <h2>Um post do blog</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
 
    <article>
            <h2>Outro post do blog</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
 
</section> 
 
<aside>  
    <h2>Sidebar</h2>
    <ul>...</ul>
</aside>
 
<footer>Informações do footer.</footer>

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:

<header>  
    <div>Nome do Site</div>
    <nav>
        <ul>...</ul>
    </nav>
</header>
 
<section>  
 
    <h1>Título 1</h1>
 
    <div><p>Neste espaço pode ser inserido um formulário.</p></div>
 
    <article>             
            <h2>Um post do blog</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
 
    <article>
            <h2>Outro post do blog</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
 
</section> 
 
<aside>  
    <h2>Sidebar</h2>
    <ul>...</ul>
</aside>
 
<footer>Informações do footer.</footer>

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

Publicado no dia