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

Construire une interface en intégrant des critères WCAG
Illustrer le principe de WAI-Aria
Expliquer la notion de lecteur d’écran et listes de contrôles

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 !

Rendez-vous sur WebAIM Contrast Checker
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 )
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 !

Installez un navigateur Chromium (Chrome/Brave/Edge)
Ajoutez l'extension suivante - Screen Reader
Aller sur le site suivant - Cabinet Littoral
Vous devez trouver
- Les horaires d'ouverture du cabinet le jeudi
- (Le jour où le cabinet ferme à 14h00)
- (Le NPA et Localité du cabinet)
Astuces
- Cherchez la page de "Contact"
- Naviguez les menus et liens à l'aide de TAB et SHIFT + TAB
- Une fois sur la bonne page, naviguez le contenu avec SHIFT + ALT + ←↑→↓
- Vous êtes perdus sur la page ? SHIFT+ F5