Introduction à l'accessibilité

L’accessibilité et le handicap : point rapide

• L’accessibilité est pour les personnes handicapées, s’il y a un avantage autre quelconque (SEO, vision d’une page au soleil etc.) c’est collatéral et ne doit pas être mis en avant.

• Ecoutez les personnes concernées - si vous avez le budget pour des tests utilisateurs impliquez les, au minima suivez des personnes impactées et associations qui s’expriment sur le sujet (Emmanuelle ABOAF, Manuel Pereira, Céline Boeuf, Les dévalideuses, Léonie Watson (EN))

• Chaque personne se définit comme elle veut, (handicapée/en situation de handicap), ne faites pas ça :

Le numérique : promesse d’accessibilité

• Le numérique était censé être une réelle avancée pour l’autonomie et l’inclusion des personnes handicapées : accès à la lecture, à l’information, aux démarches administratives, au travail etc. mais sa mauvaise exploitation en ont fait une barrière de plus.

• Se former sur l’accessibilité numérique cela implique aussi de comprendre les obstacles que rencontrent une personne handicapée dans sa vie de tous les jours :

  • lorsqu’un lieu est noté accessible PMR mais ne l’est pas vraiment

  • lorsqu’une personne aveugle essaye juste de faire un cadeau à un proche mais qu’elle se retrouve coincé avant d’arriver au payement

• Des frustrations et discriminations quotidiennes que nous devons écouter, comprendre et tâcher de résoudre sans laisser notre égo de professionnel se mettre en travers du chemin.

• Les handicaps et les dispositifs d’aide sont tous différents : on vise donc l’inclusion et non pas la spécificité.

Accessibilité et éco-conception

L’accessibilité ne va pas toujours dans le sens de l’éco-conception, elle peut même la réduire.

• Oui, rendre accessible implique souvent de revenir à des choses plus minimalistes pour des tas de raisons (réduction d’animations, se rapprocher de patterns existants, réduire les coûts)

• mais, il est beaucoup plus léger de gérer juste un clic que toutes les interactions clavier, les attributs ARIA etc…

L’accessibilité étant un droit fondamental, il n’est pas envisageable de sacrifier la navigation de personnes pour gagner quelques octets.

Se former

Mon expérience personnelle

• Introduction à l’accessibilité durant mes études de web éditorial

• Formation autodidacte : articles de blog, lecture des normes, étude des patterns aria et de composants reconnus comme accessibles.

• Suivi de la formation “Introduction to web accessibility” du W3C (gratuit, EN)

• Suivi de la formation “Développer et coder des sites accessibles” d’access42 en septembre 2022 (1500€, FR)

Comment débuter ?

Il est possible d’acquérir une majorité de compétences en autodidacte et en suivant le MOOC du W3C si vous faites de l’accessibilité une priorité et que vous la mettez au coeur de votre réflexion.

C’est à dire qu’il est nécessaire pour chaque composant ou fonctionnalité :

• De vérifier sa lisibilité (couleurs, texte…), la visibilité des interactions clavier.

• De vérifier que l’élément utilise les bonnes balises sémantiques et que celles-ci sont supportées par tous les navigateurs majeurs.

• Que les composants interactifs respectent les patterns ARIA appropriés et que la navigation clavier soit possible

• Qu’il sera possible lors de l’édition d’intégrer tous les éléments de contenus nécessaires (attributs alt, transcriptions, légendes, liens…).

• Que le contenu final est pertinent et comprend tous les éléments nécessaires à sa compréhension peu importe son mode de lecture (souris, écran, lecteur d’écran, clavier braille, commande vocale…).

Agir pendant la conception

• Première étape : la définition du besoin

  Comme en éco-conception et pour simplifier les développements futurs gardez l’essentiel, évitez le superflu. (ce n’est pas dans la norme, mais tout le monde s’y retrouve)

  Tip de budget : enlever des fonctionnalités, pas l'accessibilité.

• Deuxième étape : le design d’interface.

  Quelques critères essentiels et comment les évaluer/faire avec

Les contrastes !

Contraste suffisant entre l'arrière-plan et le texte

4.5:1 minimum OU 3:1 minimum pour les textes en gras de + de 18,5px et normaux de + de 24px & les éléments d’interface

• Comment mesurer ? WCAG Contrast checker (chrome & firefox) ou Analyseur de Contraste des Couleurs (CCA) - Windows & Mac
• Quelles sont les astuces si la charte ne correspond pas ?

  • Utiliser une variante plus sombre - (Contrast finder)

  • utiliser la couleur primaire sur des bordures plutôt que des fonds. exemple d'orange

Ne pas donner l'information uniquement par la couleur

exemple : champ rouge obligatoire, graphique, changement de couleur pour indiquer erreur etc.

• Peut être agrémenté visuellement de : bordures, inversion de contraste, motifs en supplément des couleurs dans les graphiques etc.

• Doit être accompagné d’une indication textuelle visible ou d’un complément dans le code (balise ARIA appropriée, title etc.)

Les transcriptions

Pour tout contenu audio et vidéo, il faut prévoir une transcription, pensez-y dès le design pour que les éditeurs les ajoutent !

• Peut être intégré naturellement dans la page.

  Exemple de Koena - Article sur le procès FACIL'iti

• Peut être affiché avec un bouton (pattern disclosure)

  Exemple présenté par AccedeWeb - Savoir gérer les vidéos accessibles

Le focus

Il est très pratique, ne le supprimez pas !

Sans focus visible, la navigation clavier est absolument impossible. Exemple : tdah.lu

Les formulaires

Toujours prévoir une étiquette pour chaque champ accolée à celui-ci.

Le placeholder ne compte pas puisqu'il n'est pas correctement restitué aux technologies d'assistances, et il disparait dès qu'on commence à taper.

Agir pendant le développement

Fournir du code valide et sémantiquement correct

Cette étape seule résoud automatiquement un grand nombre de problèmes

• Les tableaux, figures, formulaires et autres éléments d’interface doivent être utilisés avec des balises et attributs appropriés pour être correctement restitués (ex : attribut for sur un label, balise caption pour un tableau, etc.)

• permettre aux éditeurs de générer du markup approprié et de remplir les balises pertinentes (alt, lang, listes, liens…)

Laissez le contrôle à l'utilisateur

Pour les sons, les vidéos, les contenus en mouvement, les composants interactifs...

• On doit pouvoir mettre sur pause (gifs et animations en continu inclues) et même ne pas les déclencher automatiquement.

• le contrôle doit être visible ou accessible au clavier au minima

• Revenons à notre exemple de tout à l'heure : tdah.lu

Polissez vos scripts pour tous les usages

• Tous les composants interactifs doivent être accessibles au clavier

• Ils doivent également être correctement restitués par les technologies d'assistance.

• 99% des cas, un pattern ARIA correspondra à l'interaction que vous souhaitez mettre en place : suivez-le

Agir pendant l'édition

L'attribut alt, notre meilleur ami

• L'attribut alt doit toujours être présent, même vide

• Lorsqu'il est renseigné, il doit être pertinent (ce n'est pas un fourre-tout SEO et il n'est pas toujours souhaitable d'aller dans trop de détail)

• En cas de doute : aidez-vous du "alt Decision Tree" du W3C (EN)

Miscellanés

• Le contenu à télécharger doit être accessible aussi, le plus simple est de donner la même information directement dans la page.

• Prévoyez des transcriptions pour tous les médias audio et vidéo ainsi que des soustitres lorsque nécessaire.

• Utilisez des titres pour structurer vos pages, mais pas uniquement à des fins de présentation.

Comment tester tout cela ? Un clavier et NVDA !

NVDA est un lecteur d’écran gratuit, il effectue le même travail que Jaws ou VoiceOver sur Mac : vocaliser le contenu des pages et permettre une navigation aisée entre les éléments d'une page (liens, titres, landmarks...).

• cheat sheet des raccourcis clavier : twogrey.github.io/NVDA-cheatsheet/

• Et si on allait voir notre fierté française : La french Tech

En conclusion

• Un même problème peut avoir de nombreuses solutions.

• laissez l’utilisateur maître de sa destinée (sons, animations, vidéos etc.)

• Restez simples, c’est souvent plus accessible, plus éco-conçu et plus performant !

• Bonus : Ne comptez jamais sur un outil, une surcouche, un bidule pour rendre un site accessible à votre place : ça ne marche pas.

Tous les aspects ont été survolés, mais vous pouvez aller plus loin...

• En suivant des formations, par exemple :

  • “Introduction to web accessibility” du W3C (gratuit, EN)

  • Celle d'Access42 qui correspond à votre métier
  • Celle de Koena qui correspond à votre métier

• En lisant des blogs (et en croisant vos sources !) : La lutine du web (FR), Adrian Roselli (EN), Scott O'Hara (EN), access42 (FR)...

• Ou encore en suivant des experts accessibilité et personnes handicapées sur vos réseaux sociaux :)

Cette présentation

• N'est malheureusement pas accessible dans sa forme à ce jour... Work In Progress !

• Si vous rencontrez des soucis d'utilisation ou que vous voyez une erreur, une maladresse dans le contenu, n'hésitez pas à me le signaler !

• est visible en ligne à cette adresse : a11y-introduction.webtopie.fr

Merci pour votre écoute !

Des questions ?

pellin.rachel@gmail.com

webtopie.fr

/in/rachel-pellin/

@r_a_chl