Funções da Barra de ferramentas do Consórcio WAT
Publicado em: 07/02/2006Introduçã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
As funções
| Função | Descrição |
|---|---|
| Accessible Information Solutions (AIS) | Links para informações sobre serviços prestados pela AIS |
| Opções da 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. |
| Função | Descrição |
|---|---|
Validador HTML do W3C
|
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
|
Verifica o código CSS da página atual usando o Validador CSS do W3C |
Reordenador HTML do W3C
|
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
|
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
|
Verifica o código HTML da página atual usando o Validador HTML do WDG |
Verificador de link do WDG
| 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 |
| Função | Descriçã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. |
| Função | Descriçã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 |
| Função | Descriçã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 |
| Função | Descriçã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)
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) |
| Função | Descriçã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 |
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
Mostra um sinal de alerta em forma de bulbo
O texto alt de cada ícone informa o motivo do alerta. |
| AccessKeys | Mostra os atributos accesskey encontrados na página atual. |
| Tabindex | Mostra 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 |
próximo aos links acionados por JavaScript. Os links são ainda destacados por uma borda tracejada e um fundo colorido.
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.
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.
ao lado de um elemento que:
o lado de uma elemento que:| Função | Descriçã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 |
| AccMonitor | Submete (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
|
| 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 |
| Função | Descriçã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. |
| Função | Descriçã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 |
| Função | Descriçã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 |
Desenvolvido por Sofia Celic |
| Destacar no código |
Desenvolvido por Steve Faulkner com base em um script de Sofia Celic |
| Inspetor do DOM |
|
| Função | Descriçã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 |
| Função | Descrição |
|---|---|
| Todas | A seção de referências fornece links para documentação contendo informações relevantes disponíveis na web. |
| Função | Descrição |
|---|---|
| Ampliador | Aplica mais zoom ou menos zoom (25% até 600%) no conteúdo da página atual |
| Função | Key Combination |
|---|---|
| IE Options > (Des)Ativa Images | ctrl + alt + I |
| IE Options > (Des)Ativa Javascript | ctrl + 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 |
| Menu | Key Combination |
|---|---|
| Opções da barra AIS | ctrl + alt + 0 |
| Validar | ctrl + alt + 1 |
| Janela | ctrl + alt + 2 |
| CSS | ctrl + 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 |
| Ref | ctrl + alt + 9 |
| Opções IE | ctrl + alt + S
|
| Ampliador | ctrl + alt + M |
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
- Barra-download: Barra de Ferramentas para acessibilidade à Web 1.2 ([.exe] file 771 kb)
- Barra-Sobre: Ler um artigo sobre a barra de ferramentas.
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.
