Aller au contenu principal

Correctifs mineurs d’accessibilité

Guillaume Barbier

Temps de lecture : ~ 2 minutes

J'ai lancé lighthouse sur quelques pages et pour l'instant les résultats sont pas mauvais sur mon local[1] :

  • Performances : 100
  • Accessibilité : 88
  • Bonnes pratiques : 96
  • SEO : 100

Un score de 88 sur un test automatique qui doit couvrir tout au plus 30% des critères, c'est pas dingue. Heureusement les correctifs sont assez simple :

  • Un lien vide (parce que la référence était cassée dans Eleventy)
  • Le thème utilisé pour la coloration syntaxique du code n'est pas accessible (certains contrastes sont insuffisants)
  • Mes articles et entrées de journal n'ont pas de balise <main>

Rôle main ou article ?

Je n'étais pas très chaud pour remplacer ma balise <article> par une balise <main>, et la doc sur le sujet ne m'a pas trop aider :

Aucune des documentations que j'ai trouvé n'écrit noir sur blanc (ou l'inverse si on est en mode sombre 😉) comment traiter un article de blog.

C'est finalement en discutant avec les copines que j'ai la solution. Elles me recommandent la structure suivante :

<html>
  <body>
    <header>
      <!-- Header du site (nom du site, menu) -->
    </header>
    <main>
      <!-- Fil d’Ariane -->
       <article>
        <!-- Le contenu de mon article de blog -->
       </article>
    </main>
    <footer>
        <!-- Footer du site -->
    </footer>
  </body>
</html>

Et avec cela, elles me donnent l'argument qui clos le débat : la présence d'une région main est requis par le RGAA ! Et plus particulièrement par le critère RGAA 9.2

PS: au passage, je supprime le role="banner" du <header> à la racine de mon document : cette information est redondante, comme expliqué dans la doc MDN du <header>

Changer ma coloration syntaxique

Pour la coloration syntaxique, j'utilise un des thème coloré fournis avec PrismJS, okaidia. Malheureusement lighthouse m'informe que le contraste offert par ce thème pour certaines langages (notamment les éléments HTML !) est insuffisant.

Pour résoudre ça, j'installe la dépendance prism-themes afin de pouvoir remplacer mon thème actuel par un thème créé par Eric Bailey : prism-a11y-dark

Réglages pour facilement appeler un des nouveaux thèmes installés

Afin de pouvoir facilement importer ce nouveau thème Prism, je met à jour mon script de compilation SASS

// In eleventy.config.js
export default async function(eleventyConfig) {
  let result = sass.compileString(inputContent, {
    loadPaths: [
      parsed.dir || ".",
      this.config.dir.includes,
      "node_modules/prismjs/themes",
      "node_modules/prism-themes/themes" // New Themes folder
    ],
    style: "compressed"
  });
}

Et hop ! 100 sur le score d'accessibilité de Lighthouse. On est loin d'une conformité complète mais c'est déjà ça de garanti !

  1. Heureusement d'ailleurs. Si j'avais de mauvaises performances en local au début du projet, ce serait un très mauvais signe pour la suite ! ↩︎