Accessibilité

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

Déficience de la vision des couleurs

Chaque personne perçoit la couleur différemment. Les personnes atteintes de protanopie ne perçoivent pas le rouge comme une couleur distincte. Dans le cas de la deutéranopie, le vert ne s'affiche pas. Pour les personnes atteintes de tritanopie, c'est bleu.

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 Simuler avec une liste d'options.

<ph type="x-smartling-placeholder">
</ph> Protanopie simulée (pas de rouge). Simulation de tritanopie (pas de bleu) <ph type="x-smartling-placeholder">
</ph> Consultation d'un site Web présentant des simulations de différents types de vision des couleurs.

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

Ce sont des outils spécifiques au navigateur. 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. Écran
  4. Filtres de couleur
  5. Activer les filtres de couleur

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

Options de filtre de couleur dans les préférences système.

En général, ce n'est pas une bonne idée de s'appuyer uniquement sur la couleur pour différencier les différents éléments. Par exemple, vous pouvez (et devriez) donner à vos liens une couleur différente par rapport au texte environnant. Mais vous devez également appliquer d'autres indicateurs de style, comme souligner les liens ou les mettre en gras.

À éviter
a {
  color: red;
}
À faire
a {
  color: red;
  font-weight: bold;
}

Contraste des couleurs

Certaines combinaisons de couleurs peuvent causer des problèmes. Si le contraste entre la couleur du premier plan et la couleur de l'arrière-plan est insuffisant, 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, vous pouvez le détecter au début du processus de conception.

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

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 la couleur par défaut du navigateur. Les utilisateurs peuvent modifier les couleurs de leur navigateur.

À éviter
body {
  color: black;
}
À faire
body {
  color: black;
  background-color: white;
}

Contraste élevé

Certaines personnes configurent leurs systèmes 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. Écran

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

Augmenter le contraste dans les préférences système

Une fonctionnalité multimédia permet de détecter si quelqu'un a activé le mode Contraste élevé. La fonctionnalité multimé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.

Navigateurs pris en charge

  • Chrome: 96 <ph type="x-smartling-placeholder">
  • Edge: 96 <ph type="x-smartling-placeholder">
  • Firefox: 101. <ph type="x-smartling-placeholder">
  • Safari: 14.1. <ph type="x-smartling-placeholder">

Source

Les utilisateurs peuvent également définir une préférence dans leur système d'exploitation pour inverser les couleurs.

Sur Mac, accédez à:

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

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

Inverser les couleurs dans les préférences système

Assurez-vous que votre site est toujours pertinent pour les internautes qui utilisent des couleurs inversées. Faites attention aux ombres de cadre, qui peuvent avoir besoin d'être ajustées lorsque les couleurs sont inversées.

Taille de 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 décline, ils peuvent ajuster la taille de police par défaut dans leurs navigateurs ou systèmes d'exploitation, augmentant ainsi 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, 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 lorsque vous consultez une page Web en effectuant un zoom avant. Votre site Web fonctionne-t-il toujours si la taille de police par défaut est augmentée de 200% ? Pourquoi pas à 400%?

Un internaute qui visite votre site Web sur un ordinateur de bureau dont la taille de police est supérieure à 400% devrait bénéficier de la même mise en page qu'une personne qui visite votre site sur un appareil à petit écran.

<ph type="x-smartling-placeholder">
</ph> Clearleft point com. <ph type="x-smartling-placeholder">
</ph> Le même site Web consulté sur un ordinateur et un appareil mobile. La taille de police du navigateur pour ordinateur est passée à 400%.

Navigation à l'aide du clavier

Tout le monde n'utilise pas une souris ou un pavé tactile pour naviguer sur les pages Web. Le clavier est un autre moyen de se déplacer sur une page. La touche tab est 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 appliquer un style à vos liens pour la navigation au clavier. Vous pouvez rendre ces styles très 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. Il doit également correspondre à l'ordre visuel.

Faites attention à la propriété CSS order. Vous pouvez l'utiliser en combinaison avec Flexbox et une grille 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 perturber les personnes qui utilisent un clavier.

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

Le panneau Accessibilité des outils de développement du navigateur Firefox comporte une option permettant d'afficher l'ordre de tabulation. L'activation de cette option entraîne la superposition des nombres sur chaque élément sélectionnable.

Visualisation de l&#39;ordre des onglets à l&#39;aide de l&#39;onglet Accessibilité de Firefox

Mouvements réduits

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

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

Navigateurs pris en charge

  • Chrome: 74 <ph type="x-smartling-placeholder">
  • Edge: 79 <ph type="x-smartling-placeholder">
  • Firefox: 63 <ph type="x-smartling-placeholder">
  • Safari: 10.1. <ph type="x-smartling-placeholder">

Source

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 au déplacement à 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. Vous pouvez également ajouter une opacité de transition et un fondu enchaîné. Un mouvement réduit ne signifie pas nécessairement qu'il n'y a pas d'animation.

Voice

Les gens 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 transmises sur un é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 en cours d'accès doit comporter des informations sémantiques utiles.

Précédemment, vous avez appris comment les boutons ne disposant que d'une icône doivent inclure un attribut permettant d'indiquer leur fonction aux utilisateurs non voyants. Ceci 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 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.

À éviter
<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>
À faire
<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 emblématiques 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.

À éviter
<div class="header">...</div>

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

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

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

<div class="footer">...</div>
À faire
<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 de l'élément <label> et de l'attribut id correspondant dans le champ de formulaire.

À éviter
<span class="formlabel">Your name</span>
<input type="text">
À faire
<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.

À éviter
<img src="dog.jpg">
À faire
<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.

À éviter
<img src="texture.png">
À faire
<img src="texture.png" alt="">

Jake Archibld a publié un article sur la rédaction d'un texte alt de qualité.

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

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

ARIA

L'utilisation d'un code HTML sémantique adapté rendra vos pages Web plus accessibles aux technologies d'assistance comme les lecteurs d'écran, mais aussi à 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 à l'aide d'une combinaison de code HTML, CSS, JavaScript et ARIA.

ARIA signifie Accessible Rich Internet Applications (Applications Internet riches accessibles). 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 ajouterez de fonctionnalités sur mesure avec JavaScript, plus vous aurez besoin de comprendre ARIA. Si vous conservez des éléments HTML natifs, vous n'aurez peut-être pas besoin d'un fichier ARIA.

Si c'est possible, testez avec de vrais utilisateurs de lecteurs d'écran. Non seulement cela vous donnera une meilleure compréhension de la façon dont ils naviguent sur le Web, mais cela éliminera également l’approximation de la conception en tenant compte de l'accessibilité.

Le test auprès de vraies personnes est un excellent moyen d’exposer toutes les hypothèses que vous pourriez faire. Dans le module suivant, vous découvrirez les différentes façons dont les utilisateurs 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é

Avec CSS, un développeur peut remplacer une préférence utilisateur telle que la taille de la police, au pire ?

Vrai
Il suffit d'utiliser body { font-size: 12px; }.
Faux
Les préférences des utilisateurs ont une forte influence, mais ne leur offrent pas un contrôle total.

Pour éviter d'écraser la préférence de taille de police d'un utilisateur, utilisez ?

Unités absolues comme px
Les préférences de taille de police de l'utilisateur ne sont pas prises en compte.
Unités relatives telles que rem.
Les développeurs peuvent ainsi créer des applications avec des longueurs qui incluent les préférences de taille de police de l'utilisateur.

Tout le monde utilise une souris.

Vrai
Certains utilisent leur voix, un clavier, une manette de jeu, un lecteur d'écran ou d'autres moyens d'interagir.
Faux
Il existe de nombreuses alternatives à la souris populaire.

À quoi sert une image avec un attribut alt vide ?

Le navigateur les ajoutera automatiquement pour l'utilisateur.
N'est une fonctionnalité d'aucun navigateur.
L'image est considérée comme de type présentation.
Nous partons du principe que l'image n'est pas importante pour la consommation du contenu.
Lit une chaîne vide. à un lecteur d'écran
Ce n'est pas ce qui se passe.
Nothing
Certainement qu'il se passe quelque chose.