As aplicações Web complexas tornam-se inacessíveis a partir do momento em que as tecnologias de apoio perdem a capacidade de determinar as diversas componentes semânticas de um documento ou a partir do momento em que o utilizador deixa de ser capaz de navegar por todas as suas componentes. Segundo a WAI-ARIA, a semântica pode ser determinada pelas funções (roles) e pelos estados (states) e propriedades (properties) suportados por estas.

Na edição é assim necessário associar elementos ao documento e através de atributos WAI-ARIA (aria-*) definir a função e os estados e propriedades apropriados.

Em HTML podemos definir os diversos elementos em 2 grupos: (a) elementos semânticos ou com uma função originalmente definida; (b) elementos genéricos, sem função original atribuída.

Os elementos em HTML têm um signficado genético - semântica

Por exemplo, o elemento <p> representa, ou tem como função atribuída, marcar texto tornando-o num parágrafo. O elemento <abbr> é usado para marcar uma abreviatura ou um acrónimo - em HTML5 o acrónimo ou a abreviatura são marcados pelo elemento <abbr>.

Os elementos genéricos do HTML

Em HTML há 2 elementos genéricos, ou seja que não atribuem originalmente um significado ao texto que estão a marcar. São eles: o elemento <div> e o elemento <span>. O primeiro é um elemento bloco e o segundo é um elemento linha.

Os elementos em HTmL têm um ciclo de vida

A cada nova versão de HTML surgem novos elementos e desaparecem outros quantos. Estes últimos são vulgarmente designados por elementos obsoletos - é assim que, por exemplo, o validador de HTML do W3C os trata. No HTML5, o elemento <acronym> foi um dos que desapareceu tornando-se obsoleto. Geralmente, quando um elemento se torna obsoleto é porque existem outras alternativas. No caso do HTML5 passou-se a usar o elemento <abbr> para marcar quer as abreviaturas quer os acrónimos. Pelo menos para a língua portuguesa esta opção é bastante discutível mas os defensores de tal modificação também argumentaram que a marcação de acrónimos na Web é bastante residual, o que não deixa de não ser verdade.

A função do ARIA - Accessible Rich Internet Applications

Como pode, por exemplo, uma pessoa cega distinguir num documento que um determinado texto é um título ou um parágrafo? Será que uma pessoa cega consegue identificar os títulos existentes numa página e ler apenas esses títulos? Sim, uma pessoa cega consegue fazer isso, ou melhor os leitores de ecrã, tecnologia de apoio que uma pessoa cega utiliza para ler páginas Web, conseguem fazer isso. Mas há um pressuposto prévio: para que tal aconteça, é necessário que o texto esteja marcado com os elementos corretos.

Há muito que o HTML define funções prévias para os seus elementos. É o caso de elementos como texto que configura um parágrafo, o qual deve ser marcado com o elemento <p> ou o título principal de uma página com <h1>. Mas, com a velocidade com que hoje em dia as interfaces Web evoluem, é difícil acompanhar toda a diversidade de elementos que os designers criam. O ARIA responde, em grande medida, à necessidade de dotar de significado programático a diversidade de objetos existentes nas interfaces das aplicações - Rich Interface.

O Quadro de Referência que constitui o ARIA visa colmatar as insuficiências da linguagem de marcação de hipertexto que estamos a usar para lidar com os objetos de uma interface: semântica e alteração dinâmica do seu estado. Para o efeito, o ARIA permite alterar ou definir a função ou semântica (role), o estado (state) e as caraterísticas (properties) do objeto.

Por exemplo, podemos transformar um parágrafo num título de nível 1. Assim:

<p role="heading" aria-level="1">

ARIA e evolução das linguagens de marcação

O ARIA existe para “tapar buracos” não cobertos pela linguagem de marcação. Por exemplo, o atributo ARIA role="navigation", em HTML5 foi colmatado pelo elemento nativo <nav>. Por isso, em HTML5 não precisamos de colocar <nav role="navigation"> para definir um menu, ou <header role="banner"> para definir o topo da página (geralmente designada por “faixa”) - basta o elemento nativo <header>.

ARIA e role

Todo o elemento HTML tem uma função ou papel (role) definida, o que significa que tem um conjunto de caraterísticas, propriedades e métodos de transmitir informação para e do utilizador. No essencial o role define o que o elemento é. Os leitores de ecrã e outras tecnologias de apoio necessitam de saber qual é o papel de cada elemento na página web para serem capazes de interagir com eles de forma inteligente e comunicarem ao utilizador a sua função.

aria-label

O atributo aria-label contém o texto que etiqueta o elemento. Tal como sucede com todos os atributos aria, ele é completamente invisível a quem não faz uso de tecnologias de apoio para aceder à informação em páginas Web.

Note que ele chega mesmo a substituir por completo o texto do elemento. Por exemplo, em:

<a href="http://www.fct.pt" aria-label="Fundação para a Ciência e a Tecnologia">FCT</a>

o texto que vai ser exposto ás tecnologias de apoio (e.g. leitores de ecrã) será: Fundação para a Ciência e a Tecnologia. Isto apesar do texto da hiperligação ser FCT. Ou seja, o atributo aria-label substitui por completo o texto do elemento; não surge como complemento do texto do elemento.

O atributo aria-label é útil por exemplo na marcação de situações como:

A função do campo de edição apenas é determinável pelo contexto. Só quando se observa o campo de edição e o botão “pesquisar” é que se depreende que estamos perante o campo de edição que permite efetuar pesquisas no sítio Web. Para tornar tudo isto mais claro e imediatamente evidente a adição do atributo aria-label permite dotar o campo de edição de um texto esclarecedor da sua função. __De notar que o texto do aria-label apenas é apresentado a quem utiliza tecnologias de apoio - ele é invisível a um utilizador que faça uso da visão e do ecrã do dispositivo para aceder à informação.

O código que produz o campo de pesquisa anterior é:

<input role="search" aria-label="Pesquisa no sítio Web" name="search">
<input type="submit" value="pesquisar">

Uma outra situação em que o atributo aria-label é muito útil é na legendagem das landmarks (técnica também da esfera do ARIA). Por exemplo, se numa página tivermos diferentes menus é útil etiquetar cada um deles com texto que os permita identificar facilmente:

<nav aria-label="Menu principal da Unidade ACESSO">
  <ul>
    <li><a href="/">Início</a></li>
    (...)
    <li>< href="/contatos/">Contatos</a></li>
  </ul>
</nav>

aria-labelledby

Tal como o atributo aria-label, também o aria-labelledby não deve ser usado com o propósito de fornecer informação complementar à existente no texto do elemento. Se o agente de utilizador se comportar de acordo com as especificações, o texto constante deste atributo vai substituir por completo o texto que faz parte do elemento. Se pretende disponibilizar informação complementar ao texto existente no elemento use o atributo aria-describedby.

O resultado:

Lista de validadores

Encontra abaixo uma lista de 3 validadores que deve usar quando proceder a avaliações automáticas de sítios Web. Os dados recolhidos e a forma de apresentação dos resultados é diferente em qualquer um deles. Lembre-se que existe sempre uma razão lógica e objetiva para que um dado validador produza um determinado resultado. Eles nunca se enganam e raramnte têm dúvidas!

é produzido pelo código:

<h2 id="validadores">Lista de validadores</h2>
<p>Encontra abaixo uma lista de 3 validadores que deve usar quando proceder a avaliações automáticas de sítios Web. Os dados recolhidos e a forma de apresentação dos resultados é diferente em qualquer um deles. Lembre-se que existe sempre uma razão lógica e objetiva para que um dado validador produza um determinado resultado. Eles nunca se enganam e raramnte têm dúvidas!</p>
<nav aria-labelledby="validadores">
  <ul>
    <li><a href="http://www.acessibilidade.gov.pt/accessmonitor/">AccessMonitor</a></li>
    <li><a href="http://wave.webaim.org">Wave</a></li>
    <li><a href="http://fae20.cita.illinois.edu/">FAE</a></li>
  </ul>
</nav>

role=”presentation”

A função presentation usa-se sempre que se pretende tornar o elemento presente na interface um mero elemento de estilo - o mesmo é dizer decorativo.

Por exemplo:

<img src="spacer.gif" alt="" />

será igual a:

<img src="spacer.gif" role="presentation" />

Landmarks

Referências: