L'UX accessible avec Gérôme Grignon

#a11y #ux #frontend #html

Prenons le contexte d'un jeu vidéo.

Nous avons toujours un personnage secondaire qui nous aide à comprendre les mécanismes du jeu.
🐼 Si nous faisons le parallèle sur le web, ce serait l'accessibilité.

Nous retrouvons aussi l'interface du jeu qui sera pensée par l'UX Designer.
Pour finir, la performance du jeu doit être irréprochable pour une meilleure immersion.
🐼 Les devs bichonnent leur code pour obtenir des bons scores sur les métriques des Core Web Vitals.

Je vous laisserai approfondir le sujet des Core Web Vitals via le talk de Nicolas Frizzarin (rediffusion sur la chaîne Youtube du DevFest 2023 de Nantes).

Aujourd'hui, nous allons regarder d'un peu plus près l'accessibilité avec la célèbre petite fée: Navi.

Ces planches découlent de l'excellent talk de Gérôme Grignon.

Imaginez ...

que Navi représente un lecteur d'écran utilisé sur votre site web par votre utilisateur.

ARIA (Applications Internet Riches et Accessibles)

Les éléments sémantiques HTML disposent de fonctionnalités de navigation au clavier, de rôles et d'états définis en standard.

🐼 Mal utilisé, cela devient une nuisance plus qu'une aide.

Pensez à vous appuyer sur les aria-attributes pour compléter les éléments HTML et non re-coder ce qui est déjà présent nativement.

Et sinon ?

Pour les notifications et alertes, pensez aria-liveavec polite/ assertive.
Plus d'infos pour gérer les changements intervenants dans sa page, cliquez ici.

Encore un exemple de cas ?

Avec aria-busy, vous pouvez faire patienter les lecteurs d'écran lors d'un chargement de page. Ils liront les éléments une fois chargés.

Découvrez ...

aria-relevant, aria-atomic, aria-controls, les arias de progression, aria-current, aria-hidden, aria-disabled, ... et bien plus ...

Allez vite voir la rediffusion du talk de Gérôme Grignon sur la chaîne Youtube du DevFest de Nantes 2023: 20 min de connaissance sur les attributs ARIA.

A vous la régie !