Après la théorie, on met les mains dans le code.

Ce que j’ai fait :

• lire la notice Accordéons(lien externe) d’AcceDe Web

• lire l’article Collapsible Sections(lien externe) de Inclusive Components

• créer un Codepen(lien externe) de démonstration d’un accordéon accessible : je me suis occupée de la partie HTML et CSS en suivant les instructions de la notice ARIA du W3C, en revanche le script Javascript est celui de la première partie du tutoriel Collapsible Sections(lien externe) de Inclusive Components. Ce code Javascript peut d’ailleurs être amélioré (l’article se poursuit d’ailleurs pour transformer l’accordéon en véritable web component).

  Après quelques tentatives, j’ai laissé le code tel quel principalement par manque de connaissances en Javascript, le gros point à améliorer serait de faire apparaître par défaut le contenu des panneaux de l’accordéon dans le cas où le Javascript serait désactivé.

• naviguer au clavier sur l’accordéon et vérifier que les interactions requises fonctionnent correctement

• tester le rendu avec Orca et le navigateur Epiphany

Ce que j’ai appris

Orca et Epiphany : la combinaison gagnante

Après plusieurs échecs concernant la mise en fonction du lecteur d’Orca sur mon ordinateur, j’ai pu régler plusieurs problèmes :

• le synthétiseur vocal par défaut, “espeak”, ne marche pas et il faut donc bien en installer un autre. “espeak-ng” fait très bien l’affaire et est diponible en français.

• je n’avais aucune restitution en utilisant Firefox, en revanche avec le navigateur Epiphany ça marche très bien.

J’ai donc pu tester la restitution du code de mon accordéon et j’ai obtenu le résultat suivant : “Structure (rôles, propriétés, états)” Réduit Bouton En-tête Niveau 2”. Le contenu et l’état du bouton d’en-tête sont bien annoncés.

L’état varie de “étendu” à “réduit” en fonction de si le panneau est ouvert ou non.

<details> et <summary>

Il existe des éléments HTML permettant de réaliser un accordéon sans implémenter de code Javascript supplémentaire : <details> et <summary>. Selon la documentation Mozilla(lien externe) :

L’élément HTML summary représente une boîte permettant de révéler le contenu d’un résumé ou d’une légende pour le contenu d’un élément details. En cliquant sur l’élément summary, on passe de l’état affiché à l’état masqué (et vice versa) de l’élément details parent.

Malheureusement, ces éléments ne sont pas encore supportés par l’ensemble des navigateurs(lien externe) : aucun support du côté d’Internet Explorer et Opera Mini, et seulement à partir de dernière version de Edge.