Codez un site web accessible avec HTML & CSS

Maintenant que la structure de votre page est réalisée et que vos utilisateurs peuvent naviguer de page en page, intéressons-nous au contenu des pages.

Le contenu de votre page va prendre différentes formes :

• vous aurez bien entendu le texte (tel que le cours que vous êtes en train de lire ;) ). Nous n'en parlerons pas en détail car il présente peu de contraintes en termes d'accessibilité ;

• la structuration de votre page via des niveaux de titres ;

• les images, qu’elles soient descriptives ou décoratives, ainsi que les icônes.

Concevez le contenu avec des titres adaptés

Une bonne intégration du titrage permet non seulement de bons résultats en SEO, mais aussi permet aux technologies d'assistance de bien retranscrire le contenu de votre page. En fait, ces technologies peuvent donner les titres de la page à l’utilisateur pour que ce dernier aille directement à la partie qui l’intéresse.

Il est important de garder une logique dans la hiérarchie de votre page. Ainsi, vous ne devriez pas sauter de balises en passant par exemple d’une balise  h2  à une balise  h4  . 

Dans l’exemple ci-dessus, tiré de la Web Accessibility Initiative, la navigation est le premier titre du document, mais est de niveau 2.

L’essentiel est donc d'identifier le titre le plus important de votre page, et d’utiliser un  h1  pour ce dernier. Essayez autant que possible de n’avoir qu’un  h1  par page. 

Utilisez le bon format d’image

Qu’elles soient là pour donner des informations ou pour décorer une page, les images sont présentes partout sur la toile en de très nombreux formats. Aujourd’hui, quatre grands formats d’images dominent :

• le PNG – qui sera le plus souvent un dessin ou une illustration ;

• le JPG – qui est dédié au format photo ;

• le GIF – qui représente des images animées ;

• le SVG – qui remplace petit à petit le PNG pour les logos et autre aplats de couleur.

Nous allons dans un premier temps nous concentrer sur le rôle des images, et notamment quand celles-ci doivent être intégrées côté HTML ou côté CSS.

Différenciez les images décoratives des images informatives

La différence entre les images informatives et décoratives

Si vous comparez les deux images ci-dessous, selon vous laquelle est informative et laquelle est décorative ?

Sur la première image, on retrouve l’arrière-plan de notre menu de navigation. Elle n’apporte aucune information à la page, elle est donc décorative. 

La seconde image représente le logo de la police de Gotham, l'un des partenaires de Batman. Elle informe sur les alliés de Batman, elle est donc informative.

L’attribut alt

Lorsque que vous intégrez une image sur votre site via la balise  img  , l’attribut  alt  est suffisant pour l’accessibilité. Vous n’avez pas besoin d’ajouter des attributs ARIA complémentaires. 

Cela dit, l’attribut  alt  est soumis à quelques règles : 

• si l’image est décorative, et que vous n’avez pas d’autres choix que de l’intégrer via le HTML, vous pouvez laisser l’attribut  alt  vide ( alt=”” ) ;

• si l’image est informative et que, par exemple, c’est une photo d’un chat jouant avec une pelote de laine, vous n’avez pas à ajouter le texte "photo de" ou "image de" : les technologies d'assistance le font déjà. Vous pouvez simplement renseigner :  alt=”chat jouant avec une pelote de laine”  ;

• si l’image est un lien, qui amène par exemple vers la page d’accueil, cela devrait être précisé. Par exemple,  alt=”logo de W3C - Page d’accueil”  ;

• enfin, la description de l’image doit être brève (pas plus de 250 caractères).

Décrivez vos icônes et vos SVG

Avant de passer à la pratique, il est important de parler des icônes ainsi que du format SVG.

Les icônes

Les icônes sont aujourd’hui utilisées dans de nombreux cas de figure, et ce, que vous soyez sur votre smartphone ou votre ordinateur. Ces derniers doivent aussi être intégrés dans une démarche d'accessibilité.

Une icône est le plus souvent purement décorative : elle n’ajoute aucun contenu complémentaire à la page. Elle peut, cela dit, parfois contenir un lien. Dans le cas de Twitter, les trois petits points renvoient vers la page des paramètres.

Si l’icône est uniquement décorative et ne contient pas de liens, vous pouvez la masquer auprès des technologies d'assistance via l’attribut  aria-hidden=true .

<a href="/recherche">
    <!-- Ici l'icône ne sera pas lu par le screen reader -->
    <i class="fas fa-search" aria-hidden="true"></i>
</a>

Cela dit, dans le cas où votre icône apporte un contexte à votre site, vous devriez y ajouter une transcription textuelle de l’utilité de l’icône. Vous pouvez utiliser un attribut `title` et/ou une balise `span`. 

<i class="fas fa-coffee" aria-hidden="true" title="Consommation de café par salarié"></i>
<!-- Ici la ligne ci-dessous est lu par le screenreader -->
<span class="screenreader-text">Consommation de café par salarié :</span>

Dans l’exemple ci-dessus, la balise  span  ne sera pas affichée aux utilisateurs n’ayant pas de technologies d'assistance. 

Le format SVG

Pour finir, faisons un point sur le SVG. Aujourd’hui, on utilise principalement le SVG pour des icônes, des logos, et ce format remplace de plus en plus le PNG pour des dessins.

Enfin, le SVG peut être animé, et les couleurs le composant modifiées via le HTML et le CSS.

À la différence du PNG et du JPG, on peut utiliser le SVG aussi bien avec la balise `img` – et dans ce cas-là, on pourra utiliser l’attribut  alt  – qu'en  inline  (autrement dit, directement dans le HTML). 

Quand on utilise ce dernier en inline, il convient de respecter certaines règles :

• Vous pouvez utiliser la balise  title  pour décrire le SVG. Si c’est un panier (dans le cadre d’un site e-commerce), vous pourrez écrire :  <title>Panier</title>  .

• En complément de la balise  title  , vous pouvez utiliser la balise  desc  qui vous permettra d’ajouter une description complémentaire. Par exemple,  <desc>la forme d’un caddie de supermarché</desc>  .

• Pour  lier le SVG à vos balises  title  et  desc  , vous allez devoir utiliser de pair un attribut  id  et un  aria-describedby  . Vous pouvez trouver ci-dessous un exemple d'implémentation.

• Enfin, vous pouvez aller plus loin en utilisant l’attribut role=img au sein du SVG. Cela permettra aux technologies d'assistance d’indiquer que cet élément est à considérer comme une image.

<svg role="img" width="130" height="46" viewBox="0 0 130 46" fill="none" xmlns="http://www.w3.org/2000/svg" aria-describedby="titre description">
   <title id="titre">Batman</title>
   <desc id="description">Le logo de Batman</desc>
   <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"/>
</svg>

Tonight In Gotham : Intégrez les contenus de la page

Bonne nouvelle ! Notre projet comporte de nombreuses images. Certaines d’entre elles sont décoratives, alors que d’autres apportent du sens au document. D’ailleurs, autre bonne nouvelle, le projet comporte plusieurs formats d’images (PNG et SVG).

Tous ces cas de figure vont vous permettrent de bien comprendre comment intégrer des images. :)

Contenu du header

Nous allons commencer par le logo de Batman situé dans le  header  de notre projet. Ce logo a été réalisé en SVG et il est directement intégré au HTML de notre projet. Il est donc lu par le navigateur et les technologies d'assistance, c’est une image informative.

Pour indiquer son sens, vous pouvez voir que nous avons indiqué les attributs HTML suivants :

• role=”img”  pour indiquer que ce contenu est une image ;

• alt=”Logo de Batman”  pour ajouter une description à cette dernière.

L’autre image contenue dans le header est purement décorative. Elle est donc affichée via le CCS : 

.header-wrapper {
    background-image: url('../images/header-bg.jpg');
    height: 300px;
}

Elle ne sera donc pas interprétée par les technologies d'assistance.

Contenu du main

Attardons-nous maintenant sur le contenu du projet présent dans la balise  main  :

• Vous pouvez constater qu'il dispose de plusieurs niveaux de titres, dont la taille est exprimée en  em  (nous y reviendrons dans le chapitre dédié au CSS).

• Chaque lien est clairement identifié via une surbrillance, ainsi qu’un effet augmentant le gras de la police d’écriture.

• La seconde icône de Batman est intégrée via le SVG dans le HTML. Cela dit, c’est une image purement décorative. Nous pouvons lui attribuer l’attribut  role=”img”  , tout en renseignant un attribut alt vide : alt=”” . 

Contenu du footer

Pour finir, les liens de navigation du footer se soulignent, et les icônes des réseaux sociaux ont une opacité qui change s’ils sont sélectionnés ou survolés.

Vous pouvez aussi voir que chaque réseau social dispose d'une  span  avec le nom du réseau social en question. Ce nom est affiché uniquement aux technologies d'assistance, et masqué via le CSS (nous reviendrons dessus dans la partie dédiée au CSS).

Dernier point : le logo de la police de Gotham est une image en PNG directement intégrée dans le HTML, car elle est informative. Elle doit donc être pourvue d’une balise  alt  pour être interprétée correctement auprès des technologies d'assistance.

En résumé

• Une bonne utilisation de la typographie et des couleurs (ainsi que du contraste) permet aux utilisateurs n’ayant pas de technologies d'assistance, mais ayant des difficultés visuelles (les daltoniens, par exemple), de bien parcourir votre site.

• Mettez en place très tôt un niveau de titrage adapté.

• Il existe deux types d’images : les images dites décoratives et celles dites informatives. Essayez autant que possible d’intégrer les images décoratives via le CSS, et les images informatives au HTML, avec une balise `alt`.

• Vous pouvez utiliser du SVG et des icônes, à condition de bien respecter les règles d’accessibilité.

Nous allons maintenant nous intéresser aux tableaux et au moyen de les rendre accessibles.