Étiquette : RGAA

[SPIP] Menu déroulant géant multi-colonnes accessible – Modifier le rendu HTML du plugin Menus afin que les listes soient correctement structurées

11/01/2019 / admin

Ressources en ligne:

Problème: Structure de listes dans les menus

Les menus, qui sont présents sur toutes les pages comprennent des listes de un seul élément ce qui n’est pas du tout efficace pour les structurer.

Solution:

Objectif: il s’agit, pour résumer, de remplacer des balises UL et LI par des balises DIV, mais attention: pas dans tous les cas!

Pour ce faire, deux actions à réaliser:

1. Modifier la balise UL portant les classes « menu-liste menu-items nav » et l’attribut DATA-DEPTH lorsque sa valeur est « 1 » en la remplaçant par DIV.
Remarque: quand la valeur de l’attribut DATA-DEPTH est de « 0 » ou « 2 », on ne remplace pas la balise UL par DIV.

2. Modifier la balise LI portant les classes « menu-entree item colonne » en la remplaçant également par DIV.
Remarque: il faut remplacer la balise LI par DIV seulement si celle-ci se trouve imbriquée dans une balise DIV remplissant deux conditions:

la balise parente DIV (initialement UL avant le changement en point 1) porte les classes « menu-liste menu-items nav »,
la balise parente DIV à un attribut DATA-DEPTH dont la valeur est « 1 » (pas « 0 » ou « 2 »).

Fichier spip/plugins/contrib/menus/inclure/menu.html:

Avant modification

<BOUCLE_menu(MENUS){id_menu?}{identifiant?}>
	<B_entrees>
	<ul class="menu-liste menu-items[ (#ENV{class})][(#VAL{_MENUS_EXTRA_CLASS}|defined|oui)[(#VAL{_MENUS_EXTRA_CLASS}|constant)]][ (#CHAMP_SQL{css})]"[ data-depth="(#ENV{depth,0})"]>
		<BOUCLE_entrees(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''}
		[(#MENUS_AFFICHER_ENTREE)#SET{entree,' '}
			]<BOUCLE_sous_menu(MENUS){id_menus_entree}>
				<INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu>[(#REM)
			On ferme le li si le type d'entrée accepte des sous-menus
			et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION)
		][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non})
		</li>]
		</BOUCLE_entrees>
	</ul>
	</B_entrees>
</BOUCLE_menu>

<BOUCLE_menu(MENUS){id_menu?}{identifiant?}>

<B_entrees>

<BOUCLE_entrees(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''}

[(#MENUS_AFFICHER_ENTREE)#SET{entree,' '}

]<BOUCLE_sous_menu(MENUS){id_menus_entree}>

<INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu>[(#REM)

On ferme le li si le type d'entrée accepte des sous-menus

et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION)

][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non})

</li>]

</BOUCLE_entrees>

</ul>

</B_entrees>

</BOUCLE_menu>

Après modification

On ajoute une condition si la profondeur est égale à « 1 », alors on transforme les UL/LIs en DIVs, sinon on ne touche pas à la structure initiale.

<BOUCLE_test_depth(CONDITION){si #ENV{depth}|=={1}}>
    [(#REM) _vrai: si la profondeur est de "1"]
    <BOUCLE_menu_vrai(MENUS){id_menu?}{identifiant?}>
            <B_entrees_vrai>
                <div class="menu-liste menu-items[ (#ENV{class})][(#VAL{_MENUS_EXTRA_CLASS}|defined|oui)[(#VAL{_MENUS_EXTRA_CLASS}|constant)]][ (#CHAMP_SQL{css})]" data-depth="1">
                    <BOUCLE_entrees_vrai(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''}
                    [(#MENUS_AFFICHER_ENTREE)#SET{entree,' '}
                            ]<BOUCLE_sous_menu_vrai(MENUS){id_menus_entree}>
                                    <INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu_vrai>[(#REM)
                            On ferme le li si le type d'entrée accepte des sous-menus
                            et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION)
                    ][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non})
                    </div>]
                    </BOUCLE_entrees_vrai>
                </div>
            </B_entrees_vrai>
    </BOUCLE_menu_vrai>
</BOUCLE_test_depth>
    [(#REM) _faux: si la profondeur n'est pas de "1"]
    <BOUCLE_menu_faux(MENUS){id_menu?}{identifiant?}>
            <B_entrees_faux>
                <ul class="menu-liste menu-items[ (#ENV{class})][(#VAL{_MENUS_EXTRA_CLASS}|defined|oui)[(#VAL{_MENUS_EXTRA_CLASS}|constant)]][ (#CHAMP_SQL{css})]"[ data-depth="(#ENV{depth,0})"]>
                    <BOUCLE_entrees_faux(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''}
                    [(#MENUS_AFFICHER_ENTREE)#SET{entree,' '}
                            ]<BOUCLE_sous_menu_faux(MENUS){id_menus_entree}>
                                    <INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu_faux>[(#REM)
                            On ferme le li si le type d'entrée accepte des sous-menus
                            et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION)
                    ][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non})
                    </li>]
                    </BOUCLE_entrees_faux>
                </ul>
            </B_entrees_faux>
    </BOUCLE_menu_faux>
<//B_test_depth>

#FILTRE{trim}

<BOUCLE_test_depth(CONDITION){si #ENV{depth}|=={1}}>

[(#REM) _vrai: si la profondeur est de "1"]

<BOUCLE_menu_vrai(MENUS){id_menu?}{identifiant?}>

<B_entrees_vrai>

<BOUCLE_entrees_vrai(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''}

[(#MENUS_AFFICHER_ENTREE)#SET{entree,' '}

]<BOUCLE_sous_menu_vrai(MENUS){id_menus_entree}>

<INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu_vrai>[(#REM)

On ferme le li si le type d'entrée accepte des sous-menus

et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION)

][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non})

</div>]

</BOUCLE_entrees_vrai>

</div>

</B_entrees_vrai>

</BOUCLE_menu_vrai>

</BOUCLE_test_depth>

[(#REM) _faux: si la profondeur n'est pas de "1"]

<BOUCLE_menu_faux(MENUS){id_menu?}{identifiant?}>

<B_entrees_faux>

<BOUCLE_entrees_faux(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''}

[(#MENUS_AFFICHER_ENTREE)#SET{entree,' '}

]<BOUCLE_sous_menu_faux(MENUS){id_menus_entree}>

<INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu_faux>[(#REM)

On ferme le li si le type d'entrée accepte des sous-menus

et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION)

][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non})

</li>]

</BOUCLE_entrees_faux>

</ul>

</B_entrees_faux>

</BOUCLE_menu_faux>

<//B_test_depth>

#FILTRE{trim}

Fichier spip/plugins/site/squelettes/mass_squelette/v1/menus/colonne.html:

Avant modification

#SET{contenu, #ENV*{contenu}|_T_ou_typo}

[(#ENV{appel_formulaire}|oui)
	<div class="titre"><:mass:menu_colonne_nom:></div>
	[<div class="libelle">(#ENV{libelle})</div>]
        <div class="titre"><:mass:menu_colonne_nom:></div>
        [<div class="libelle">(#ENV{libelle})</div>]
]
[(#ENV{appel_menu}|oui)
	<li class="menu-entree item colonne[ (#ENV{css})]">
		[(#GET{contenu}|expanser_liens)]
]
[(#FILTRE{trim})]

#SET{contenu, #ENV*{contenu}|_T_ou_typo}

[(#ENV{appel_formulaire}|oui)

[<div class="libelle">(#ENV{libelle})</div>]

[<div class="libelle">(#ENV{libelle})</div>]

]

[(#ENV{appel_menu}|oui)

[(#GET{contenu}|expanser_liens)]

]

[(#FILTRE{trim})]

Après modification

…devient (un simple remplacement de l’élément li par div) :

#SET{contenu, #ENV*{contenu}|_T_ou_typo}

[(#ENV{appel_formulaire}|oui)
	<div class="titre"><:mass:menu_colonne_nom:></div>
	[<div class="libelle">(#ENV{libelle})</div>]
        <div class="titre"><:mass:menu_colonne_nom:></div>
        [<div class="libelle">(#ENV{libelle})</div>]
]
[(#ENV{appel_menu}|oui)
        <div class="menu-entree item colonne[ (#ENV{css})]">
            [(#GET{contenu}|expanser_liens)]
]
[(#FILTRE{trim})]

#SET{contenu, #ENV*{contenu}|_T_ou_typo}

[(#ENV{appel_formulaire}|oui)

[<div class="libelle">(#ENV{libelle})</div>]

[<div class="libelle">(#ENV{libelle})</div>]

]

[(#ENV{appel_menu}|oui)

[(#GET{contenu}|expanser_liens)]

]

[(#FILTRE{trim})]

Un peu de style:

Si votre menu utilise un thème Bootstrap, vous aurez probablement à rajouter cette ligne quelque part dans l’un de vos fichiers de style:

.navbar .nav > div {
    float: left;
}

.navbar .nav > div {

float: left;

}

[SPIP] Ajout d’un attribut d’accessibilité aria-expanded aux blocs dépliables du plugin Couteau Suisse pour conformité au RGAA

11/01/2019 / admin

Objectif: Ajout d’un attribut aria-expanded aux blocs dépliables du plugin Couteau Suisse pour conformité au critère 7.1.1 du RGAA (Compatibilité avec les outils d’assistance).

Blocs dépliables, version 1.2.2 (pas testé avec d’autres versions)
Fichier concerné: spip/plugins/contrib/blocsdepliables/js/blocs.js.

1. Dans la fonction blocs_toggle_slide_dist, modifier la ligne suivante:

return this.is(".blocs_slide")?this.slideUp(blocs_slide):this.slideDown(blocs_slide);

1	return this.is(".blocs_slide")?this.slideUp(blocs_slide):this.slideDown(blocs_slide);

…comme ceci:

return this.is(".blocs_slide")?this.slideUp(blocs_slide).attr('aria-expanded', 'false'):this.slideDown(blocs_slide).attr('aria-expanded', 'true');

1	return this.is(".blocs_slide")?this.slideUp(blocs_slide).attr('aria-expanded', 'false'):this.slideDown(blocs_slide).attr('aria-expanded', 'true');

2. Dans la fonction blocs_toggle, ajouter:

cible.children('.ouvrir_fermer').attr('aria-expanded', cible.is('.blocs_replie')?false:true);

1	cible.children('.ouvrir_fermer').attr('aria-expanded', cible.is('.blocs_replie')?false:true);

…juste après la ligne:

cible.toggleClass('blocs_replie').blocs_set_title();

1	cible.toggleClass('blocs_replie').blocs_set_title();

[Bootstrap] Accessibilité du composant Collapse de Bootstrap 2 avec ajout des attributs aria-expanded et tabindex

18/12/2018 / admin

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.

    // 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');
           }
       });
    });

// 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.

La doc de Bootstrap v2.3.2 concernant le composant Collapse.

$(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');
           }
       });
    });    
});

$(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');

}

});

Articles récents

Catégories

Archives

Méta

Étiquette : RGAA

[SPIP] Menu déroulant géant multi-colonnes accessible – Modifier le rendu HTML du plugin Menus afin que les listes soient correctement structurées

Problème: Structure de listes dans les menus

Solution:

Fichier spip/plugins/contrib/menus/inclure/menu.html:

Avant modification

Après modification

Fichier spip/plugins/site/squelettes/mass_squelette/v1/menus/colonne.html:

Avant modification

Après modification

Un peu de style:

[SPIP] Ajout d’un attribut d’accessibilité aria-expanded aux blocs dépliables du plugin Couteau Suisse pour conformité au RGAA

[Bootstrap] Accessibilité du composant Collapse de Bootstrap 2 avec ajout des attributs aria-expanded et tabindex

Accessible sur 2 niveaux (fonctionnement standard du composant Collapse de Bootstrap 2)

Accessible sur 3 niveaux