Mémento "Accessibilisation du Web"

1

Ne pas utiliser de cadres (<frameset>, <frame> et <iframe>). En permettant l'inclusion de fichiers dans d'autres, les cadres brisent l'unité du Web : la page. Dans ce cas, la structure est bafouée car purement visuelle, la navigation entre les cadres hasardeuse (même en l'absence de handicap), la mise en signet impossible (Parmi les multiples URLs, laquelle enregistrer ?), le référencement inefficace.
http://www.openweb.eu.org/articles/finir_cadres/
http://forum.alsacreations.com/topic-1-451-1-Les-frames-cadres-et-iframes--a-mediter.html

Ne pas utiliser de tableau (<table>) pour la mise en page, sauf si le tableau garde un sens lorsqu'il est linéarisé. Les tableaux sont conçus pour structurer, classer, comparer et mettre en relation des données, pas pour disposer visuellement du contenu. Quand un tableau est linéarisé, chaque cellule (<td> ou <th>) devient un paragraphe, dans l'ordre du code source. Les cellules doivent garder du sens lorqu'elles sont lues de la sorte.
http://www.openweb.eu.org/articles/problemes_tableaux/

Valider chaque document avant de le publier. Rédiger les codes structurels (HTML ou XHTML) et de présentation (CSS) sans erreur. Concevoir pour les machines avant de convcevoir pour des humains. Un code non valide risque d'être mal interprété par les machines, les utilisateurs humains souffiront donc de cette mauvaise interprétation. Urls des validateurs : http://validator.w3.org (HTML ou XHTML) et http://jigsaw.w3.org/css-validator/ (CSS).

Respecter la sémantique. Utiliser chaque balise en fonction de son sens, sans jamais se soucier de l'apparence visuelle qu'elle pourrait avoir, avec ou sans CSS. Un document doit être utile et compréhensible avant d'être attirant visuellement. L'usage de tableaux de mise en page ne peut en aucun cas être une exception au respect de la sémantique.

Spécifier la langue principale du document. Permet aux lecteurs d'écran de prendre les bonnes intonations. Par exemple, utilser l'attribut lang de l'élément html.

Lorqu'une information est apportée par la couleur, doubler cet apport d'une autre façon. L'information doit être disponible sans la couleur, par le contexte ou le balisage par exemple.

Attribuer un équivalent textuel à tout élément non textuel.

• Donner une valeur à l'attribut alt pour les balises <applet> (déconseillé même en HTML), <area>, <img> et <input type="image" />.
• Insérer du contenu alternatif au sein de <object> (entre <object> et </object>) ; même méthode pour <applet>, <noframes> et <noscript>.
• Pour les balises <frame>, <iframe> et <img>, l'attribut longdesc (non interprété par certains agents-utilisateurs) permet de lier un fichier textuel (en .htm par exemple) contenant une description détaillée.
• L'art ASCII peut être le corps de <acronym> afin d'être plus compréhensible, son alternative est alors l'attribut title de <acronym>.

• Ne donner qu'une seule alternative textuelle à l'élément img !
• L'attribut alt ne peut pas contenir de balisage.
• Le corps de <applet>, <noframes>, <noscript> et <object> contient du balisage.

2

Employer les feuilles de style en cascade (CSS) pour gérer la mise en page et la présentation. Ne pas utiliser d'éléments dépréciés (déconseillés voire invalidants) tel les balises <s> ou <u> ou l'attribut align. Les images uniquement décoratives ne devraient pas être présentes dans le code structurel mais insérées en fond (propriété background-image).

Privilégier le balisage (balises et attributs) aux images pour transmettre des informations. Cette pratique ne concerne pas que HTML ou XHTML, mais évoque aussi MathML (par exemple). Ce langage, dérivé de XML, permet de baliser des équations mathématiques plutôt que d'utiliser des images en représentant.

Utiliser les technologies du W3C quand elles sont disponibles et adaptées à une tâche, et préférer les dernières versions dès qu'elles sont supportées. Ne pas se priver soi ou les utilisateurs des normes établies, à partir du moment où les agents-utilisateurs peuvent les interpréter correctement. Par exemple, baliser en XHTML 1.0 plutôt que XHTML 1.1.

Éviter les technologies propriétaires. Par définitions, ces technologies (Flash, PDF, Word...) ne sont pas compatibles avec tous les matériels et logiciels. L'utilisateur peut ne pas disposer des plug-ins nécessaires pour lire des documents dans de tels formats.

Ne pas utiliser de technologies obsolètes. Par exemple, ne pas employer de balises de présentation telles <center>, <font> ou <strike> ou d'attributs de présentation tels align, bgcolor ou valign. Cette pratique ne se limite pas aux technologies du W3C.

Créer un contraste optimal entre la couleur d'arrière-plan et celle du premier plan. Le contenu (dont les images) doit pour pouvoir être lu par une personne daltonienne ou sur un écran monochrome (noir et blanc).
http://www.snook.ca/technical/colour_contrast/colour.html
http://www.vischeck.com

Baliser correctement les listes et citations. Ne pas utiliser de balises telles <ul> ou <blockquote> pour créer un retrait à partir de la gauche.

Assurer l'accessibilité des contenus dynamiques ou en proposer une version accessible. Par exemple, proposer une version linéaire accessible. Éviter cependant la pratique des "pages alternatives" mais préférer l'accessibilité de toutes les pages.

Fournir des méta-données concernant les documents en eux-même et au sein d'un site. Des méta-données sont des informations sur des données. Elles permettent de donner des précisions. Plusieurs possibilités existent, complémentaires, dont les suivantes :

• donner une valeur à l'attribut title (s'applique à presque tous les éléments) ;
• proposer des liens de navigation (glossaire, page de départ, suivante, précédente...) ou des versions alternatives avec <link> au sein de <head> ;
• la balise <meta> peut être utilisée pour préciser l'auteur, la date du document, etc.

3

Fournir un moteur de recherche interne ou un index par mot-clé, accessible depuis chaque page du site. Laisser à l'utilisateur la possibilité de chercher par ses propres choix et idées.

1

Dans un ensemble de cadres (<frameset>), donner un titre pertinent à chaque cadre (<frame>). Une valeur pertinente de l'attribut title facilite l'identification et la navigation entre les cadres.

Dans un jeu de cadres (<frameset>), décrire l'objectif de chaque cadre (<frame>) et sa relation aux autres si son titre (attribut title) ne permet pas à lui seul de comprendre tout cela. Utiliser l'attribut name (un seul mot, pas d'espace) voire longdesc (ce dernier n'est pas supporté par certains agents-utilisateurs).

Dans un jeu de cadres, donner un contenu alternatif pour les agents-utilisateurs ne pouvant pas interpréter les cadres. Utiliser la balise <noframe> au sein de <frameset>.

1

Préciser chaque changement de langue pour le texte et les équivalents textuels. Ceci est utile notamment pour les média de restitution non visuel, qui pourront alors prononcer mieux le texte dont la langue n'est pas celle dominante du document. En XML, utiliser l'attribut xml:lang.

Rédiger de la façon la plus simple et la plus claire (explicite) possible. Le langage doit être approprié aux contenu et public-cible d'un site. Éviter l'argot, l'ironie, les sous-entendus.

Rédiger des liens compréhensibles et pertinents hors contexte. Le libellé (entre <a> et </a>) doit avoir du sens losqu'il est perçu en dehors de son contexte. Certains agents-utilisateurs peuvent créer une liste de tous les liens d'une page. L'attribut title peut être utilisé pour apporter des précisions (lien externe, mail, dans une autre langue, dans autre format de fichier...).

2

Attribuer la même destination à deux liens ayant le même intitulé. Le texte de libellé (corps de <a>) doit être unique par page pour une destination (attribut href) donnée. Sinon, différencer deux ou plusieurs liens avec l'attribut title de <a>.

3

Développer chaque abréviation ou acronyme lors de sa première apparition. La forme développé permet de comprendre cet abréviation/acronyme.

Séparer deux liens successifs par au moins un caractère non-lié imprimable entouré d'espaces.. Permet une bonne distinction des liens adjacents. Le caractète imprimé peut être une virgule, un point virgule, ou même une image.

Proposer aux utilisateurs des contenus selon leur préférences. La négociation de contenu consiste à afficher du contenu en fonction des préférences de l'internaute, notamment la langue.

Fournir un moyen de sauter de l'art ASCII. Par exemple, un lien avant menant vers une ancre située juste après.

Compléter le texte avec des contenus multimédia (image, graphique, vidéo...) quand ils permettent d'en faciliter la compréhension. Le contenu de nature textuelle doit primer sur tous les autres, mais ces derniers ne sont pas à négliger.

1

Organiser les documents de façon à pouvoir être lus sans feuille de style. Ne pas faire reposer l'intérêt d'un document uniquement ou essentiellement sur un aspect visuel.

2

Précisez une unité relative pour la taille de police plutôt qu'absolue. Permettre le redimensionnement par l'utilisateur avec em.

Spécifier une police sans serif en dernier choix. Attribuer la valeur sans-serif à la propriété font-family en tant que dernier choix. Une police sans empattement telle Verdana est plus facile à lire qu'avec (telle Times New Roman).

Employer des unités de tailles relatives. Les unités relatives (em ou %) permettent à la mise en page (design) de s'adapter à la largeur de l'écran.

3

Créer et maintenir une structure et une présentation constantes sur toutes les pages. Les principaux éléments distinctif (barre de navigation, menu, formulaire de recherhe) doivent être présents dans le même ordre dans le code source sur chaque page et affiché aux même endroits pour faciliter leur identification et à contrario celle du contenu (qui n'est pas constant).

Proposer plusieurs styles différents. La mise en place d'un "style-switcher" donne aux utilisateurs la possibilité de personnaliser leur vision du site (polices, tailles, couleurs...).

1

Ne pas faire clignoter ou scintiller l'écran ou des éléments visuels. Les changements brusques de luminosité ou de couleur, les flashes et certaines animations peuvent provoquer des crises d'épilepsie chez les personne souffrant de sensibilité à la lumière (photosensibilité).

2

Laisser à l'utilisateur le contrôle du chargement et du rafraichissement des documents. Ne pas mettre en place de rafraîchissements périodiques (meta http-equiv="refresh", déprécié) ou de redirections automatiques. Ne pas forcer la navigation.

Éviter les éléments en mouvement. Sinon, permettre à l'utilisateur de stopper tous les éléments qui bougent.

1

Grouper les éléments similaires avec <fieldset> + <legend>. Rassembler les contrôles de sens proche ou associé et donner une légende à l'ensemble avec <legend>.

Associer explicitement une étiquette (<label>) à chaque élément de formulaire. Relier l'étiquette à l'élément grâce à une même valeur de l'attribut for de <label> et de l'attribut id de l'élément, en faisant précéder le contrôle par son étiquette. Exceptions : <button>, <input type="submit" />, <input type="reset" /> <input type="image" />. Ne pas utiliser <label> en tant que conteneur du libellé (l'étiquette) et de l'élément (le contrôle) ; c'est ce que l'on appelle un label implicite.

Spécifier les champs obligatoires. Indiquer quels champs doivent être remplis, les autres étant facultatifs.

2

Grouper les éléments d'option avec <optgroup>. La structuration de longue liste <select> facilite la lecture des options (<option>) de celle-ci.

3

Attribuer une valeur par défaut à chaque élément de formulaire. Cette pratique comprend l'inclusion d'un texte initial dans le corps de <textarea> ou étant la valeur de l'attribut value de <input type="text" />.

1

Titrer chaque page (<title>). L'élément title permet de donner un titre à chaque document. C'est une balise primordiale pour leur identification, mais aussi pour le référencement. Ne pas confondre avec l'attribut title qui peut s'appliquer à presque tous les élements.

Pour les images cliquables (côté serveur avec "ismap" ou côté client avec "usemap), fournir de véritables liens textuels. Ces liens doivent mener vers le même destinations que les régions actives, ils peuvent se situer par exemple après l'image, ou dans le corps de <object>.

2

Ne pas ouvrir de nouvelles fenêtres ("pop-ups") ni changer la fenêtre de navigation sans en informer l'internaute. Les pop-ups perturbent la navigation et brisent l'historique de navigation. Un message d'alerte peut être placé dans l'attribut title de <a>.

Établir un plan de site ou une table des matières accessible depuis chaque page du site. Une carte permet de donner une vision globale du site. Une table des matières est un sommaire détaillé.

Fournir des mécanismes de navigation cohérents. Commentaire, explications, exemples...

3

Pour la recherche, proposer des options L'utilisateur peut personaliser et préciser sa recherche. Par exemple, proposer la recherche par type, domaine, précisions ("chaque mot", "n'importe quel mot")...

Proposer des raccourcis clavier avec l'attribut accesskey. Cet attribut peut s'appliquer aux éléments a,area, button, input, label, legend et textarea. Il permet d'activer un lien sans être focalisé dessus, mais peut aussi être utilisé avec les formulaires. La liste de recommandations clé/destination est la suivante :

• s : passer le menu ;
• 0 : liste des raccourcis et/ou politique d'accessibilité ;
• 1 : accueil ;
• 2 : actualités du site ;
• 3 : plan du site ou index ;
• 4 : formulaire de recherche ou page de recherche ;
• 5 : Foire Aux Questions, lexique ;
• 6 : aide ;
• 7 : contact ;
• 8 : copyright, conditions d'utilisations ;
• 9 : livre d'or.

Fournir une barre de navigation. Un arbre (accueil > répertoire 1 > page courante) permet de positionner la page courante dans l'architecture du site.

Grouper les liens similaires (menu, sommaire...) et permettre le contournement de ce groupe. Permettre aux utilisateurs de sauter des listes de liens. Les menus sont présents sur toutes les pages et il est donc frustrant de devoir les parcourir à chaque lecture de page.

Pour les documents allant par groupe (présentation, tutoriel...), fournir des informations facilitant la navigation. Préciser l'ordre dans lesquels les lire, leur éventuelle hiérarchie, indiquer avec l'élément link les relations "page suivante", "pages précédente"...

1

S'assurer que les documents restent utilisables lorsque les objets programmés (scripts, applets...) sont désactivés ou non supportés. Par exemple, ne pas rédiger de destination de lien (attribut href) commençant par javascript: et donner une alternative à <script> via <noscript>.

Mettre à jour les équivalents textuels dès que le contenu dynamique dont ils sont l'alternative change. Assurer l'équivalence permanente entre les contenus et leurs alternatives.

Inclure une description auditive à la bande sonore d'une vidéo. Une description auditive est une narration descriptive du film qui s'ajoute aux dialogues sans y interférer.

Synchroniser les alternatives (sous-titres, description auditive...) d'une vidéo avec celle-ci.

Rendre chaque élément accessible et utilisable quelqu'est la configuration matérielle et logicielle de l'utilisateur. Ne faire dépendre aucun élément de la configuration matérielle et logicielle de l'utilisateur, y compris les technologies d'assistance.

2

Privilégier les gestionnaires d'évènements logiques à ceux dépendants des périphériques. onfocus, onblur et onselect permettent à tout utilisateur d'interagir.

Ne spécifier des gestionnaires d'événements qu'indépendants et compatible avec le matériel de l'utilisateur. Tous les utilisateurs ne peuvent manipuler un dispositif de pointage telle la souris, il faut donc permettre les interactions ne requierant que le clavier. Utiliser onkeydown, onkeyup et onkeypress. Au cas où des gestionnaires requierent un dispositif de pointage, le doubler par un qui fonctionne au clavier. Ainsi, doubler onmousedown par onkeydown, onmouseup par onkeyup, onclick par onkeypress. Ne pas requérir du tout ondblclick parce qu'il n'a pas d'équivalent clavier.

Décrire sur la page les diagrammes et les images qui apporte beaucoup d'information ou via l'attribut longdesc. L'attribut alt ne suffit pas pour de longues descriptions.

Fournir une transcription (textuelle) pour toute vidéo. La version texte d'un document vidéo permet de prendre prise sur ce document.

1

Structurer le document avec des titres (hx). Les éléments d'entête (h1 à h6) permettrent d'introduire une section de document. Certains agents-utilisateurs permettent de naviguer de titre en titre, en ayant ainsi un semblant de vision globale du document. Ne pas "sauter" de niveau hiérarchique (par exemple : de h2 à h4).

2

Sectionner les grands groupes de contenus en groupes structurels. Si une page contient beaucoup de contenu, le sectionner et créer un sommaire en début de page dont chaque article mène vers une section.

Structurer les listes d'éléments avec <ul>, <ol> ou <dl>. Ne pas séparer ces éléments avec des retours chariots (<br />).

3

Éventuellement, modifier le parcours naturel de tabulation avec l'attribut tabindex. Cet attribut peut s'appliquer aux balises <a>,<area>, <button>, <input>, <object>, <select> et <textarea>. Il permet de stipuler un autre ordre de tabulation que celui du code source. Si des tabindex sont spécifiés, l'ordre de tabulation est alors le suivant : les tabindex par ordre croissant puis les autre éléments de la page (retour à l'ordre du code source). Cela peut être utile pour suivre un cheminement particulier en début de page (menu, moteur de recherche...) qui est alors suivie d'une navigation dans l'ordre normal des tabulations.

1

Si un tableau est utilisé pour de la mise en page, ne pas employer de balise pour l'aspect visuel. Par exemple, le contenu de <th> est souvent en gras et aligné au centre.

Utiliser les tableaux pour structurer, classer, comparer et mettre en relation des informations. Ne pas mettre en forme visuellement des données, par exemple avec <pre>. Un tableau les structure et leur donne du sens.

Identifier les en-têtes de lignes et de colonne. Utiliser <th> au lieu de <td>.

Baliser les groupes structurels de lignes et de colonnes. Grouper les lignes avec <thead>, <tfoot> et <tbody>. Pour les colonnes, employer <colgroup> et <col>.

Lier les cellules d'en-tête (<th>) aux cellules de données (<td>). Utiliser l'attribut scope avec <th>. Si le tableau comporte au moins une fusion de cellule (attribut rowspan ou colspan), lier les cellules à plusieurs en-têtes avec l'attribut headers de <td> et l'attribut id de <th>.

2

Donner une légende à chaque tableau avec <caption>. Cette balise, située juste après <table> permet de donner un titre. Visuellement, la légende est souvent affiché au-dessus du tableau, centrée.

3

Résumer le contenu. Ce résumé se place dans l'attribut summary de la balise <table>. Il n'est pas explitié par les agent-utlisateur graphiques, et sert plutôt au agents de restitution non visuel. Il est très utile pour donner un apperçu du contenu et donc une vision globale de celui-ci.

Abréger les en-têtes. En utilisant l'attribut abbr des entêtes <th>, leur lecture répétitive par un lecteur d'écran devient moins pénible et plus facile à comprendre. Les lecteurs d'écrans peuvent lire les les cellules de tableaux une à une en faisant précéder le contenu (<td>) par l'entêtes à laquelle la cellule est relié (si une ou des entêtes sont précisées).