Déployez des fonctionnalités dynamiques qui continuent à fonctionner lorsque JavaScript n’est pas disponible.
Ce tableau est une checklist de revue pour les professionnels du web : 17 vérifications à effectuer sur une page ou un composant dynamique avant le déploiement de la fonctionnalité, couvrant la fondation HTML statique qui la sous-tend, ce qui se passe en cas d’échec, si ses mises à jour sont perceptibles, et si les utilisateurs de lecteurs d’écran et ceux qui n’utilisent que le clavier peuvent l’utiliser.
Fondation HTML statique :
Le contenu essentiel, les liens et les métadonnées sont présents dans le HTML initial
La page est utilisable, pas seulement consultable, lorsque JavaScript n’est pas disponible
Les fonctionnalités dynamiques se superposent à une base fonctionnelle existante au lieu de la remplacer
Rien d’essentiel n’est enfoui dans des widgets uniquement JavaScript, inaccessibles aux robots d’indexation
Dégradation contrôlée :
Chaque demande comporte une gestion d’erreur explicite, afin qu’un échec ne soit jamais silencieux ni bloqué par un indicateur de chargement permanent
Un repli fonctionnel est prévu si la fonctionnalité dynamique échoue complètement
Les boutons Précédent et Suivant se comportent comme prévu après les mises à jour dynamiques
Les éléments qui se ressemblent se comportent de la même façon
Rendre les mises à jour visibles :
Un retour s’affiche à côté de l’élément sur lequel l’utilisateur vient d’agir
Les mises à jour utilisent la taille, le contraste ou le mouvement pour attirer l’attention
Les messages temporaires laissent un indicateur persistant
Aucune interaction ne nécessite de surveiller deux endroits à la fois
ARIA et accessibilité pour les lecteurs d’écran :
Les widgets personnalisés comportent des rôles ARIA appropriés
Les zones structurelles utilisent des repères ARIA ou des éléments sémantiques HTML5
Les zones mises à jour dynamiquement sont marquées avec l’attribut aria-live
La version a été testée avec un lecteur d’écran réel
La navigation au clavier fonctionne partout, sans que le focus ne soit perdu ni bloqué
Comment utiliser le tableau :
Pour obtenir votre propre copie, ouvrez Tableau > Détails > Dupliquer. Un compte Miro gratuit suffit.
Pour cocher un élément, double-cliquez sur sa case et tapez x.
Dupliquez la carte pour chaque fonctionnalité dynamique, composant ou sprint.
Ce modèle accompagne le cours de l’Interaction Design Foundation UX Essentials: Accessibility, SEO and Dynamic Interfaces.
