Module 322 - Concevoir et implémenter une interface utilisateur

La vérification de l'implémentation d'une interface sans barrière

Objectifs du cours

Accessibilité

Concevoir et implémenter des éléments permettant à toutes les personnes d'interagir de manière efficace

Améliorer l’accessibilité d’un site web n’est pas que bénéfique pour les personnes en situation de handicap, mais permet d’améliorer l’utilisabilité pour tous, puisque les bonnes pratiques sont suivies.

Accessibilité

Exigences

WCAG 2.1

WAI-ARIA

Le WCAG définit les règles pour rendre le web accessible à tous, tandis que WAI-ARIA fournit des attributs techniques pour rendre les applications web interactives utilisables par les technologies d’assistance.

WCAG

Ensemble de normes  visant à rendre le contenu numérique plus accessible

• Cécité, surdité, basse vision, perte d'audition, limitations de mouvement, troubles de la paroles, troubles cognitifs, difficultés d'apprentissage, ...

Les WCAG, développées par le World Wide Web Consortium (W3C), sont un ensemble de normes visant à rendre le contenu web plus accessible.  

WCAG - P.O.U.R

Les WCAG reposent sur 4 principes d'accessibilité

• ​Perceivable - Perceptible
• Operable - Utilisable
• Understandable - Compréhensible
• Robuste - Robuste

WCAG

La version 2.1 des WCAG comporte trois niveaux de conformité :

• Niveau A - Single A : Inclut les exigences minimales pour que le contenu soit accessible à certains utilisateurs ayant des handicaps légers.

• Niveau AA - Double A : Recommandé pour la plupart des sites web, ce niveau assure une meilleure accessibilité pour un large éventail de handicaps, y compris des critères de contraste, de navigation clavier, et d'alternatives textuelles

• Niveau AAA - Triple A :Conformité la plus stricte, garantissant un très haut niveau d'accessibilité, mais difficile à appliquer pour tous les types de contenu. 

WCAG - Niveau A

• Accessibilité de base
• Critères les moins stricts
• Essentiels pour chaque site web
• 30 critères à respecter
  • Contraste au minimum de 3:1 pour les couleurs de textes et d'arrière-plans
  • Contenu non-textuel doit avoir un équivalent textuel
  • L'utilisation du clavier uniquement doit être possible
  • Les formulaires doivent comporter des étiquettes ou instructions
  • Les technologies d'assistance doivent pouvoir accéder au contenu
  • Les informations ne doivent pas uniquement être transmises par la forme, taille ou couleur
  • ...

WCAG - Niveau AA

• Accessibilité renforcée
• Touche davantage d'utilisateurs dans une variété de contextes
• Niveau d'accessibilité recommandé
• 20 critères supplémentaires, en plus des 30 du niveau A
  • Contraste au minimum de 4.5:1 pour les couleurs de textes et d'arrière-plans
  • Organisation du contenu sous des titres clairs et ordre logique (H1 > H2 > H3, ...)
  • Les éléments affectants la navigation doivent être cohérent sur tout le site
  • ...

WCAG - Niveau AAA

• Excellente accessibilité
• Niveau d'accessibilité le plus élevé, mais difficile à atteindre
• Pas applicable ou réaliste pour tout le monde, mais recommandé d'appliquer le plus grand nombre de critères
• 28 critères supplémentaires, en plus des précédents
  • Contraste au minimum de 7:1 pour les couleurs de textes et d'arrière-plans
  • Les contenus vidéos préenregistrés doivent être traduits en langue des signes
  • Une description audio étendue doit être fournie pour les vidéos préenregistrées
  • ...

Infographie des contraste

A vous de jouer !

1. Rendez-vous sur WebAIM Contrast Checker

2. Testez les combinaisons suivantes :

   Foreground (couleur du texte) et Background (couleur de l’arrière-plan

   • Combinaison 1 : Foreground = #000000 (noir), Background = #FFFFFF (blanc)

   • Combinaison 2 : Foreground = #FF0000 (rouge), Background = #FFFF00 (jaune)

   • Combinaison 3 : Foreground = #BBBBBB (gris clair), Background = #00A1D6 (bleu clair )

3. Pour chaque combinaison :

   • Entrez les codes hexadécimaux dans les champs du site.

   • Notez le ratio de contraste obtenu (ex. : 7.2:1).

   • Indiquez le niveau de conformité WCAG (A, AA ou AAA) pour le texte normal et le texte large.

A vous de jouer !

Combinaison 1 : Noir sur blanc (#000000 / #FFFFFF)
Ratio de contraste : 21:1
Niveau WCAG :

 - Texte normal : ✅ AAA, ✅ AA, ✅ A

 - Texte gras: ✅ AAA, ✅ AA, ✅ A

Conclusion : Excellent contraste, conforme à tous les niveaux.

A vous de jouer !

Combinaison 2 : Rouge sur jaune (#FF0000 / #FFFF00)
Ratio de contraste : 3.72:1
Niveau WCAG :
 - Texte normal : ❌ AAA, ❌ AA, ✅ A
 - Texte large : ❌ AAA, ✅ AA, ✅ A
Conclusion : Contraste insuffisant pour le texte normal au niveau AA et AAA, mais acceptable pour le niveau A.

A vous de jouer !

Combinaison 3 : Gris sur bleu (#BBBBBB / #00A1D6)
Ratio de contraste : 1.54:1
Niveau WCAG :

 - Texte normal : ❌ AAA, ❌ AA, ❌ A

 - Texte gras: ❌ AAA, ❌ AA, ❌ A

Conclusion : Ce type de combinaison doit absolument être évité sur le web, car elle ne respecte aucune exigence d’accessibilité.

WAI-ARIA

L'émergence des applications web dynamiques (AJAX, JavaScript) a créé de nouveaux difficultés en termes d'accessibilité

• Ajoute des nouveaux attributs spécifiques pour améliorer l'accessibilité
• Permet de rendre plus accessible les composants interactifs et dynamiques des sites web. Exemple :  https://kode.ch/todo/

WAI-ARIA

Objectif : Rendre les éléments web dynamiques accessibles en permettant aux développeurs de

• Définir des rôles explicites

  • button, slider, menu

  • role="menu"

• Indiquer les états et propriétés

  • aria-expanded, aria-selected

  • aria-expanded="true"

• Communiquer les changements dynamiques

  • aria-live

WAI-ARIA

Bonnes pratiques

• ​Utiliser les balises HTML natives lorsque possibles : <button>, <label>, ...
• Description claires et concises : aria-labelledby, aria-describedby
• Ordre de navigation intuitif : aria-flowto​​

Tester l'absence de barrière

Lecteur d'écran

Liste de contrôle

Tester l'absence de barrière

Lecteur d'éran

Logiciels d'assistance utilisés par les personnes malvoyantes pour lire le contenu par synthèse vocale ou en braille

• ​​Compatibilité ARIA
• Ordre de navigation
• Description alternative

Exemple: JAWS, Dolphin Computer Access, NVDA, VoiceOver

Tester l'absence de barrière

Liste de contrôle

Permet d'assurer que chaque exigence d'accessibilité est respectée

Principaux critères :

• ​Texte alternatif
• Contraste des couleurs
• Navigation au clavier
• Formulaires accessibles
• Notifications visuelles et auditives
• Gestion du focus
• Animation et effets visuels
• ...

Exemple : post.ch, accessibility-checklist.ch

A vous de jouer !

• Vous devrez vous mettre dans la peau d'un aveugle qui cherche un élément sur un site web

• Vous utilisez une extension pour votre navigateur qui fera office de Screen Reader

• Votre objectif sera de trouver une information

• Règles
  • Écran éteint ou rabaissé
  • Utilisation du clavier uniquement
  • Vous ne pouvez pas voir le site avant

A vous de jouer !

La maquette d'écran

Idée à prototyper en 1er  : formulaire pour connaître l'utilisateur et ses préférences

Corriger votre interface :  Vérifier si les contrastes respecte le niveau A ou AA

Outil : Figma

Périférique : mobile

Travail  individuel : chacun travaille sur sa maquette mais les reflexions peuvent se mener à 2

Jeu

Accessibilité Maze

Découvrir l'accessibilité à travers le jeu

Cas pratique

Effectuez le Cas pratique 3 - EcoMobilité

Temps: 45 minutes

Wooflash

Répondez aux différentes questions liées à la matière enseignée

Connectez-vous à : https://app.wooflash.com/join/Z3DVCPV1