Codez un site web accessible avec HTML & CSS

Les fenêtres modales ainsi que les carrousels sont présents sur de nombreux sites. Dans ce chapitre, nous allons renforcer notre connaissance des attributs ARIA : les modales et carrousels sont des éléments particulièrement liés aux interactions des utilisateurs. 

Rendez vos modales accessibles

Avant de commencer sur l’intégration de la modale, sachez que réaliser une modale totalement accessible demande de prendre beaucoup de choses en compte. Il faut, par exemple, prévoir les contrôles de la modale, comment afficher aux technologies d'assistance que la modale est ouverte, mais aussi penser à ajouter le focus à l’intérieur de cette dernière.

Pour vous aider, voici la liste complète des éléments à prendre en compte lors de la création d’une modale :

• il est important de masquer le reste de la page HTML aux technologies d'assistance. Il vous faudra ajouter un attribut  aria-hidden;

• vous devez ajouter un attribut rôle à votre modale (  role=”dialog” ) ;

• certains types d’utilisateurs se servent uniquement du clavier pour parcourir les sites. Vous devez donc être en mesure de fermer la modale avec la touche “échap” ;

• il est important de mettre le focus sur votre modale une fois cette dernière ouverte ;

• il est important de cacher la modale quand cette dernière n’est pas ouverte.

Nous allons donc maintenant nous concentrer sur le code de la fenêtre modale.

Découvrez notre fenêtre modale

Dans cette section, nous allons repartir d’une fenêtre modale déjà existante, et nous allons nous attarder sur ce qui la rend accessible.

Ouvrez ce CodePen pour retrouver le code HTML, CSS et JavaScript de la modale sur laquelle nous allons travailler. N’hésitez pas à le tester pour voir comment il fonctionne. 🙂

Alors, quels sont les éléments qui permettent de rendre accessible cette modale ?

Ajoutez des attributs rôle et ARIA

Quand une modale est ouverte, quelques règles essentielles doivent s’appliquer :

• l’ensemble du contenu du document, en dehors de la modale, doit être mis en retrait ;

• l’utilisateur doit effectuer une action pour fermer la modale et revenir à l’état initial.
  Pour un utilisateur ayant recours aux technologies d'assistance, cela veut dire masquer le contenu de l’ensemble de la page, en dehors de la modale, via un attribut  aria-hidden=”true”  ;

• la modale doit aussi être utilisable au clavier. Il faut donc penser à faire le focus dessus via le JavaScript.

// Func
const onOpenModal = () => {
   $mainWrapper.attr('aria-hidden', 'true')
   $modal.attr('aria-hidden', 'false')
   $body.addClass('no-scroll')
   $modal.css('display', 'flex')
   $modalCloseBtn.focus()
}
 
const onCloseModal = () => {
   $mainWrapper.attr('aria-hidden', 'false')
   $modal.attr('aria-hidden', 'true')
   $body.removeClass('no-scroll')
   $modal.css('display', 'none')
   $openModalBtn.focus()
}

Dans le code ci-dessous, nous modifions à la volée les attributs HTML aria-hidden de la modale et du document. :)

Ajoutez le rôle à votre fenêtre modale

La première chose à faire pour rendre votre modale compréhensible par les technologies d'assistance est de renseigner son rôle via l’attribut `role=dialog`.

Cela permettra d’indiquer que le bloc est une fenêtre ou une boîte de dialogue.

<div class="modal" aria-hidden="true" role="dialog">
   <div>
   </div>
</div>

Décrivez l’état de votre modale avec aria-hidden

Votre modale peut avoir deux états : elle peut être ouverte ou fermée. Quand la modale est ouverte, le reste de votre document doit être masqué aux technologies d'assistance. 

Vous allez pouvoir réaliser cette opération avec l’attribut aria-hidden  .

<main id="main-wrapper" aria-hidden="false">
   <!-- Content of your web page goes here -->
   <h1>Your web page</h1>
   <p>
       <button class="open-modal-btn">Open modal</button>
   </p>
</main>
<div class="modal" aria-hidden="true" role="dialog">
   <div>
   </div>
</div>

Dans le snippet ci-dessus, on peut voir que :

• votre modale est ouverte et l’ensemble de votre document est masqué aux technologies d'assistance ;

• votre modale est, quant à elle, visible.

À l’inverse, quand votre modale est fermée, il faut que son contenu soit caché des technologies  d'assistance, et celui de la page doit être visible.

Décrivez le contenu de votre modale

Grâce à l’attribut  aria-describedby , vous allez pouvoir indiquer le sens de cette dernière. Par exemple, si c’est une fenêtre modale dédiée à l’inscription.

<div class="modal" aria-hidden="true" role="dialog" aria-describedby="modalTitle">
   <div>
       <header>
           <h2 id="modalTitle" class="modal-title">Modal title</h2>
       </header>
       <div>
           <p>Content of your modal window</p>
       </div>
       <button class="modal-close-btn">Close modal</button>
   </div>
</div>

Fermez la modale

Enfin, pour fermer votre fenêtre modale, il vous faut penser à intégrer un bouton prévu à cet effet. Vous pouvez voir ci-dessous un exemple d’implémentation :

<button class="modal-close-btn">Close modal</button>

Si on s'arrêtait ici, notre fenêtre modale ne serait pas totalement accessible.

En effet, elle oublie une partie des utilisateurs : ceux qui utilisent uniquement le navigateur.

Pour eux, nous allons avoir recours au JavaScript pour gérer :

• le focus sur le bouton d’ouverture ou de fermeture de la modale ;

• la gestion des touches clavier, et notamment la touche “Esc”.

const onOpenModal = () => {
   $mainWrapper.attr('aria-hidden', 'true')
   $modal.attr('aria-hidden', 'false')
   $body.addClass('no-scroll')
   $modal.css('display', 'flex')
   $modalCloseBtn.focus()
}

Quand la modale s’ouvre, en plus de mettre à jour les attributs `aria-hidden`, nous mettons le focus sur le bouton de fermeture de la modale (ce qui permet de la fermer avec la barre “espace”.)

// Close modal when escape key is pressed
$(document).on('keydown', e => {
   const keyCode = e.keyCode ? e.keyCode : e.which
 
   if ($modal.attr('aria-hidden') == 'false' && keyCode === 27) {
       onCloseModal()
   }
})

Ici, via le JavaScript, nous écoutons les touches du clavier pour pouvoir fermer la modale quand la touche Esc   est pressée.

Codez un carrousel accessible

Avant de commencer cette section, quelques mots concernant les carrousels. En effet, ces derniers ne sont pas très populaires sur la toile. Ils sont le plus souvent destinés à un objectif marketing et/ou commercial, et ne sont dans les chiffres que très peu utilisés par le public.

Cela dit, dans ce cours, nous ne nous intéressons pas à l’utilité avérée ou non du carrousel. Nous sommes ici pour apprendre à intégrer cet élément de façon accessible.

Ce qu’il faut savoir pour créer des carrousels accessibles

Qui sont les publics visés ?

Les publics visés par une démarche accessible dans la création des carrousels sont nombreux.

On peut, par exemple, penser :

• aux personnes ayant des troubles de la motricité. C’est notamment pour ça qu’il n’est pas indiqué de pratiquer un défilement automatique. Ce type de public peut avoir des difficultés à cliquer sur un lien qui serait contenu dans le carrousel ;

• aux personnes ayant recours aux technologies d'assistance. Elles ont besoin de savoir à quel moment l’élément courant du carrousel est affiché, et comment changer d’élément ;

• aux personnes ayant des troubles de la vision. Ces dernières peuvent avoir du mal à lire les textes contenus dans un carrousel. Là encore, le défilement automatique n’est pas recommandé ;

• aux personnes ayant des troubles d’attention. En effet, le défilement automatique des carrousels peut poser des difficultés de lecture à ces populations.

Je vous invite à vous y référer, notamment si vous devez construire un carrousel sans framework.

Découvrez la structure de notre carrousel

Comme avec la fenêtre modale, nous allons d’abord commencer avec le code source complet du carrousel, que vous pouvez retrouver sur ce CodePen.

N’hésitez pas à tester son fonctionnement !

<!-- Carrousel avec des div -->
<div>
   <ul class="carrousel">
       <li class="carrousel-item"></li>
       <li class="carrousel-item"></li>
       <li class="carrousel-item"></li>
   </ul>
</div>

Ajoutez un titre au carrousel

Un carrousel sera souvent structuré autour d’une thématique commune. Ici, en l'occurrence, ce sont des recettes de cuisine pour le mois de mars. On n’affiche le texte que pour les technologies d'assistance.

<body id="body">
   <main id="main-wrapper" aria-hidden="false">
       <h1>Your carousel</h1>
       <ul class="carousel" aria-label="Our selection of Recipes">
           <!-- ... -->
       </ul>
   </main>
</body>

Gérez les contrôles et l’état des éléments

Avant de commencer, voici un bref rappel sur l’utilisation d’un carrousel :

• vous pouvez le laisser défiler automatiquement ;

• vous pouvez décider de le contrôler avec la souris, en cliquant sur les flèches “suivante” et “précédente” ;

• vous pouvez enfin utiliser les flèches du clavier “droite” et “gauche” pour le parcourir.

L’ensemble de ces éléments requiert du JavaScript pour fonctionner. Par exemple, voici le script qui gère les touches du clavier :

$(document).keydown(function(e) {
   const keyCode = e.keyCode ? e.keyCode : e.which
 
   if (keyCode === 39) {
       goToNextSlide()
   } else if (keyCode === 37) {
       goToPreviousSlide()
   }
})
 
$carouselPauseBtn.on('click', function() {
   clearInterval(carouselInterval)
})
$(document).keydown(function(e) {
   const keyCode = e.keyCode ? e.keyCode : e.which
 
   if (keyCode === 39) {
       goToNextSlide()
   } else if (keyCode === 37) {
       goToPreviousSlide()
   }
})
 
$carouselPauseBtn.on('click', function() {
   clearInterval(carouselInterval)
})

D’ailleurs, concernant les contrôles, notez qu’ils sont masqués visuellement, mais sont affichés pour les technologies d'assistance.

<div role="button" class="controls controls-left">
   <span class="img prev-image">
       <i aria-hidden="true" class="fa fa-arrow-circle-left"></i>
   </span>
   <p class="sr-only">Previous</p>
</div>

De la même façon, chacun des items du carrousel dispose d’un attribut  aria-hidden  . 

Ce dernier est changé via le JavaScript ici :

const setNodeAttributes = (lastItem, currentItem) => {
   $(lastItem).css('display', 'none')
   $(currentItem).css('display', 'block')
   $(lastItem).attr('aria-hidden', 'true')
   $(currentItem).attr('aria-hidden', 'false')
}

Ce script permet de mettre :

• un  display: none;  à l’élément qui vient d’être affiché, et passe l’attribut  aria-hidden  à true ;

• un  display: block;  à l’élément qui est affiché.

C'est une bonne pratique, car ça le rend accessible notamment aux utilisateurs ayant des problèmes de motricité ou d’attention, mais il faut qu'il ait un bouton "Pause". Les utilisateurs seront à même de mettre en pause le carrousel, et de le parcourir à leur rythme.

En résumé

• Lorsqu’une fenêtre modale est ouverte, l’attribut  aria-hidden  doit être appliqué à l’ensemble du document, fenêtre modale NON comprise.

• L'utilisation des rôles  dialog  et  document  permettent aux technologies d'assistance de savoir, respectivement, que la modale est considérée comme une boîte de dialogue, et que son contenu doit être lu.

• Un carrousel doit forcément pouvoir être contrôlé via le clavier et la souris, et peut (ou pas) proposer un défilement automatique. Il est important d’ajouter un bouton “pause” si c’est le cas.

• Il est important d’ajouter les attributs  aria-hidden   avec les valeurs  true  ou  false  , selon que le contenu a été lu ou non.

Dans le prochain chapitre, nous verrons comment coder du CSS qui soit lisible par les technologies d'assistance.