Funções da Barra de ferramentas do Consórcio WAT

Publicado em: 07/02/2006

Introdução

Steven Faulkner da Vision Australia Limited, em parceria com outros desenvolvedores criou uma barra de ferramentas para ser usada no Internet Explorer com a finalidade de testar, analisar e verificar conformidade de inúmeros itens das Web Standards. Trata-se de utilíssima e fácil de usar ferramenta, de apoio ao desenvolvimento de um Web Site. Fui convidado por Steven Faulkner a traduzir a ferramenta e a documentação para o português. O resultado do trabalho está publicado no site da Web Accessibility Tools Consortium e eu transcrevo nesta matéria a mesma documentação que traduzi. Ao final deste tutorial, forneço o link para fazer download da ferramenta em português. Aconselho vivamente a experimentar a ferramenta.

Índice das funções da barra

A barra em duas seções

Abaixo imagem da barra de ferramentas seccionada em duas partes

web accessibility toolbar in two sections

As funções

AIS [ctrl + alt + 0] toolbar dropdown button - Accessible Information Solutions
Função Descrição
Accessible Information Solutions (AIS) Links para informações sobre serviços prestados pela AIS
Opções da Barra de Ferramentas
  • Mostra/esconde teclas rápidas
  • Ativa/desativa a vizualização de teclas rápidas
  • Mostra/esconde ícones dos botões.- Ativa/desativa a vizualização dos ícones dos botões do menu
  • Atualizar a Barra - Downloads do mais recente arquivo de funções disponível nos servidores da AIS
  • Desinstalar - Informa como desinstalar a Barra de Ferramentas
Documentação da Barra de Ferramentas Informações sobre as funcionalidades da Barra de Ferramentas
A Barra de Ferramentas e as WCAG 1.0 Informações sobre o uso da mais adequada função da Barra (se existir uma) para testar conformidade com os Pontos de Verificação das WCAG 1.0.
Web Accessibility Tools Consortium WAT-C web site
Sobre a Barra de Ferramentas Informações sobre a versão e o desenvolvimento da Barra.
Atualizada em: yyyy-mm-dd Última data de atualização das funções da Barra. A Barra faz uma verificação automática de atualizações a cada 24 horas.

Voltar ao índice

Validadores [ctrl + alt + 1] toolbar dropdown button - Validate
FunçãoDescrição

Validador HTML do W3C

  • Validar HTML
  • Validar HTML (Nova Janela)
  • Validar HTML (Upload do arquivo)
  • Validar página com frames
Verifica o código HTML da página atual usando o Validador HTML do W3C
Nota: Validar HTML (Upload do arquivo) - ativa a abertura de uma caixa de diálogo que permite abrir um arquivo local (não hospedado em um servidor web) [exemplo: arquivo C:\exemplo.html] e enviar o código html automaticamente para o validador.

Validador CSS do W3C

  • Validar CSS
  • Validar CSS (Nova Janela)
Verifica o código CSS da página atual usando o Validador CSS do W3C

Reordenador HTML do W3C

  • Verificar/reparar HTML
  • Verificar/reparar HTML (Nova Janela)
Verifica o código HTML da página atual e oferece as opções de ver ou fazer download de uma versão do código da página devidamente ordenado, arrumado e claro, usando o Reordenador HTML

Verificador de links do W3C

  • Verificar a página atual
  • Verificar a página atual (Nova Janela)
  • Verificar páginas lincadas (Nova Janela)
Verifica âncoras (hyperlinks) em documento(s) HTML/XHTML. Útil para localizar links quebrados, etc. usando o Verificador de links do W3C

Validador HTML do WDG

  • Validar HTML
  • Validar HTML (Nova Janela)
  • Entrar código - Abre a página do validador do WDG que contém um formulário para entrada do código HTML a validar
  • Validar páginas com frames
  • Validar Site - valida todas as páginas do site atual
Verifica o código HTML da página atual usando o Validador HTML do WDG

Verificador de link do WDG

  • Verificar páginas lincadas
  • Verificar páginas lincadas (Nova Janela)
Verifica âncoras (hyperlinks) em documento(s) HTML/XHTML. Útil para localizar links quebrados, etc. usando o Verificador de link do WDG
Outros validadores > Validador P3P do W3C Verifica a existência e validade do formato P3P para privacidade de informações

Voltar ao índice

Janela [ctrl + alt + 2] toolbar dropdown button - Resize
FunçãoDescrição
640X480 Redimensiona a janela do navegador para 640 pixels de largura por 480 pixels de altura.
800X600 Redimensiona a janela do navegador para 800 pixels de largura por 600 pixels de altura.
1024X768 Redimensiona a janela do navegador para 1024 pixels de largura por 768 pixels de altura.
1280X1024 Redimensiona a janela do navegador para 1280 pixels de largura por 1024 pixels de altura.
Personalizar dimensões - Personalizar largura/altura Redimensiona a janela do navegador para as dimensões definidas pelo usuário
Testar tamanho da janela Abre (em uma nova janela) um verificador para tamanho de janela online com informações sobre tamanhos para uma faixa navegador/resolução/plataforma.

Voltar ao índice

CSS [ctrl + alt + 3] toolbar dropdown button - CSS
FunçãoDescrição
Desabilitar CSS Desabilita folhas de estilos externas e remove o atributo 'style' (se houver) de todos os elementos da página.
Mostrar folha de estilos Mostra (em uma nova janela) o conteúdo das folhas de estilos lincadas à página atual . Desenvolvido de um script criado por Lioren
Mostrar estilos aplicados Mostra (em uma nova janela) os estilos aplicados ao conteúdo apontado pelo ponteiro do mouse.
Script desenvolvido por Simon Willison
Testar estilos Edita (em uma nova janela) e aplica estilos. Apresenta uma lista em forma de menu drop down contendo as regras de estilo escritas para a página atual. Os estilos persistirão pelas páginas (do site atual) enquanto permanecer aberta a janela do editor.
Desenvolvido de um script criado por Jesse Ruderman

Voltar ao índice

Imagens [ctrl + alt + 4] toolbar dropdown button - Images
FunçãoDescrição
Lista de imagens Apresenta (em uma nova janela) uma listagem com as imagens e o código correspondente para os elementos img
Desenvolvido de um script criado por Lioren
Alternar Imagem/alt Substitui todos os elementos img contidos na página atual pelo atributo alt escrito entre aspas. Se uma elemento img não contiver o atributo alt a substituição se fará pelo texto 'SemAlt!'
Mostrar imagens Coloca uma borda vermelha ao redor de cada imagem existente na página atual e o elemento img junto a ela (mostra ainda o texto do atributo alt e se não existir tal atributo coloca o texto 'SemAlt!').
Mostrar mapas de imagem Verifica a existência de mapas de imagem tanto no lado do cliente como no lado do servidor. Se não for encontrado mapa de imagem na página uma mensagem em caixa de alerta indirá a não existência. Caso seja encontrado um mapa de imagem ele será reproduzido em uma nova janela tendo suas áreas destacadas.
Testar intermitência de GIF Serviço online que verifica a existência de imagens GIF na página atual. Sendo encontrada uma GIF composta de vários quadros a 'taxa de intermitência' será avaliada para determinar os possíveis riscos para pessoas portadoras de Epilepsia fotossensível. Desenvolvido por Renzo Guist e traduzido para o inglês por Roberto Castaldo

Voltar ao índice

Cores [ctrl + alt + 6] toolbar dropdown button - Colour
FunçãoDescrição
Escala de cinza Renderiza a página atual em preto & branco
Nota: Não funciona para arquivos PNG
Cores usadas Mostra (em uma nova janela) uma listagem de todas as cores encontradas nas CSS da página corrente.
Código de milov.nl
Analisador de Contraste de Cores Abre a aplicação Analisador de Contraste de Cores (ACC).
Analisador de contraste de cores do Juicy Studio

3 opções de testes (resultados abrem em nova janela)

  • Análise de luminosidade
  • Cor/brilho
  • Todos os testes (1+2)

Para maiores informações ver Colour Contrast Analyser Firefox Extension

Simulador de cegueira cromática (Deuteranopia: comum vermelho/verde) Submete (em uma nova janela) a URL da página corrente a um Simulador de cegueira cromática (o processo pode demorar algum tempo)

Voltar ao índice

Estrutura [ctrl + alt + 5] toolbar dropdown button - Structure
FunçãoDescrição
Cabeçalhos Mostra todos os elementos cabeçalho na página atual
Estrutura de cabeçalhos Mostra em uma nova janela o título do documento e seus cabeçalhos (h1-h6 e respectivo conteúdo). Baseado em uma funcionalidade do Wave 3.5
Itens de lista Mostra os elementos de listas ordenadas, não ordenadas e de definição na página atual.
Campos/rótulos Mostra os elementos para grupamentos de campos, para legendas e para rótulos na página atual. Mostra o atributo for para o elemento rótulo se houver um, caso contrário mostra um texto indicando 'SemFor' Mostra o atributo [id=""] dos controles do formulário se existirem.
Acrônimos/abreviações Mostra os elementos acronym e abbr bem como seus atributos title na página atual.
Blockquote & Q Mostra os elementos blockquote e q na página atual.
JavaScript/Links para nova janela
  • Mostra um ícone javascript icon próximo aos links acionados por JavaScript. Os links são ainda destacados por uma borda tracejada e um fundo colorido.
  • Mostra um ícone new window & question mark icon próximo aos links que contém o disparador de eventos onclick e os textos comumente usados nos scripts para novas janelas no atributo href e/ou atributo onclick. Os links são ainda destacados por uma borda tracejada e um fundo colorido.
  • Mostra um ícone javascript icon próximo aos links que contém seu atributo target especificado (excluidos, _self e _top) . Os links são ainda destacados por um fundo colorido.

Agradecimentos a Autark que criou o script no qual baseia-se esta funcionalidade.

Disparadores de eventos

Mostra um sinal de alerta em forma de triângulo warning ao lado de um elemento que:

  • contenha o atributo onmouseover sem o correspondente onfocus
  • contenha o atributo onclick sem o correspondente onkeypress
  • é um elemento select e tem o atributo onchange
  • contenha o atributo onfocus mas não pode receber foco

Mostra um sinal de alerta em forma de bulbo information bubble o lado de uma elemento que:

  • contenha o atributo onmouseover sem o correspondente onfocus
  • contenha o atributo onclick sem o correspondente onkeypress

O texto alt de cada ícone informa o motivo do alerta.

AccessKeys Mostra os atributos accesskey encontrados na página atual.
TabindexMostra os atributos tabindex encontrados na página atual.
Mostrar sequência de tabulação Numera e coloca uma borda em cada elemento ativo, mostrando a ordem na qual tais elementos são acessados via a tecla 'Tab'.
Nota: Se for declarado tabindex no código isto será levado em conta na ordenação. Serão computados como 1 incremento na ordem de tabulação, iframes, mapas de imagem e objetos incorporados (embedded objects [exemplo: arquivos flash ]).
Mostrar células de cabeçalho das tabelas Mostra os elementos th das tabelas na página corrente, sendo tais elementos destacados com um fundo preto e seus conteúdos estilizados em amarelo e negrito.
Tabela de dados simples Mostra os elementos th td e caption das tabelas contidas na página corrente, bem como os atributos normalmente recomendados para marcarção de tabelas de dados simples (summary, scope). Um alerta ocorre se o atributo summary ["Sem summary!"] ou o atributo scope ["Sem scope!"] não estiverem presentes no lugar apropriado na marcação.
Tabela de dados complexas Mostra os elementos th td e caption das tabelas contidas na página corrente, bem como os atributos normalmente recomendados para marcarção de tabelas de dados complexas (summary, scope, id e headers). Um alerta ocorre se o atributo summary ["Sem summary!"] ou o atributo scope ["Sem scope!"], o atributo id ["Sem id!"], ou o atributo headers ["Sem headers!"] não estiverem presentes no lugar apropriado na marcação.
Bordas de tabelas Mostra as bordas de todas células de tabela(s) na página atual.
Ordem das células da tabela Mostra a ordem de tabulação (numera) e as bordas das células de tabelas na página atual.
Linearização (Remoção da tabelas) Remove todos os elementos table, td, tr, th da página atual.
Bordas de frames Mostra as bordas de todos os elementos frame na página atual.
Nome/título dos frames Mostra (em uma nova janela) uma lista dos frames na página com seus elementos name e o conteúdo do atributo title
Mostrar Divs Mostra a ordem de tabulação e coloca uma borda destacando os elementos div na página atual.
Mostrar outros elementos Mostra um prompt gerado por JavaScript onde pode-se digitar o nome de um elemento, a seguir outro prompt para digitação do nome de uma cor (a cor vermelha é default). O(s) elemento(s) será(ão) então destacado(s) na página atual, com uma borda na cor escolhida. Desenvolvido baseado em um script em Centricle

Voltar ao índice

Ferramentas [ctrl + alt + 7] toolbar dropdown button - Tools
FunçãoDescrição
Ferramentas do Juicy Studio
Wave Submete (2 opções: em nova janela ou na página atual) a URL da página atual ao verificador de acessibilidade da Wave
AccMonitorSubmete (2 opções: em nova janela ou na página atual) a URL da página atual ao verificador de acessibilidade do AccMonitor
Webxact / Bobby

Nota: Bobby atualmente está sendo substituido por Webxact
Submete a URL da página atual a ferramenta Webxact para verificação de itens de qualidade, de acessibilidade e de privacidade.
4 opções:

  • Verificar a página atual WACG AAA [Nova janela]
  • Verificar a página atual WACG AA [Nova janela]
  • Verificar a página atual WACG A [Nova janela]
  • Verificar a página atual Section 508 [Nova janela]
Lynx Viewer Abre a página atual (em uma nova janela) em um simulador de navegador de texto, Lynx . Este serviço permite visualizar como será renderizada a página quando aberts em um navegador de texto.
Torquemada Submete a página atual ao verificador de acessibilidade da Torquemada (2 opções: em italiano ou inglês)
Teste de Acessibilidade Web (TAW) Suibmete (2 opções: em nova janela ou na página atual) a URL da página atual ao verificador de acessibilidade da TAW

Voltar ao índice

Ferramentas > Simuladores
FunçãoDescrição
Desabilitar Plugins Remove java, flash, mÚsica de fundo e iframes de terceiros. Baseado em script de Jesse's Bookmarklets Site
Desabilitar Mouse Desabilita o uso do mouse (exceto eventos disparados por mouseover/onmouse). Se o usuário tentar usar o mouse um alert box indicará que o mouse está indisponível. Nota: Não será desabilitado o clique no botão direito.
Retinopatia diabética Coloca uma máscara sobre a página atual simulando os efeitos da retinopatia diabética
(Nota: a página não poderá ser usada (navegada) enquanto a simulação estiver sendo feita.
Catarata Embaça a página atual simulando os efeitos da catarata
Degeneração Macular Coloca uma máscara (uma mancha escura circular semi transparente no seu contorno) sobre a página atual, simulando os efeitos da degeneração macular. Colocar o ponteiro do mouse sobre a mancha e dar um cliquer com o botão esquerdo fará com que a mancha 'cole' no ponteiro e acompanhe a movimentação do mouse.
(Nota: a página não poderá ser usada (navegada) enquanto a simulação estiver sendo feita.)
Glaucoma Coloca uma máscara (na cor preta e transparente, e com o formato aproximado de uma oval) sobre a página atual, simulando os efeitos do Glaucoma. Colocar o ponteiro do mouse sobre a mancha e dar um clique com o botão esquerdo fará com que a mancha 'cole' no ponteiro e acompanhe a movimentação do mouse.
(Nota: a página não poderá ser usada (navegada) enquanto a simulação estiver sendo feita.)
Cegueira cromática Coloca uma máscara sobre a página atual, simulando cores de uma paleta de cores que se assemelha às cores disponíveis para pessoas portadoras de defiência para visualização das cores vermelha e verde.
(Nota: a página não poderá ser usada (navegada) enquanto a simulação estiver sendo feita.)
Esta funcionalidade foi disponibilizada por Q42
Redutor de contraste Coloca uma máscara sobre a página atual que permite ao usuário reduzir a opacidade da página (30%/60%/90%) simulando os efeitos da idade para a sensibilidade ao contraste.
Esta funcionalidade baseia-se no verificador de contraste de cores do Q42
(Nota: a página não poderá ser usada (navegada) enquanto a simulação estiver sendo feita.)
Demo para intermitência de imagem Abre (em uma nova janela) uma demonstração de faixa de intermitência. Esta demonstração destina-se a auxiliar os desenvolvedores a identificar se conteúdos intermitentes estão fora ou dentro de uma faixa que possa causar danos a determinadas pessoas.

Voltar ao índice

DocInfo[ctrl + alt + 8] toolbar dropdown button - Doc Info
FunçãoDescrição
Informações sobre o documento Mostra (em uma nova janela) informações (incluindo: title, tamanho do arquivo, data da criação, quantidade de imagens, links, formulários, scripts) sobre a página atual.
Informações de metadados Mostra (em uma nova janela) uma listagem de title, link e elementos meta, bem como seu conteúdo, encontrados na página atual.
Link e navegação

Mostra elementos LINK e possibilitata a navegação por estes elementos quando existirem. Para informações sobre o uso de elemento link consulte:

Mostrar DOCTYPE Mostra (em uma caixa de alerta) o DOCTYPE do documento HTML atual.
Mostrar atributo lang Mostra na página atual qualquer atributo lang encontrado bem como o elemento a ele associado
agradecimentos a: Bartimeus Accessibility Foundation
Mostrar atributo title Mostra na página atual qualquer atributo title encontrado
Peso e velocidade Mostra (em uma caixa de alerta) o tamanho do documento em Kb e o tempo aproximado de descarga da página em diferentes velocidades do modem.
Desenvolvido de um script de sam-i-am.com
Relatório de descarga dapágina Submete (em uma nova janela) a URL da página atual ao Web Page Analyser disponibilizado online pela Websiteoptimazation.com
Lista de frames Mostra (em uma nova janela) uma listagem das URL's das páginas de frames com nomes dos frames, da página atual.
Lista de links Mostra (em uma nova janela) uma listagem das URL's dos links com o respectivo conteúdo do atributo title (se existir tal atributo) encontradas na página atual.
Mostrar links internos Identifica os links que remetem a conteúdos dentro da própria página (por exemplo: um link do tipo "pular navegação").
Lista de arquivos para download Mostra (em uma nova janela) uma listagem dos links para download de arquivos (Exemplos: PDF, MP3, Word, Excel, Powerpoint, ZIP) encontrados na página atual.
Desenvolvido com base em um script de Sofia Celic
Identicar arquivos multimídia Mostra (em uma nova janela) o código de elementos object/embed e também uma listagem dos links para arquivos multimídia (Exemplos: mp3, mov, swf, ram etc) encontrados na página atual
Desenvolvido por Sofia Celic
Identicar Scripts e Applets Mostra (em uma nova janela) applets e seu código associado. Lista também scripts externos e incorporados e na maiortia dos casos fornece uma visão e possibilita o download de scripts externos lincados na página atual.
Desenvolvido por Sofia Celic com agradecimentos a Lioren

Voltar ao índice

Código fonte [ctrl + alt + U]toolbar dropdown button - source
FunçãoDescrição
Ver código fonte Mostra o código fonte da página atual no Notepad
Ver código gerado Mostra a árvore DOM da página como HTML. [Nova janela]
Ver código parcial Mostra a árvore DOM de um conteúdo selecionado como HTML bem como uma cópia do conteúdo selecionado. [Nova janela]
Elementos HTML em desuso
  • Mostra elementos (somente) em desuso no HTML 4 na página atual.
  • Mostra (em uma nova janela) o código fonte da página atual destacando os elementos e atributos em desuso.

Desenvolvido por Sofia Celic

Destacar no código
  • Mostra [em uma nova janela] o código fonte da página destacando elementos pré escolhidos
    • tables
    • forms
    • objects e scripts
    • images
    • lists
    • headings
  • Mostra também informação sobre HTTP header

Desenvolvido por Steve Faulkner com base em um script de Sofia Celic

Inspetor do DOM

Voltar ao índice

Opções IE [ctrl + alt + S] toolbar dropdown button - IE options
FunçãoDescrição
(Des)Ativa Imagens [ctrl + alt + I] Mostra/esconde as imagens da página atual usando o menu o menu nativo do navegador Ferramentas > Opções da Internet > Avançadas > Mostrar Imagens
(Des)Ativa Javascript [ctrl + alt + J] Mostra/esconde Javascript na página atual usando o menu o menu nativo do navegador Ferramentas > Opções da Internet > Segurança > Nível Personalizado > Scripts habilitar/desabilitar
Nota: Uma vez que a maioria dfas funcionalidades da barra de ferramentas dependem de Javascript para funcionar, muitas das funções não estarão ativas enquanto Javascript estiver desabilitado.
(Des)Ativa ActiveX Mostra/esconde ActiveX na página atual usando o menu o menu nativo do navegador Ferramentas > Opções Internet > Segurança > Nível Personalizado > Rodar ActiveX e Plug-ins - bom para verificar páginas com Flash etc.
(Des)Ativa CSS Habilita e desabilita o suporte do Internet Explorer para CSS.
Nota: Esta função não é fornecida pela Microsoft. Desabilitando o suporte para CSS pode causar efeitos em outras janelas de diálogo do windows que usam CSS , assim, não se esqueça de habilitar CSS de volta antes de fechar a janela do navegador. Se você notar qualquer comportamento estranho, reabra o IE e habilite as CSS de volta.
Tamanho do texto Esta funcionalidade é a mesma que está disponível de forma nativa no navegador no menu Exibir > Tamanho do texto
"teclas rápidas " estão disponíveis: mínimo [ctrl + alt + Q], médio [ctrl + alt + Y], máximo [ctrl + alt + Z]
Caixa de diálogo para acessibilidade [ctrl + alt + D] Abre a caixa de dialógo que nativamente pode ser acessada também por Ferramentas > Opções da Internet > Geral > Acessibilidade

Voltar ao índice

Referências [ctrl + alt + 9] toolbar dropdown button - IE options
FunçãoDescrição
Todas A seção de referências fornece links para documentação contendo informações relevantes disponíveis na web.

Voltar ao índice

Lupa [ctrl + alt + M] toolbar dropdown button - Magnify
FunçãoDescrição
Ampliador Aplica mais zoom ou menos zoom (25% até 600%) no conteúdo da página atual

 

Accesskeys para as funções da barra
FunçãoKey Combination
IE Options > (Des)Ativa Imagesctrl + alt + I
IE Options > (Des)Ativa Javascriptctrl + alt + J
IE Options > Caixa de diálogo para acessibilidade ctrl + alt + D
IE Options > Tamanho do texto> menor ctrl + alt + Q
IE Options > Tamanho do texto > médio ctrl + alt + Y
IE Options > Tamanho do texto > maior ctrl + alt + Z
Accesskeys para os menus da barra
MenuKey Combination
Opções da barra AIS ctrl + alt + 0
Validar ctrl + alt + 1
Janela ctrl + alt + 2
CSSctrl + alt + 3
Imagens ctrl + alt + 4
Cor ctrl + alt + 5
Estrutura ctrl + alt + 6
Ferramentas ctrl + alt + 7
Info Doc ctrl + alt + 8
Código fonte ctrl + alt + U
Refctrl + alt + 9
Opções IE

ctrl + alt + S

IE options dialog box
A caixa de diálogo para Opções IE pode ser acessada via teclado e tal modo de acesso destina-se a usuários com dificuldades de percepção do estado das opções (habilitada ou desabilitada) no menu dropdown: ctrl + alt + shift + S

Ampliadorctrl + alt + M

Voltar ao índice

Download e Instruções para Instalação

Nota:

  • Algumas das funções da Barra de Ferramentas somente funcionarão se você estiver conectado à Internet, pois dependem de acesso a Javascript (.js) Folhas de estilos (.css) e imagens (.jpg e .gif) hospedados nos servidores da Vision Australia ou se utilizam de serviços online de terceiros (Por exemplo: Validador de HTML do W3C).
  • A Barra de Ferramentas não contém qualquer adware ou spyware.

Sistema mínimo

  • Microsoft Windows - Windows 98 & 2000, NT & XP
  • Internet Explorer 5+ com Javascript habilitado (para a maioria das funções exceto para opções para IE)

Download - Versão em português

Meu nome é Maurício Samy Silva e eu sou conhecido na Web como Maujor.

Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato é maujorcss[ARROBA]maujor [PT]com.

Minha residência é em:

Copacabana - Rio de Janeiro,, RJ - - Brasil