Usando a Barra de Ferramentas da AIS para Acessibilidade na Web

Publicado em: 05/12/2005

Autor: Steven Faulkner
URL do original: https://www.webaim.org/techniques/articles/aistoolbar
Título original: Using the AIS Web Accessibility Toolbar
Traduzido com autorização da WebAim e do autor

Author: Steven Faulkner da Accessible Information Solutions
Data: Agosto: 2005

Barra de ferramentas para aceincbilidade na web em duas secoes (secao 1)Barra de ferramentas para aceincbilidade na web em duas secoes (secao 2)

Introdução

A Barra de Ferramenta para Acessibilidade na Web é uma extensão de distribuição gratuita para o Internet Explorer (versão 5 e superiores, para Windows) e contém uma série de funcionalidades que auxiliam na avaliação da acessibilidade de uma página web.

As funções disponíveis na Barra de Ferramentas podem ser classificadas basicamente em 3 tipos:

  1. Funções de submissão da URL da página que está sendo visualizada no navegador a uma ferramenta online de terceiro. São exemplos deste tipo de função:
    • Ferramentas > The Wave > Verificar itens de aceincbilidade
    • Ferramentas > Ferramentas Juicy Studio > Teste de legibilidade
    • Validação > Validador HTML do W3C > Validar
  2. Funções que executam transformações no conteúdo da página que está sendo vizualizada no navegador, e que servem para:
    • Identificar aspectos específicos na página (código e/ou conteúdo). São exemplos destas funções:
      • Estrutura > Itens de listas
      • Info Doc > Mostrar atributos de linguagem
    • Fornecer informações detalhadas sobre aspectos específicos da página organizados em uma apresentar tabular ou em forma de uma listagem. Ususlmente tais informações são fornecidas em uma nova janela do navegador. São exemplos destas funções:
      • Info Doc > Informação sobre metadados
      • Estrutura > Nome e Título do Frame
  3. Funções modificadoras das configurações do navegador. São exemplos destas funções:
    • Opções IE > (Des)Ativa CSS

Uso das funções de 'ferramentas online de terceiros'

A Barra de Ferramenta permite rápido e fácil acesso a muitas das ferramentas de testes e de validação de aceincbilidade disponíveis online. O procedimento para verificar uma página web usando uma destas ferramentas é bastante simples:

  1. Abra no Internet Explorer a página web a ser verificada ou testada.
  2. Escolha a ferramenta que você pretende usar acessando-a com o mouse através do menu ou usando access keys para ativar o menu, a seguir movimente-se pelo menu com uso das setas do teclado e preincone a tecla Enter para ativar a função.
  3. A Barra de Ferramentas enviará o endereço da página (URL) para a ferramenta online e os resultados poderão ser vizualizados, à sua escolha, tanto em uma nova janela como na janela atual (substituindo a página testada).

Exemplo de uso do 'Validador Online para HTML do W3C':

O validador HTML pode ser usado para testar a conformidade da página com as Recomendações para a aceincbilidade do conteúdo da Web - 1.0 (WCAG) 1.0, Ponto de verificação 3.2 Criar documentos passíveis de validação por gramáticas formais, publicadas. [Prioridade 2]

  1. Navegue até a Home Page do site Web Acceincbility Toolbar
  2. No menu Validar da Barra de Ferramenta, escolha Validador HTML do W3C > Verificar HTML [nova janela]. Este procedimento irá submeter a (URL) da página corrente ao Validador HTML do W3C.
    Figura de parte da janela do navegador mostrando o menu de navegacao da barra de ferramentas com a opcao vef rificar HTML em nova janela destacada.
  3. Será aberta uma nova janela com os resultados da validação. Neste exemplo que mostramos a página resultará como Valid XHTML 1.0 Transitional. Isto significa que ela, página, está em conformidade com o Ponto de Verificação 3.2 das WCAG 1.0.

    É frequente obter um resultado de validação negativopara o código HTML e sempre que isto ocorre é retornada uma listagem detalhada dos erros encontrados bem como explicação sobre o erro, listagem esta que é muito útil para orientar as devidas correções.

    Figura de parte da janela do navegador contendo a pagina de resultados do validador HTML do W3C

Nota importante: O acesso às ferramentas online de terceiros via a Barra de Ferramentas nem sempre poincbilita ac esso a todas as funcionalidades e capacidades da ferramenta. Verifique no web site de cada ferramenta informações a respeito disto. Os links para os web sites de todas as ferramentas online utilizadas pela Barra de Ferramentas encontrm-se na documentação da Barra de Ferramentas.

Uso das funções de transformações na página

A Barra de Ferramentas contém muitas funções que identificam e apresentam aspectos específicos da página web código e/ou conteúdo, inserindo informações na página atual ou apresentando informações sobre a página em uma nova janela. Tal funcionalidade foi projetada com a finalidade de identificar o uso, mal uso ou não uso de uma marcação particular no código HTML bem como propriedades de apresentação (CSS) que poderão afetar a acesibiliade à página.Para usar estas funções faça aincm:

  1. Navegue no Internet Explorer, até a página que você quer verificar ou testar.
  2. Escolha a ferramenta que você pretende usar acessando-a com o mouse através do menu ou usando access keys para ativar o menu, a seguir movimente-se pelo menu com uso das setas do teclado e preincone a tecla Enter para ativar a função.

Exemplo de uso da função 'Itens de listas':

A função Itens de listas pode ser utilizada para verificar se o conteúdo de uma página que é visualizado em forma de uma listagem, está códificado na marcação com uso de elementos HTML apropriados, e em conformidade com as Recomendações para a acessibilidade do conteúdo da Web - 1.0 (WCAG) 1.0, Ponto de verificação 3.6 Marcar corretamente listas e pontos de enumeração em listas.

  1. Navegue até a Home Page do site Juicy Studio
  2. Examine a página. Há algum conteúdo visualmente apresentado como uma listagem?
    Home page do site Juicy studio com parte do conteudo que se parece uma listagem devidamente destacada
  3. Verifique a codificação do conteúdo que você identificou como uma listagem ativando a função Estrutura > Itens de lista. Se houver algum elemento de lista na codificação da página (ul, ol, li, dl, dt, dl) será identificado:
    Figura de parte da janela do navegador mostrando a home page do Juicy com os elementos de lista destacados

    Ocorrendo a marcação correta das listas na página haverá a identificação destacada como msotrado e para listas marcadas de forma incorreta isto se evidenciará pela falta de destaque

  4. Quando não forem encontrados elementos de listas no código HTML da página haverá indicação da não existência através de uma caixa de alerta (alert box):
    alert box - Nao foram encontrados elementos de listas

Exemplo de uso da função 'Informação sobre metadados':

A função Informação sobre metadados pode ser utilizada para verificar a informação contida no elemento title, nos elementos meta e nso elementos link encontrados nop código HTML da página, fazendo a verificação da presença ou ausência de tais elementos bem como examinando se seus conteúdos estão em conformidade com as Recomendações para a acessibilidade do conteúdo da Web - 1.0 (WCAG) 1.0, Ponto de verificação 13.2 Fornecer metadados para acrescentar informações semânticas a páginas ou sites.

  1. Navegue até a Home page do site do W3C
  2. Ative a função Info Doc > Informação sobre metadado
    Figura de parte da janela do navegador mostrando o menu de metadados destacado
  3. Uma nova janela será aberta contendo detalhes sobre o elemento title, uma tabela detalhando o conteúdo de name, o conteúdo do atributo http-equiv dos elementos meta e detalhes sobre links encontrados no código da página. Se não forem encontradas nenhuma das instâncias citadas, isto será indicado na nova janela aberta.
    Figura de parte da janela do navegador mostrando detalhes sobre o titulo os metadados e os links encontrados na pagina

Usas das funções de configurações do navegador (Opções IE)

A função Opções IE fornece uma maneira rápida e simples de acesso a algumas configurações do navegador Internet Explorer que são úteis para testes de acessibilidade. Em alguns casos para se proceder a uma configuração nativa no navegador, é necessário proceder a intricados e sucessivos abre e fecha de janelas de diálogo e em outros casos nem mesmo é possível configurar a funcionalidade disponível na função, como ocorre com (Des)Ativa CSS que não é uma opção nativa no IE .
Nota: Ao contrário do que ocorre com outras funções da Barra de Ferramentas, as funções de Opção IE, uma vez ativadas manterão o navegador naquele estado até que sejam desativadas. Para desativar as CSS somente na página corrente use CSS > Desabilitar a função CSS.

Exemplo de uso da função (Des)Ativa CSS:

A função (Des)Ativa CSS pode ser usada para examinar visualmente como será apresentada uma página web quando renderizada sem os efeitos de apresentação das folhas de estilos em cascata. Verificar se o conteúdo é claro, legível e bem estruturado quando as CSS estão desabilitadas auxiliará na verificação de conformidade com as Recomendações para a acessibilidade do conteúdo da Web - 1.0 (WCAG) 1.0, Ponto de verificação 6.1 Organizar os documentos de tal forma que possam ser lidos sem recurso a folhas de estilo. Por exemplo, se um documento em HTML for reproduzido sem as folhas de estilo que lhe estão associadas, deve continuar a ser possível lê-lo.

  1. Navegue até a Home page do site Web AIM
    Figura de parte da janela do navegador mostrando o menu Opcoes IE com o submenu Desliga liga CSS destacado.
  2. Ative a função Opções IE > (Des)Ativar CSS , a página recarregará e será renderizada sem os efeitos de apresentação das CSS.
    Figura de parte da janela do navegador mostrando a home page do site Webaim com as CSS desativadas
  3. O suporte para CSS será desabilitado para todos os sites visualizados no Internet Explorer até que seja reativada a função (Des)Ativar CSS.
    Nota: Algumas pessoas poderão ativar inadivertidamente esta função e esquecer de desativar antes de fechar o IE. Isto fará com que o IE renderize todas as páginas web sem as CSS e também modificará a apresentação de outras janelas de diálogo (exemplo: janela de diálogo adicionar/remover programas) que usam CSS para estilizar seu conteúdo. Se você encontrar estes tipos de problemas vá em Toolbar Blog.

Leitura complementar

A Barra de Ferramentas para Acessibilidade na Web tem mais de 70 funções diferentes e para saber mais sobre ela e como ela poderá auxiliá-lo nos seus testes de acessibilidade consulte os seguintes documentos: