Niquelao » Extensão headingsMap

» Extensão headingsMap Niquelao Como é que dizes que ficou? 5 de Maio, 2008 por Rumoroso —> Acessibilidade e padrões web Extensão headingsMap por Rumoroso Antes de mais, aqui está o link para a página correspondente da extensão headingsMap no Firefox Add-ons .

Se se animarem, aguardo o vosso feedback e opiniões e, inclusivamente, sugestões de melhoria. O conjunto de cabeçalhos numa página web permite estruturar os conteúdos desta de tal forma que, através de uma estrutura hierárquica, se pode obter um mapa ou índice do documento . É por isso que, quando se utilizam cabeçalhos, estes devem ser um fiel reflexo da estrutura dos conteúdos do documento (secções, subsecções e as suas relações de dependência), além de serem suficientemente claros e evitarem saltos de nível inapropriados (por exemplo, passar de h2 para h4).

Isto é de vital importância se falarmos em termos de acessibilidade Web , ao facilitar tanto a compreensão do conteúdo como a sua utilização por parte de qualquer pessoa, independentemente da sua situação no que diz respeito à diversidade funcional. Os cabeçalhos podem ser extraídos sob a forma de lista que sirva como mapa ou índice do documento web. Isto é o que algumas ajudas técnicas, como os leitores de ecrã, podem fazer.

Este tipo de ajudas permite ao utilizador ou utilizadora ter uma primeira impressão do conteúdo, podendo aceder diretamente à parte do mesmo que lhe interesse, sem ter de percorrer todo o conteúdo previamente. A extensão headingsMap gera um índice ou mapa de qualquer documento web estruturado através da utilização de cabeçalhos, de tal forma que, ao clicar sobre qualquer um dos itens desse mapa, se acede diretamente ao conteúdo correspondente da página. Mas o headingsMap não é apenas útil para facilitar a navegação a qualquer pessoa (algo que já nos proporcionava a extensão documentMap ), mas também é de grande utilidade tanto para programadores como para consultores e auditores web pelos seguintes motivos: Mostra a estrutura de cabeçalhos tanto do documento principal como de qualquer outro documento incorporado através do elemento IFRAME (mostra-os integrados entre os do documento que o contém) ou dos que fazem parte de um conjunto de frames (FRAMESET).

Indica o nível de cada um dos cabeçalhos. Pode alertar para os casos em que não há cabeçalhos no documento. Pode alertar para aqueles saltos de cabeçalho incorretos, mantendo o alerta até encontrar um cabeçalho de nível adequado.

Mostra todos os cabeçalhos presentes no documento, incluindo os ocultos através de técnicas de CSS ou aqueles que não têm conteúdo. Dado que se mostram os cabeçalhos do documento e os dos iframes que este possua no mesmo painel, para suprir a necessidade que, por exemplo numa auditoria web, surgisse de diferenciar os cabeçalhos que fazem parte de um IFRAME face aos restantes, foi adicionada a opção de incluir uma marca (sob a forma de linha lateral) que realce essa diferença (diferenciando inclusivamente se há aninhamento de frames).

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Para selecionar a aparição da marca (uma linha vertical situada à direita do cabeçalho), bastará selecionar a opção correspondente clicando com o botão secundário do rato sobre o painel lateral ou sobre o ícone que a extensão instala na barra de estado. Além disso, incluem-se ainda outra série de opções de configuração para que os erros em saltos de nível sejam assinalados, bem como para que, ao selecionar um cabeçalho da lista, o correspondente cabeçalho do documento seja realçado com um determinado estilo (borda e fundo configuráveis).

A seguir inclui-se uma captura de ecrã da forma como se mostram os cabeçalhos num documento com IFRAME. A linha lateral esquerda junto aos cabeçalhos indica os que estão dentro deste. Além disso, a diferente coloração de fundo alerta para a existência de saltos de nível incorretos (neste caso de primeiro a terceiro sem passar pelo segundo). No caso de o documento incluir um conjunto de frames (FRAMESET), o painel em que se mostram os cabeçalhos divide-se em tantos painéis quantos os frames existentes e mostra em cada um os seus cabeçalhos.

Finalmente, foi-lhe adicionada uma funcionalidade adicional. Se o documento web a que se está a aceder for uma apresentação em formato web feita com acc_slide (ou rumoslide) ou com Slidy , a extensão funciona como um índice, permitindo aceder diretamente ao diapositivo que se deseje. Se, depois de ler isto, já estás convencido de que queres experimentar a extensão, aqui está novamente o link para a extensão headingsMap no Firefox Add-ons .

Worth a look: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Uma vez instalada a extensão, aparecerá um ícone na barra de estado que abrirá o painel lateral no qual se mostra a estrutura de cabeçalhos. Do mesmo modo, também se pode aceder através da combinação do teclado alt + o . nota: Ao clicar sobre cada item da lista de cabeçalhos, acede-se diretamente ao cabeçalho em questão, sendo este realçado. Para eliminar o realce bastará premir a tecla “esc” ou então clicar sobre qualquer ponto do documento atual.

Já não há desculpa para não fazer as coisas bem. Comecemos a colocar cabeçalhos nos nossos documentos e façamo-lo bem. Podes acompanhar os comentários através do feed RSS 2.0 .

Também podes deixar um comentário , ou enviar um trackback com o endereço http://www.niquelao.net/extension-headingsmap/trackback/ a partir do teu site. 3 comentários Firefox Add-ons (6 de Maio de 2008) […] A extensão headingsMap gera um índice ou mapa de qualquer documento web estruturado através da utilização de cabeçalhos (tanto do documento principal como dos frames e iframes que contenha), indicando […] kcmr (12 de August de 2008) Muito boa extensão! Dá umas quantas voltas ao Document Map. www.webeame.net (12 de August de 2008) Extensão para programadores… Útil extensão para Firefox que oferece informação completa acerca da estrutura de cabeçalhos nos nossos documentos web (incluindo os que se ligam por meio de frames).

Informa se há erros ou se falta algum e permite navegar pela pági… Podes acompanhar os comentários através do feed RSS 2.0 . Também podes deixar um comentário, ou enviar um trackback a partir do teu site.

Esta obra está sob uma licença de Creative Commons .

P.S. A few readers have asked which software de testing we actually reach for — it's Deque axe DevTools Pro; take a look here if you want the current details.