Un peu d'accessibilité pour la faq selon les recommandations de https://www.aditus.io/patterns/accordion/

css/faq.css

@@ -11,5 +11,8 @@ dl.faq dd a.retour { display: block; padding: .4em .5em 0 0; text-align: right;
 dl.faq.js dt { padding-left: 1.5em; background-image: url(img/faq-open.svg); background-repeat: no-repeat; background-position: 0 0.25em; cursor: pointer; }
 dl.faq.js dt.item-faq-closed { background-image: url(img/faq-close.svg); }
 
+/* Dans la version accessible avec bouton, éviter des styles intempestifs */
+dl.faq dt button { background: none; border: none; text-align: unset; }
+
 /* Pour l'impression */
 @media print { dl.faq dd { display: block !important; } }

inclure/faq_dl.html

@@ -1,23 +1,23 @@
-#SET{ancre, faq_#ENV{no_bloc}_#ENV{no_faq}}
+#SET{id_faq, #ENV{no_bloc}_#ENV{no_faq}}
 <B_faq>
 [<h3 class="spip">
-	[<a class="ancre" href="##GET{ancre}" id="(#GET{ancre})"></a>]
+	[<a class="ancre" href="[#faq_(#GET{id_faq})]" id="faq_(#GET{id_faq})"></a>]
 	(#ENV**{titre})
 </h3>]
 <dl class="faq[ (#CONFIG{faq/charger_js}|et{#CONFIG{faq/iconifier_js}}|oui)js]">
 <BOUCLE_faq(DATA){source table, #ENV{faq}}{par cle}>
 	<dt>[
-		[(#CONFIG{faq/ancrer_question}|oui)[<a class="ancre" href="##GET{ancre}_#CLE" id="(#GET{ancre})_#CLE"></a>]]
-		(#VALEUR{question})
+		[(#CONFIG{faq/ancrer_question}|oui)[<a class="ancre" href="[#faq_(#GET{id_faq})_#CLE]" id="faq_(#GET{id_faq})_#CLE"></a>]]
+		<button id="faq-header-#GET{id_faq}_#CLE" aria-controls="faq-panel-#GET{id_faq}_#CLE">(#VALEUR{question})</button>
 	]</dt>
-	<dd>
+	<dd id="faq-panel-#GET{id_faq}_#CLE" aria-labelledby="faq-header-#GET{id_faq}_#CLE">
 		<BOUCLE_tags(DATA){source table, #VALEUR{tags}}{par valeur}>
 			[(#COMPTEUR_BOUCLE|=={1}|oui)<ul class="liste-tags">]
 			<li class="tag">#VALEUR</li>
 			[(#COMPTEUR_BOUCLE|=={#TOTAL_BOUCLE}|oui)</ul>]
 		</BOUCLE_tags>
 		[(#VALEUR{reponse})][
-		(#CONFIG{faq/lier_faq}|oui)[<a class="retour" rel="nofollow" href="#(#GET{ancre})"><:faq:lien_debut_faq:></a>]
+		(#CONFIG{faq/lier_faq}|oui)[<a class="retour" rel="nofollow" href="#faq_(#GET{id_faq})"><:faq:lien_debut_faq:></a>]
 	]</dd>
 </BOUCLE_faq>
 </dl>

js/faq.js

@@ -1,9 +1,25 @@
 jQuery(function($){
 	function init_faq() {
 		$('dl.faq > dt').addClass("item-faq-closed").click(function(){
+			// Bascule de l'état ouvert/fermé sur la question
 			$(this).toggleClass("item-faq-closed").next().toggle('fast');
+			// Mise à jour de l'état ouvert/fermé sur le bouton
+			let bouton = $(this).find('> button');
+			if (bouton.attr('aria-expanded') === 'true') {
+				bouton.attr('aria-expanded', 'false');
+			} else {
+				bouton.attr('aria-expanded', 'true');
+			}
+			// Mise à jour de l'état ouvert/fermé sur la réponse
+			if ($(this).next().attr('hidden')) {
+				$(this).next().removeAttr('hidden');
+			} else {
+				$(this).next().attr('hidden', true);
+			}
 			return false;
 		}).next().hide();
+		$('dl.faq > dt button').attr('aria-expanded', 'false');
+		$('dl.faq > dd').attr('hidden', true);
 	}
 	init_faq();
 	// Relancer lors de rechargements ajax
@@ -12,5 +28,4 @@ jQuery(function($){
 			onAjaxLoad(init_faq);
 		});
 	}
-	
 });