Accessibilité dès la conception
Plus d’une façon d’entrer.Montré sur cette page même.
Tout le monde n’arrive pas avec une souris, de bons yeux et un grand écran. Sur notre nouveau système, une page part avec une vraie structure, un focus clavier toujours visible, un contraste calculé, chaque image que nous plaçons décrite ou déclarée décorative, et un texte qui suit la taille choisie par la personne qui lit. Cette page montre ce que nous bâtissons et ce que nous vérifions, puis lit son propre balisage dans votre navigateur.
Les lectures sont prises en direct sur cette page, dans votre navigateur, et ne sont envoyées nulle part. Les schémas sont illustratifs là où c’est indiqué.
01 · La structure
Chaque page a une colonne vertébrale.
Un lecteur d’écran ne voit pas une mise en page. Il reçoit une langue, quelques régions nommées et un plan de titres. Voici ceux de cette page, lus dans son balisage par votre navigateur, à partir du titre principal.
Langue déclarée —
01 · Régions
- —
02 · Titres
- —
Lecture de cette page…
—
Lu sur cette page, dans votre navigateur. Sur un nouveau site, une page sans titre principal, ou avec deux, arrête la construction.
Comment c’est lu
- La langue
- L’attribut lang du document, tel qu’il est écrit, puis mis en mots par votre navigateur. Rien n’est tapé ici : une page sans cet attribut le dirait.
- Les régions
- L’en-tête et le pied de page de premier niveau, le contenu principal et chaque navigation, dans l’ordre du document, sans ce qui est caché au clavier et aux technologies d’assistance. Une navigation qui attend dans un menu fermé est listée avec une note qui le dit. Le nom d’une navigation est dérivé du balisage : aria-labelledby, puis aria-label. Aucune API web ne rend ce que dit un lecteur d’écran, et rien ici ne le prétend. Les sections de la page sont aussi des régions, chacune nommée par son propre titre : elles sont dessinées une seule fois, comme titres.
- Les titres
- Chaque h1 à h6 dans l’ordre du document, selon la même règle. Un niveau est sauté quand un titre se trouve plus d’un niveau sous celui qui le précède. À côté de chaque titre de section, les sous-titres qu’il porte sont comptés. Un titre dont la section a une ancre est un vrai lien vers elle.
- L’échelle
- Chaque partie de la page est placée d’après son haut et sa hauteur mesurés, rapportés à la hauteur totale du document, et relus quand la scène est rejouée ou que la fenêtre change. Le crochet est votre fenêtre, déplacé quand vous défilez.
- L’arrivée
- La marge de défilement d’une section, moins le bord inférieur des barres fixées en haut, plus la distance entre le bord de la section et son titre. Chaque section liée est mesurée et le plus petit résultat est affiché.
- Ce que vérifie une construction
- Sur un nouveau site, chaque page prévue est ouverte dans un vrai navigateur, à 1280 et 390 de large, et la construction s’arrête quand une page n’a aucun titre principal, ou en a deux. Les régions et les niveaux sont lus ici, en direct, sur cette page : c’est du soin pris en bâtissant, pas une vérification de la construction.
02 · Le clavier
Chaque arrêt, dans l’ordre, bien en vue.
Appuyez sur Tab sur ce site : on vous offre d’abord de passer le menu. Ensuite, le focus suit la page dans son ordre, et un anneau montre toujours où il se trouve. Voici le trajet, tracé d’après les vraies boîtes de la page.
Le trajet du clavier dans le haut de cette page
Là où commencent un clavier, un contacteur ou un lecteur d’écran.
Lecture de cette page…
Où se trouve l’anneauArrêt — sur ———
Lecture de cette page…
—arrêts sur cette page, menus fermés, —
Lu sur cette page, dans votre navigateur. L’anneau du plan est un dessin : votre focus ne bouge que si vous appuyez sur le bouton blanc.
Comment c’est lu
- Les arrêts
- Chaque lien, bouton, champ, résumé et élément doté d’un index de tabulation que le clavier peut atteindre à l’instant : ni désactivé, ni caché, ni dans un menu ou un panneau fermé. Ils sont pris dans l’ordre du document, qui est l’ordre de tabulation quand aucun ne porte un index positif ; le second constat compte ceux qui en portent un. Le compte est pris menus fermés : sur un grand écran, le focus sur le nom d’un groupe de l’en-tête ouvre son panneau, et Tab en parcourt les pages avant de continuer.
- Les noms
- Un nom est dérivé de trois attributs et du texte : aria-labelledby, puis aria-label, puis l’alt d’une image, puis le texte de l’élément ; un champ qui n’en a aucun prend celui de son étiquette. C’est une dérivation simple, pas le calcul complet du navigateur. Aucune API web ne renvoie ce que dit un lecteur d’écran, et rien ici ne le prétend.
- Le dessin
- Chaque boîte est la vraie boîte de l’élément, mesurée par rapport à sa propre barre et mise à l’échelle de cette scène ; la barre des sections est dessinée telle qu’elle se présente en haut de la page, et là où elle dépasse le bord d’un écran étroit, les arrêts hors de vue sont comptés avec ceux qui suivent. L’anneau qui saute et les touches qui s’enfoncent pendant le récit sont un dessin : le récit ne déplace jamais votre focus. Aucune étape de notre construction ne vérifie l’ordre du focus : ceci est une lecture de cette page, prise dans votre navigateur.
- Avec votre propre clavier
- Le bouton blanc place votre focus sur le lien d’évitement de ce site, qui glisse en haut à gauche de l’écran. Après un clic, un navigateur peut ne dessiner l’anneau qu’à la touche suivante. De là, Tab parcourt l’en-tête ; au-delà, la page remonte pour suivre votre focus, loin de cette scène. Sur un Mac, certains navigateurs atteignent les liens avec Option + Tab. Les touches sont écoutées tant que cette scène est à l’écran, jamais interceptées, et rien n’est envoyé nulle part.
04 · Le contraste
Le contraste se calcule, il ne se juge pas à l’œil.
Le thème d’un nouveau site est refusé si le texte courant n’atteint pas 7 pour 1, et le texte secondaire, les liens, le focus et les boutons, 4,5 pour 1. Une couleur de marque en deçà ne passe que par décision écrite du client.
Un thème d’exemple, sur ses deux fonds
| Paire | Sur la page | Sur la bande douce | Ligne à atteindre | Verdict |
|---|---|---|---|---|
| Texte courant | Pas encore lu | Pas encore lu | 7 pour 1 | Pas encore lu |
| Texte secondaire | Pas encore lu | Pas encore lu | 4,5 pour 1 | Pas encore lu |
| Lien | Pas encore lu | Pas encore lu | 4,5 pour 1 | Pas encore lu |
| Libellé de bouton | Pas encore lu | 4,5 pour 1 | Pas encore lu | |
| Anneau de focus | Pas encore lu | Pas encore lu | 4,5 pour 1 | Pas encore lu |
Lecture des couleurs affichées…
Un texte posé sur une photo ou un dégradé n’est pas calculé : il est regardé sur la page finie. Un libellé sur une couleur de marque en deçà de sa ligne ne passe que par décision écrite du client.
Comment c’est calculé
- Les chiffres
- Chaque rapport est le rapport de contraste de deux couleurs tel que le définit WCAG 2, de 1 pour 1 pour une même couleur à 21 pour 1 pour du noir sur du blanc. Il est calculé dans votre navigateur, d’après les couleurs dont ce spécimen est peint, par le même code que le vérificateur de contraste de ce site. Un chiffre est coupé à deux décimales et jamais arrondi au-dessus d’une ligne.
- Les lignes
- 7 pour 1 pour le texte courant et 4,5 pour 1 pour le texte secondaire, les liens, la couleur du focus et les libellés de bouton sont les lignes qu’utilise notre construction quand elle vérifie le thème d’un nouveau site. Elle les vérifie sur chaque fond que le thème définit : la page, la bande douce et la surface d’une carte. Le spécimen en montre deux ; le troisième est vérifié de la même façon. Sur la page finie, les titres et les commandes principales sont aussi vérifiés à 3 pour 1 sur un fond uni.
- Le spécimen
- Le thème montré est un exemple dessiné pour cette page. Le curseur change une seule couleur de l’exemple, le texte secondaire, et rien d’autre sur la page. Une couleur illisible est indiquée comme non calculable, jamais devinée.
05 · Images et noms
Chaque image porte une décision.
Sur un nouveau site, chaque image prévue porte une décision : décrite dans les mots de sa page, ou déclarée décorative et ignorée. Un bouton fait d’une seule icône garde un nom. Glissez la ligne pour lire cette section en mots.
Une planche, deux lectures
Trois photos, une bande décorative et trois boutons faits d’une seule icône. Là où la ligne de lecture est passée, chacun laisse place aux mots que cette page lui donne.
Ce que montre une image, tout le monde ne le voit pas.
— images sur cette page : — décrites, — décoratives, — sans décision.— boutons et liens n’affichent aucun mot.
Lecture de cette page…
Compté sur cette page, dans votre navigateur. Sur un nouveau site, une image prévue sans décision arrête la construction.
Comment c’est lu
- Ce qui est compté
- Chaque élément image de ce document, en-tête et pied de page compris. Ce qui se trouve dans le menu fermé reste hors des deux comptes tant qu’il n’est pas ouvert. Décrite : elle porte des mots (un attribut alt rempli). Décorative : une description vide, ou masquée aux technologies d’assistance, délibérément. Sans décision : aucun attribut alt. Les arrière-plans peints par la feuille de style et les dessins intégrés ne sont pas des images dans ce compte.
- D’où vient un nom
- Comptés parmi les boutons et les liens offerts à cette taille de fenêtre : ceux qui n’affichent aucun mot. Une icône seule, un logo, ou un chiffre masqué aux technologies d’assistance, comme sur le compteur de points de l’en-tête, dont le nom le porte à sa place. Chacun tient son nom de trois attributs et de son texte : aria-labelledby, puis aria-label, puis l’alt d’une image qu’il contient. Ce sont les noms que donne la page. Aucune API web ne renvoie ce que dit un lecteur d’écran : rien de parlé n’est montré ici.
- La planche
- Les trois photos sont de vraies images de cette page, et la bande est une vraie image à la description vide. Les mots de chaque case sont relus dans l’image elle-même, et le nom de chaque bouton dans le bouton, jamais dans une seconde copie. Sur un nouveau site, la construction regarde les images prévues pour une page ; celles qui arrivent plus tard d’une bibliothèque de contenu n’en font pas partie.
06 · La taille du texte
C’est vous qui réglez la taille.
Le texte part de votre réglage, le zoom n’est jamais verrouillé, et un nouveau site est refusé si une page défile de côté, sur ordinateur ou téléphone. Voici votre réglage, lu dans votre navigateur, et un spécimen à agrandir.
Votre navigateur, cette page
- Taille du texte de votre navigateurTexte du navigateur
- —
- —
- Texte de cette pageTexte de cette page
- —
- —
- ZoomZoom
- —
- —
- Défilement de côté, cette pageDéfilement de côté
- —
- —
- Une commande, sur votre écranUne commande, sur votre écran
- —
- —
Une page, cinq tailles
Spécimen
Lire en grand
Les mots grandissent, les lignes se reforment. Les tuiles se regroupent.
- Titres
- Texte
- Boutons
Lecture de cette page…
| Taille du texte | Colonnes | Largeur du contenu | Largeur du cadre | Hauteur du contenu |
|---|---|---|---|---|
| 100 % | — | — | — | — |
| 125 % | — | — | — | — |
| 150 % | — | — | — | — |
| 175 % | — | — | — | — |
| 200 % | — | — | — | — |
Lu dans votre navigateur. Sur un nouveau site, chaque page prévue est mesurée à 1280 et 390 px de large ; celle qui défile de côté est refusée.
Comment c’est lu
- Votre navigateur
- La taille de votre texte est celle que votre navigateur donne à la racine d’une page. Ce site n’en fixe aucune à cet endroit : le chiffre est donc le vôtre, et le réglage de texte du système d’un téléphone peut ne pas l’atteindre. Le texte de cette page est la taille que le navigateur a calculée pour son corps, déclarée comme un multiple de la vôtre et non en pixels. Le zoom, c’est la ligne viewport de la page, imprimée telle quelle ; la lecture y cherche une échelle maximale ou un interrupteur qui coupe le zoom. Le pincement vient de la fenêtre visuelle du navigateur, là où il en a une. Le zoom de page du navigateur n’est pas communiqué à une page : il n’est donc pas montré.
- Cette page
- Le défilement de côté compare la largeur du document à celle de la fenêtre, et se relit chaque fois que la fenêtre change. Sur la version téléphone de ce site, une ligne de plus donne la taille du bouton qui ouvre le menu : sa boîte sur votre écran, avec sa zone tactile invisible quand il en a une. Cette ligne est une lecture de ce site, pas une mesure de notre construction.
- Le spécimen
- Un seul bloc, pas la page entière : les cinq paliers ne règlent que le spécimen. Son texte vaut votre taille multipliée par le palier, et tout ce qu’il contient se compte dans cette taille : les lignes se reforment et les tuiles se regroupent quand le cadre en tient moins. Chaque taille est mise en page et mesurée une fois : la largeur du cadre contre celle de son contenu, le nombre de colonnes, et le rectangle de chaque bloc, qui reste derrière comme un contour. Sur un nouveau site, la construction mesure chaque page prévue à 1280 et 390 px de large et nomme l’élément responsable quand l’une d’elles défile de côté.
La pratique
L’accessibilité se construit, ou elle manque.
Elle vient de décisions ordinaires prises tôt : un vrai titre, un vrai bouton, une couleur calculée, une image que quelqu’un a décrite. Là où une machine peut vérifier, notre construction refuse la page qui ne suffit pas : un seul titre principal, aucun défilement de côté, un contraste calculé, une décision pour chaque image. Le reste est du soin, page par page. Nous disons ce que nous faisons et ce que nous vérifions, rien de plus.
Ce que montre cette page, c’est notre nouveau système, notre façon de bâtir aujourd’hui. Les sites livrés avant lui ne l’incluent pas forcément.
Un site que plus de gens peuvent utiliser ?
Parlez-nous de votre projet. Nous vous montrerons ce que nous vérifierions en premier.