Liste blocs liens - Comment faire accessibilité et éco-conception

Fiche: Liste blocs liens

Il s'agit d'une simple liste de cartes.
Chaque carte contient une liste détaillée (dl) qui permet de proposer pour chaque information, chaque détail (dd), un titre naturel (dt).
Dans cet exemple, le titre du détail a été masqué à la navigation graphique.

Sur le principe, une liste doit rester une liste.
Le bloc est donc une liste.

L'ajout d'information à destination des navigations alternatives (sans style ou avec une aide technique) permet de comprendre la hiérarchie visuelle des prix.

Pourquoi ne pas simplement utiliser un élément ARIA ?
Il y a plusieurs raisons :

La première règle d'ARIA : « Si vous pouvez utiliser un élément natif HTML ou un attribut avec la sémantique et le comportement voulu qui existe nativement, faites-le plutôt que d'utiliser un autre élément en lui ajoutant un rôle, un état ou une propriété ARIA afin de le rendre accessible. ».
Le fonctionnement sans ARIA est plus universel.

Un attribut title a été intégré à la balise de Liste Item (li) afin de préciser la nature / desctination du lien

Structure

[ul] -->listeBloc
	[li] --> fondBlocLien & lien
		[hn] --> titreBloc
		[img] --> illustration (alt vide)
		[dl]
			[dt] --> sr only
			[dd]
		[...]
	[...]

Implémentation

Formule de base

Prix unitaire :

800 €

Prix secondaire :

1200 €

Date :

01/10/2025
Promotion directe

Prix unitaire :

600 €

Prix secondaire :

1500 €

Date :

15/10/2025
Avec étui

Prix unitaire :

400 €

Prix secondaire :

600 €

Date :

01/08/2025
Tous la gamme

Prix unitaire :

80 €

Prix secondaire :

600 €

Date :

02/11/2025

Code

<ul class="listeBloc">
    <li class="fondBlocLien lien" tabindex="0" id="blk1" title="voir le détail du produit formule de base">
        <h4 class="titreBloc" data-element-id="headingsMap-8-0">Formule de base</h4>
        <img class="illustration" src="contenus/images/undraw_environmental_study_re_q4q8.svg" alt="" width="100">
        <dl class="dessus">
            <dt><span class="sr-only">Prix unitaire : </span></dt>
            <dd class="coutMini">800 €</dd>
            <dt><span class="sr-only">Prix secondaire : </span></dt>
            <dd class="coutMaxi">1200 €</dd>
            <dt><span class="sr-only">Date : </span></dt>
            <dd class="date">01/10/2025</dd>
        </dl>
    </li>
    <li class="fondBlocLien lien" tabindex="0" id="blk2" title="voir le détail du produit promotion directe">
        <h4 class="titreBloc" data-element-id="headingsMap-9-0">Promotion directe</h4>
        <img class="illustration" src="contenus/images/undraw_flowers_vx06.svg" alt="" width="100">
        <dl class="dessus">
            <dt><span class="sr-only">Prix unitaire : </span></dt>
            <dd class="coutMini">600 €</dd>
            <dt><span class="sr-only">Prix secondaire : </span></dt>
            <dd class="coutMaxi">1500 €</dd>
            <dt><span class="sr-only">Date : </span></dt>
            <dd class="date">15/10/2025</dd>
        </dl>
    </li>
    <li class="fondBlocLien lien" tabindex="0" id="blk3" title="voir le détail du produit avec étui">
        <h4 class="titreBloc" data-element-id="headingsMap-10-0">Avec étui</h4>
        <img class="illustration" src="contenus/images/undraw_nature_benefits_re_kk70.svg" alt="" width="100">
        <dl class="dessus">
            <dt><span class="sr-only">Prix unitaire : </span></dt>
            <dd class="coutMini">400 €</dd>
            <dt><span class="sr-only">Prix secondaire : </span></dt>
            <dd class="coutMaxi">600 €</dd>
            <dt><span class="sr-only">Date : </span></dt>
            <dd class="date">01/08/2025</dd>
        </dl>
    </li>
    <li class="fondBlocLien lien" tabindex="0" id="blk4" title="voir le détail du produit toute la gamme">
        <h4 class="titreBloc" data-element-id="headingsMap-11-0">Tous la gamme</h4>
        <img class="illustration" src="contenus/images/undraw_nature_m5llb.svg" alt="" width="100">
        <dl class="dessus">
            <dt><span class="sr-only">Prix unitaire : </span></dt>
            <dd class="coutMini">80 €</dd>
            <dt><span class="sr-only">Prix secondaire : </span></dt>
            <dd class="coutMaxi">600 €</dd>
            <dt><span class="sr-only">Date : </span></dt>
            <dd class="date">02/11/2025</dd>
        </dl>
    </li>
</ul>