WAI-ARIA, UMA APROXIMAÇÃO

Transcrição

1 WAI-ARIA, UMA APROXIMAÇÃO Fernández Rivera, Javier Tradução: Leondeniz Candido de Freitas Versão em espanhol disponível em 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.

2 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. Estruturas mais semânticas para as zonas funcionais; 2. Melhora da navegação por meio do teclado; 3. Controles complexos (widgets) mais acessíveis; 4. 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

3 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> 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

4 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" /> 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:

5 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> 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.

6 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.

7 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 id="main"> <h2>title</h2> <p>post</p> <div id="footer"> <p id="copy"> 2009 aurea webdesign</p>

8 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.

9 7. Bibliografia Cooper, M. et al. (eds.) (2008). Accessible Rich Internet Applications Version 1.0. W3C. 6 Agosto Disponible en: Faulkner, S. (2008). WAI-ARIA Just do it. Fundamentos web Comentarios del autor sobre la conferencia disponibles en: Faulkner, S. (2009). How Can I Validate (X)HTML + ARIA?. The Paciello Group Blog, 19 Enero Disponible en: Fernández Rivera, J. (2008). Qué es la accesibilidad web?. aurea: Front-end, Estándares web y Accesibilidad. Disponible en: Fernández Rivera, J. (2008b). Manejadores de eventos lógicos. aurea: Front-end, Estándares web y Accesibilidad. Disponible en: Henry, S.L. (ed.) (2008). WAI-ARIA Overview. W3C - WAI. Disponible en: Lemon, G. (2008). Introduction to WAI ARIA. Dev.Opera, 1 Agosto Disponible en: Pappas, L.; Cooper, M.; Schwerdtfeger, R. (eds.) (2009). WAI-ARIA Best Practices. W3C, 26 Enero Disponible en: