Comment garantir la lisibilité et la compréhension de l’information lorsque les styles sont désactivés ?

Ce que j’ai fait :

• lire l’article Respecter la distinction fond et forme(lien externe) du Guide de l’intégrateur
• lire l’article Background-image et couleurs CSS(lien externe) de Nicolas Hoffmann
• lire les notices Garantir la lisibilité des contenus lorsque les images ne sont pas affichées(lien externe) et Garantir la compréhension de l’information même lorsque CSS est désactivé(lien externe) d’AcceDe Web
• lire l’article Les grilles CSS et l’accessibilité(lien externe) de Mozilla

Ce que j’ai appris

Rappel : distinction fond et forme

On ne le répétera jamais assez mais le développement d’un site web repose sur la distinction entre le contenu et sa mise en forme. Le HTML (HyperText Markup Language) permet de baliser sémantiquement le contenu tandis que le CSS (Cascading Style Sheets) permet de réaliser sa mise en forme. Cela signifie deux choses :

• la mise en forme ne doit jamais apporter du sens au contenu et le contenu ne doit pas être pourvu d’éléments de mises en forme

• un site doit être compréhensible sans mise en forme

En effet, les technologies d’assistance restituent uniquement le contenu et n’ont pas accès à la mise en forme. D’autre part, certains internautes sont susceptibles de modifier les styles du site pour adapter la présentation à leurs propres besoins (des contrastes plus élevés, la taille des caractères…). Par conséquent, si les styles apportent de l’information, tous les internautes ne pourront pas y avoir accès.

En conséquence :

• ne pas utiliser les balises HTML à des fins de présentation : par exemple, utiliser une balise <h1> pour avoir un texte de grande taille

• ne pas utiliser d’éléments ou d’attributs de mise en forme : par exemple des éléments <center>, <u> ou <marquee>, ou des attributs align, bgcolor ou border

• ne pas générer de contenu en CSS via la propriété content et les pseudo-sélecteurs ::after et ::before. Par exemple :

  a[href*=".pdf"]::after {
    content: ' (PDF)';
  }
  

Le contenu doit demeurer visible et compréhensible sans CSS

Le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) énonce les deux critères suivants :

Critère 10.2. Dans chaque page web, le contenu visible reste-t-il présent lorsque les feuilles de styles sont désactivées ?

Critère 10.3. Dans chaque page web, l’information reste-t-elle compréhensible lorsque les feuilles de styles sont désactivées ?

Il s’agit de vérifier que la désactivation des styles ou des images n’entraîne pas une perte d’information.

Note : il est facile de désactiver les styles ou les images grâce à la barre d’outils de Web Developer.

• aller dans l’onglet ‘CSS’ > ‘Disable all styles’
• aller dans l’onglet ‘Images’ > ‘Hide images’

Les images intégrées en CSS

Une attention particulière doit être portée aux images de fond, c’est à dire les images insérées grâce aux propriétés background et background-image :

• il faut à tout prix éviter d’intégrer des images de fond porteuses d’information car alors le contenu sera perdu pour certains internautes. Si aucune autre solution ne peut être mise en place, veillez comme toujours à fournir une alternative textuelle, par exemple par le biais d’un texte caché en CSS.

• lorsqu’un texte est superposé à une image de fond décorative, il est important de mettre en place une couleur de remplacement qui garantira la lisibilité du texte en l’absence de cette dernière. En effet si vous n’indiquez pas de couleur spécifique, la couleur héritée est susceptible de poser un problème d’accessibilité (notons bien qu’il peut aussi arriver que la couleur héritée permette de lire le texte). On peut indiquer la couleur de la manière suivante :

  background: #000 url(images/fond.jpg) center no-repeat;
  

Les images intégrées en HTML

Les images porteuses de sens intégrées en HTML grâce à la balise <img /> peuvent elles aussi être désactivées. Dans ce cas, le contenu de l’attribut alt doit demeurer visible. Prévoir une couleur de fond dans ce cas là est donc tout aussi important que pour des images intégrées en CSS.

Note : il est facile de remplacer les images par leur attribut alt grâce à la barre d’outils de Web Developer.

• aller dans l’onglet ‘Images’ > ‘Replace images with alt attributes’

La mise en forme ne doit pas se faire au détriment de la compréhension

Il est souvent demandé aux intégrateurs et intégratrices de réaliser des mises en forme complexes. Fort heureusement, les possibilités d’agencement et layout ont beaucoup évolué depuis les sites construits grâce aux tableaux HTML. Flexbox et Grid nous permettent de mettre en place des gabarits complexes et même de réordonner le contenu pour qu’il apparaisse dans un ordre différent de celui défini dans le code source. Par exemple avec les propriétés order ou grid-auto-flow: dense.

Pour autant, ces propriétés d’ordre et de placement doivent être utilisées uniquement pour des raisons visuelles et non pour réordonner logiquement le contenu. En effet, lorsque des feuilles de styles utilisent ces propriétés pour réordonner les éléments de manière logique, les technologies d’assistance ne sont pas à même de percevoir cette information et lisent l’ordre donné dans le code HTML. Lorsque nous concevons un site, il est donc important de nous poser la question suivante : sans mise en forme, dans l’ordre de lecture tel que défini par le code HTML, mon contenu est-il compréhensible ?

Le guide de l’intégrateur fournit à ce sujet un exemple d’implémentation basique d’un bloc d’actualités(lien externe) et montre la construction à privilégier pour garantir la meilleure restitution possible de l’information.