Chargement de données asynchrones

Gestion des chargements de données asynchrones en utilisant les zones dynamiques ARIA lorsque l'utilisation du motif ARIA Progressbar est impossible.

Implémentation proposée avec les zones dynamiques

• Initiation à l’accessibilité numérique

  Une journée de sensibilisation pour mieux comprendre en quoi le numérique, lorsqu’il est accessible, favorise l’inclusion des personnes en situation de handicap dans notre société.

• Développement et intégration web

  Cette formation à l’accessibilité numérique apporte les outils et ressources indispensables pour concevoir et développer des pages web conformément au RGAA. Elle peut s’accompagner d’une certification.

• Tester l’accessibilité de sites et d’applications

  Une formation à l’accessibilité numérique pour être en mesure d’évaluer le niveau de conformité d’un site web au RGAA : détecter les problèmes d’accessibilité, les prioriser et gérer les dérogations.

Charger plus de formations

Exemple de code

HTML

<h2>Articles à la une</h2>
<ul id="a42-articlelist">
  <li>
    <h3>Initiation à l’accessibilité numérique</h3>
    <p>[...]</p>
  </li>
  <li>
    <h3>Développement et intégration web</h3>
    <p>[...]</p>
  </li>
  <li>
    <h3>Tester l’accessibilité de sites et d’applications</h3>
    <p>[...]</p>
  </li>
</ul>
<button id="a42-loadmore">Charger plus de formations</button>

JavaScript

/*
 * Ajout d'un écouteur sur l'évènement click du bouton
 */
 if(document.getElementById('a42-loadmore')){
 var btn = document.getElementById('a42-loadmore');
 btn.onclick = function(e){
   initMsg();
   loadMore();
 }
}

/*
 * Ajout du passage de texte positionné hors écran (role="alert")
 */
function initMsg(){
  var loadingMsg = document.createElement("p");
  var loadingMsgTxt = document.createTextNode("Chargement en cours");
  loadingMsg.appendChild(loadingMsgTxt);
  loadingMsg.setAttribute("id", "loadingMsg");
  loadingMsg.classList.add("sr-only");
  loadingMsg.setAttribute("role", "alert");
  document.body.appendChild(loadingMsg); 
}

/*
 * Chargement des données de manière asynchrone
 * Et insertion dans le DOM HTML
 */
function loadMore(){
  var list = document.getElementById("a42-articlelist");
  var article = document.createElement("li");

  var articleTitle = document.createElement("h3");
  var articleTitleText = document.createTextNode("Design d’interfaces accessibles : UX, UI, multimédia");
  articleTitle.setAttribute("tabindex", "-1"); 
  articleTitle.setAttribute("id", "a42-newElt"); 
  articleTitle.appendChild(articleTitleText);

  var articleContent = document.createElement("p");
  var articleContentText = document.createTextNode("[...]");
  articleContent.appendChild(articleContentText);

  article.appendChild(articleTitle);
  article.appendChild(articleContent);

  list.appendChild(article); 

  // Éléments ajoutés on peut supprimer le message de chargement
  cleanScreen(); 
}

/*
 * Repositionnement du focus et suppression du message d'alerte
 */
function cleanScreen(){
  // Suppression du message
  var loadingMsg = document.getElementById('loadingMsg');
  loadingMsg.remove();
  // Repositionnement du focus sur le titre
  var newTitle = document.getElementById("a42-newElt");
  newTitle.focus();
  // Désactivation du bouton d'action
  var btn = document.getElementById("a42-loadmore");
  btn.setAttribute("disabled");
}

Restitutions avec les lecteurs d'écran

Desktop

Mobile

Ressources

• Reprise de focus et accessibilité, par Jean-Pierre Villain (Access42)
• Utiliser le rôle progressbar, MDN