Rendre son site plus accessible.

Cette page vous permet de connaître et de publier des astuces simples pour améliorer l'accessibilité de vos pages web.

L'accessibilité concerne autant les pages statiques que les contenus dynamiques, autant le code HTML que le design et l'ergonomie. N'oubliez pas que la qualité du code et le respect des standards sont généralement un premier pas vers un site accessible.

Plus d'informations sur la page officielle française de la Web Accessibility Initiative.

Un point sur l'accessibilité.

«Le pouvoir du web est dans son universalité. Que chacun y ait accès quelque soit ses difficultés est un aspect essentiel.»
(Tim Berners-Lee, directeur du W3C et inventeur du World Wide Web).

À l'origine, l'accessibilité du web doit aider les personnes en situation de handicap (déficience visuelle, difficulté avec les outils de navigation…), ou peu à l'aise avec Internet (ex: les seniors), à naviguer sur des sites.

Désormais, ce concept couvre aussi les multiples conditions matérielles de l'internaute :

  • Diversité des supports (ordinateurs personnels, tablettes, smartphones…) et des résolutions d'écrans.
  • Variété des types de navigateurs (mode graphique, mode texte), de leur moteur de rendu (Gecko, Webkit, Presto…), et bien sûr de leur ancienneté.
  • Limitations diverses : faible connexion, navigation au clavier uniquement, etc.

Sémantique.

L'approche sémantique du code HTML a été trop longtemps méprisée. Elle favorise pourtant l'accessibilité, optimise les pages pour les moteurs de recherche, et les rend également plus faciles à comprendre et à maintenir.

Design.

Parce qu'un site élégant peut aussi être un site accessible.

Responsive et adaptive design.

Il s'agit d'adapter vos pages aux différents périphériques que peuvent utiliser les internautes.

Le responsive design est principalement basé sur l'usage des unités relatives dans les CSS. Merci de vous reporter à la page dédiée.

L'adaptive design concerne tous les langages utilisés pour concevoir la page. Il s'agit non seulement d'adapter le design, mais aussi le contenu, les fonctionnalités, etc. pour les différents périphériques.
Les notions de «dégradation élégante» et d'«amélioration progressive» sont ici courantes.

La typographie web.

La typographie d'un site web est un élément de design à part entière. Non seulement elle participe de l'identité graphique du site, mais en plus elle communique déjà de l'information (par la dureté ou la rondeur des polices, par leurs couleurs, etc.). Enfin, la typographie doit assurer un confort de lecture.

Voici quelques conseils généraux.

Choix de la police.

  1. Pour de longs textes, préférez les polices avec empattements (dites “serif”). Réservez les autres polices pour les titres et les textes courts. Si vous utilisez une police fantaisiste, déclarez aussi une police standard de remplacement.
  2. Évitez d'utiliser plus de trois polices différentes sur une même page. Ne multipliez pas non plus les changements de style d'une même police (ex: du gras, puis du normal, puis de l'italique…).
  3. Préférez les polices aux caractères ouverts. Par exemple, Georgia est plus lisible que Times New Roman. Oubliez aussi les polices qui ne sont pas adapter aux usages du web, ou mal conçues en général (telle Comic Sans).
  4. Veillez au bon usage typographique dans un texte littéraire:
    1. L'apostrophe n'est pas ' (touche 4) mais ’.
    2. Les guillemets ne sont pas “ ” (touche 3) mais « ».
    3. Les points de suspension ne sont pas … (trois points) mais … .
    4. Le tiret long n'est pas - (tiret 6) mais —.
    5. Les opérateurs de calcul ne sont pas - (tiret 6), * (étoile) ou x (lettre x) et / (slash), mais − × et ÷.
    6. Il faut mettre une espace insécable avant : (deux points), ; (point virgule), ? (point d'interrogation) et ! (point d'exclamation).

NOTA: la réalisation de certains caractères peut être difficile sur des claviers standards. La disposition BÉPO est un choix éclairé pour, entre autres, écrire correctement le français.

Taille de la police et disposition.

  1. La taille standard d'une police sur le web est de 16 pt. Évitez d'écrire trop petit. Une page web est faite pour être scrollée! N'ayez pas peur de prendre de la place.
  2. La largeur d'un texte ne devrait pas excéder 80 caractères. À l'inverse, une largeur trop faible est aussi inconfortable.
  3. Il n'est pas nécessaire de justifier le texte, surtout s'il est long. D'une part, la justification est assez mal gérée par les navigateurs. D'autre part, le texte devient plus lisible avec une mise en forme “en drapeau”.
  4. Alignez votre texte à gauche plutôt que de le centrer. C'est plus naturel et plus simple à lire.
  5. On sait aujourd'hui que les dyslexiques lisent mieux les mots dont les lettres sont doublement espacées. En général, ne serrez pas votre texte.
  6. Les interlignes d'un paragraphe sont d'au moins 1.5 fois la hauteur d'une ligne de texte. La lecture est ainsi plus confortable. Exemple de code css:
p, ul, ol {line-height: 1.5em;}

Couleurs de la police.

  1. Les couleurs de votre site ne doivent pas agresser ni fatiguer les yeux de l'utilisateur. Choisissez donc des couleurs de texte qui s'harmonisent avec l'ensemble. De même, évitez de multiplier le nombre de couleurs pour le texte.
  2. Dans tous les cas, le fond et le texte doivent être suffisamment distincts. Veillez à la couleur, à la luminosité et au contraste.
  3. Idéalement, les couleurs d'une page de texte sont: blanc pour le fond (ou mieux: une couleur pâle, moins agressive que le blanc), et gris foncé pour le texte (#333 par ex.). Évitez l'usage du noir (#000) car il scintille.

Les tables en CSS.

Aux origines du web, l'élément HTML <table> (tableau) a souvent été détourné de sa fonction pour servir de simple mise en forme.

Aujourd'hui, les tables HTML ne doivent plus servir qu'aux données tabulaires. Néanmoins, dès CSS 2.1, on peut réaliser des tables CSS pour faciliter la mise en page.

Le résultat ? Une page dont les contenus ne débordent pas et sont toujours bien répartis et alignés, même si vous rajoutez de nouvelles “cellules” ou si vous en remplissez une plus que d'autres. Ce type de mise en forme peut aussi subir de forts zooms et dézooms sans sortir de la page.

Les possibilités :

  • display: table; : disposer en tableau.
  • display: table-row; : disposer en rangée de tableau.
  • display: table-column; : disposer en colonne de tableau.
  • display: table-cell; : disposer en cellule de tableau.

Ergonomie.

Interface utilisateur, arborescence du site, conditions de navigation : un site ergonomique est aussi plaisant à utiliser.

Penser à :

  • Une arborescence logique pour vos pages.
  • Un plan de site, accessible depuis n'importe quelle page.
  • Un menu sur chaque page, qui rappelle à l'internaute où il se trouve dans le site. Il lui permet au moins de revenir à la page précédente et à la page d'accueil.

Pour faciliter la navigation dans une grande page de texte, on peut :

  • Découper son texte en paragraphes titrés.
  • Créer un menu de navigation, des boutons de saut de parties, des boutons de retour en haut de page, etc.

Applications riches et interactivité.

Le web évolue ; les façons de naviguer aussi. Aujourd'hui, les formulaires, les designs interactifs et les applications riches améliorent l'expérience utilisateur. De tous les utilisateurs.

Outils gratuits pour l'accessibilité.

Valider ses codes HTML et CSS.

Que vous soyez intégrateur amateur ou professionnel, vour ne pouvez faire l'impasse sur la validation de votre code. Pour cela, les validateurs du W3C (World Wide Web Consortium) demeurent une référence :

Tester l'accessibilité et la sémantique HTML.

WebAIM propose WAVE, un validateur spécialisé dans l'accessibilité.

Tester l'accessibilité des couleurs.

Si votre site est déjà conçu, Juicy Studio propose un plug-in sous Firefox pour évaluer une page entière.

Un clic droit sur la page pour lancer le test, et hop! Les rapports de contrastes, d'intensité, et les différences de couleurs apparaissent à l'écran, pour chaque balise et selon les critères des WCAG.

Tester le responsive design.

Que l'écran soit petit ou grand, votre page doit rester lisible et utilisable. Sous Firefox, l'outil Responsive Design View de Web Developer peut servir, même si rien ne vaut un test sur supports et navigateurs réels !