CategorySPIP

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

[SPIP] Notes et astuces

Attention: ce billet ne constitue en aucun cas une documentation ou des bonnes pratiques sur l’utilisation de SPIP. Je l’ai commencé dès le 1er jour où j’ai utilisé SPIP dans des conditions de correction d’audit RGAA. Je devais trouver vite des solutions aux différents problèmes remontés.

Liens importants (doc)

Astuces de rédacteur

Comment mettre l’attribut title dans les liens SPIP ?

Remplir les attributs « alt » et « title » dans SPIP

[/[En savoir plus|Point d’information sur la maladie à virus Zika - En savoir plus->article317051]/]

Astuces de développeur

Ajoutez à la fin de l’url le paramètre ?var_mode=inclure pour avoir l’ensemble des éléments composants votre page.

Utiliser la balise #TITRE pour récupérer le titre d’un article dans un menu accordéon

<span class="texte-access"><:mass:lien_sommaire_article:> "#TITRE"</span>

Ajouter du contenu « en dur » dans un attribut (alt, title…)


[(#LOGO_SITE_SPIP
|inserer_attribut{alt,#VAL{'Accueil '}|concat{#NOM_SITE_SPIP}|attribut_html}
|inserer_attribut{class,'footer__logo logo-site'}
)]

Utiliser des locales de texte

Dans les vues HTML (*.html) :

<:mass:bouton_texte_plus:>

Les locales sont stockées dans des fichiers de type mass_.php, soit pour le français mass_fr.php:

Utiliser la balise #ENV pour récupérer un niveau de navigation et les opérateurs de comparaison pour afficher ou non des attributs à des balises HTML

Ligne 3: j’affiche un attribut tabindex à l’élément <a /> si le niveau de navigation est supérieur à 1:

Pour charger des scripts sur TOUTES les pages

utiliser le squelette inc-insert-head.html

Vider manuellement le cache du site

Après une action en BO sur un changement de DOCTYPE, supprimer le contenu du répertoire local/, tmp/cache et tmp/logs.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑