Module 322 - Concevoir et implémenter une interface utilisateur

Vérifier l'implémentation d'une UI sans barrières

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.

Utilisabilité = Efficacité / Efficience / Satisfaction

Exigences

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, ...
• La version 2.1 des WCAG comporte trois niveaux de conformité :
  • Niveau A - Single A
  • Niveau AA - Double A
  • Niveau AAA - Triple A

WCAG niveau A

• Accessibilité de base
• Critères les moins stricts
• Essentiels pour chaque site web
• 30 critères à respecter
  • 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
  • ...

Interlude ... les contrastes !

Contrast Checker

WCAG - P.O.U.R

• Les WCAG reposent sur 4 principes d'accessibilité
  • ​Perceivable - Perceptible
  • Operable - Utilisable
  • Understandable - Compréhensible
  • Robuste - Robuste

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

Objectifs de WAI-ARIA

• 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

Bonnes pratiques WAI-ARIA

• Utiliser uniquement lorsque nécessaire​
  • ​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

• 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

Screen Reader

Braille Display

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 de liste de contrôles

À 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 en particulier sur un site web choisi par mes soins
• Je vous donnerai les astuces et les raccourcis pour trouver l'information
• Règles
  • Écran éteint ou rabaissé
  • Utilisation du clavier uniquement
  • Vous ne pouvez pas voir le site avant

À vous de jouer !

• Installez un navigateur Chromium (Chrome/Brave/Edge)
• Ajoutez l'extension suivante - Screen Reader
• Sur le site suivant - Cabinet Littoral
• Vous devez trouver
  • Les horaires d'ouverture du cabinet le jeudi
  • (Le jour où le cabinet ferme à 13h00)
  • (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

} 

si vous êtes en avance

Bon courage !

Accessibility Maze

Préparons vos révisions !