Documentation des fonctions - Barre d'outils Accessibilité du Web 2.0 beta (pour IE)


Dans cette page:  

Autres pages : A propos de la barre d'outils pour IE | Blog de la barre d'outils


Soutenez le développement de la barre d'outils pour IE

Faire un avec PayPal.


WAT [alt + 0] capture d'écran du bouton WAT de la barre d'outils
fonction Description
Le consortium des outils d'accessibilité web (WAT-C) Lien vers le site du WAT-C
Options
  • Activer les raccourcis clavier
  • Affichage des raccourcis clavier
  • Affichage des icônes
Documentation de la barre d'outils Informations sur les fonctionnalités de la barre d'outils
La barre d'outils et les WCAG 1.0 Informations sur les fonctionnalités de la barre d'outils permettant de vérifier la conformité aux points de contrôles WCAG 1.0.
A propos de la barre d'outils Informations sur la version de la barre d'outils et sur son développement.
Retours utilisateur / FAQ Lien vers le blog de la barre d'outils
version, langue et date de publication Informations sur la barre d'outils
Haut de page

Vérifier [alt + 1] capture d'écran du bouton Vérifier de la barre d'outils
Fonction Description
Validateur HTML du W3C
  • Validation HTML rapide
  • Validation HTML
  • Vérifier le code HTML de la page courante en utilisant le Validateur HTML du W3C.
  • La validation rapide renvoie simplement le résultat et le nombre d'erreurs (pages distantes uniquement).
  • La fonction "Validation HTML" peut être utilisée pour vérifier des pages distantes ou locales.
Validateur CSS du W3C
  • Valider les CSS
  • Valider les CSS [nouvelle fenêtre]
Vérifier la validité des CSS de la page courante en utilisant le Validateur CSS du W3C
Vérificateur de liens W3C
  • Vérifier la page en cours
  • Vérifier la page en cours [nouvelle fenêtre]
  • Vérifier les pages liées [nouvelle fenêtre]
Vérifie l'absence de liens cassés dans une page HTML/XHTML en utilisant le Vérificateur de liens W3C
Validateur HTML WDG
  • Valider le HTML
  • Valider le HTML[nouvelle fenêtre]
  • Entrer du code - liens vers une page du validateur WDG qui contient un formulaire dans lequel vous pouvez entrer du code à valider
  • Valider les pages composant le jeu de cadres
  • Valider le site - vérifie la validité de toutes les pages du site
Vérifie la validité HTML de la page en cours en utilisant le Validateur HTML WDG
Functional Accessibility Evaluator (FAE) Envoie le DOM de la page courante à FAE. Vérifie les pages distantes ou locales.
The Wave Soumet la page courante à l'outil de vérification d'accessibilité The Wave
Cynthis says Soumet la page courante à l'outil de vérification d'accessibilité Cynthia Says (2 options: WCAG 1.0 ou Section 508)
Test de lisibilité Soumet la page courante au test de lisibilité disponible sur le site Juicy Studio.
Simulateur Lynx Soumet la page courante au Simulateur Lynx, simulateur de navigateur texte
Haut de page


Redimensionner [alt + 2] capture d'écran du bouton Redimensionner de la barre d'outils
Fonction Description
640X480 Redimensionne la fenêtre courante à une largueur de 640 pixels et une hauteur de 480 pixels.
800X600 Redimensionne la fenêtre courante à une largueur de 800 pixels et une hauteur de 600 pixels.
1024X768 Redimensionne la fenêtre courante à une largueur de 1024 pixels et une hauteur de 768 pixels.
1280X1024 Redimensionne la fenêtre courante à une largueur de 1280 pixels et une hauteur de 1024 pixels.
Taille personnalisée
  • Redimensionne la fenêtre courante à la dimension définie par l'utilisateur.
  • Une sélection prédéfinie est également proposée pour les médias handheld, projection et TV (Fonctions du navigateur Opera)

Note: La fonction de redimensionnement fonctionne uniquement lorsqu'un seul onglet est ouvert dans Internet Explorer 7

back to top



CSS [alt + 3] capture d'écran du bouton CSS de la barre d'outils
Fonction Description
Désactiver les CSS Désactive les styles de la page courante
Désactiver les styles en ligne Désactive les styles en ligne de la page courante (utilisant l'attribut style)
Passer les display:none à inline change la valeur de la propriété display à inline pour tous les éléments utilisant la propriété à none
Passer les visibility: hidden à visible change la valeur de la propriété visibility à visible pour tous les éléments utilisant la propriété à hidden
Mettre les top/left/text-indent: 0 change la valeur des propriétés top,left,text-indent à 0 pour tous les éléments utilisant cette propriété
Voir les CSS Affiche dans une nouvelle fenêtre le contenu des feuilles de styles externes lié à la page
Développé à partir d'un script de Lioren
Tester vos styles

Modifier ou ajouter des styles à la page courante (nouvelle fenêtre)

Haut de page


Images [alt + 4] capture d'écran du bouton Images de la barre d'outils
Fonction Description
liste des images Affiche dans une nouvelle fenêtre la liste des images avec, leur nombre d'instance, leur dimension, leur poids et leur code html correspondant.
Développé à partir d'un script de Lioren
Remplacer les images par leur alternative Remplace tous les éléments img de la page courante par le contenu de leur attribut alt. Si un élément img n'a pas d'attribut alt, l'image est remplacée par le texte ‘Pas de alt!’. Les images de fond affichées grâce aux CSS sont aussi supprimées.
Supprimer les images de fond CSS Supprimer les images qui sont affichées grâce aux propriétés CSS list-style-type et background-image.
Mettre en valeur les images Met une bordure autour de chaque élément img de la page courante et affiche le contenu de leur attribut alt. Les images n'ayant pas d'attribut alt affiche le texte 'Pas de alt!' .
Voir les images maps Vérifie la présence d'images maps côté client ou côté serveur. Lorsqu'aucune image map est trouvée, cela est indiqué par un message d'alerte. Lorsque des images maps sont trouvées, elles sont affichées dans une nouvelle fenêtre avec leur élément area associé.
Test de clignotement des GIF Service web en ligne qui analyse toutes les images au format GIF présentes dans la page. Si une image GIF contient plusieurs étapes, leur fréquence de clignotement est testée pour déterminer s'il peut affecter les personnes épileptiques. Développé par Renzo Guist et traduit en anglais par Roberto Castaldo
Haut de page


Couleur [alt + 5] capture d'écran du bouton Couleur de la barre d'outils
Fonction Description
Noir et blanc

Passe la page courante en noir et blanc afin de tester les contrastes et la mise à disposition d'information par la couleur.

Analyseur de contraste Ouvre l'application d'analyse des contrastes 2.0
Analyseur de contraste Juicy Studio 3 options de test
  • Analyse de la luminosité
  • Couleur/intensité
  • Tous les tests (1+2)
Pour plus d'informations, consulter Colour Contrast Analyser Firefox Extension
Simulateur de déficience chromatique Vischeck Soumet la page courante au simulateur de déficience chromatique Vischeck (celà peut prendre un certain temps) puis ouvre une nouvelle page avec un lien vers la simulation.
Haut de page

Structure [alt + 6] capture d'écran du bouton Structure de la barre d'outils
Fonction Description
Mettre en valeur les titres Met en valeur les éléments h1-h6 présents dans la page courante
Voir la structure des titres Affiche dans une nouvelle fenêtre le titre de la page et le contenu des éléments h1 - h6.
Mettre en valeur les éléments de listes Met en valeur les éléments ul-ol-dl présents dans la page courante
Mettre en valeur les Fieldset / Labels Met en valeur les éléments fieldset-legend-label présents dans la page courante. Affiche le contenu de l'attribut for des éléments label lorsqu'ils sont présents et le texte 'Aucun attribut For!' sinon. Affiche également le contenu de l'attribut id [id=""] pour les éléments de formulaire lorsqu'il est présent.
Mettre en valeur les Paragraphes Met en valeur les éléments p présents dans la page courante
Mettre en valeur les Acronymes / Abréviations Met en valeur les éléments acronym-abbr présents dans la page courante ainsi que le contenu de leur attribut title
Mettre en valeur les Blockquote et Q Met en valeur les éléments blockquote-q présents dans la page courante
Mettre en valeur les raccourcis clavier Met en valeur les éléments accesskey présents dans la page courante
Mettre en avant l'élément ayant le focus Applique un style au focus (texte jaune et fond bleu foncé) pour tout les liens et éléments de formulaires présents dans la page.
Mettre en valeur les tabindex Met en valeur les éléments tabindex présents dans la page courante
Afficher l'ordre de tabulation Attribut un numéro d'ordre de tabulation et ajoute une bordure sur tous les éléments pouvant recevoir le focus clavier grâce à la touche 'Tab'.
Note: Les Tabindex sont pris en compte si définis dans la page. Les iframes, les image maps et les éléments inclus (exemple: fichier flash) sont également pris en compte dans l'ordre de tabulation.
Mettre en valeur d'autres éléments Affiche une boite d'alerte JavaScript où il est possible de rentrer le type d'élément que vous voulez mettre en valeur, puis une autre boite d'alerte où vous pouvez rentrer une couleur (en anglais, rouge par défaut). Cela aura pour effet de mettre une bordure de la couleur choisie sur les éléments choisis. Développé à partir d'un script de Centricle

Tableaux [alt + 7] capture d'écran du bouton Tableaux de la barre d'outils
Fonction Description
Entêtes des tableaux Met en valeur les éléments th présents dans la page courant, les éléments th sont stylés avec un fond noir et un texte jaune et en gras.
Mettre en valeur les tableaux de données Met en valeur les éléments table, th, td, caption présents dans la page courante ainsi que les attributs utiles pour coder les tableaux de données (summary, id, headers, scope).
Bordure de tableaux Met en valeur la bordure des tableaux et de leur cellules présentes dans la page courante
Ordre des cellules Affiche l'ordre dans lequel seront lu les cellules des tableaux et met en valeur leur bordure
Linéariser (supprimer les tableaux) Supprimer tout les éléments table, td tr,th présents dans la page courant, les styles CSS styles sont également supprimés pour aider à visualiser l'ordre de lecture linéaire.

Cadres [alt + 8] capture d'écran du bouton Cadres de la barre d'outils
Fonction Description
Naviguer dans les cadres Liste tous les pages affichées dans un cadre y compris celles affichées par iframes. La sélection d'une des pages dans la liste ouvrir celle-ci.
Actif au travers des cadres Cette fonction permet de rendre actif les autres fonctions de la barre d'outils dans les pages affichées par un cadre. Par exemple : avec cette option activée, la fonction "Mettre en valeur les images" fonctionnera dans toutes pages affichées à l'écran par un cadre y compris par un élément iframe, avec cette option désactivée cela n'appliquera la fonction que dans la page parente.
Mettre en avant les bordures des cadres Met en valeur la bordure des cadres présents dans la page courante
Noms/Titres des cadres Affiche dans une nouvelle fenêtre la liste des pages affichées par un cadre ainsi que le contenu de leur attribut name et title
Haut de page

Informations [alt + 9] capture d'écran du bouton Informations de la barre d'outils
Fonction Description
Informations sur la page Affiche dans une nouvelle fenêtre des informations sur la page courante (comme le title, le poids de la page, sa date de création, le nombre d'images, de liens, de formulaires, de script).
Développé à partir d'un script disponible sur le site de l'Université d'Etat de l'Oregon
Informations sur les métadonnées Affiche dans une nouvelle fenêtre une liste contenant le titre de la page et les éléments meta et leur contenu utilisés dans la page courante.
navigation via élément link

Permet de naviguer en utilisant les éléments LINK utilisés dans la page courante.

Pour plus d'information sur l'utilisation des éléments LINK:

Voir le DOCTYPE Affiche dans une fenêtre d'alerte le DOCTYPE de la page courante.
article de référence : Fix Your Site With the Right DOCTYPE!
Mettre en valeur les attributs lang Met en valeur les attributs lang utilisés dans la page courante avec leur élément html associé.
Avec nos remerciements à : la fondation accessibilité Bartimeus
article de référence :
Mettre en valeur les attributs titles Met en valeur le contenu des attributs title utilisés dans la page courante.
Mettre en valeur les éléments dépréciés Met en valeur (uniquement) les éléments dépréciés en HTML 4 utilisés dans la page courante.
JavaScript / Lien ouvrant dans une nouvelle fenêtre
  • Affiche une icône icône javascript à côté des liens qui contiennent du javascript dans leur attribut href. Les liens sont aussi mis en valeur par une bordure pointillée et un fond de couleur.
  • Affiche une icône icône nouvelle fenêtre et gestionnaire d'évènement à côté des liens qui ont un attribut onclick ou des mots couramment utilisés dans les scripts ouvrant des nouvelles fenêtres. Les liens sont aussi mis en valeur par une bordure pointillée et un fond de couleur.
  • Affiche une icône icône javascript à côté des liens qui ont un attribut target spécifié (_self et _top sont exclus) . Les liens sont aussi mis en valeur par un fond de couleur.
Remerciements à Autark qui a créé le script ayant servi de base à cette fonction.
Voir les liens internes Met en valeur les liens internes à la page. Ils sont identifiés par une icône représentant une ancreicône ancre
liste des liens Affiche dans une nouvelle fenêtre la liste des liens présent dans la page courante avec leur url, leur intitulé et le contenu de leur attribut title (si présent).
Liste des fichiers en téléchargement Affiche dans une nouvelle fenêtre la liste des fichiers en téléchargement dans la page courante comme les PDF, MP3, Word, Excel, Powerpoint, Zip, etc.
Développé à partir d'un script de Sofia Celic
Liste des fichiers multimédias Affiche dans une nouvelle fenêtre la liste des éléments object,embed et des liens vers des fichiers multimédia (mp3, mov, ram, swf, etc.) présents dans la page courante.
Developed by Sofia Celic
Liste des Applets / Scripts Affiche dans une nouvelle fenêtre les éléments applets et leur code correspondant présent dans la page courante. Cela permet également de lister les scripts inclus ou externes présents dans la page courant.
Développé par Sofia Celic, en remerciant Lioren
Haut de page

Code source [alt + U] capture d'écran du bouton Code source de la barre d'outils
Fonction Description
Voir le code source Mise en avant du code source
Mise en avant du code source
  • Affiche dans une nouvelle fenêtre le code source de la page courante avec une mise en avant des éléments choisis
    • tableaux
    • formulaires
    • objects et scripts
    • images
    • listes
    • titre de structure
    • gestionnaire d'événement (onmouseover, onclick etc)
Voir le code source généré Affiche dans une nouvelle fenêtre la structure DOM de la page courante
Mise en avant du code source généré
  • Affiche dans une nouvelle fenêtre le code source généré de la page courante avec une mise en avant des éléments choisis
    • tableaux
    • formulaires
    • objects et scripts
    • images
    • listes
    • titre de structure
    • gestionnaire d'évènement (onmouseover, onclick etc)
Vu partiel du code source

Affiche dans une nouvelle fenêtre la structure DOM de la sélection.

Inspecteurs DOM
Haut de page

IE[ctrl + alt + S] capture d'écran du bouton IE de la barre d'outils
Fonction Description
Activer les Images [ctrl + alt + I] Permet de désactiver/activer l'affichage des images via outils > Options Internet > avancée > Afficher les images
Activer le Javascript [ctrl + alt + J] Permet de désactiver/activer Javascript via outils > Options Internet > sécurité > Personnaliser le niveau > autoriser les scripts
Activer ActiveX Permet de désactiver/activer ActiveX on/off via outils > Options Internet > sécurité > Personnaliser le niveau > contrôles ActiveX et Plug-ins (pratique pour vérifier les alternatives aux Flash, etc).
Activer les CSS Permet de désactiver/activer le support des CSS.
Note: Ce n'est pas une option recommandée par Microsoft. La désactivation des CSS peut affecter l'affichage de fenêtres ou d'éléments en dehors d'internet explorer, pensez à les réactiver avant de fermer internet explorer. Si vous constatez des dysfonctionnements dans l'affichage de certains éléments relancez internet explorer et réactivez les CSS.
taille du texte Il s'agit de la même fonctionnalité que Affichage > Taille du texte >
des "raccourcis clavier" sont utilisables : la plus petite [ctrl + alt + Q], moyenne [ctrl + alt + Y], la plus grande [ctrl + alt + Z]
Paramètres d'accessibilité [ctrl + alt + D] Ouvre outils > Options Internet > Accessibilité
Haut de page

Autres fonctions
Fonction Description
Notes [ctrl + alt + L] capture d'écran du bouton Notes de la barre d'outils

Quand le bouton Notes est activé, un formulaire de saisie est affiché en dessous de la barre d'outil. Des notes peuvent être saisies et tous les messages s'affichant normalement dans des boites d'alertes lors de l'utilisation des fonctions de la barre d'outils s'afficheront dans le formulaire.

Le contenu du formulaire de saisie peut être sauvegarder comme fichier texte. Tout fichier texte peut également être ouvert par l'utilisation du menu Fichier à côté du formulaire de saisie.

capture d'écran du formulaire de saisie de notes
Firefox [ctrl + alt + F] capture d'écran du bouton Firefox de la barre d'outils ouvre la page courante dans Firefox (si installé)
Opera [ctrl + alt + O] capture d'écran du bouton Opera de la barre d'outils ouvre la page courante dans Opera (si installé)
Haut de page

Raccourcis clavier de la barre d'outils
Bouton Combinaison de touches
WAT ctrl + alt + 0
Vérifier ctrl + alt + 1
Redimensionner ctrl + alt + 2
CSS ctrl + alt + 3
Images ctrl + alt + 4
Couleur ctrl + alt + 5
Structure ctrl + alt + 6
Tableaux ctrl + alt + 7
Cadres ctrl + alt + 8
Informations ctrl + alt + 9
Code source ctrl + alt + U
Notes ctrl + alt + L
Firefox ctrl + alt + F
Opera ctrl + alt + O
IE ctrl + alt + S
Haut de page