Critères d'acceptation pour l'accessibilité

Objectif

Assurer une utilisation facile pour les utilisateurs de clavier

Ensure ease of use for keyboard users

Méthode

Activer l'option Tab stops sur l'extension Accessibility Insights for Web pour voir le cheminement de la tabulation

Étapes

Défiler en tabulant à travers la page dans le sens de lecture, du haut vers le bas (ça devrait donner un tracé en z) en s'assurant que toutes les fonctionnalités ou tous les éléments interactifs soient atteignables

WCAG

2.4.3 Focus Order

Objectif

Assurer que les technologies d'assistance peuvent communiquer le sens ou la valeur informative des images

Méthode

Utiliser aXe ou WAVE pour détecter les images sans attribut pour le texte alternatif

Étapes

1. Exécuter les tests pour identifier les images sans attribut pour le texte alternatif

2. Vérifier que le contenu des attributs est pertinent, significatif et reflète correctement le contenu de l'image en inspectant le code source

WCAG

1.1.1 Non-text Content

Objectif

S'assurer de l'intelligibilité par les technologies d'assistance des éléments interactifs, comme par exemple, un bouton où l'icône « + » ne suffit pas à communiquer « Ajouter le courriel »

Méthode

Utiliser aXe ou WAVE pour détecter les éléments interactifs sans texte descriptif

Step

1. Exécuter les tests pour identifier les éléments interactifs sans texte descriptif

2. Vérifier que le contenu des attributs est pertinent, significatif et reflète correctement l'action ou la fonctionnalité en inspectant le code source

3. Valider qu'au lecteur d'écran, la fonctionnalité soit compréhensible, que l'intention soit claire

WCAG

2.5.3 Label in Name

Objectif

S'assurer que la structure du tableau soit cohérente afin que les technologies d'assistance soit capables d'atteindre tous les contenus dans un ordre logique

Méthode

Utiliser aXe, WAVE ou un des tests automatisés pour valider la structure du tableau

Étapes

1. Exécuter des tests automatisés avec aXe ou WAVE pour repérer les tableaux problématiques

2. Utiliser l'inspecteur pour valider la structure de la table

WCAG

1.3.1 Info and Relationships

Objectifs

Make sure HTML is coded in a valid and consistent way, this will ensure assistive technology users are able to access all the content within the page.

Méthode

Utiliser aXe, WAVE ou headingsMap pour identifier les erreurs de structure

Étapes

1. Activer HeadingsMap et valider la concordance du titrage détecté par l'outil et celui sur la page; (Les avertissements sont en rouge dans la colonne de gauche.)

2. D'autres tests automatisés avertissent de l'absence d'entêtes

WCAG

1.3.1 Info and Relationships

2.4.6 Headings and Labels

Objectifs

Assurer de la validité et de la cohérence du code de manière à ce que l'utilisateur d'une technologie d'assistance puisse atteindre tous les contenus et fonctionnalités

Méthode

Utiliser aXe, WAVE ou un des tests automatisés pour identifier les erreurs sémantiques de structure

Étapes

1. Exécuter des tests automatisés avec aXe ou WAVE pour repérer les incohérences

2. Inspecter le code pour s'assurer de la cohérence de la structure du texte

WCAG

1.3.1 Info and Relationships

Objectif

Assurer un contraste suffisant du texte et des éléments interactifs pour tous les utilisateurs, spécialement ceux ayant une déficience visuelle ou une perception différente des couleurs.

Méthode

Évaluer le contraste des éléments au design et utiliser aXe, WAVE ou un des tests automatisés pour identifier les problèmes de contraste au développement

Étapes

1. Exécuter des tests automatisés avec aXe ou WAVE

2. Confirmer les erreurs signalées à l'aide d'un outil de validation des contrastes, celui de WebAIM, par exemple

3. Consulter soi-même le produit sur différents écrans pour repérer les contrastes qui pourraient être problématiques

WCAG

1.4.3 Colour Contrast

Objectif

Previous testing might have already revealed most issues, but this is about capturing any unclear elements to assistive technology users.

Méthode

À l'aide d'un lecteur d'écran comme VoiceOver (iOS, MacOS) ou NVDA (Windows, sous Firefox), tabuler à travers la page.

Étapes

1. Activer le lecteur d'écran, tabuler à travers les contenus.

2. Écouter attentivement et s'assurer que ce qui est annoncé au lecteur d'écran correspond à l'élément courant

WCAG

4.1.2 Name, Role, Value

Objectif

Le déclenchement de sons ou fonctionnalités inattendus interfèrent avec les technologies d'assistance qui tentent d'aider l'utilisateur à se repérer ou à lire le contenu.

Méthode

S'assurer qu'aucun média n'est déclenché au chargement de la page

Étapes

1. Charger la page avec le volume ouvert et écouter.

2. Si un son joue plus de 3 secondes, c'est problématique.

WCAG

1.4.2 Audio Control

Objectif

Pour la navigation au clavier, il est nécessaire de pouvoir naviguer à travers la page de manière linéaire, prévisible sans perdre le focus

Méthode

Utiliser le clavier pour accomplir l'ensemble des fonctionnalités

Étapes

1. Tabuler à travers la page du haut vers le bas et inversement

2. Activer les éléments interactifs avec la touche Entrée

3. S'assurer que le focus ne se perde pas et que l'utilisateur puisse compléter toutes les tâches.

WCAG

2.4.3 Focus Order

Objectif

La navigation au clavier à travers des pages chargées en contenus ne doit pas s'avérer fastidieuse. L'utilisateur doit pouvoir explorer le contenu aisément.

Méthode

S'assurer de la présence de liens d'évitement avant les longues listes pour les structures plus complexes de contenus comme la navigation principale par exemple.

Étapes

1. Identifier les zones chargées qui pourraient être contournées

2. Identifier les liens d'évitement existants

WCAG

2.4.1 Bypass Blocks

Objectifs

Bien que les tests automatisés ne soient pas la réponse à tout, ils révèlent souvent les évidences, les problématiques avec la syntaxe du code.

fixing these issues ensures the best user experience.

Méthode

Utiliser aXe, WAVE ou un des tests automatisés pour identifier les problèmes

Étapes

1. Run automated test, make sense of issue, resolve

2. Re-test

WCAG

4.1.1 Parsing

Objectif

Un libellé ne doit pas dépendre de son contexte visuel pour être compris. Il doit être significatif.

Méthode

Automated tests like aXe or WAVE may point out links of concern, otherwise this requires manual testing.

Étapes

1. Run automated test to see if any links are flagged

2. Manually check all link to ensure the text is meaningful and complete

WCAG

2.4.4 Link Purpose

Objectif

L'ajout dynamique de contenus sur la page doit être perceptible par les technologies d'assistance, en particulier pour les avertissements et les messages d'erreurs.

Méthode

Assurer la lisibilité par le lecteur d'écran des contenus ajoutés dynamiquement

Étapes

1. Turn on screen reader, perform action (error in form?)

2. Ensure page updates are announced by the screen-reader

WCAG

3.1.1 Error Identification

4.1.3 Status Messages

Objectif

Les utilisateurs doivent pouvoir accéder au contenu indépendamment du périphérique ou de la technologie d'assistance dont ils se servent.

Not all users are able to use a mouse or swiping actions, we don’t want to prevent users from interacting with content because specific device dependent actions are required.

Méthode

Utiliser chacun des périphériques, clavier, souris ou lecteur d'écran sur chacune des plateformes indépendamment

Ensure you are able to use tab and enter/space for functionalities, also ensure you can use the mouse or swiping actions on a mobile device (screen-reader turned on)

Étapes

1. Accomplir les tâches avec le clavier seulement

2. Accomplir les tâches avec la souris seulement

3. Accomplir les tâches avec le lecteur d'écran sur mobile et desktop

WCAG

2.1.1 Keyboard

Objectifs

En tant qu'utilisateur avec une déficience visuelle, je peux facilement repérer la position de mon focus sur la page en utilisant uniquement le clavier.

Méthode

Manual testing, tabbing through the page and ensuring focus can be seen.

Étapes

1. Start at top of page and press tab

2. Tab through the page and ensure you can see where you are at all times

WCAG

2.4.7 Focus Visible

Objectif

Chaque champ de formulaire doit clairement être identifiable par son libellé.

Non-visual/screen-reader/low-vision users may not be able to see the connection between an input and its label, so we want to ensure that they are programmatically connected and present

Méthode

Utiliser les tests automatisés pour identifier les libellés manquants

Automated testing will often inform of missing label, but also manual testing can help

Étapes

1. Run automated test, see if any missing label errors come up

2. Cliquer sur chaque libellé pour s'assurer que le focus se place dans le champ associé.

WCAG

3.3.2 Labels and Instructions

Objectif

Les messages d'erreurs identifient correctement les erreurs à corriger ou les tâches à accomplir.

Users won’t always know why they are getting an error when filling out a form or performing an action, clear error messaging ensures they can resolve issues and move on with tasks.

Méthode

Manual testing of forms and inputs, reading messages and ensuring they make sense.

Étapes

1. Put valid input into form, see what happens

2. Put invalid input into form, submit form and see error messaging

3. Ensure that error messaging is clear and meaningful, do you understand what needs to be changed with the input?

WCAG

3.3.1 Error Identification

Objectif

Custom widgets or other elements may require ARIA to make them more meaningful to assistive technology. However, adding too much or unnecessary ARIA can make the user experience worse.

Méthode

Automated tests will often pick these types of issues up.

Étapes

1. Run automated test to see if any ARIA issues are found

2. Use a screen reader, ensure it works with the keyboard and changes in state are announced

3. Check W3C for widget requirements: https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog

WCAG

1.3.1 Info and Relationships

3.3.2 Labels and Instructions

Aria

Objectif

Most issues with a screen reader should have been picked up at this point, but this test is about going over everything again and ensuring nothing was missed for mobile experiences.

Méthode

Using a mobile device (iOS would be best) Turn on the screen-reader and go through the entire page/application/site

Étapes

1. Turn on screen reader, swipe through page

2. Use swipe/finger taps only to interact with all elements on the page

3. Listen careful to what the screen reader is saying, does it make sense and is it understandable?

4. Ensure you can do everything with the mobile device and screen reader turned on

WCAG

2.4 Navigable

Objectif

Most issues should have already been picked up at this point, but this test is about going over everything again and ensuring Voice Control users won’t have any problems.

Méthode

Using a mobile device (iOS would be best) Turn on Voice Control and go through the entire page/application/site

Étapes

1. Use swipe commands to move through content

2. Say “Show Names” and ensure they make sense

3. Try to activate (Tap) buttons with voice commands

4. Ensure Links/Labels are consistent

WCAG

3.2 Predictable