Étiquette : accessibilité

[Magento 2] Un widget JS toggle on/off accessible WCAG avec les attributs Hidden et Aria-Expanded

06/06/2022 / admin

Objectif: créer un widget Toggle flexible dont le rôle sera uniquement d’affiche/masquer des éléments du DOM lorsque les utilisateurs interagissent avec un autre élément d’interface (bouton, checkbox, autre…).

Source: Marking elements expandable using aria-expanded. Exemple d’utilisation sur l’élément HTML Button. Exemple d’utilisation sur l’élément HTML Checkbox.

Exemple d’utilisation sur l’élément HTML Checkbox:

Source: https://www.accessibility-developer-guide.com/.

<p>
  Please click the following checkbox.
</p>
<input id="checkbox" type="checkbox" /><label for="checkbox">Show tooltip</label>
<div hidden="" id="tooltip">
  Thanks for toggling! Please click again to hide me.
</div>

<p>

Please click the following checkbox.

</p>

<input id="checkbox" type="checkbox" /><label for="checkbox">Show tooltip</label>

Thanks for toggling! Please click again to hide me.

</div>

;(function () {
  $(document).ready(function () {
    var $checkbox, $tooltip
    $checkbox = $('input')
    $tooltip = $('#tooltip')
    return $checkbox.change(() => {
      if ($tooltip.attr('hidden') === 'hidden') {
        return $tooltip.removeAttr('hidden')
      } else {
        return $tooltip.attr('hidden', true)
      }
    })
  })
}.call(this))

;(function () {

$(document).ready(function () {

var $checkbox, $tooltip

$checkbox = $('input')

$tooltip = $('#tooltip')

return $checkbox.change(() => {

if ($tooltip.attr('hidden') === 'hidden') {

return $tooltip.removeAttr('hidden')

} else {

return $tooltip.attr('hidden', true)

}

})

}.call(this))

Fichier `wcag-toggle.js`:

// Source: https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/expanded/
define([
    'jquery',
    'jquery-ui-modules/widget'
], function($) {
    'use strict';

    $.widget('mage.wcagToggle', {
        options: {
            toggleableElement: ''
        },

        /**
         * Create widget
         * @private
         */
        _create: function() {
            // console.log("%c wcagToggle", "background: yellow");

            this.element.on('click', $.proxy(this._toggleOnOff, this));
            // ...is similar to:
            // this.element.on('click', this._toggleOnOff.bind(this));
        },

        /**
         * Toggle On/Off
         * @private
         */
        _toggleOnOff: function() {
            if ($(this.options.toggleableElement).attr('hidden') === 'hidden') {
                $(this.options.toggleableElement).removeAttr('hidden');
                this.element.attr('aria-expanded', true);
            } else {
                $(this.options.toggleableElement).attr('hidden', true);
                this.element.attr('aria-expanded', false);
            }
        }

    });

    return $.mage.wcagToggle;
});

// Source: https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/expanded/

define([

'jquery',

'jquery-ui-modules/widget'

], function($) {

'use strict';

$.widget('mage.wcagToggle', {

options: {

toggleableElement: ''

/**

* Create widget

* @private

_create: function() {

// console.log("%c wcagToggle", "background: yellow");

this.element.on('click', $.proxy(this._toggleOnOff, this));

// ...is similar to:

// this.element.on('click', this._toggleOnOff.bind(this));

/**

* Toggle On/Off

* @private

_toggleOnOff: function() {

if ($(this.options.toggleableElement).attr('hidden') === 'hidden') {

$(this.options.toggleableElement).removeAttr('hidden');

this.element.attr('aria-expanded', true);

} else {

$(this.options.toggleableElement).attr('hidden', true);

this.element.attr('aria-expanded', false);

}

});

return $.mage.wcagToggle;

});

Fichier `PHTML`:

Partie DOM (attention, je mets juste les grandes lignes). Se référer à l’example de code proposé par le site source.

<div class="field choice newsletter">
    <input type="checkbox" id="is_subscribed" />
    <label for="is_subscribed" class="label"></label>
</div>

<div id="is_subscribed_is_checked" hidden="">
</div>

</div>

</div>

    <script type="text/x-magento-init">
        {
            "#is_subscribed": {
                "wcagToggle": {
                    "toggleableElement": "#is_subscribed_is_checked"
                }
            }
        }
    </script>

{

"#is_subscribed": {

"wcagToggle": {

"toggleableElement": "#is_subscribed_is_checked"

}

</script>

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier `requirejs-config.js`:

var config = {
    map: {
        '*': {
            wcagToggle: 'Magento_Theme/js/widgets/wcag-toggle'
        }
    }
};

var config = {

map: {

'*': {

wcagToggle: 'Magento_Theme/js/widgets/wcag-toggle'

}

};

[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');

}

});

[Accessibilité] RGAA 3 : ressources, bonnes pratiques, astuces

02/03/2017 / admin

RGAA3 = 335 tests

Examples de code

The Accessibility Cheatsheet – The Web Accessibility Initiative created some Web Content Accessibility Guidelines (WCAG) targeted at us, web content developers, to create more accessible websites. The WCAG contain some very useful information, and so I decided to condense the very extensive guidelines and highlight some practical examples of what we can do to implement them and make our websites more accessible.

Les différences entre RGAA2 et RGAA3 par Aurélien Levy de la société Temesis.
RGAA 3 et Javascript – Où l’on apprend qu’il n’est plus nécessaire de prévoir un alternatif au JavaScript, vu que le JS un langage permettant l’accessibilité. Bien sûr il faudra bien que le code généré d’un module JS soit accessible et qu’on puisse le contrôler au clavier.

Guides

Méthodologie de test RGAA 3 2017 (officiel)
GUIDE DE L’AUDITEUR RGAA 3. Ce guide s’adresse aux personnes qui effectuent des audits RGAA : référent accessibilité dans une administration, développeur en charge des audits de suivi ou encore auditeur externe à l’administration. Le document est organisé en 3 grandes parties :
1. Préparation de l’audit : définition du contexte et préparation de l’échantillon de test ;
2. Conduite de l’audit : évaluation, dérogation et réalisation de l’audit ;
3. Restitution : documents, conduite de la restitution et gestion des contestations.
Contenus exclusifs et contenus exclus aux lecteurs d’écran (display: none;, visibility: hidden;, etc… sont-ils accessibles aux lecteurs d’écrans?

Commerce électronique

Débat : Les Commerces électroniques, Javascript et l’Accessibilité

Composants accessibles

Accessibility section – jQuery Plugins – By Nicolas Hoffmann – Accessible auto complete list system, Accessible carrousel system (tabs), Accessible tabpanel system (tabs), Keyboard-enhanced dropdown navigation, Accessible simple tooltip system, Accessible modal window system, Hide/show system (collapsible region), Accessible modal dialog tooltip, Accessible simple accordion system.

Outils de test

[CSS] Afficher du contenu pour les lecteurs d’écrans uniquement

27/05/2016 / admin

// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate

.sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}

// Only display content to screen readers

// See: http://a11yproject.com/posts/how-to-hide-content/

.sr-only {

position: absolute;

width: 1px;

height: 1px;

margin: -1px;

padding: 0;

overflow: hidden;

clip: rect(0,0,0,0);

border: 0;

}

// Use in conjunction with .sr-only to only display content when it's focused.

// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1

// Credit: HTML5 Boilerplate

.sr-only-focusable {

&:active,

&:focus {

position: static;

width: auto;

height: auto;

margin: 0;

overflow: visible;

clip: auto;

}

Articles récents

Catégories

Archives

Méta

Étiquette : accessibilité

[Magento 2] Un widget JS toggle on/off accessible WCAG avec les attributs Hidden et Aria-Expanded

Exemple d’utilisation sur l’élément HTML Checkbox:

Fichier `wcag-toggle.js`:

Fichier `PHTML`:

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier `requirejs-config.js`:

[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

[Accessibilité] RGAA 3 : ressources, bonnes pratiques, astuces

Examples de code

Guides

Commerce électronique

Composants accessibles

Outils de test

[CSS] Afficher du contenu pour les lecteurs d’écrans uniquement

Exemple d’utilisation sur l’élément HTML Checkbox:

Fichier wcag-toggle.js:

Fichier PHTML:

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier requirejs-config.js:

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:

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

Accessible sur 3 niveaux

Examples de code

Guides

Commerce électronique

Composants accessibles

Outils de test

Fichier `wcag-toggle.js`:

Fichier `PHTML`:

On n’oublie pas la déclaration (à votre propre sauce) dans un fichier `requirejs-config.js`: