Bootsrap 5 étant enfin sorti en version finale il y a quelques semaines, il est temps de se pencher sur les évolutions de celui-ci concernant l’accessibilité.

Un peu d’histoire

Les trois premières versions de Bootstrap n’étaient pas extraordinaires de ce point de vue. Elles nécessitaient l’ajout de quelques CSS et Scripts.

La version 4 avait osé de gros changements. Ceux-ci se sont concluent pas de gros breaking changes qui ont remis Bootstrap sur la bonne voie avec :

• Un plus grand respect de la sémantique HTML.
• Une meilleure application des rôles.
• Une documentation qui inclue de base les attributs aria utiles.

Bootstrap 5

La version 5 s’inscrit dans la droite lignée de la version 4 :

• Toujours plus respectueux de la sémantique HTML (il y a beaucoup plus de buttons qui sont utilisés à la place de liens)
• Les focus sont plus visibles.
• Un contraste des couleurs plus tranché (WCAG niveau AA par défaut)
• JavaScript est beaucoup moins utilisé, au profit de CSS (ce qui rend les modifications et adaptations des styles plus faciles).
• JavaScript n’est plus utile pour la mise en évidence des composants Bootstrap.
• La documentation admet des manques ou lacunes et indique clairement les attributs applicables pour améliorer l’accessibilité.
• La documentation donne quelques conseils pour un usage convenable de JavaScript (surtout pour l’affectation du focus)

Mais il y a aussi un petit plus qui change tout dans la manière de gérer les Mixins SASS pour générer les CSS.

• La quasi-totalité des mixins SASS permettent de ne pas définir toutes leurs options (de couleurs, tailles, et…).
• Une option non définie passe le plus souvent par une méthode qui se charge de définir l’option la plus intéressante en fonction des options déjà définies par le développeur.

En pratique, si un développeur veut réaliser un bouton personnalisé et qu’il ne fait que définir la couleur de fond, Bootstrap va calculer les couleurs du texte, du focus…. etc… (le tout en respectant les contraintes de WCAG niveau AA).

Conclusion

Bootstrap a encore revu sa copie concernant l’accessibilité et c’est une bonne chose. Le travail qui a conduit à ne plus dépendre de JQuery a permet à l’équipe Bootstrap de revoir en profondeur sa vision des scripts et leur utilité. L’accessibilité en est grandement simplifiée (il n’est plus utile de plonger dans les arcanes des scripts pour comprendre comment rendre plus accessible un composant ou un autre).

Le fait de s’appuyer toujours plus sur les SASS pour produire des CSS accessibles me plait beaucoup. Cela me semble très intéressant pour des développeurs peu sensibilisés à l’accessibilité. Ils devraient éviter de nombreux problèmes.

Pour les développeurs expérimentés, il faudra un petit temps d’adaptation. Mais au final : accessibilité et productivité sont au rendez-vous.