🗣 L’introduction Ă  l’accessibilitĂ© sur le web que j’aurais aimĂ© avoir

Traduction de l’article original de Max Antonucci « The Web Accessibility Introduction I Wish I Had » pour les francophones qui n’ont pas encore atteint 100 000 points sur Duolingo en anglais 🙂

L’aspect le plus important concernant tes responsabilitĂ©s d’artisan du web, le truc sur lequel tu dois le plus te concentrer, c’est l’accessibilitĂ© web. Normalement, ça devrait mĂȘme ĂȘtre la top prioritĂ© en front-end. SĂ©rieusement, si les utilisateurs ne peuvent pas utiliser un site correctement, rien d’autre ne compte. C’est pour ça qu’il aurait Ă©tĂ© plus intelligent de mettre l’accent sur l’accessibilitĂ© beaucoup plus tĂŽt.

Cet article a pour but de te raconter quelques Ă©lĂ©ments clĂ©s sur l’accessibilitĂ©. Je ne peux pas tout couvrir, mais je peux parler de :

  1. Pourquoi l’accessibilitĂ© est importante, trĂšs importante
  2. Comment faire un site accessible
  3. Comment tester l’accessibilitĂ©

Let’s begin!

Une mauvaise idĂ©e de ce qu’est l’accessibilitĂ©

Avant toute chose, je me dois de corriger une chose importante sur lequel j’ai longtemps eu tort Ă  propos de l’accessibilitĂ© : l’accessibilitĂ© affecte tous les utilisateurs, pas uniquement ceux qui ont des handicaps stĂ©rĂ©otypĂ©s. Accepter cela, ça veut dire que tu rĂ©alises enfin que l’accessibilitĂ©, c’est construire en prĂ©voyant les cas de stress.

Les cas de stress ? Ça fait rĂ©fĂ©rence Ă  n’importe quelles conditions mĂ©dicales ou des situations qui peuvent affecter n’importe qui, n’importe quand Ă  diffĂ©rents moments de nos vie. Par exemple, certains cas de stress assez communs sont :

  • La vieillesse
  • ProblĂšmes de santĂ© chroniques comme l’arthrite
  • Être Ă  l’extĂ©rieur avec une forte lueur de soleil
  • DĂ©ficience cognitive due aux mĂ©dicaments ou au manque de sommeil
  • Besoin d’utiliser un site avec diffĂ©rents appareils
  • WiFi fragile qui affecte le chargement des diffĂ©rents composants du site

Comme tu peux le voir, certains sont des exemples de stress expĂ©rimentĂ©s par des personnes ayant un handicap spĂ©cifique. D’autres s’appliquent Ă  des conditions mĂ©dicales qui affectent tout le monde. Certains sont situationnels mais touchent tout le monde.

C’est important que ça te permette de transformer ton idĂ©e de l’accessibilitĂ© qui est, pour le moment « c’est pas important, ça concerne que certaines personnes, on s’en fout » Ă  « il est impĂ©ratif qu’on pense Ă  tous les utilisateurs ». Ça va aider tout le monde Ă  comprendre pourquoi l’accessibilitĂ© est si importante. Et aussi pourquoi c’est peut-ĂȘtre mieux de parler de « cas de stress ».

gif animé montrant deux types de daltonismes (protanopia, deuteranopia) affectant une image

Plus d’arguments pour l’accessibilitĂ©

Si ce qui prĂ©cĂšde ne fonctionne pas pour toi, ou tes collĂšgues de la conception ou de la gestion, d’autres arguments du point de vue commercial pourraient vous convaincre (la thune, toujours la thune…) :

  • L’accessibilitĂ© Ă©largit l’audience potentielle de ton application, en augmentant les bĂ©nĂ©fices et l’attrait.
  • L’accessibilitĂ© rĂ©duit les ressources consacrĂ©es Ă  l’assistance client ayant besoin d’aide (vu qu’on y a pensĂ© avant), laquelle peut ĂȘtre rĂ©investie ailleurs.
  • L’accessibilitĂ© te protĂšge de toute responsabilitĂ© juridique potentielle (du moins en AmĂ©rique, dans le cadre de la loi amĂ©ricaine sur les personnes handicapĂ©es). Il suffit de regarder le procĂšs de la FĂ©dĂ©ration nationale des aveugles v. Target Corp, qui a permis de crĂ©er un prĂ©cĂ©dent concernant les sites largement utilisĂ©s nĂ©cessitant l’accessibilitĂ© de par la loi.

Ces arguments sont utiles pour persuader les gens dont tu as besoin pour dĂ©velopper correctement, mais qui ne sont pas des programmeurs. Ils envoient un message clair selon lequel l’accessibilitĂ© est bonne pour l’entreprise, que ce soit pour gagner de l’argent ou Ă©conomiser de l’argent.

Les quatre clĂ©s de l’accessibilitĂ© Web

Maintenant que tu sais pourquoi l’accessibilitĂ© est importante, passons au comment. Les rĂšgles d’accessibilitĂ© les plus largement acceptĂ©es sont les guides de contenu et d’accessibilitĂ© Web 2.0 (Web Content And Accessibility Guides 2.0), ou WCAG 2.0. Ce sont des rĂšgles universelles pour toutes les interfaces techniques, ce qui explique en partie leur popularitĂ©.

Les quatre principes principaux du WCAG 2.0 sont l’acronyme POUR :
– Perceivable (perceptible),
– Operable (utilisable),
– Understandable (intelligible) et
– Robust (robustesse).
Il y a des sous-points spĂ©cifiques pour chacun, mais je vais m’en tenir Ă  un large aperçu pour le moment. Je recommande de lire la liste de contrĂŽle de WCAG 2.0 pour plus de dĂ©tails !

1. Perceptible

Pour faire court, ĂȘtre perceptible signifie que diffĂ©rents cas de stress n’empĂȘchent pas les utilisateurs de lire, de regarder ou d’Ă©couter ton contenu.

Typographie

Le contenu perceptible doit ĂȘtre lisible ! Un moyen simple de rendre le texte plus lisible consiste Ă  donner suffisamment de contraste aux couleurs du texte et de l’arriĂšre-plan pour que les personnes malvoyantes ou mal Ă©clairĂ©es puissent toujours le lire. La typographie doit Ă©galement s’appuyer sur des tailles plus grandes et ĂȘtre facile Ă  ajuster, pour les mĂȘmes raisons. Cela peut mĂȘme ĂȘtre dĂ» au fait que plusieurs personnes essaient de lire un Ă©cran Ă  la fois, ne peuvent pas s’approcher de trop prĂšs, et ont besoin de caractĂšres plus gros pour pouvoir lire en mĂȘme temps (quand on projette une prĂ©sentation au mur par exemple).

Images

La chose la plus importante avec des images perceptibles est le texte alternatif. Les personnes qui sont aveugles ou qui ne peuvent pas charger les images en raison d’un accĂšs Wi-Fi instable auront tout de mĂȘme une idĂ©e de base de l’image. De mĂȘme, tu ne devrais jamais mettre de texte important dans une image. Jamais.

Audio et Video

Les contenus audio et vidéo comportent davantage de stress. Les personnes malentendantes, ou celles qui se trouvent dans des endroits trÚs bruyants ou trÚs calmes ou qui préfÚrent simplement lire ne peuvent pas écouter ou ne veulent pas faire du bruit. Les transcriptions de vidéos (sous-titres) sont la solution la plus simple, mais les légendes fonctionnent également pour les vidéos trÚs visuelles.

2. Utilisable

L’utilisable signifie que diffĂ©rents cas de stress ne doivent pas empĂȘcher les utilisateurs d’accĂ©der Ă  toutes les pages et de remplir les formulaires.

Interfaces et Navigation

Ce point est Ă©vident. Les utilisateurs doivent pouvoir interagir avec ce dont ils ont besoin, par exemple :

  • Les liens vers d’autres pages
  • Les formulaires Ă  remplir
  • Les boutons Ă  cliquer
  • Quelque chose d’autre pour se dĂ©placer sur le site ou envoyer / recevoir des informations.

Cela semble Ă©vident, mais c’est aussi la partie la plus importante du Web, il est donc important de vĂ©rifier que tout ça fonctionne. Tu serais d’ailleurs surpris de voir combien de fois ces quelques points Ă©voquĂ©s ne sont pas accessibles…

La navigation par clavier

Prends le dernier point et ajoute un twist : ne navigue qu’au clavier. La navigation au clavier couvre de nombreux cas de stress : lecteurs d’Ă©cran, contrĂŽle des mouvements instables, problĂšmes mĂ©dicaux liĂ©s aux vertiges et au contrĂŽle des muscles, tapis de souris peu fiable ou simplement prĂ©fĂ©rences personnelles. Dans ton Ă©diteur de texte, tu utiliserais des raccourcis clavier pour travailler rapidement, ça fonctionne de la mĂȘme maniĂšre avec la navigation Web.

L’amĂ©lioration progressive

L’amĂ©lioration progressive aide dans les cas de stress oĂč, mĂȘme si tout ou une partie du style se casse la gueule, le site est quand mĂȘme opĂ©rationnel. Les formulaires ne devraient pas ĂȘtre inutilisables sur les navigateurs plus anciens sous prĂ©texte qu’ils ne prennent pas en charge les nouvelles fonctionnalitĂ©s CSS. Les formulaires peuvent sembler plus simples ou plus crus, mais ils doivent quand mĂȘme fonctionner. L’amĂ©lioration progressive permet de commencer par une base solide et opĂ©rationnelle, puis d’ajouter les fonctionnalitĂ©s disponibles dans la mesure du possible.
Tu ne peux pas contrĂŽler le navigateur d’un utilisateur, tu peux uniquement prĂ©parer ses choix.

gif animé montrant un gateau sans topping, puis avec du topping, puis avec des bougies pour illustrer l'amélioration progressive

3. Intelligible, compréhensible

L’intelligible est plus comprĂ©hensible que les autres points : Les cas de stress ne doivent pas empĂȘcher les utilisateurs de comprendre le sens voulu des sites internet. Cela permet de couvrir les cas de stress cognitif liĂ©s Ă  la maniĂšre dont les utilisateurs interprĂštent et comprennent le message de ton site.

Fais Simple et Explicite

Comme le disait souvent George Carlin, le meilleur langage est simple, honnĂȘte et direct. Les longues phrases pompeuses avec du jargon corporate paraĂźt impressionnant aux designers mais dĂ©goĂ»tent complĂštement les utilisateurs. L’Ă©criture simple est comprĂ©hensible et aide les utilisateurs Ă  avoir confiance en ton site. Sinon, ils ont moins tendance Ă  accorder leur attention ou mĂȘme Ă  acheter les trucs que tu aimerais vendre.

Ne suppose pas

C’est le point qui feraient rĂ©agir beaucoup de futurs designers. Et pour cause… De nombreux Ă©lĂ©ments de site fonctionnent sur l’hypothĂšse que les utilisateurs comprennent dĂ©jĂ  leur signification. Par exemple, en supposant qu’une icĂŽne « étoile » signifie qu’on attribue une prĂ©fĂ©rence Ă  un Ă©lĂ©ment. C’est Ă©vident pour toi, mais tu ne peux pas ĂȘtre sĂ»r si c’est Ă©vident pour les utilisateurs. Cela peut ĂȘtre dĂ» Ă  des cas de stress cognitifs, Ă  des cas de stress culturels ou simplement Ă  des personnes novices sur le Web. Ne compte jamais sur le symbolisme implicite. Il est plus rapide, plus facile et infiniment plus accessible d’ajouter une lĂ©gende ou un sous-titre pour s’assurer qu’un Ă©lĂ©ment est bien compris. Si le designer rechigne Ă  le faire, n’aies pas peur de rester sur tes positions. C’est pour le bien des utilisateurs.

4. Robustesse

La robustesse signifie que les cas de stress n’empĂȘchent pas les utilisateurs d’accĂ©der au contenu Ă  partir d’une grande variĂ©tĂ© d’appareils.

Balisage sémantique

Le balisage sémantique est le meilleur moyen de rendre le contenu robuste accessible dans son ensemble. Pour le web, cela signifie :

  • Les balises HTML sĂ©mantiques
  • Utilisation appropriĂ©e des balises aria
  • Rangement logique des Ă©lĂ©ments DOM
  • Un rendu cĂŽtĂ© serveur pour s’assurer qu’il est livrĂ© correctement

Cela rend le contenu convivial pour la navigation au clavier, les lecteurs d’Ă©cran et mĂȘme une interface utilisable si le CSS ne parvient pas Ă  se charger. Les balises sĂ©mantiques et accessibles te mĂšnent loin vers un site Web accessible.

l'amélioration progressive démontrée au travers de différents appareils avec un petit chat en illustration sur les différents écrans

Design Responsive

L’exemple le plus Ă©vident de la variĂ©tĂ© d’appareils est la taille de l’écran, telle que :

  • Les montres connectĂ©es (peut-ĂȘtre)
  • Les smartphones
  • Les tablettes
  • Les grands Ă©crans externes
  • Les Ă©crans de projection
  • Les Ă©crans de cinĂ©ma si tu deviens cĂ©lĂšbre 😉

On peut soutenir que la taille de l’Ă©cran affecte davantage les applications Web que les autres types, en particulier avec la montĂ©e en puissance des applications web progressives (PWA, Progressive Wep Applications). MĂȘme si aucun site ne peut avoir la mĂȘme expĂ©rience avec autant de tailles ou avoir le mĂȘme rendu pixel par pixel, ils doivent rester utilisables et fonctionnels.

Test d’accessibilitĂ©

Damned, tu dois avoir le tournis en voyant la liste de toutes ces exigences. Tout d’abord, rappelle-toi que le travail en vaut la peine. DeuxiĂšmement, tu seras heureux d’apprendre que tu peux automatiquement tester plusieurs de ces points !

Test d’accessibilitĂ© automatisĂ©

Certaines choses Ă  tester automatiquement avec un ou plusieurs outils sont :

  • Le contraste de couleur
  • La sĂ©mantique HTML
  • ÉlĂ©ments div inutiles
  • Texte traduit
  • ARIA et autres attributs d’accessibilitĂ© comme les titres…

Dans l’ensemble, j’ai constatĂ© que les tests automatiques couvraient au moins 75% de mes problĂšmes d’accessibilitĂ©. Mais Ă  une seule condition: les tests d’accessibilitĂ© doivent ĂȘtre ajoutĂ©s le plus tĂŽt possible dans un projet. Plus on fait les tests tardivement, plus le problĂšme est perçu comme « un truc Ă  faire plus tard ». C’est dommage, car certaines conceptions sophistiquĂ©es ne peuvent pas ĂȘtre conservĂ©es en termes d’accessibilitĂ© et doivent ĂȘtre modifiĂ©es plus tĂŽt. Sinon, les tests d’accessibilitĂ© sont vouĂ©s Ă  toujours Ă©chouer.

Tes outils spĂ©cifiques changeront pour chaque projet, je ne vais donc pas Ă©numĂ©rer d’exemples ici. Tu en apprendras davantage en effectuant des recherches et en constatant Ă  quel point ces outils couvrent les directives WCAG 2.0.

Ce que tu ne peux pas automatiser

Les tests d’accessibilitĂ© permettent de mesurer les facteurs liĂ©s aux cas de stress, mais pas les cas de stress rĂ©els. Certains peuvent simuler des actions de base, comme cliquer sur des Ă©lĂ©ments, mais cela ne suffit pas. Au moment d’Ă©crire ces lignes, la meilleure façon de procĂ©der consiste Ă  recrĂ©er toi-mĂȘme les cas de stress. Quelques suggestions de dĂ©part sont:

  • Naviguer avec un clavier
  • Naviguer avec un clavier et un lecteur d’Ă©cran
  • Utiliser un smartphone
  • Utiliser un smartphone avec un mĂ©ga reflet de soleil sur l’Ă©cran
  • Ralentir ta connexion internet
  • Casser un peu ou tout ton style CSS
  • Demander Ă  des gens non familiers avec ton site de le tester et d’y faire des trucs basiques.
  • Utiliser un filtre de couleur en niveaux de gris (pour le daltonisme)
  • Utiliser une seule main
  • Utiliser le site en agitant la main pour simuler de l’arthrite ou des douleurs musculaires
  • Utiliser en Ă©tat de fatigue (ou ivre) ou simuler un trouble cognitif
  • Utiliser le site en courant dans la rue, poursuivi par un monstre libĂ©rĂ© en quĂȘte de vengeance

Ma recommandation est de dresser une liste de contrĂŽle des diffĂ©rents cas de stress et d’en couvrir le plus grand nombre possible, du plus important au moins important. Ainsi, si tu ne parviens pas tous les recrĂ©er, tu obtiendras au moins ceux qui affectent le plus grand nombre d’utilisateurs.

Ne jamais oublier l’accessibilitĂ©

Si tu dois retenir un seul truc, c’est ce que j’ai Ă©crit au dĂ©but : l’accessibilitĂ© concerne les cas de stress qui touchent tout le monde. C’est pour ça que c’est plus important qu’un simple « chouette truc Ă  avoir ». L’accessibilitĂ© est aussi fondamentale que la gestion de base de donnĂ©es, l’architecture des applications, la sĂ©curitĂ© des donnĂ©es ou les pistolets tranquillisants Ă  longue portĂ©e. Sans eux, les choses se dĂ©tĂ©riorent rapidement et peuvent prendre feu.

Malheureusement, aucune de tes Ă©tudes initiales et de tes rares cours universitaires ne mettent suffisamment l’accent sur l’accessibilitĂ©. Tu devras donc continuer Ă  rechercher toi-mĂȘme les mĂ©thodes d’accessibilitĂ©, Ă  en justifier les arguments, Ă  les apporter rapidement aux applications, Ă  les tester et Ă  partager ces informations avec d’autres. C’est difficile, bien sĂ»r, mais l’investissement en vaut toujours la peine pour ton entreprise et pour le bien de l’internet ouvert.

Quelques ressources

Laisser un commentaire

Articles similaires

Commencez à saisir votre recherche ci-dessus et pressez Entrée pour rechercher. ESC pour annuler.

Retour en haut