CategoryAccessibilité

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

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

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.

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

Avant modification

Après modification

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

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:

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

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

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

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

© 2020 devfrontend.info

Theme by Anders NorénUp ↑