Voltar para a edição atual
Todos@web - Prêmio Nacional de Acessibilidade na Web

2ª edição

aria-check

Categoria:

Aplicativos/Tecnologias assistivas

URL para avaliação:

URL da ferramenta: https://github.com/watinha/aria-check/
Para instalar a ferramenta é necessário arrastar o arquivo disponível em https://github.com/watinha/aria-check/blob/master/aria-check.xpi dentro do seu navegador Firefox.

Descrição do projeto:

Com a popularização da Web 2.0 e RIA - Rich Internet Applications, as aplicações web cada vez mais utilizam-se da linguagem JavaScript, para implementar mais recursos de interação mais sofisticados e complexos na plataforma da Web, visando atrair os usuários com experiências que agradem e atendam suas expectativas. Esses recursos que conferem às aplicações de Internet o qualitativo de serem ``ricas'' utilizam-se de padrões abertos de Internet que caracterizam a arquitetura Ajax. Uma vez que esses recursos, muitas vezes, realizam a alteração dinâmica da estrutura DOM - Document Object Model e fornecem feedback visual da mudança e atualização realizada na interface, usuários que interagem com a Web por meio de Tecnologias Assistivas, como leitores de tela, não são capazes de identificar e interagir corretamente com esses componentes de interface. Assim, a WAI - Web Accessibility Initiative propôs a especificação ARIA - Accessible Rich Internet Application s que determina um conjunto de propriedades que atribuem semântica aos elementos de um componente de interface (widget), permitindo que as Tecnologias Assistiva identifiquem previamente o comportamento desse componente de interface e informem o usuário sobre as alterações que possam ser realizadas na estrutura DOM.

No entanto, não há garantias de que os requisitos dessa especificação estejam implementados para todas as aplicações web disponíveis, principalmente as aplicações ricas de Internet. Nesse contexto, insere-se a ferramenta aria-check que tem como objetivo avaliar automaticamente os requisitos de acessibilidade da especificação ARIA.

A ferramenta aria-check implementa uma abordagem utilizando Testes de Aceitação com base no Comportamento (Behaviour Based Acceptance Tests) para avaliar a acessibilidade no comportamento dinâmico de uma RIA.

Os Testes de Aceitação constituem uma das estratégias de teste utilizadas em um processo de Integração Contínua e são definidos como um teste formal conduzido para determinar se um sistema satisfaz ou não os critérios de aceitação e permitir que os usuários determinem se o sistema é aceitável ou não. Os Testes de Aceitação do Usuário operam na camada mais alta de uma aplicação: na interface do usuário. E, dessa forma, considera a perspectiva do usuário para validar a qualidade da aplicação. A utilização de Testes de Aceitação do Usuário é realizada na última etapa do processo de desenvolvimento de um software, e uma vez que os resultados do teste atingem o critério de aceitação, o software pode ser liberado para uso operacional. A estratégia comportamental (Behaviour Based Acceptance Tests) de Testes de Aceitação do Usuário que examina o comportamento externo do sistema (Leung e Wong, 1997). Nessa estratégia, os casos de teste refletem os requisitos dos usuários na forma de e stórias de usuários (User Stories) (Araújo et al., 2007). As técnicas para encontrar erros têm como base asserções e verificações na interface externa do sistema, dentro de uma simulação que representa o contexto real de interação quando o software estiver em produção.

A ferramenta aria-check inclui um conjunto de casos de testes que não são específicos de domínio e, portanto, podem ser reutilizados em diferentes aplicações web. Essa abordagem também não exige que os desenvolvedores implementem os casos de teste uma vez que a ferramenta já inclui um conjunto de casos de teste que podem ser aplicados a qualquer aplicação web. No entanto, esse conjunto de casos de teste avaliam apenas o comportamento acessível de widgets RIA, como tabpanels , tooltips , alert, entre outras. E, uma vez que as widgets RIA possuem um modelo pré-estabelecido de interação (definido na especificação ARIA), torna-se possível gerar um único conjunto de casos de teste para cada widget, e esse conjunto de casos de teste pode ser aplicado a qualquer aplicação web que contenha essa widget.

Os casos de Teste de Aceitação do Usuário da ferramenta aria-check foram elaborados seguindo uma implementação de referência de widgets desenvolvidas em conformidade com a especificação ARIA (como por exemplo, utilizando as widgets disponíveis no website da iCITA - Illinois Center for Information Technology and Web Accessibility).

A ferramenta aria-check foi implementada utilizando o Mozilla Addon-SDK , como um addon do navegador Mozilla Firefox para executar o conjunto de Testes de Aceitação em qualquer página web que seja carregada no navegador. Também foi utilizado o framework Jasmine de Desenvolvimento Orientado a Comportamento (BDD - Behavior-Driven Development) para elaborar os casos de Teste de Aceitação do Usuário. O Addon-SDK da Mozilla permite a inserção dos casos de teste da ferramenta aria-check, escritos no framework Jasmine, em qualquer aplicação disponível na Web. A ferramenta até o presente momento é capaz apenas de avaliar a conformidade com a especificação ARIA em widgets tabpanel (Painéis de Abas). Como implementação de referência da widget tabpanel foi utilizada a implementação exemplo disponível no website da iCITA.

Quando uma página web é carregada no navegador Firefox com o addon aria-check instalado, um botão rotulado aria-check torna-se visível na barra de addons do firefox (localizada na parte inferior do navegador). Quando esse botão é pressionado, o addon aria-check realiza um conjunto inicial de verificações nos elementos HTML de uma página web e executa casos de teste de aceitação para avaliar se as widgets tabpanel apresentadas foram desenvolvidas em conformidade com os requisitos da especificação ARIA.

Widgets tabpanel são implementações em linguagem JavaScript do padrão de projeto de interação de “Abas”, definido por Welie13 . As Abas são freqüentemente utilizadas para navegação por diferentes seções de uma aplicação. O padrão de projeto considera o uso de uma linha horizontal de elementos que contém diferentes rótulos de seções, que representam as abas. Cada aba é associada a um painel que contém outros elementos que correspondem a uma determinada seção ou aba. Existe apenas uma aba ativa em um componente de interface de abas, e essa aba ativa é destacada e visualmente conectada com o painel que a representa. Apenas o painel associado com a aba ativa é visível aos usuários. Todos os elementos de aba que não estão ativos podem ser ativados quando forem clicados.

Na ferramenta aria-check, foi utilizada como implementação de referência a widget tabpanel disponível no website da iCITA, para gerar os casos de Teste de Aceitação. Essa implementação de referência apresenta um modelo de interação que permite que os usuários naveguem pelas abas utilizando interações de teclado apenas. E também apresenta marcações dos atributos role, state e property da especificação ARIA no código HTML, para disponibilizar informações semânticas necessárias para usuários com deficiência visual interagirem com a widget utilizando uma tecnologia assistiva.

A aba ativa da widget tabpanel é acessível por meio de navegação por foco (utilizando o atributo TabIndex do HTML). Quando a aba ativa recebe foco, o usuário pode escutar (por meio da tecnologia assistiva) que ele está interagindo com uma widget tabpanel e é informado de quantos elementos de aba estão disponíveis na widget. O usuário pode então mudar a aba que encontra-se ativa utilizando as teclas de seta para baixo e direita para mover o cursor de aba ativa para o próximo elemento de aba, ou utilizar as teclas de seta para cima e esquerda para mover o cursor de aba ativa para o elemento de aba anterior. Quando o usuário selecionar o elemento de aba que ele deseja interagir, o painel associado a aquele elemento de aba é apresentado e o usuário pode interagir com o seu conteúdo.

Quando qualquer elemento de aba está ativo e tem o foco da aplicação web, o usuário pode pressionar as teclas control e home ao mesmo tempo (CTRL + HOME) para mover o cursor das abas e o foco do navegador web para o primeiro elemento de aba que é apresentado na widget, ou pressionar as teclas control e end ao mesmo tempo (CTRL + END) para mover o cursor de abas e o foco do navegador para o último elemento de aba apresentado na widget. Se o foco do navegador web estiver em qualquer painel, que seja associado a um elemento de aba específico, o usuário pode pressionar as teclas control e seta para cima ao mesmo tempo (CTRL + UP ARROW) para mover o foco do navegador de volta para o elemento de aba que é associado ao painel ativo no momento. Adicionalmente, se o foco do navegador web estiver dentro de um painel, o usuário pode mover o cursor de aba ativa e o foco do navegador para o próximo elemento de aba ou para a aba anterior, utilizando as teclas control e page up/down (CTRL + PAGEUP para mover o cursor de aba ativa e o foco para a aba anterior e CTRL + PAGEDOWN para mover o foco para a próxima aba).

A ferramenta aria-check utiliza esse modelo de interação como implementação de referência para a widget tabpanel. O objetivo da ferramenta é avaliar se outras instâncias da widget tabpanel implementam o mesmo modelo de interação da widget tabpanel disponível no website da iCITA e que foi desenvolvido em conformidade com a especificação ARIA.

URL da ferramenta: https://github.com/watinha/aria-check/ Para instalar a ferramenta é necessário arrastar o arquivo disponível em https://github.com/watinha/aria-check/blob/master/aria-check.xpi dentro do seu navegador Firefox.

Retornar a página de finalistas