Accessibilité

Permettre à vos pages de s'adapter aux différentes tailles d'écran n'est qu'une seule façon de rendre votre site Web accessible au plus grand nombre de personnes possible. Prenez en compte certains de ces autres facteurs que vous devez garder à l’esprit.

Déficience de la vision des couleurs

Différentes personnes perçoivent les couleurs différemment. Les personnes atteintes de protanopie ne perçoivent pas le rouge comme une couleur distincte. Avec la deutéranopie, le vert est absent. Pour les personnes atteintes de tritanopie, la couleur est bleue.

Certains outils peuvent vous donner une idée générale de la façon dont vos jeux de couleurs apparaissent aux personnes ayant différents types de vision des couleurs.

L'onglet "Accessibilité" de Firefox comprend une liste déroulante intitulée Simulate (Simuler) ainsi qu'une liste d'options.

Dans les outils pour les développeurs Chrome, l'onglet de rendu vous permet d'émuler des 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 Mac, accédez à:

1. Préférences système
2. Accessibilité
3. Display
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 conseillé de compter uniquement sur la couleur pour différencier les différents éléments. Par exemple, vous pouvez (et devez) modifier la couleur de vos liens pour le texte qui les entoure. Cependant, vous devez également appliquer un autre indicateur de style, par exemple pour souligner les liens ou les mettre en gras.

a {
  color: red;
}

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

Contraste des couleurs

Certaines combinaisons de couleurs peuvent causer des problèmes. Si le contraste entre la couleur de premier plan et la couleur de l'arrière-plan n'est pas suffisant, le texte devient difficile à lire. Le mauvais contraste des couleurs est l'un des problèmes d'accessibilité les plus courants sur le Web, mais heureusement, c'est un problème que vous pouvez détecter au début du processus de conception.

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

• tota11y est un favori intelligent que vous pouvez ajouter à la barre d'outils de votre navigateur.
• VisBug est une extension disponible pour les principaux navigateurs pour ordinateur.
• L'outil d'inspection d'accessibilité de Firefox peut détecter les problèmes de contraste visuel.
• Vous pouvez également détecter et corriger un texte à faible contraste grâce aux outils pour les développeurs Chrome.
• Dans le navigateur Microsoft Edge, vous pouvez tester le contraste des couleurs du texte à l'aide du sélecteur de couleur.

Nous vous recommandons 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, et il peut les modifier.

body {
  color: black;
}

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

Contraste élevé

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

Sur Mac, accédez à:

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

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

Une fonctionnalité multimédia permet de détecter si quelqu'un a activé le mode contraste élevé. La fonctionnalité média prefers-contrast peut être interrogée pour trois valeurs: no-preference, less et more. Ces informations vous permettent de modifier 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 Mac, accédez à:

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

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

Assurez-vous que votre site Web est toujours adapté à la navigation en utilisant des couleurs inversées. Faites attention aux ombres de la boîte. Elles devront peut-être être ajustées lorsque les couleurs sont inversées.

Taille de la police

La couleur n'est pas la seule chose que les gens peuvent ajuster dans leur navigateur, ils peuvent également ajuster la taille de police par défaut. À mesure que leur vision se dégrade, ils peuvent ajuster la taille de police par défaut dans leurs navigateurs ou leurs systèmes d'exploitation, en augmentant les chiffres au fil des années.

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, comme rem ou ch.

Essayez de modifier la taille du texte par défaut dans votre navigateur. Vous pouvez le faire dans les préférences de votre navigateur. Vous pouvez également le faire lorsque vous consultez une page Web en faisant un zoom avant. 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 visitant votre site Web sur un ordinateur de bureau et dont la taille de police a augmenté jusqu'à 400% doit bénéficier de la même mise en page qu'une personne visitant votre site sur un appareil à petit écran.

Navigation à l'aide du clavier

Tout le monde n'utilise pas la souris ou un pavé tactile pour parcourir les pages Web. Un clavier est un autre moyen 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 affichent ces styles, que l'utilisateur utilise une souris, un pavé tactile ou un clavier. Utilisez la pseudo-classe :focus-visible pour styliser vos liens uniquement pour la navigation au clavier. Vous pouvez rendre ces styles encore 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 champ de formulaire, ces éléments sont sélectionnés dans l'ordre dans lequel ils apparaissent dans la structure du document. Cela doit également correspondre à l'ordre visuel.

Faites attention à la propriété CSS order. Vous pouvez l'utiliser en association avec un Flexbox et une grille pour placer des éléments dans un ordre visuel différent de leur ordre dans le code HTML. Cette fonctionnalité est très efficace, mais elle peut perturber la navigation au clavier.

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

Le panneau Accessibilité des outils pour les développeurs du navigateur Firefox comporte une option Afficher l'ordre de tabulation. Si vous activez cette option, les numéros seront superposés à chaque élément sélectionnable.

Mouvements réduits

L’animation et le mouvement sont de merveilleuses façons de donner vie aux conceptions Web. Mais pour certaines personnes, ces mouvements peuvent être très déstabilisants et même provoquer des nausées.

Une requête de fonctionnalité indique si l'utilisateur préférerait moins de mouvements. Elle s'appelle prefers-reduced-motion. Incluez-la 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 concerne spécifiquement les mouvements à l'écran. Si vous utilisez des transitions sur la couleur d'un élément qui ne devraient pas être affectées par prefers-reduced-motion. L'opacité de la transition et le fondu enchaîné peuvent également être opérés. La réduction des mouvements ne signifie pas nécessairement l'absence d'animation.

Voix

Les internautes utilisent le Web différemment. Tout le monde ne voit pas votre site Web sur un écran. Les technologies d'assistance telles que les lecteurs d'écran convertissent les informations produites en é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 de manière utile avec un lecteur d'écran, la page Web actuellement consultée doit contenir des informations sémantiques utiles.

Précédemment, vous avez appris comment les boutons basés sur une icône doivent inclure un attribut pour spécifier l'objectif du bouton aux utilisateurs non voyants. Ce n’est qu’un exemple de l’importance d’un langage HTML de base solide.

Headings

Utilisez des titres tels que <h1>, <h2>, <h3>, etc. de façon pertinente. Les lecteurs d'écran utilisent ces titres pour générer un plan du document auquel il est possible de naviguer à 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>

Structurer

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 alors 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 du formulaire est associé à un élément <label>. Vous pouvez associer un libellé à un champ de formulaire à l'aide de l'attribut for au niveau de l'élément <label> et de l'attribut id correspondant dans le champ du 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 uniquement destinée à une présentation, vous devez quand 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 d'un 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 sensé rendra vos pages Web plus accessibles aux technologies d'assistance comme les lecteurs d'écran, ainsi qu'à d'autres sorties audio comme les assistants vocaux.

Certains widgets d'interface sans élément HTML correspondant: carrousels, onglets, accordéons, etc. Ils doivent être créés de toutes pièces avec une combinaison de code HTML, CSS, JavaScript et ARIA.

ARIA signifie "Access Rich Internet Applications" (Applications Internet riches accessibles). En l'absence d'élément HTML approprié, son vocabulaire vous permet de fournir des informations sémantiques.

Si vous avez besoin de créer des éléments d'interface qui ne sont pas encore disponibles sous forme d'éléments HTML, familiarisez-vous avec les flux ARIA.

Plus vous ajouterez de fonctionnalités sur mesure avec JavaScript, plus vous connaîtrez parfaitement les ARIA. Si vous vous contentez d'éléments HTML natifs, vous n'aurez peut-être pas besoin d'éléments ARIA.

Si c'est possible, testez-le avec de vrais utilisateurs de lecteurs d'écran. Non seulement cela vous permettra de mieux comprendre la façon dont ils naviguent sur le Web, mais cela vous épargnera également des approximations pour concevoir en gardant à l'esprit l'accessibilité.

Tester avec des personnes réelles est un excellent moyen d'exposer les hypothèses que vous pourriez faire. Dans le module suivant, vous découvrirez les différentes façons dont les gens interagissent avec vos sites Web, un autre domaine dans lequel il est trop facile de faire des suppositions.

Testez vos connaissances

Tester vos connaissances sur l'accessibilité