Codez un site web accessible avec HTML & CSS

La première chose à faire, quand vous concevez votre page web, est de penser à son squelette. En effet, bien concevoir cette structure va vous permettre de délimiter les différentes zones de votre page.

Autrement dit, vous allez pouvoir indiquer :

• les zones qui sont dédiées à la navigation ;

• les zones relatives au contenu principal de votre page, ainsi que celles apportant des informations complémentaires ;

• et, enfin, les zones complémentaires, comme une barre de recherche ou une bannière.

Nous allons donc voir ensemble comment :

• tirer parti des balises sémantiques HTML5 ;

• utiliser les attributs role  ;

• utiliser les ARIA pour définir différents types de zones dans votre page.

Optimisez la sémantique de votre page avec HTML5

Utilisez la bonne sémantique HTML pour l’accessibilité

Les balises HTML5 (  header  ,  nav  ,  main  ,  section  …) vous permettent de définir simplement des zones, ou régions, à votre page. Elles sont liées au HTML sémantique.

A contrario, quand vous utilisez une balise div ou span, cette dernière n’est porteuse d’aucune information. Elle ne nous renseigne pas sur son rôle.

Si la sémantique vous intéresse, je vous invite à lire l’excellent livre Adaptive Web Design ainsi que cet article du blog SEMrush.

Afin de faciliter la lecture de votre page par des outils d’accessibilité, nous allons voir comment utiliser les bonnes balises pour structurer votre page. Sachez qu’une mauvaise utilisation ou une absence de balise ne permettra pas aux technologies d'assistance de bien traduire le site.

Définissez les régions de votre page avec HTML5

Grâce au HTML5, nous pouvons définir, de façon native, différentes régions à notre page. Elles donnent du sens au différentes zones de votre page.

Voici un bref rappel des balises HTML5 à utiliser, ainsi que de leur signification sémantique :

header

L’en-tête de la page ; peut contenir le logo, une barre de recherche et le menu de navigation.

Peut aussi être utilisé à l’intérieur d’une balise article ou section. Dans ce cas, le header ne sera associé qu’à cette section, et non à la page toute entière.

nav

Utilisé pour identifier le menu de navigation de la page.

Sur certains projets, vous aurez parfois plusieurs blocs de navigation. Il vous faudra utiliser les labels ARIA pour préciser de quelle navigation il s’agit.

Si vous n’êtes pas encore totalement familier avec, vous pouvez dès à présent suivre le cours Concevez un contenu web accessible.

Par exemple :

Dans l’exemple ci-dessous, vous pouvez voir deux menus de navigation (un principal et un secondaire). Ces derniers sont identifiés par des attributs aria-label qui renseignent sur le type de navigation de ces blocs.

<!-- Menu de navigation principale -->
<nav class="collapse bd-links" id="bd-docs-nav" aria-label="Main navigation">
   <div class="bd-toc-item active">
       <a class="bd-toc-link" href="/docs/4.4/getting-started/introduction/">
           Getting started
       </a>
 
       <ul class="nav bd-sidenav">
           <li class="active bd-sidenav-active">
               <a href="/docs/4.4/getting-started/introduction/">
                   Introduction
               </a>
           </li>
           <li>
               <a href="/docs/4.4/getting-started/download/">
                   Download
               </a>
           </li>
           <li>
               <a href="/docs/4.4/getting-started/contents/">
                   Contents
               </a>
           </li>
       </ul>
   </div>
</nav>
 
<!-- Menu de navigation secondaire -->
<nav class="d-none d-xl-block col-xl-2 bd-toc" aria-label="Secondary navigation">
   <ul class="section-nav">
       <li class="toc-entry toc-h2">
           <a href="#quick-start">Quick start</a>
           <ul>
               <li class="toc-entry toc-h3">
                   <a href="#css">CSS</a>
               </li>
               <li class="toc-entry toc-h3">
                   <a href="#js">JS</a>
               </li>
           </ul>
       </li>
   </ul>
</nav>

main

Utilisé pour identifier la région principale de votre page ; le contenu à l’intérieur est susceptible de changer selon les pages (à la différence de votre menu de navigation).

section

Balise regroupant un même sujet ou une même fonctionnalité. Commence généralement par un titre.

article

Article de blog, ou recette de cuisine, par exemple.

aside

Balise regroupant un contenu complémentaire du contenu principal.

footer

Balise de conclusion (soit pour la page entière, soit pour une section).

Comme avec le header, vous pouvez intégrer un footer dans un article ou dans une section.

Cela dit, il faudra penser à intégrer un aria de type label pour définir en quoi cette région est différente de vos autres balises footer au sein de votre page.

Maintenant que nous avons revu les principales balises du HTML5, nous allons commencer à utiliser les attributs ARIA pour aller plus loin.

Utilisez les rôles en complément des balises HTML5

En complément des balises sémantiques du HTML5, vous pouvez tout à fait utiliser les attributs role  pour avoir une compatibilité renforcée avec l’ensemble des navigateurs.

Ces attributs auront parfois le même sens que les balises HTML5 (pour les balises type nav ou header, par exemple). Cela dit, parfois, ces attributs apporteront un sens bien plus précis pour une barre de recherche ou une bannière, par exemple.

<!-- Exemple d'une barre de recherche -->
<div aria-label="Repositories" class="mt-2 mb-3" role="search">
   <input
       aria-label="Find a repository…"
       autocomplete="off"
 class="form-control input-block mb-3 js-filterable-field js-your-repositories-search"
       data-query-name="q"
       data-url="https://github.com/"
       id="dashboard-repos-filter-left"
       placeholder="Find a repository…"
       type="text"
       value=""
   />
</div>

Par exemple, dans le code ci-dessus, nous pouvons constater que :

• on a donné à la  div  un rôle de recherche ;

• sa fonction précise est de chercher un repository GitHub.

Les versions modernes de nos navigateurs préférés (Firefox, Chrome, Safari) supportent très bien le HTML5 et n’ont pas besoin de ces attributs pour comprendre le sens et le rôle d’une balise.

Cela dit, quand on pense accessibilité, il faut toujours penser au plus grand nombre et aux navigateurs qu’utilisent vos utilisateurs.

Par exemple, il se peut que :

• vos utilisateurs n’utilisent pas des navigateurs modernes parce qu’ils n’y sont pas autorisés. Dans les grandes entreprises, votre machine est configurée par la DSI. Vous n’aurez pas le choix concernant votre navigateur et vos outils ;

• leur matériel ne permette pas l’installation des versions récentes des grands navigateurs. Windows XP est encore aujourd’hui très utilisé.

Selon developpez.com, Windows XP occupe encore une certaine part du marché total des OS. Cela peut sembler peu, mais comme je vous le disais précédemment, l’accessibilité, c’est aussi essayer de penser au plus grand nombre.

Dans le cas de la structuration de votre page HTML, le principe de l’attribut role sera de définir avec plus de précision l’utilité ou la fonction d’un élément ou d’un groupe d’éléments.

Nous avons plus haut un exemple avec l’attribut  role=”search” qui permet d’identifier qu’une section de la page est dédiée à une fonctionnalité de recherche.

Voici un deuxième exemple, cette fois-ci en rapport avec un svg :

<!-- Exemple d'une image en svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false">
   <title>Bootstrap</title>
   <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path>
   <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path>
</svg>

Dans le code ci-dessus, nous pouvons voir que l’attribut role a pour valeur img  . Ce rôle permet au screen reader d’identifier cet élément comme une image. Ici, la balise  title  permet de donner le rôle à l’image.

Définissez les régions de votre page avec ARIA

Il arrive parfois que votre page comprenne plusieurs balises de même type. Par exemple, votre page contient plusieurs menus de navigation ou plusieurs balises  aside  pour des contenus complémentaires.

Nommez une partie de votre page avec aria-label

Vous vous en souvenez peut-être, je vous ai déjà présenté cette balise, ou du moins, vous l’avez déjà vue. :) L’aria-label permet de nommer une région de façon “invisible”.

Vous allez utiliser cet attribut pour donner un libellé à votre région. Par exemple, vous pouvez utiliser l’aria-label pour : 

• identifier plusieurs menus de navigation :  aria-label=”Navigation Principale”  et  aria-label=”Navigation Secondaire”  ;

• distinguer plusieurs zones de contenu complémentaires ( aside ). Sur un site de recettes, un aside pourrait être dédié aux ustensiles de la recette, tandis que l’autre serait plutôt pour du contenu publicitaire.

Faites pointer vers une balise existante avec aria-labelledby

Dans le cas où votre conteneur – une section ou un menu de navigation, par exemple – comprend un titre descriptif, vous allez pouvoir faire “pointer” le conteneur vers ce titre pour donner un sens à cette section.

Si on reprend l’exemple de GitHub et des repository vu précédemment, vous pouvez voir que la valeur de l’attribut  labelledby  fait référence au titre de cette section.

Autrement dit, elle permet d’identifier cette section (par les screen readers) comme un groupement de liens vers des repositories.

<!-- Exemple d'un aria-labelledby -->
<div class="mb-3 Details js-repos-container " data-repository-hovercards-enabled="" data-pjax-container="" role="navigation" aria-labelledby="navname">
   <div class="js-repos-container" data-pjax-container="">
       <h2 class="f4 hide-sm hide-md mb-1 f5 d-flex flex-justify-between flex-items-center">
           Repositories
       </h2>
   </div>
</div>

Cela dit, la valeur de l’attribut  labelledby  pointe vers un attribut id. Ce sera donc un élément présent une seule fois sur la page.

Tonight In Gotham : Réalisez la structure de la page de Batman

L’objectif de ce projet n’est pas de se concentrer sur le HTML ou le CSS en lui-même, mais bien sur ses impacts sur l’accessibilité, et sur les règles à respecter pour le rendre utilisable par le plus grand nombre.

Parmi les maquettes présentes dans le Figma fourni par les designers, la maquette ci-dessous est particulièrement pratique, car elle vous permet de voir les différentes parties composant le projet.

J’ai implémenté le code de la page web en essayant de prendre le plus possible en compte toutes les recommandations d’accessibilité que je vous explique dans ce cours. En vous rendant sur le code HTML du projet, vous pouvez voir les éléments structurants suivants :

• Les balises utilisées pour structurer la page sont sémantiques. Notre page est composée d’une balise  header , d’une balise  main  et d’une balise  footer  .

• La balise  header  utilise l’attribut  role=”banner”  qui permet d’indiquer que cet élément est l’en-tête principal :

<header class="header" role="banner">
   <a aria-label="Tonight In Gothman" href="#" class="header-svg">
       <svg role="img" alt="Logo de Batman" width="130" height="46" viewBox="0 0 130 46" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M43.1341 0.512695H0.893433C19.9876 6.2592 21.2125 19.8957 19.4381 25.9957C61.5071 22.5752 65.2847 44.9797 65.2847 44.9797C69.7492 26.3378 97.8524 24.3424 110.96 25.6537C106.839 11.6979 121.835 3.0781 129.848 0.512695H86.7485C85.6496 9.95338 75.4156 11.0594 70.436 10.4323L69.2341 1.88091C68.6846 2.29138 68.0893 5.24444 67.8604 6.66966H62.5374C62.5374 5.71191 61.6216 3.19212 61.1637 2.05194L59.9617 10.4323C44.8512 10.4323 42.4473 3.81922 43.1341 0.512695Z" fill="black" stroke="black"/>
<!-- ... --!>
</header>

• La balise  footer  utilise l’attribut  role=”contentinfo”  .

• De plus, comme notre projet utilise plusieurs menus de navigation, nous les différencions grâce aux attributs  aria-label  (où l’un est le menu de navigation principal et l’autre le menu de navigation du pied de page) :

   <footer class="footer" role="contentinfo">
       <nav class="footer-navigation" aria-label="footer navigation">
           <ul>
               <h3 class="footer-title">Contact</h3>
               <li>
                   <a class="footer-navigation-link" href="#">
                       Call Alfred
                   </a>
               </li>
<!-- … -->
           </ul>

• Enfin, vous pouvez constater qu’il y a un champ de recherche. Comme nous l’avons vu dans le cours, ce champ est identifié comme champ de recherche via l’attribut  role=”search”  . 

<form class="header-search" action="" role="search">
   <label class="sr-only" for="search">Search</label>
   <svg aria-hidden="true" role="img" alt="" class="search-icon" width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg">
       <circle cx="10" cy="10" r="9.5" stroke="white"/>
       <line x1="17.3254" y1="15.6204" x2="24.3254" y2="21.6204" stroke="white"/>
   </svg>
   <input type="search" id="search" name="search" placeholder="search...">
</form>

Maintenant que les grands éléments structurant notre page sont en place, nous allons pouvoir nous intéresser à la navigation.

En résumé

• Une bonne démarche d’accessibilité commence par la bonne utilisation des balises HTML : pensez aux balises sémantiques.

• Parfois, les balises HTML ne seront pas suffisantes pour donner des informations sur vos balises, si vous avez plusieurs balises  nav  par exemple. Les attributs  aria  , notamment  aria-labelledby, seront là pour vous aider.

• Enfin, tirez parti des  role  pour définir des régions spécifiques telles qu’une barre de recherche.

Maintenant que nous avons appris comment structurer notre page web de façon accessible, nous allons à présent nous concentrer sur la navigation de notre site.