Accessible sur 2 niveaux (fonctionnement standard du composant Collapse de Bootstrap 2)
Dans mon exemple, la classe .group-toggle est affectée à l’élément <a /> qui reçoit la classe .collapsed lorsqu’au clic sur celui-ci, l’élément « collapsible » qui lui est associé s’ouvre.
L’élément qui engloble le contenu qui s’affiche/se masque au clic (auquel sont affectées les classes .collapse et .collapse.in lorsqu’il est ouvert) doit aussi reçevoir l’attribut aria-expanded.
Attention: il faut ajouter dans votre code HTML l’attribut tabindex="-1" à l’ensemble des éléments <a /> qui seront cachés au chargement de la page afin que la navigation au clavier ne tienne pas compte de vos liens invisibles jusqu’à l’ouverture des accordéons.
La doc de Bootstrap v2.3.2 concernant le composant Collapse.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
// Accessibilité du composant 'Collapse' pour la FAQ: // [RGAA 7.1.1] Compatibilité avec les outils d'assistance var $listeFaq = $('#liste-faq'); // tabindex $('a[class^="spip_"]', $listeFaq).attr('tabindex', '-1'); $('.group-toggle', $listeFaq).each(function(){ var $this = $(this); $this.on('click', function(){ // Clic pour ouverture if(!$this.hasClass('active')){ $this.closest($listeFaq).find('[aria-expanded]').attr('aria-expanded', 'false'); // tabindex $this.closest($listeFaq).find('a[class^="spip_"]').attr('tabindex', '-1'); $this .attr('aria-expanded', 'true') // voir plus/moins .find('.plus-moins') .text('voir moins'); $this .closest('.article--faq__question') .next('.collapse') .attr('aria-expanded', 'true') // tabindex .find('a[class^="spip_"]') .attr('tabindex', '0'); } // Clic pour fermeture else { $this .attr('aria-expanded', 'false') // voir plus/moins .find('.plus-moins') .text('voir plus'); $this .closest('.article--faq__question') .next('.collapse') .attr('aria-expanded', 'false') // tabindex .find('a[class^="spip_"]') .attr('tabindex', '-1'); } }); }); |
Accessible sur 3 niveaux
Accessible sur 3 niveaux en fonction des classes .navigation-sommaire__fleche--niv3. Il faudra ré-adapter pour votre utilisation de Collapse. Ce n’est pas du plug’n’play.
Dans mon exemple, la classe .group-toggle est affectée à l’élément <a /> qui reçoit la classe .collapsed lorsqu’au clic sur celui-ci, l’élément « collapsible » qui lui est associé s’ouvre.
L’élément qui engloble le contenu qui s’affiche/se masque au clic (auquel sont affectées les classes .collapse et .collapse.in lorsqu’il est ouvert) doit aussi reçevoir l’attribut aria-expanded.
Attention: il faut ajouter dans votre code HTML l’attribut tabindex="-1" à l’ensemble des éléments <a /> qui seront cachés au chargement de la page afin que la navigation au clavier ne tienne pas compte de vos liens invisibles jusqu’à l’ouverture des accordéons.
La doc de Bootstrap v2.3.2 concernant le composant Collapse.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
$(document).ready(function(){ // Accessibilité du composant 'Collapse' pour le Sommaire: // [RGAA 7.1.1] Compatibilité avec les outils d'assistance // Dans la colonne de droite de certaines pages, les chevrons permettant de déplier le sommaire // d'un article de la même rubrique devrait avoir un aria-expanded, piloté par le script qui // plie/déplie l'accordéon. // D'autre part, lorsque le contenu de l'accordéon est masqué, il continue à être tabulable, et à //être "vu" par la synthèse vocale, ce ne devrait pas être le cas. $('.group-toggle', 'nav[id^="sommaire"]').each(function(){ var $this = $(this); $this.on('click', function(){ // Clic pour ouverture if(!$this.hasClass('active')){ // Clic pour ouverture d'un niveau 2 seulement: if(!$this.hasClass('navigation-sommaire__fleche--niv3')){ $this.closest('nav[id^="sommaire"]').find('[aria-expanded]').attr('aria-expanded', 'false'); // tabindex $this.closest('nav[id^="sommaire"]').find('[tabindex]').attr('tabindex', '-1'); $this.closest('.has_children').next('.collapse').find('.navigation-sommaire__link--niv2, .navigation-sommaire__fleche--niv3').attr('tabindex', '0'); } // Clic pour ouverture d'un niveau 3 seulement: else { // tab-index $this.closest('.has_children').next('.collapse').find('.navigation-sommaire__link--niv3').attr('tabindex', '0'); } // ...et quoi qu'il arrive: $this.attr('aria-expanded', 'true'); $this.closest('.has_children').next('.collapse').attr('aria-expanded', 'true'); } // Clic pour fermeture else { // Clic pour fermeture d'un niveau 2 seulement: if(!$this.hasClass('navigation-sommaire__fleche--niv3')){ // tabindex $this.closest('nav[id^="sommaire"]').find('[tabindex]').attr('tabindex', '-1'); } // Clic pour fermeture d'un niveau 3 seulement: else { // tabindex $this.closest('.has_children').next('.collapse').find('.navigation-sommaire__link--niv3').attr('tabindex', '-1'); } // ...et quoi qu'il arrive: $this.attr('aria-expanded', 'false'); $this.closest('.has_children').next('.collapse').attr('aria-expanded', 'false'); } }); }); }); |