Liste dynamique paginée - Comment faire accessibilité et éco-conception

Fiche: Liste dynamique paginée

Le principe est assez simple

Lorsque la page suivante (en fait la continuité de la liste actuelle) est affichée, une alerte ARIA est utilisée afin d'informer l'utilisateur du chargement de la suite de la liste ;
La focus est posé au début de la liste chargée afin d'apporter une continuité de lecture ;
Un mini résumé en début de liste donne le contexte ;
Quelle que soit la présentation, l'affichage est réalisé à partir d'une liste (ul > li).

Structure

[ul] --> listeBloc
	[li] -- fondBloc + background image
		[span] --> titreBloc
[...]

Implémentation

49 éléments au total, 12 affichés dans la page. Affichage de la page 2 sur 5.

Eco-conception
Environnement
Flore
Les bénéfices
Nature
Mobilité numérique
Prévoir
Partager
Construire
Attendre
Vision nocturne
Aventure motorisée

page 1 (page actuelle)
page 2
page 3
page 4
page 5

Code

HTML

<div id="s01liste">
    <span role="alert" id="alerteListe" class="sr-only alerte cache">Liste mise à jour, affichage de la page 1.</span>
    <a id="hautListe01" tabindex="0" class="paslien">49 éléments au total,&nbsp;12&nbsp;affichés dans la page.&nbsp;Affichage de la page 2 sur 5.</a>
    <ul class="listeBloc">
        <li class="fondBloc" style="background-image:url('contenus/images/undraw_eco_conscious_re_r2bs.svg')"><span class="titreBloc">Eco-conception</span></li>
        <li class="fondBloc" style="background-image:url('contenus/images/undraw_environmental_study_re_q4q8.svg')"><span class="titreBloc">Environnement</span></li>
        <li class="fondBloc" style="background-image:url('contenus/images/undraw_flowers_vx06.svg')"><span class="titreBloc">Flore</span></li>
        <li class="fondBloc" style="background-image:url('contenus/images/undraw_nature_benefits_re_kk70.svg')"><span class="titreBloc">Les bénéfices</span></li>
        <li class="fondBloc" style="background-image:url('contenus/images/undraw_nature_m5llb.svg')"><span class="titreBloc">Nature</span></li>
        <li class="fondBloc" style="background-image:url('contenus/images/undraw_nature_on_screen_xkli.svg')"><span class="titreBloc">Mobilité numérique</span></li>
        <li class="fondBloc" style="background-image:url('contenus/images/undraw_into_the_night_vumi.svg')"><span class="titreBloc">Prévoir</span></li>
        <li class="fondBloc" style="background-image:url('contenus/images/undraw_nature_fun_re_gkjt.svg')"><span class="titreBloc">Partager</span></li>
        <li class="fondBloc" style="background-image:url('contenus/images/undraw_cabin_hkfr.svg')"><span class="titreBloc">Construire</span></li>
        <li class="fondBloc" style="background-image:url('contenus/images/undraw_thoughts_re_3ysu.svg')"><span class="titreBloc">Attendre</span></li>
        <li class="fondBloc" style="background-image:url('contenus/images/undraw_before_dawn_re_hp4m.svg')"><span class="titreBloc">Vision nocturne</span></li>
        <li class="fondBloc" style="background-image:url('contenus/images/undraw_trip_re_f724.svg')"><span class="titreBloc">Aventure motorisée</span></li>
    </ul>
    <span class="sr-only">Pagination</span>
    <div class="pagination">
        <ul>
            <li class="page"><span class="sr-only">page </span>1<span class="sr-only"> (page actuelle)</span></li>
            <li class="page"><a href="javascript:page(2,'s01liste')"><span class="sr-only">page </span>2</a></li>
            <li class="page"><a href="javascript:page(3,'s01liste')"><span class="sr-only">page </span>3</a></li>
            <li class="page"><a href="javascript:page(4,'s01liste')"><span class="sr-only">page </span>4</a></li>
            <li class="page"><a href="javascript:page(5,'s01liste')"><span class="sr-only">page </span>5</a></li>
        </ul>
    </div>
</div>

Le script

function charge(fichier,ou) {
    var demande = new XMLHttpRequest();
    demande.open('GET', fichier, true);
    demande.onload = function() {
        if (demande.status >= 200 && demande.status < 400) {
            var contenu = demande.responseText;
            document.querySelector(ou).innerHTML = contenu;
        }
        else document.querySelector(ou).innerHTML = "échec du chargement du contenu..."; 
    };
    demande.send();
}

ou est le nom du container affichant la liste et fichier est la ressource à afficher.

L'alerte ARIA

<span role="alert" id="alerteListe" class="sr-only alerte cache">Liste mise à jour, affichage de la page 2.</span>

Le focus

Le code est placé en haut de la page chargée.

Un simple placement de focus au chargement de la liste

<script>
   document.onload = function() {
      document.querySelector("#hautListe01").focus();
   };
script>