Étiquette : aria-expanded

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

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

Fichier wcag-toggle.js:

Fichier PHTML:

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

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

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

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.

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

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:

…comme ceci:

2. Dans la fonction blocs_toggle, ajouter:

…juste après la ligne:

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

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.


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.