pourquoi les filtres de ma boutique en ligne ne fonctionnent-ils pas avec un lecteur d'écran

Les filtres manquent souvent de nom, de rôle ou de message d'état

Les filtres de produits ne fonctionnent généralement pas avec un lecteur d'écran car il n'est pas suffisamment clair ce qu'est un filtre, quel est son statut actuel ou ce qui se passe quand l'utilisateur fait un choix. De nombreux filtres de webshops sont constitués de cases à cocher ou de boutons qui fonctionnent visuellement très bien, mais qui sont construits de manière programmatique incomplète : une case à cocher sans étiquette associée, un bouton qui ne montre que par un changement de couleur qu'un filtre est actif, ou un panneau de filtres qui s'ouvre sans qu'un lecteur d'écran en fasse l'annonce. Pour un visiteur voyant, ce n'est pas un problème, car il voit le changement. Pour un lecteur d'écran, ce changement visuel n'existe pas — il a besoin d'une annonce technique.

Un autre problème récurrent est que la liste des résultats change bien, mais qu'un lecteur d'écran ne s'en aperçoit pas. Par exemple, « 24 résultats » sont affichés sous le filtre, mais sans que cela soit communiqué comme un message d'état, donc l'utilisateur doit lui-même chercher ce qui a changé. Cela est fortement lié à la façon dont les titres et la structure sont construits sur la page, car un lecteur d'écran navigue souvent via cette structure pour déterminer où les résultats commencent — plus d'informations à ce sujet se trouvent à pourquoi un lecteur d'écran ne lit-il pas correctement les en-têtes de ma page. La façon dont le focus se comporte après l'application d'un filtre joue également un rôle : si le focus se déplace involontairement vers une autre partie de la page, l'utilisateur de lecteur d'écran perd le fil, comme décrit à pourquoi le curseur ou le focus saute-t-il partout sur mon site web.

Ce que WCAG prescrit à ce sujet

Le fait que les filtres doivent pouvoir communiquer un nom, un rôle et un statut à la technologie d'assistance comme un lecteur d'écran, et que les changements de statut tels qu'un nombre de résultats modifié soient annoncés, découle des critères relatifs au nom, au rôle et à la valeur ainsi qu'aux messages d'état dans WCAG 2.1 (W3C) — le niveau qui, dans la pratique, est attendu via EN 301 549. Un scan automatique détecte une partie de ces types de défauts, comme une case à cocher sans étiquette, mais savoir si un message d'état est réellement compréhensible pour un utilisateur nécessite une évaluation qu'un scan ne peut pas faire — voir un test d'accessibilité automatisé peut tout trouver.