J’ai présenté Silex et l’accessibilité à Paris Web le 24 septembre. La veille, j’ai enregistré une démo de 20 minutes pour montrer comment on s’y prend dans l’éditeur. Cet article en reprend l’essentiel, captures à l’appui.
Je ne vais pas vous apprendre l’accessibilité. Je ne suis pas expert, et pendant nos lives, des membres de la communauté Silex m’ont bien briefé. La question ici est plus simple : une fois la formation à l’accessibilité faite et le HTML voulu bien en tête, est-ce que l’outil nous laisse le faire ?
D’abord, ce qu’est Silex
Un site statique, c’est du HTML, du CSS et des fichiers. Pas de base de données, pas de PHP. C’est plus rapide, plus sûr et plus écologique. Tout le monde en faisait dans les années 2000 : on crée un fichier, on le met en ligne.
Ça se complique quand arrive un projet client. La personne en face veut travailler en ligne, dans un CMS. Il faut alors tout brancher : reconstruire le site à chaque modification, dire dans le code que ce titre vient de tel champ du post de blog, remettre en ligne ce qui a changé. C’est là que la plupart des agences arrêtent.
Silex fait ce travail à votre place : le branchement est déjà prêt et tout se fait en visuel. On voit les données du CMS dans l’éditeur, on les modifie et on les style à la souris. Au milieu, c’est le HTML, à droite le CSS. Tout ce qu’on connaît en code sert dans Silex, et l’inverse aussi.
Pour la démo, je suis parti d’un template, j’ai changé le titre et j’ai cliqué sur Publish. En dix minutes, j’avais un site modifiable et en ligne sur GitLab Pages. Avec un CMS branché, il faut en plus relier chaque élément à son champ, mais ça reste des clics.
Le alt des images
C’est le niveau zéro de l’accessibilité. Dans les réglages d’une image, il y a un champ Alt. C’est ce que lit le lecteur d’écran.
Si l’image est décorative, on laisse le champ vide et le lecteur d’écran la saute. Sinon, on y décrit l’image. Un bug empêche encore le champ vide de produire un alt vide dans le HTML publié : il est en cours de correction.
Le bon élément HTML
Avant même ARIA, il faut utiliser le bon élément HTML. Le bouton Copy du template est une simple div. Pour qu’il soit accessible, il faut en faire un vrai élément button. Dans Silex, ça se règle dans le champ Tag name de l’élément : on choisit button dans la liste.
Le focus clavier ne se teste pas dans la prévisualisation, parce que la touche Tab sert déjà à passer en prévisualisation. Je l’ai donc testé sur le site publié, après une nouvelle publication : à la touche Tab, on arrive bien sur le bouton. Un lien reçoit aussi le focus, mais pour un lecteur d’écran, un bouton et un lien ne sont pas la même chose.
Le même champ donne les balises sémantiques : section, nav, header, article. Nos templates les utilisent déjà, il faut s’en servir.
aria-label, et n’importe quel attribut
Quand un élément s’ouvre, se ferme ou réagit à une action, il faut souvent un attribut ARIA. Dans Silex, n’importe quel attribut s’ajoute depuis la section Attributes des réglages : on clique sur le plus, on donne le nom, par exemple aria-label, puis la valeur.
aria-label, c’est un peu comme le alt, mais pour n’importe quel élément. Sur un titre, ce n’est pas un vrai cas d’usage, c’est juste pour montrer où ça se règle. Silex n’aide pas encore à choisir ces attributs : il faut les connaître.
Les éléments natifs avant le JavaScript
Pour l’accessibilité, le plus simple est d’utiliser au maximum les éléments HTML qui existent déjà. Une checkbox native est interactive et gère son focus toute seule, sans JavaScript ni ARIA. On la pose depuis les blocs de formulaire, et on peut la rendre obligatoire avec la case Required de ses réglages.
Pour un bloc qu’on ouvre et qu’on ferme au clic, comme une FAQ, il y a l’élément details. Il n’est pas dans les blocs de base, mais le Tag name suffit : je passe le conteneur en details, puis son titre en summary. En prévisualisation, c’est le titre lui-même qui ouvre et ferme le bloc, sans une ligne de JavaScript.
Et si l’élément n’existe pas dans Silex
On m’a demandé récemment les petites pop-up natives, que HTML propose depuis peu et que Silex n’a ni dans ses blocs ni dans la liste Tag name. Dans ce cas, il reste le bloc Custom code : on y tape le HTML qu’on veut. Pour la démo, j’y ai simplement mis un titre h2 de test. Le résultat apparaît dans les calques comme n’importe quel élément, et on le manipule dans l’éditeur comme les autres.
Ce qui manque encore
Silex n’aide pas encore à choisir les attributs ARIA. Rendre tout ça plus simple, voire obligatoire, est sur la roadmap. L’accessibilité de l’éditeur lui-même viendra aussi, j’espère.
Si vous voulez participer à ce chantier :
- vos retours et vos questions sur le forum ou sur Mastodon
- vos tests et vos avis d’expert sur les tickets accessibilité ouverts : l’image décorative avec un alt vide, le rappel des alt manquants, le lien d’évitement dans les templates, le menu burger en button
- la documentation, ouverte aux contributions, à commencer par sa partie accessibilité
- un don au projet
Pour une formation, du support ou du développement sur Silex : les services.
La vidéo
La démo complète, de la création du site à la publication : Accessibilité web dans un éditeur visuel : alt, aria et balises sémantiques avec Silex.
Avec Internet 2000, le studio web où je suis associé, on fait des sites Silex branchés sur WordPress : éco-conçus, accessibles, sûrs, rapides à charger et optimisés pour le SEO et le GEO. Vous êtes une agence et vous voulez voir si Silex tient sur vos projets ? Discuter de votre projet.