WAI-ARIA, UMA APROXIMAÇÃO
Fernández Rivera, Javier
Tradução: Leondeniz Candido de Freitas
Versão em espanhol disponível em
http://www.nosolousabilidad.com/articulos/wai_aria.htm
Resumo: introdução ao ARIA (Accessible Rich Internet Applications), iniciativa
do W3C que determina como tornar acessíveis os conteúdos e aplicações web,
especificamente conteúdos dinâmicos e controles avançados desenvolvidos
com Ajax e suas tecnologias relacionadas.
1 Introdução
Contexto
Para entender o ARIA é necessário lembrar o contexto onde se desenvolve
esta iniciativa: o W3C, cujo slogan reflete o atual compromisso desta
organização:
Elevar a Web ao seu máximo potencial
Isso inclui uma web acessível para todas as pessoas, tenham ou não qualquer
tipo de deficiência. Deste modo, nasce e se desenvolve no W3C a iniciativa da
acessibilidade web WAI, na qual podemos citar o PFWG, grupo de trabalho de
protocolos e formatos, que por sua vez são os autores de:
Diretrizes de acessibilidade para o conteúdo web 2.0 – WCAG 2.0;
Diretrizes de acessibilidade para XML – XAG;
Aplicações de internet enriquecidas acessíveis – ARIA;
Etc.
Definição
O W3C define ARIA como:
A forma para criar conteúdo web e aplicações web que sejam acessíveis para
as pessoas com deficiência.
Origem
Um dos problemas mais recentes da acessibilidade na Web surgiu com a
chegada do AJAX, momento em que os desenvolvedores se animaram a usar
esta tecnologia, motivados por suas possibilidades para a atualização dinâmica
do conteúdo e a criação de diferentes controles, sob medida. Tudo isso com o
fim de simular uma GUI mais parecida com à das aplicações de desktop,
obtendo como resultado aplicações web mais ricas e interativas, porém menos
acessíveis.
Imaginemos por exemplo o caso de um controle avançado como o slider. Um
leitor de telas não será capaz de dar respostas às seguintes perguntas:
Identificar o rol do elemento: o que é?
Conhecer seu estado e propriedades: como se encontra?
Capturar seu comportamento: o que faz?
As soluções suportadas pelo ARIA
ARIA responde às perguntas anteriores e outras questões, proporcionando um
marco de trabalho complementar.
1.
2.
3.
4.
Estruturas mais semânticas para as zonas funcionais;
Melhora da navegação por meio do teclado;
Controles complexos (widgets) mais acessíveis;
Acessibilidade para o conteúdo atualizado de forma dinâmica.
Para isso, o ARIA conta com:
Roles: sua mição é definir o papel que joga os elementos dentro do
documento web; <div id="slider" role="slider">
Estados e propriedades: determinam as características e os valores de
cada elemento. <div id="slider" role="slider" aria-valuenow="27">
Podemos concluir, portanto, que o ARIA não funciona como uma tecnologia
exclusiva ou restritiva, mas sim que se trata de um complemento com o qual
podemos tornar acessíveis as aplicações web enriquecidas.
Problemas
O ARIA é suportado pelos principais navegadores e tecnologias assistivas, mas
há que se destacar que na atualidade, os documentos Web que contenham o
ARIA não podem ser validados, devido à especificação HTML 4.01 e aos atuais
DTD Strict, transitional e frameset.
2. Estrutura semântica de um documento
Com ARIA podemos especificar os roles das diferentes zonas funcionais de um
documento web, tornando-os mais semânticos e acessíveis.
Por exemplo, atualmente estamos acostumados a usar um link para saltar para
o conteúdo principal (skip to contente), enquanto que o ARIA nos permite, por
meio dos Document Landmarks, criar uma estrutura mais semântica e
acessível para que, entre outras coisas, as tecnologias assistivas possam
saber onde se encontra o conteúdo principal sem precisar recorrer a um link.
Para criar uma estrutura semântica acessível com ARIA, temos apenas que
especificar os roles de cada zona funcional por meio da propriedade role.
Exemplo para indicar a zona de navegação
<div id="navigation" role="navigation">
<ul>
<li id="active"><a id="current" href="home">Inicio</a></li>
<li><a href="blog">Blog</a></li>
<li><a href="contato">Contato</a></li>
</ul>
</div>
Inclusive, podemos aproveitar o atributo Role para personalizar o estilo do
elemento mediante CSS.
div[role="navigation"] { color: blue; background-color: inherit; }
Nota: Os seletores de atributos somente são reconhecidos pelas versões atuais
dos principais navegadores.
3. Navegação pelo teclado
Por meio do teclado e pelo atributo Tabindex, podemos navegar entre os
diferentes elementos de uma mas somente alguns elementos suportam esse
atributo e são capazes de receber o foco: A, AREA, BUTTON, INPUT,
OBJECT, SELECT e TEXTAREA. Portanto, um simples elemento DIV não
pode ser acessado pelo teclado.
É exatamente aqui onde se representa ARIA:
Fazendo com que o atributo Tabindex seja suportado por todos os
elementos visíveis de uma web;
Permitindo que o valor -1, no Tabindex, o que possibilita tirar um
elemento da ordem natural de navegação e da ordem expressada pelo
índice de tabulação.
4. Acessibilidade nos controles (widgets)
HTML foi concebido para compartilhar documentos na web, não para criar
aplicações, razão pela qual não oferece controles avançados.
Um exemplo: slider widget (todo clássico)
O desenho e o desenvolvimento de um controle desse tipo pode ter o seguinte
aspecto:
<div id="slider-bg" title="level">
<div id="slider-handler">
<img src="handler.gif" />
</div>
</div>
Desenho: Usa-se o elemento DIV, uma imagem de fundo (com CSS) e
outra imagem para a barra deslizante.
Desenvolvimento: Podemos simular o comportamento usando Javascript
e manejadores de eventos lógicos mais ou menos acessíveis.
O problema da acessibilidade no slider
Uma pessoa sem nenhuma deficiência pode mover a barra deslizante
(handler.gif) pela imagem de fundo (class=”slider-bg”) e destaca-la sobre o
valor desejado, todavia uma pessoa com deficiência visual terá problemas com
a acessibilidade da imagem, não poderá mover a barra deslizante por meio do
teclado e, ademais, seu leitor de tela não será capaz de reconhecer:
1. O rol de elemento (O que é?). Para o leitor será um simples que nem se
quer pode ser acessado pelo teclado.
2. O estado e que atributos tem (Como se encontra?).
3. O comportamento (O que faz?). O leitor não saberá que há três valores
escritos na imagem de fundo (1. Fácil, 2. Normal, 3. Difícil), que foi
implementado com CSS, pelo que se citua na capa da apresentação
(sem conteúdo, sem comportamento).
Slider acessível com ARIA
<p id="slider-description">Pode usar as teclas direita/esquerda para trocar o
nível .</p>
<span id="slider-label">Nivel:</span>
<div id="slider-rail">
<button id="slider-handler" role="slider" aria-labelledby="slider-label"
aria-describedby="slider-description" aria-valuemin="1" aria-valuemax="3" ariavaluenow="2"></button>
</div>
Se encorpora um elemento slider-descrption com uma ajuda descritiva
para que possa ser comunicada pelas tecnologias assistivas;
O elemento slider-label contém a etiqueta do slider;
A imagem de fundo que serve como raio para a barra deslizante é
proporcionada por slider-raio;
Ao invés de usar uma imagem, utiliza-se um elemento button-sliderhandler, que será a barra deslizante e que realmente cumpra a função
de slider com todos os atributos ARIA incorporados.
Podemos dar vida a este slider com Javascript e refletir as mudanças sofridas
modificando o valor do atributo aria-valuenow.
5. Acessibilidade em atualizações dinâmicas de conteúdo
Outro grande problema da acessibilidade nas aplicações web enriquecidas
recai sobre a atualização dinâmica do conteúdo (ou parte dele) que se realiza
por meio de AJAX e em segundo plano.
O ARIA denomina regiões ativas aos elementos/zonas que podem apresentar
essas mudanças e conta com a propriedade aria-live, com a qual indica o valor
de imperícia (off, polite, acertive ou rude) sobre a atividade atual do usuário.
Por exemplo, suponhamos que temos um elemento TEXT INPUT com um
limite máximo de 20 caracteres. Associado a esse elemento, cituamos um
SPAN, que serve de contador para mostrar ao usuário o número restante de
caracteres que ainda pode usar, finalmente com Javascript podemos ir
subtraindo e atualizando o conteúdo desse elemento, que faz de contador.
<label for="user-name">
Nome (requerido)
<input name="user-name" id="user-name" type="text" size="20"
maxlength="20" />
<span id="count"></span>
</label>
Um usuário com deficiência visual não terá acesso à informação desse
contador, considerando que as tecnologias assistivas não refletirão a
atualização do elemento SPAN.
A solução com ARIA:
<label for="user-name">
Nome (requerido)
<input name="user-name" id="user-name" type="text" size="20"
maxlength="20" aria-required="true" />
<span id="count" aria-live="polite"></span>
</label>
Como se observa, basta especificar a propriedade aria-live=”polite” no
elemento SPAN.
Por outro lado, foi incluído aria-required=”true” para que a ajuda
assistiva possa informar ao usuário que se trata de uma entrada de texto
que não pode ficar vazia.
6. Implementando ARIA
A dificuldade de se implementar ARIA pode ser considerada proporcional ao
grau de complexidade da aplicação web, ainda que, no final, se trata sempre
de gerir roles, estados e propriedades por meio de Javascript.
Independentemente da complexidade, temos outro problema ao não poder
fazer algo tão essencial como validar os documentos web com ARIA.
O problema vem do HTML4.01 e as DTD, vez que não consideram as
especificações de ARIA. Não obstante, essa tecnologia conta com um bom
suporte por parte da indústria, as principais organizações, navegadores e
ajudas assistivas. Sua implementação tampouco apresenta efeitos negativos,
mas sim, muitos benefícios em prol da acessibilidade.
Mas o problema com o validador continua. O que podemos fazer?
Pessoalmente me inclino por inserir os estados e propriedades ARIA por meio
de Javascript em tempo de execução.
Consideremos a seguinte estrutura:
<div id="head">
<h1 id="logo">
<img src="aurea.gif" alt="title" />
<span id="tagline">description</span>
</h1>
<ul id="nav">
<li><a href="/">home</a></li>
<li><a href="/blog">blog</a></li>
<li id="active"><a id="current" href="/contact">contact</a></li>
</ul>
<form id="searchform" method="get">
<fieldset>
<legend>Search</legend>
<label for="s">
<input type="text" name="s" id="s" value="Search" />
</label>
<label for="srhsub">
<input type="image" name="srhsub" id="srhsub"
src="search.gif" value="seek" alt="seek" />
</label>
</fieldset>
</form>
</div>
<div id="main">
<h2>title</h2>
<p>post</p>
</div>
<div id="footer">
<p id="copy">©2009 aurea webdesign</p>
</div>
Inserindo ARIA com jQuery
$(document).ready(function() {
$('#logo').attr('role', 'banner');
$('#nav').attr('role', 'navigation');
$('#searchform').attr('role', 'search');
$('#main').attr('role', 'content');
$('#footer').attr('role', 'contentinfo');
$('.required').attr('aria-required', 'true');
});
Inserindo ARIA com mootools
window.addEvent('domready', function() {
$('logo').setProperty('role', 'banner');
$('nav').setProperty('role', 'navigation');
$('searchform').setProperty('role', 'search');
$('main').setProperty('role', 'content');
$('footer').setProperty('role', 'contentinfo');
$('.required').setProperty('aria-required', 'true');
});
Tomamos os elementos através de seus identificadores e inserimos a
propriedade ROLE com o valor que representa cada uma das zonas funcionais
role=”navigation”.
A última linha insere a propriedade aria-required="true" se um elemento contém
a classe required.
Ferramentas que podem ajudar com a implementação de ARIA
Firebug para Firefox – com a qual podemos observar como se incorpora
os atributos a cada elemento. <h1 id="logo" role="banner">
Acessibility Toolbar para Firefox – com aqual podemos verificar o ARIA
de nosso website e uma diversidade de parâmetros de acessibilidade;
JAWS – Leitor de telas.
7. Bibliografia
Cooper, M. et al. (eds.) (2008). Accessible Rich Internet Applications
Version 1.0. W3C. 6 Agosto 2008. Disponible en:
http://www.w3.org/TR/wai-aria/
Faulkner, S. (2008). WAI-ARIA Just do it. Fundamentos web 2008.
Comentarios del autor sobre la conferencia disponibles en:
http://aurea.es/2008/11/02/fundamentos-web-2008/#wai-aria
Faulkner, S. (2009). How Can I Validate (X)HTML + ARIA?. The Paciello
Group Blog, 19 Enero 2009. Disponible en:
http://www.paciellogroup.com/blog/?p=107
Fernández Rivera, J. (2008). ¿Qué es la accesibilidad web?. aurea:
Front-end, Estándares web y Accesibilidad. Disponible
en:http://aurea.es/2008/09/07/que-es-la-accesibilidad-web/
Fernández Rivera, J. (2008b). Manejadores de eventos lógicos. aurea:
Front-end, Estándares web y Accesibilidad. Disponible
en:http://aurea.es/2008/12/10/manejadores-de-evento-logicos/
Henry, S.L. (ed.) (2008). WAI-ARIA Overview. W3C - WAI. Disponible
en: http://www.w3.org/WAI/intro/aria
Lemon, G. (2008). Introduction to WAI ARIA. Dev.Opera, 1 Agosto 2008.
Disponible en: http://dev.opera.com/articles/view/introduction-to-wai-aria/
Pappas, L.; Cooper, M.; Schwerdtfeger, R. (eds.) (2009). WAI-ARIA Best
Practices. W3C, 26 Enero 2009. Disponible en:
http://www.w3.org/WAI/PF/aria-practices/
Download
