Accessibilité

Permettre à vos pages de s'adapter à différentes tailles d'écran n'est qu'un moyen de vous assurer que votre site Web est accessible au plus grand nombre de personnes possible. Tenez compte de ces autres facteurs.

Déficience de la vision des couleurs

Chacun perçoit les couleurs différemment. Les personnes atteintes de protanopie ne perçoivent pas le rouge comme une couleur distincte. En cas de deutéranopie, le vert est absent. Pour les personnes atteintes de tritanopie, elle est bleue.

Certains outils peuvent vous donner une idée générale de l'apparence de vos schémas de couleurs pour les personnes ayant différents types de vision des couleurs.

L'onglet "Accessibilité" de Firefox inclut un menu déroulant intitulé Simuler avec une liste d'options.

Dans les outils pour les développeurs Chrome, l'onglet "Rendu" vous permet d'émuler les déficiences visuelles.

Il s'agit d'outils spécifiques aux navigateurs. Il est également possible d'émuler différents types de vision au niveau du système d'exploitation.

Sur le Mac, accédez à :

1. Préférences système
2. Accessibilité
3. Écran
4. Filtres de couleur
5. Activer les filtres de couleur

Sélectionnez l'une des options proposées.

En général, il n'est pas recommandé de se fier uniquement à la couleur pour différencier les éléments. Par exemple, vous pouvez (et devez) définir une couleur différente pour vos liens par rapport au texte environnant. Toutefois, vous devez également appliquer un autre indicateur de style, comme souligner ou mettre en gras les liens.

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

Contraste des couleurs

Certaines combinaisons de couleurs peuvent poser problème. Si le contraste entre la couleur de premier plan et celle de l'arrière-plan est insuffisant, le texte devient difficile à lire. Le faible contraste des couleurs est l'un des problèmes d'accessibilité les plus courants sur le Web. Heureusement, vous pouvez le détecter dès le début du processus de conception.

Voici quelques outils que vous pouvez utiliser pour tester le rapport de contraste entre les couleurs de votre texte et de votre arrière-plan :

• VisBug est une extension de navigateur disponible pour tous les principaux navigateurs de bureau.
• L'inspecteur d'accessibilité de Firefox peut détecter les problèmes de contraste visuel.
• Vous pouvez également identifier et résoudre les problèmes de texte à faible contraste avec les outils pour les développeurs Chrome.
• Dans le navigateur Edge de Microsoft, vous pouvez tester le contraste des couleurs du texte à l'aide du sélecteur de couleur.

Nous vous conseillons de toujours déclarer color et background-color ensemble dans votre CSS. Ne partez pas du principe que la couleur d'arrière-plan sera celle par défaut du navigateur. Les utilisateurs peuvent modifier les couleurs utilisées par leur navigateur.

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

Contraste élevé

Certaines personnes configurent leur système d'exploitation pour utiliser un mode de contraste élevé. Vous pouvez essayer cette fonctionnalité sur votre système d'exploitation.

Sur le Mac, accédez à :

1. Préférences système
2. Accessibilité
3. Écran

Sélectionnez l'option permettant d'augmenter le contraste.

Il existe une fonctionnalité multimédia permettant de détecter si un utilisateur a activé le mode Contraste élevé. La fonctionnalité média prefers-contrast peut être interrogée pour trois valeurs : no-preference, less et more. Vous pouvez utiliser ces informations pour ajuster la palette de couleurs de votre site.

Les utilisateurs peuvent également définir une préférence dans leur système d'exploitation pour utiliser des couleurs inversées.

Sur le Mac, accédez à :

1. Préférences système
2. Accessibilité
3. Écran

Sélectionnez l'option permettant d'inverser les couleurs.

Assurez-vous que votre site Web reste compréhensible pour les utilisateurs qui naviguent avec des couleurs inversées. Faites attention aux ombres portées, car elles peuvent nécessiter un ajustement lorsque les couleurs sont inversées.

Taille de la police

La couleur n'est pas la seule chose que les utilisateurs peuvent ajuster dans leur navigateur. Ils peuvent également modifier la taille de police par défaut. À mesure que leur vue baisse, ils peuvent ajuster la taille de police par défaut dans leur navigateur ou leur système d'exploitation, en augmentant les chiffres au fil des ans.

Vous pouvez répondre à ces paramètres en utilisant des tailles de police relatives. Évitez d'utiliser des unités telles que px. Utilisez plutôt des unités relatives telles que rem ou ch.

Essayez de modifier le paramètre de taille de texte par défaut dans votre navigateur. Vous pouvez le faire dans les préférences de votre navigateur. Vous pouvez également le faire en effectuant un zoom avant sur une page Web. Votre site Web fonctionne-t-il toujours si la taille de police par défaut est augmentée de 200% ? Que diriez-vous de 400%?

Une personne qui consulte votre site Web sur un ordinateur de bureau avec une taille de police augmentée à 400% doit obtenir la même mise en page qu'une personne qui consulte votre site sur un appareil à petit écran.

Navigation au clavier

Tout le monde n'utilise pas une souris ou un pavé tactile pour naviguer sur les pages Web. Le clavier est une autre façon de parcourir une page, la touche tab étant particulièrement utile. Les utilisateurs peuvent passer rapidement d'un lien ou d'un champ de formulaire à l'autre.

Les liens stylisés avec les pseudo-classes :hover et :focus afficheront ces styles, que l'utilisateur utilise une souris, un pavé tactile ou un clavier. Utilisez la pseudo-classe :focus-visible pour définir le style de vos liens uniquement pour la navigation au clavier. Vous pouvez rendre ces styles plus visibles.

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

Lorsque l'utilisateur passe d'un lien à un autre ou d'un champ de formulaire à un autre à l'aide de la touche de tabulation, ces éléments sont sélectionnés dans l'ordre dans lequel ils apparaissent dans la structure du document. Il doit également correspondre à l'ordre visuel.

Faites attention à la propriété CSS order. Vous pouvez l'utiliser en combinaison avec flexbox et grid pour placer les éléments dans un ordre visuel différent de leur ordre dans le code HTML. Il s'agit d'une fonctionnalité puissante, mais elle peut dérouter les personnes qui naviguent avec un clavier.

Testez vos pages Web en utilisant la touche tab de votre clavier pour vous assurer que l'ordre de tabulation est logique.

Dans le panneau Accessibilité des outils pour les développeurs du navigateur Firefox, vous trouverez l'option Afficher l'ordre de tabulation. Si vous l'activez, des chiffres seront superposés à chaque élément pouvant être sélectionné.

Mouvements réduits

L'animation et le mouvement sont d'excellents moyens de donner vie aux conceptions Web. Mais pour certaines personnes, ces mouvements peuvent être très déroutants et même provoquer des nausées.

Il existe une requête de fonctionnalité qui indique si l'utilisateur préfère moins de mouvement. Il s'appelle prefers-reduced-motion. Incluez-le partout où vous utilisez des transitions ou des animations CSS.

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

La requête média prefers-reduced-motion est spécifiquement destinée aux mouvements à l'écran. Si vous utilisez des transitions sur la couleur d'un élément qui ne devrait pas être affecté par prefers-reduced-motion. Il est également possible de faire une transition d'opacité et un fondu enchaîné. Mouvements réduits ne signifie pas absence d'animation.

Voice

Chacun utilise le Web différemment. Tout le monde ne voit pas votre site Web sur un écran. Les technologies d'assistance, comme les lecteurs d'écran, convertissent les informations affichées à l'écran en mots prononcés.

Les lecteurs d'écran fonctionnent avec toutes sortes d'applications, y compris les navigateurs Web. Pour qu'un navigateur Web puisse communiquer efficacement avec un lecteur d'écran, la page Web consultée doit contenir des informations sémantiques utiles.

Vous avez vu précédemment que les boutons avec icône uniquement doivent inclure un attribut pour spécifier leur objectif aux utilisateurs non voyants. Ce n'est qu'un exemple de l'importance d'une base HTML solide.

Titres

Utilisez les titres tels que <h1>, <h2>, <h3>, etc. de manière judicieuse. Les lecteurs d'écran utilisent ces titres pour générer un plan de votre document, que vous pouvez parcourir à l'aide de raccourcis clavier.

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

Structure

Utilisez des éléments de repère tels que <main>, <nav>, <aside>, <header> et <footer> pour structurer le contenu de votre page. Les utilisateurs de lecteurs d'écran peuvent ensuite accéder directement à ces repères.

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

Formulaires

Assurez-vous que chaque champ de formulaire est associé à un élément <label>. Vous pouvez associer un libellé à un champ de formulaire à l'aide de l'attribut for sur l'élément <label> et de l'attribut id correspondant sur le champ de formulaire.

<span class="formlabel">Your name</span>
<input type="text">

<label for="name">Your name</label>
<input id="name" type="text">

Images

Fournissez toujours une description textuelle des images à l'aide de l'attribut alt.

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

Si l'image est purement décorative, vous devez tout de même inclure l'attribut alt, mais vous pouvez lui attribuer une valeur vide.

<img src="texture.png">

<img src="texture.png" alt="">

Jake Archibald a publié un article sur la rédaction de texte alt de qualité.

Liens

Essayez de fournir un texte descriptif dans les liens. Évitez d'utiliser des expressions telles que "cliquez ici" ou "plus".

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

L'utilisation d'un HTML sémantique judicieux rendra vos pages Web plus accessibles aux technologies d'assistance telles que les lecteurs d'écran, ainsi qu'aux autres sorties audio telles que les assistants vocaux.

Certains widgets d'interface qui n'ont pas d'élément HTML correspondant, y compris les carrousels, les onglets et les accordéons. Elles doivent être créées de toutes pièces à l'aide d'une combinaison de HTML, CSS, JavaScript et ARIA.

ARIA signifie "Accessible Rich Internet Applications". Son vocabulaire vous permet de fournir des informations sémantiques lorsqu'aucun élément HTML approprié n'est disponible.

Si vous devez créer des éléments d'interface qui ne sont pas encore disponibles en tant qu'éléments HTML, familiarisez-vous avec ARIA.

Plus vous ajoutez de fonctionnalités personnalisées avec JavaScript, plus vous devez comprendre ARIA. Si vous vous en tenez aux éléments HTML standards, vous n'aurez peut-être pas besoin d'ARIA.

Si possible, effectuez des tests avec de vrais utilisateurs de lecteurs d'écran. Cela vous permettra non seulement de mieux comprendre comment ils naviguent sur le Web, mais aussi de concevoir des sites Web accessibles sans avoir à deviner.

Tester votre produit auprès de vraies personnes est un excellent moyen de mettre en évidence les hypothèses que vous pourriez faire. Dans le prochain module, vous découvrirez les différentes façons dont les utilisateurs interagissent avec vos sites Web. C'est un autre domaine où il est trop facile de faire des hypothèses.

Vérifiez vos connaissances

Tester vos connaissances sur l'accessibilité