Aller au contenu principal
Niquelao Accessibilité web et développement front-end en espagnol : normes WCAG, widgets accessibles et extensions pour Firefox, expliqués avec du code réel.

Certains liens sur ce site sont des liens d'affiliation : si vous achetez via ces liens, nous pouvons percevoir une commission sans coût supplémentaire pour vous. Cela n'influence jamais nos recommandations. Consultez notre divulgation d'affiliation pour plus de détails. Divulgation d'affiliation.

Niquelao » Extension headingsMap

» Extension headingsMap Niquelao Comment tu dis que ça a donné ? 5 mai 2008 par Rumoroso —> Accessibilité et standards web Extension headingsMap par Rumoroso Avant toute chose, voici le lien vers la page correspondante de l’extension headingsMap sur Firefox Add-ons.

Si vous êtes tentés, j’attends vos retours et avis, et même des suggestions d’amélioration. L’ensemble des titres d’une page web permet de structurer les contenus de celle-ci de telle manière que, grâce à une structure hiérarchique, on peut obtenir une carte ou un sommaire du document. C’est pourquoi, lorsqu’on utilise des titres, ceux-ci doivent être le fidèle reflet de la structure des contenus du document (sections, sous-sections et leurs relations de dépendance), tout en étant suffisamment clairs et en évitant les sauts de niveau inappropriés (par exemple, passer de h2 à h4).

Cela revêt une importance vitale si l’on parle en termes d’accessibilité web, en facilitant tant la compréhension du contenu que son utilisation par n’importe qui, indépendamment de sa situation en matière de diversité fonctionnelle. Les titres peuvent être extraits sous forme de liste servant de carte ou de sommaire du document web. C’est ce que certaines aides techniques telles que les lecteurs d’écran peuvent faire.

Ce type d’aides permet à l’utilisateur ou à l’utilisatrice d’avoir une première impression du contenu, en pouvant accéder directement à la partie qui l’intéresse, sans avoir à parcourir tout le contenu au préalable. L’extension headingsMap génère un sommaire ou une carte de n’importe quel document web structuré au moyen de titres, de telle sorte qu’en cliquant sur l’un des éléments de ce sommaire, on accède directement au contenu correspondant de la page. Mais headingsMap n’est pas seulement utile pour faciliter la navigation à n’importe qui (ce que nous offrait déjà l’extension documentMap), elle est aussi très utile tant pour les développeurs que pour les consultants et auditeurs web pour les raisons suivantes : Elle affiche la structure des titres tant du document principal que de tout autre document intégré au moyen de l’élément IFRAME (elle les affiche intégrés parmi ceux du document qui les porte) ou de ceux qui font partie d’un ensemble de cadres (FRAMESET).

Elle indique le niveau de chacun des titres. Elle peut alerter des cas où il n’y a pas de titres dans le document. Elle peut alerter des sauts de titre incorrects, en maintenant l’alerte jusqu’à trouver un titre de niveau adéquat.

Elle affiche tous les titres présents dans le document, même ceux masqués par des techniques CSS ou ceux qui sont dépourvus de contenu. Étant donné que les titres du document et ceux des iframes qu’il possède sont affichés dans le même panneau, afin de répondre au besoin qui, par exemple lors d’un audit web, apparaîtrait de différencier les titres qui font partie d’un IFRAME du reste, on a ajouté l’option d’inclure une marque (sous forme de ligne latérale) qui met en évidence cette différence (en différenciant même s’il y a imbrication de cadres).

Related: con plan gratuito para empezar hoy mismo.

Pour sélectionner l’apparition de la marque (une ligne verticale située à droite du titre), il suffira de sélectionner l’option correspondante en cliquant avec le bouton secondaire de la souris sur le panneau latéral ou sur l’icône que l’extension installe dans la barre d’état. De plus, on inclut une autre série d’options de configuration pour que les erreurs de sauts de niveau soient marquées, ainsi que pour que, lorsqu’on sélectionne un titre de la liste, le titre correspondant du document soit mis en évidence avec un style déterminé (bordure et fond configurables).

Ci-dessous est incluse une capture d’écran de la façon dont les titres sont affichés dans un document avec IFRAME. La ligne latérale gauche à côté des titres indique ceux qui sont à l’intérieur de celui-ci. De plus, la coloration de fond différente alerte de l’existence de sauts de niveau incorrects (dans ce cas du premier au troisième sans passer par le deuxième). Dans le cas où le document inclut un ensemble de cadres (FRAMESET), le panneau dans lequel les titres sont affichés se divise en autant de panneaux qu’il y a de cadres et affiche dans chacun d’eux ses titres.

Enfin, on a ajouté une fonctionnalité supplémentaire. Si le document web auquel on accède est une présentation au format web faite avec acc_slide (ou rumoslide) ou avec Slidy, l’extension fonctionne comme un sommaire, permettant d’accéder directement à la diapositive souhaitée. Si après avoir lu ceci, vous êtes déjà convaincu de vouloir tester l’extension, voici à nouveau le lien vers l’extension headingsMap sur Firefox Add-ons.

Worth a look: — Accesibilidad gestionada: automatización combinada con revisión humana.

Une fois l’extension installée, une icône apparaîtra dans la barre d’état qui déploiera le panneau latéral dans lequel la structure des titres est affichée. De même, on peut aussi y accéder au moyen de la combinaison du clavier alt + o. note : En cliquant sur chaque élément de la liste des titres, on accède directement au titre en question, celui-ci étant mis en évidence. Pour supprimer la mise en évidence, il suffira d’appuyer sur la touche « esc » ou bien de cliquer sur n’importe quel point du document actuel.

Il n’y a plus d’excuse pour ne pas faire les choses bien. Commençons à mettre des titres à nos documents et faisons-le bien. Vous pouvez suivre les commentaires grâce au flux RSS 2.0.

Vous pourriez aussi laisser un commentaire, ou envoyer un trackback avec l’adresse http://www.niquelao.net/extension-headingsmap/trackback/ depuis votre site. 3 commentaires Firefox Add-ons (6 mai 2008) […] L’extension headingsMap génère un sommaire ou une carte de n’importe quel document web structuré au moyen de titres (tant du document principal que des frames et iframes qu’il contient), en indiquant […] kcmr (12 août 2008) Très bonne extension ! Elle donne plusieurs longueurs d’avance à Document Map. www.webeame.net (12 août 2008) Extension pour développeurs… Extension utile pour Firefox qui offre une information complète sur la structure des titres dans nos documents web (y compris ceux qui sont liés au moyen de cadres).

Elle informe s’il y a des erreurs ou s’il en manque un et permet de naviguer dans la page… Vous pouvez suivre les commentaires grâce au flux RSS 2.0. Vous pourriez aussi laisser un commentaire, ou envoyer un trackback depuis votre site.

Cette œuvre est sous une licence Creative Commons.

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; if you want the current details.


¿Cumplir WCAG sin tocar el código?

Superposición de IA que promete cumplimiento WCAG en 48 horas