aria-expanded – devfrontend.info

[jQuery] Une fonction Toggle simple pour afficher et masquer des éléments dans un page

14/03/2019 / admin

Attention: vous trouverez une évolution de ce code ici: [jQuery] Un plugin pour afficher/masquer des éléments dans une page et conserver leur état en cache.

nui = naked UI = code stripped to the core.

Dans mon exemple, j’utilise cette fonction pour un composant Off-Canvas qui propose une navigation interne à la page (via des ancres). J’affiche/masque l’élément en exploitant la valeur booléenne de la pseudo-classe aria-expanded que j’habille via CSS. Pas de SASS (pour l’instant), désolé…

J’utilise également Animate CSS pour apporter un peu d’animation au tout via les classes animated fadeInUp et le kit d’icônes Font Awesome pour les chevrons.

How to Create a Basic Plugin sur jquery.com. Essential jQuery Plugin Patterns par Addy Osmani sur smashingmagazine.com.

<div id="inPageNavigation" class="InPageNavigation animated fadeInUp" aria-expanded="true">
  <button id="toggleInPageNavigation" class="btn-InPageNavigation--toggle" role="button">
    <i class="fas fa-chevron-right" title="Masquer l'accès rapide"></i><i class="fas fa-chevron-left" title="Afficher l'accès rapide"></i>
  </button>
  <p>Accès rapide:</p>
  <ul>
    <li><a class="link" href="#typeIs01">Section 01 dans ma page</a></li>
    <li><a class="link" href="#typeIs02">Section 02 dans ma page</a></li>
    <li><a class="link" href="#typeIs03">Section 03 dans ma page</a></li>
    <li><a class="link" href="#typeIs04">Section 04 dans ma page</a></li>
    <li><a class="link" href="#typeIs05">Section 05 dans ma page</a></li>
  </ul>
</div>

</button>

<p>Accès rapide:</p>

<ul>

<li><a class="link" href="#typeIs01">Section 01 dans ma page</a></li>

<li><a class="link" href="#typeIs02">Section 02 dans ma page</a></li>

<li><a class="link" href="#typeIs03">Section 03 dans ma page</a></li>

<li><a class="link" href="#typeIs04">Section 04 dans ma page</a></li>

<li><a class="link" href="#typeIs05">Section 05 dans ma page</a></li>

</ul>

</div>

  $.fn.nuiToggleElement = function() {
    const $this = this;
    const ariaExpandedValue = $this.attr('aria-expanded');

    if (ariaExpandedValue === 'true' ) {
      $this.attr('aria-expanded', false);
    } else {
      $this.attr('aria-expanded', true);
    }
  }

$.fn.nuiToggleElement = function() {

const $this = this;

const ariaExpandedValue = $this.attr('aria-expanded');

if (ariaExpandedValue === 'true' ) {

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

} else {

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

}

  // Fermer/Ouvrir l'encart d'accès rapide
  $('#toggleInPageNavigation').on('click', function(){
    $('#inPageNavigation').nuiToggleElement();
  });  
  // fin: Fermer/Ouvrir l'encart d'accès rapide

// Fermer/Ouvrir l'encart d'accès rapide

$('#toggleInPageNavigation').on('click', function(){

$('#inPageNavigation').nuiToggleElement();

});

// fin: Fermer/Ouvrir l'encart d'accès rapide

/* 
 * Off-Canvas in-page navigation component
 */

/* Core */
.InPageNavigation {
  position: fixed;
  z-index: 10000;
}

.btn-InPageNavigation--toggle {
  position: absolute;
}

/* Skin */
.InPageNavigation {
  top: 10px;
  padding: 10px;
  width: 250px;
  border: 1px solid #bfbfbf;
  background: #fff;
}

.InPageNavigation[aria-expanded="true"] {
  right: 10px;
}
.InPageNavigation[aria-expanded="false"] {
  right: -250px;
}

.btn-InPageNavigation--toggle,
.btn-InPageNavigation--toggle:hover {
  top: -1px;
  left: -40px;
  width: 40px;
  height: 40px;
  text-align: center;
  border: 1px solid #bfbfbf;
  border-right: none;
  background: #fff;
  font-size: 1.2em;
}

.InPageNavigation[aria-expanded="true"] .btn-InPageNavigation--toggle .fa-chevron-left,
.InPageNavigation[aria-expanded="false"] .btn-InPageNavigation--toggle .fa-chevron-right {
  display: none;
}
/* fin: Off-Canvas in-page navigation component */

* Off-Canvas in-page navigation component

/* Core */

.InPageNavigation {

position: fixed;

z-index: 10000;

}

.btn-InPageNavigation--toggle {

position: absolute;

}

/* Skin */

.InPageNavigation {

top: 10px;

padding: 10px;

width: 250px;

border: 1px solid #bfbfbf;

background: #fff;

}

.InPageNavigation[aria-expanded="true"] {

right: 10px;

}

.InPageNavigation[aria-expanded="false"] {

right: -250px;

}

.btn-InPageNavigation--toggle,

.btn-InPageNavigation--toggle:hover {

top: -1px;

left: -40px;

width: 40px;

height: 40px;

text-align: center;

border: 1px solid #bfbfbf;

border-right: none;

background: #fff;

font-size: 1.2em;

}

.InPageNavigation[aria-expanded="true"] .btn-InPageNavigation--toggle .fa-chevron-left,

.InPageNavigation[aria-expanded="false"] .btn-InPageNavigation--toggle .fa-chevron-right {

display: none;

}

/* fin: Off-Canvas in-page navigation component */

[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 : aria-expanded

[jQuery] Une fonction Toggle simple pour afficher et masquer des éléments dans un page

[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