Toutes les pratiques exemplaires

Module 2 - Structure et sémantique des pages (pratiques exemplaires)

Module 2 - Structure et sémantique des pages

Points de repère

  • S’assurer que tout le contenu de la page se trouve dans un point de repère.
  • Identifier les points de repère sur la page:
    • Utiliser des éléments de section HTML5 équivalents (préférable).
    • Utiliser des attributs de rôle de point de repère ARIA s’il est impossible d’utiliser des éléments de section HTML5.
  • S’assurer de la présence d’un seul cas de:
    • role="banner" ou <header> (lorsque <header> est un enfant de <body>). Un <header> n’est pas considéré comme une bannière lorsqu’il s’agit de l’enfant de <article>, <aside>, <main>, <nav> ou <section>.
    • <footer>
    • <main>
  • S’assurer que ces points de repère sont des enfants directs de <body>:
    • <header> (quand il s’agit de la bannière)
    • <footer>
    • <main>
  • Limiter l’utilisation de <nav> aux navigations primaires et secondaires.
    • Utiliser l’attribut aria-label pour différencier plusieurs éléments <nav> (différents).
    • Utiliser l’attribut aria-labelledby pour étiqueter une région <nav> qui commence par un élément d’en-tête.
    • Fournir des étiquettes courtes et descriptives.
  • Le rôle du point de repère est énoncé par un lecteur d’écran avec le nom, le cas échéant. Ne pas utiliser le rôle de point de repère (p. ex., « navigation ») dans le nom; par exemple, l’étiquette est « site » et non « navigation du site » pour un point de repère de navigation.
  • Utiliser role="search" plutôt que role="form" lorsque le formulaire est utilisé pour la fonction de recherche.

En-têtes

  • Fournir des en-têtes pour chaque page.
  • Utiliser les éléments <h1> - <h6> pour tous les en-têtes.
  • Ne pas utiliser d’éléments d’en-tête pour du texte qui n’est pas un en-tête. Utilisez plutôt CSS pour modifier la taille ou les styles de police de caractère.
  • S’assurer que les en-têtes sont concis et significatifs (ils décrivent le sujet ou le but).
  • S’assurer que les en-têtes suivent une séquence hiérarchique sans sauter aucun niveau.
  • Fournir un en-tête h1 qui décrit le contenu de la page.

Structure du contenu

  • S’assurer qu’un élément <article> est utilisé dans une page Web pour la composition autonome.
  • Pour le regroupement thématique du contenu, s’assurer que l’élément <section> est utilisé.
  • Uutiliser l’élément paragraphe (<p>) pour les paragraphes.
  • Utilisation de citations :
    • Pour les citations plus longues et plus complexes, utiliser l’élément <blockquote>.
    • Pour les citations courtes, qui sont habituellement intégrées à une autre phrase, utiliser l’élément de citation incluse par référence <q>.
  • Pour indiquer que le contenu a une grande importance ou urgence, utiliser l’élément <strong>.
  • Pour les mots pour lesquels il faut souligner l’importance par rapport au texte environnant, utiliser l’élément <em>.
  • Quand vous utilisez une abréviation pour la première fois sur une page, indiquez ce que signifie le terme complet entre parenthèses, ou alors inscrivez le terme complet suivi de l’abréviation entre parenthèses.
  • Assurez-vous que chaque page Web définit son sujet ou son objectif dans un titre descriptif. Définir le titre dans un <title> élément dans le HTML <head> élément. Vous pouvez également indiquer le plus grand recueil de pages Web après la description de la page.
  • Lorsque vous formulez des instructions sur l’endroit où trouver ou sur la manière d’utiliser du contenu, évitez les descriptions qui reposent exclusivement sur la capacité de voir ou d’entendre. Inclure une étiquette textuelle dans les instructions et au niveau de l’élément présentant un intérêt.

Langue

  • Ajouter un attribut lang à l’élément <html> pour définir la langue par défaut pour toute la page.
    • Pour l’anglais : <html lang="en">.
    • Pour le français : <html lang="fr">.
    • Pour les autres langues, choisir le code de langue approprié à partir de la norme ISO-639. Utiliser le code de langue le plus court.
  • Vous pouvez ajouter une étiquette secondaire de région si vous avez besoin d'indiquer qu'il s'agit de la langue telle qu'elle est parlée quelque part dans une région particulière ; par exemple, lang="fr-CA" indique le français tel qu'il est parlé au Canada.
  • Insérez un attribut lang partout où la langue par défaut change.
  • En XHTML, utiliser l’attribut lang et l’attribut xml:lang.

Listes

  • HTML fournit trois structures de liste, chacune comportant une sémantique spécifique :
    • Utiliser des listes non ordonnées (<ul>) lorsque l’ordre des éléments n’est pas pertinent. Chaque élément de liste (<li>) dans une liste non ordonnée est marqué d’une puce.
    • Utiliser les listes ordonnées (<ol>) pour des renseignements séquentiels, lorsque l’ordre des éléments est pertinent. Chaque élément de liste (<li>) est numéroté par le navigateur.
    • Utiliser les listes de descriptions (<dl>) pour regrouper les termes associés (<dt>) et leurs descriptions (<dd>).

iFrames

  • Si l’iFrame est composé d’images décoratives ou de JavaScript, masquez-le des lecteurs d’écran en réglant l’attribut aria-hidden="true" sur l’élément iframe.
  • Si l’iFrame contient du contenu destiné à l’utilisateur :
    • Attribuer à l’élément iframe une valeur d’attribut de title descriptif.
    • S’assurer que la valeur de l’attribut de title iFrame est unique dans tous les iFrames de la page.

Analyse syntaxique et validité

  • Les éléments ont des balises de début et de fin complètes.
  • Les éléments sont imbriqués selon leurs spécifications.
  • Les éléments ne contiennent pas d’attributs en double.
  • Tous les identificateurs sont uniques.

Module 3 - Liens et navigation (pratiques exemplaires)

Module 3 - Liens et navigation

Fonction du lien

  • Fournir le lien du texte de lien qui indique la fonction du lien sans ajout de contexte additionnel.
  • Si le texte du lien n’est pas autodescriptif, assurez-vous que le contexte du lien décrit la fonction du lien.
  • Ne pas utiliser de texte de lien vide comme “Cliquer ici” ou “Lire plus” etc.
  • Faire la distinction entre les liens dont le texte est identique, mais dont les destinations sont différentes soit en
    • reformulant le texte du lien,
    • utilisant une étiquette ARIA, ou
    • ajoutant du texte visuellement caché au texte du lien.

Activation du lien

  • Les liens personnalisés ont besoin de tabindex="0" pour recevoir la cible du clavier et un événement onkeypress pour être activé par la touche Entrée.
  • Le nom visible d’un lien correspond au nom accessible du lien ou est y inclus.

Indicateur visuel de la cible

  • Les liens doivent avoir un état de cible visible.

Distinguer les liens du texte

  • Assurez-vous que les liens comportent des indicateurs visuels pour permettre aux utilisateurs de les identifier rapidement.
  • La couleur ne doit pas être le seul moyen de différencier un lien du texte ordinaire. Accompagnez la couleur d’un autre indice visuel (p. ex. soulignement, italique, gras) pour différencier le texte du lien du texte ordinaire.

Le lien s'ouvre dans une nouvelle fenêtre

  • En général, évitez d’ouvrir des liens dans une nouvelle fenêtre.
  • Lorsque les liens s’ouvrent dans une nouvelle fenêtre, avertissez les utilisateurs.

Blocs de navigation

  • Identifiez les blocs de navigation importants au moyen de l’élément <nav> ou de l'attribut role="navigation".
  • Lorsqu’il y a deux régions de navigation ou plus sur la page, nommez chaque région avec aria-label ou aria-labelledby pour les différencier.
  • Indiquez visuellement l’emplacement actuel en utilisant CSS, et sémantiquement, en utilisant aria-current="page" l’attribut.

Liens de saut navigation

  • Placez le lien de saut de navigation au haut de la page avant tout autre élément ciblable (lien, bouton ou commande personnalisée).
  • Le lien de saut n’a pas besoin d’être visible avant d’avoir reçu la cible.
  • Utilisez un texte de lien clair – p. ex. “Passer au contenu principal” ou “Passer au contenu”
  • Utilisez un lien de même page en ciblant la valeur de l’attribut d'identification de la destination (habituellement l’élément <main>.
  • Attribuez l'attributtabindex="-1" à la destination. Cela corrige les lacunes de certains navigateurs qui déplacent la fenêtre d'affichage vers la destination, mais pas vers la cible.
  • Ne masquez pas le lien de saut en utilisant l’une des options suivantes:
    • Utiliser CSS pour positionner de façon permanente l’écran de renvoi
    • Régler display: none
    • Régler visibility�: invisible

Table des matières

  • S’assurer que la table des matières reflète la hiérarchie des en-têtes du document.
  • S’assurer que chaque sujet de la table des matières est lié à l’endroit approprié.

Cible et ordre de cible

  • Assurez un ordre de tabulation significatif en positionnant le contenu ciblable dans la même séquence que le code sous-jacent.
  • S’assurer que l’ordre de navigation au clavier est logique et intuitif. Habituellement, cela signifie qu’il faut s’assurer que la navigation suit le flux visuel de la page, de gauche à droite, de haut en bas. Il passe par la bannière, la navigation principale, la navigation et les commandes des pages, puis le pied de page d’une page type.
  • Éviter d’utiliser des valeurs tabindex supérieures à 0.

Raccourcis clavier de caractères

Critère de succès 2.1.4 : Si un raccourci clavier est utilisé dans un contenu utilisant uniquement des lettres (y compris des majuscules et des minuscules), des signes de ponctuation, des chiffres ou des symboles, au moins un des énoncés suivants est vrai :

Désactiver
Un mécanisme permet de désactiver le raccourci;
Remapper
Un mécanisme permet de remapper le raccourci pour y inclure une ou plusieurs touches de clavier non imprimables (p. ex., Ctrl, Alt);
Actif seulement sur la cible
Le raccourci clavier d’un composant d’interface utilisateur n’est actif que lorsque ce composant a une cible.

Changement de contexte

Dans la mesure du possible, donner à l’utilisateur le contrôle des changements de contexte au moyen d’une action explicite de l’utilisateur généralement connue pour provoquer un changement de contexte; p. ex., cliquer sur un lien ou appuyer sur un bouton de validation.

Les changement de contexte :

  • ne doivent jamais être déclenchés sur la cible
  • doivent être anticipés par l’utilisateur s’ils sont déclenchés par la modification du paramètre d’une commande (à la saisie).

Cohérence

Navigation cohérente
D’une page à l’autre, l’ordre relatif des composants de la page et des liens dans les blocs de navigation devrait demeurer inchangé. D’autres composants ou liens peuvent être retirés ou insérés, mais l’ordre relatif doit demeurer le même.
Identification cohérente
D’une page à l’autre, les composantes fonctionnelles identiques doivent être nommées de façon uniforme. Par exemple, une vignette nommée « Rechercher » sur une page est nommée « Rechercher » sur les autres pages et non, comme c’est le cas parfois, « Trouver ». Cela inclut le texte alt des icônes et autres éléments non textuels ayant une fonctionnalité identique.

Module 4 - Tableaux (pratiques exemplaires)

Module 4 - Tableaux

Concept des tableaux

  • Marquez les tableaux de façon sémantique pour définir la relation entre les cellules d’en-tête et les cellules de données.
  • Pour les tableaux simples comportant une rangée d’en-tête de colonne et/ou une colonne d’en-tête de rangée:
    • utiliser les éléments <table>, <tr>, <th>, and <td> pour le balisage.
    • utiliser l’attribut scope pour associer des en-têtes à leurs cellules de données et à des en-têtes parents.
  • Pour les tableaux complexes, utiliser les attributs id et headers pour les associations explicites.

Guide de style pour le contenu du site Canada.ca

  • Utilisez des tableaux pour organiser et présenter les données
  • La valeur de chaque cellule est liée aux en-têtes de colonne et de rangée
  • Les entrées d’une colonne ne contiennent pas d’information qui pourrait être considérée comme un sous-titre
  • La valeur de chaque cellule est alignée avec l’en-tête de colonne qui apparaît directement au-dessus
  • Donner au tableau un titre clair (en utilisant <caption>) qui décrit l’information qu’il contient
  • Convertir des tableaux complexes en un ou plusieurs tableaux simples
  • Convertir un tableau en liste si les données sont simples

En-têtes irréguliers

  • Dans les tableaux irréguliers, représenter la relation entre les en-têtes de rangée et de colonne et leurs cellules de données avec l’attribut scope:
    • Lorsqu’un en-tête couvre plusieurs colonnes, ajouter l’attribut scope="colgroup"à l’élément <th>.
    • oLorsqu’un en-tête s’étend sur plusieurs rangées, ajouter l’attribut scope="rowgroup" à l’élément <th>.
  • Définir les groupes dans le tableau avec les éléments <colgroup> et <tbody> :
    • Définir des groupes de colonnes avec l’élément <colgroup> et des colonnes individuelles avec <col> comme premier enfant de l’élément de tableau;
    • Définir des groupes de rangée avec l’élément <tbody>. Les éléments individuels <thead> et <tfoot> définissent leurs propres groupes

En-têtes à plusieurs niveaux

  • Pour associer des en-têtes à plusieurs niveaux à des cellules de données:
    • Donner à chaque en-tête une valeur d’attribut id unique;
    • Faire référence à ces valeurs d’attribut id dans l’attribut headers des cellules de données définies par l’en-tête.
  • La technique des id/header n’est pas bien prise en charge par les lecteurs d’écran à l’heure actuelle (2021). Pour simplifier la présentation des données, il faut diviser le tableau complexe en deux tableaux pour qu’il soit plus simple.

Légende et sommaire

  • Utiliser l’élément <caption> pour fournir un nom ou un titre pour le tableau.
  • Si la légende reproduit le titre précédent, masquer visuellement la <caption> avec la classe CSS de la BOEW .wb-inv.
  • Placer l’élément <caption> comme enfant direct de l’élément <table>
  • Fournir un sommaire pour les tableaux complexes comprenant le but, la composition, les tendances ou l’utilisation.
  • Dans la mesure du possible, convertir des tableaux complexes en tableaux ou listes simples, de sorte qu’une explication moindre ou nulle ne soit requise.
  • Ne pas reproduire l’information de la légende dans le sommaire.
  • Choisir une méthode pour présenter les sommaires des tableaux :
    • Imbriquer le sommaire dans l’élément <caption>
    • Placer le sommaire dans un paragraphe précédant ou suivant le tableau. Faire référence au sommaire du tableau avec l’attribut aria-describedby.
    • Utiliser l’élément <figure> pour marquer un sommaire de tableau. Utiliser les attributs aria-labelledby et aria-describedby pour associer, respectivement, la légende et le sommaire au tableau.

Conseils et astuces supplémentaires

  • Divisez un tableau complexe en tableaux plus petits et plus simples qui contiennent des données se rapportant à un sujet secondaire.
  • Commencer un nouveau <table> lorsque le sujet change.
  • Séparez chaque élément de données dans sa propre cellule.
  • Ne pas utiliser de sauts de ligne (éléments <br>) pour créer des rangées de tableau.
  • Alignez le texte à gauche et les données numériques à droite.
  • Différencier visuellement les cellules d’en-tête <th> et de données <td>.
  • Donnez des styles différents aux rangées paires et impaires pour améliorer la lisibilité.
  • S’assurer que le tableau n’est pas tronqué (p. ex., ne pas utiliser de overflow: hidden dans les feuilles de style CSS).
  • Évitez d’utiliser des tableaux pour la mise en page. Utilisez plutôt une feuille de style CSS pour la mise en page.

Module 5 - Images (pratiques exemplaires)

Module 5 – Images

Images informatives

  • Utilisez l’attribut alt sur l’élément <img>.
  • Fournir des équivalents textuels utiles qui ont le même objectif, soit transmettre l’intention, le but et le sens de l’image.
  • Ne pas inclure des mots comme « image de » ou « graphique » dans le texte de remplacement.
  • Le texte de remplacement doit être concis et comporter moins de 150 caractères.

Images décoratives ou redondantes

  • Utiliser des attributs alt « null » (alt="") afin que la technologie d’assistance n’ait pas accès aux Images décoratives ou redondantes.
  • L’attribut role=presentation cache également des éléments, même s’il n’est pas aussi largement pris en charge que l’attribut alt.
  • Dans la mesure du possible, utiliser des images décoratives comme arrière-plan des feuilles de style en cascades.
  • Ne pas omettre l’attribut alt des éléments <img>.

Images fonctionnelles

  • Lorsqu'on lie une image et le texte qui l'accompagne, utiliser un attribut null (vide) alt (alt="") sur l'image s'il n'ajoute aucune information au texte du lien.
  • Toujours fournir du texte de remplacement pour toute image servant de lien.
  • Si on utilise une icône pour indiquer que les liens s'ouvrent dans une nouvelle fenêtre, fournir l'alternative textuelle « nouvelle fenêtre ».
  • Fournir un texte de remplacement pour les images d’icônes autonomes qui ont une fonction.
  • Utiliser un équivalent textuel pour les images utilisées dans un bouton.

Images de texte

  • Éviter d’utiliser des images de texte à moins qu’elles ne soient essentielles ou personnalisables.
  • Le texte faisant partie d’un logo ou d’un nom de marque est considéré comme essentiel.
  • Utiliser le texte proprement dit avec les CSS pour éviter la déformation et la pixélisation lorsqu’on redimensionne.
  • Le texte sous forme d’image utilisé comme logo n’est pas assujetti aux exigences en matière d’accessibilité, par exemple le contraste minimum des couleurs et l’absence de texte sous forme d’image.
  • Utiliser des images d’expressions mathématiques uniquement lorsque les mathématiques font exception au contenu du site Web. Fournir un équivalent textuel dans l’attribut alt ou dans une longue description.
  • Utiliser MathML avec MathJax pour assurer le rendu des expressions mathématiques sur le plan sémantique.

Images animées

  • S’assurer que l’animation s’arrête après cinq secondes ou fournir aux utilisateurs un bouton de pause.
  • S’assurer que l’animation ne clignote pas plus de trois fois par seconde.

Images complexes

A complex image requires both a short and a long description:

  • Une description courte ou un titre décrit l’image et indique l’emplacement de la description longue. Cette description est enregistrée dans l’attribut alt de l’élément <img> et ne doit pas dépasser 150 caractères.
  • Une description longue de l’image contient l’information essentielle transmise par l’image. Elle peut se composer uniquement de texte ou peut nécessiter un balisage structurel – en-têtes, paragraphes, listes ou tableaux.

Groupes d’images

  • Lorsqu’un groupe d’images représente un élément d’information unique : utiliser l’attribut alt et du texte de remplacement pour l’une des images, et utiliser l’attribut alt nul (alt="") pour les autres images afin que la technologie d’assistance ne les prenne pas en charge.
  • Lorsqu’un groupe d’images représente une collection : imbriquer chaque image dans un élément de <figure> avec un élément enfant <figcaption> et imbriquer toutes les figures dans un élément de figure à un seul parent. Utiliser l’élément <figcaption> pour décrire le contexte.

Images cliquables

  • Décrire le contexte dans l’attribut alt de l’élément source <img>.
  • Décrire chaque région cliquable dans l’attribut alt de l’élément <area>.

Figure et figcaption

  • Utilisez l’élément <figcaption> pour décrire l’information contextuelle qui n’est pas apparente en regardant l’image. Cela comprend les qui, quoi, quand, où et/ou pourquoi d’une image.
  • N’utilisez pas exactement les mêmes mots pour le texte de remplacement et l’élément <figcaption>. Les logiciels de lecture à l’écran traiteront l’information deux fois.
  • Fournissez toujours un texte de remplacement pour les images même si elles ont un élément <figcaption>. Si vous fournissez un attribut alt vide ou nul, les logiciels de lecture à l’écran ne seront pas en mesure d’annoncer la présence d’une image.

Images de SVG

  • Utiliser l’élément <img> et faire référence au SVG au moyen de l’attribut src.
  • Utiliser l’élément <svg> pour intégrer le SVG directement dans le code HTML.
  • Ne pas intégrer le SVG en utilisant <object> ou <iframe>.
  • Pour les images simples et non compliquées avec texte de remplacement descriptif de base
    • Utiliser les attributs <img> et “src=”.
    • Ajouter role="img" pour améliorer le soutien à l’accessibilité.
    • Fournir un équivalent textuel qui communique la même intention et le même sens que l’image.
    • Utiliser l'attribut alt pour fournir du texte de remplacement (préférable).
    • On peut également utiliser une étiquette aria-label ou aria-labelledby pour fournir du texte de remplacement.
  • Pour les images complexes avec texte de remplacement descriptif long
    • Utiliser l’élément <svg>.
    • Ajouter role="img" pour améliorer le soutien à l’accessibilité.
    • Fournir un équivalent textuel qui communique la même intention et le même sens que l’image.
    • Utiliser l’élément <title> pour fournir un texte de remplacement court
      • <title> doit être le premier enfant de son élément parent
      • Le texte <title> apparaîtra sous forme d’infobulle lorsque l’utilisateur placera son pointeur de souris dessus.
    • Utiliser l’élément <desc> pour fournir une description de texte plus longue au besoin, pour les images complexes.
    • Le texte d’un élément <desc> n’est pas visible.
    • Se reporter à la section Images complexes pour trouver d’autres stratégies concernant l’affichage des descriptions longues.
    • Pour améliorer le soutien à l’accessibilité :
      • Ajouter des valeurs d’identification uniques appropriées à <title> et <desc>.
      • Utiliser aria-labelledby pour faire référence aux valeurs d’identification.
  • Masquer les images SVG décoratives en utilisant aria-hidden="true".
  • Concernant le texte dans SVG :
    • Éviter le texte dans les éléments <svg> ou limiter le texte au minimum.
    • Ajouter role="img" pour améliorer le soutien à l’accessibilité.
    • Fournir un équivalent textuel qui communique la même intention et le même sens que l’image.
    • Utiliser l’élément <title> pour fournir un texte de remplacement court
      • <title> doit être le premier enfant de son élément parent
      • Le texte <title> apparaîtra sous forme d’infobulle lorsque l’utilisateur placera son pointeur de souris dessus.
    • Utiliser l’élément <text> pour fournir du texte dans SVG.
    • Pour assurer le soutien à l’accessibilité :
      • Ajouter des valeurs d’identification uniques appropriées à <title> et <text>.
      • Utiliser aria-labelledby pour faire référence aux valeurs d’identification.
    • Mettre du texte à l’extérieur du SVG plutôt qu’à l’intérieur (préférable).
  • Inclure une couleur de fond derrière le texte et d’autres parties importantes de l’image.
  • Concernant l’animation SVG :
    • Utiliser JavaScript ou CSS, et non <animate>.
    • Éviter les SVG qui clignotent plus de 3 fois par seconde.
    • Éviter les SVG qui se lisent automatiquement pour éviter de distraire les utilisateurs.
    • Permettre aux utilisateurs de lire et d’interrompre les animations SVG.
    • Utiliser un SVG animé pour un usage précis et non pour distraire.
  • Concernant le SVG interactif :
    • S’assurer que les objets interactifs <svg> sont accessibles à l’aide du clavier.
    • S’assurer que les objets interactifs <svg> sont accessibles à l’aide de écran tactile.
    • S’assurer que les objets interactifs <svg> indiquent le nom, le rôle et la valeur applicables.
    • Veiller à ce que les objets interactifs <svg> respectent toutes les directives WCAG 2.1 applicables.

CAPTCHA

  • Fournir deux modalités différentes de CAPTCHA. Par exemple, assigner une tâche visuelle, comme taper des mots affichés dans une image, et assigner une tâche audio, comme taper des lettres dictées dans un fichier audio.
  • Fournir un texte alternatif indiquant que le CAPTCHA exige l’exécution d’une tâche en précisant le type de tâche dont il s’agit; par exemple, « Tapez le mot dans l’image » ou « Tapez les lettres dictées dans l’audio ». Lorsqu’une version de remplacement d’un CAPTCHA est disponible, inclure, dans le texte alternatif, des instructions sur la façon de la trouver.
  • Étapes facultatives :
    1. Fournir plus de deux modalités de CAPTCHA.
    2. Donner accès à un représentant humain du service à la clientèle qui peut contourner le CAPTCHA.
    3. Ne pas exiger de CAPTCHA pour les utilisateurs autorisés.
  • Utilisez le reCAPTCHA v3 de Google, si possible.

Conseils et astuces supplémentaires concernant les images

  • Prioriser l’information dans un équivalent textuel. Inscrire les renseignements les plus importants au début.
  • Utiliser la ponctuation dans l’équivalent textuel pour faciliter la compréhension de l’information.
  • S’assurer qu’il n’y a pas de caractère d’espace entre les citations de l’équivalent textuel nul (vide) (alt="").

Module 6 - Formulaires (pratiques exemplaires)

Module 6 - Formulaires

Commandes d’étiquetage

  • Fournir des étiquettes pour décrire la fonction de commande de formulaire.
  • Utiliser l’élément <label> pour associer explicitement une commande de formulaire à une étiquette
  • Associer exactement l’attribut for de l’étiquette à l’attribut id de la commande de formulaire.
  • Voici les éléments qui utilisent des étiquettes explicitement associées :
    • <input type="text">
    • <input type="checkbox">
    • <input type="radio">
    • <input type="file"> (champs de sélection de fichier)
    • <input type="password">
    • <textarea>
    • <select> (listes déroulantes)
  • Ne pas utiliser l’élément <label> pour les éléments suivants.
    • Boutons Soumettre et Réinitialisation (<input type="submit"> ou <input type="reset">)
      • Étiquette fournie par l’attribut value
    • Boutons image (<input type="image">)
      • Étiquette fournie par l’attribut alt
    • Champs de saisie masqué (<input type="hidden">)
    • Boutons (éléments de bouton ou <input type="button">)
      • Étiquette fournie par le contenu de l’élément lui-même (bouton) ou par l'attribut value, aria-label ou aria-labelledby
  • Utiliser des étiquettes ARIA (les attributs aria-labelledby ou aria-label) lorsqu’il n’est pas possible d’utiliser <label>
  • Lorsque vous utilisez des étiquettes ARIA, ajouter tout texte visible dans l’étiquette de commande.
  • Utiliser l’attribut aria-labelledby pour récupérer une étiquette du contexte ou pour concaténer une étiquette d’un ou de plusieurs éléments du contexte.
  • Éviter d’utiliser l’attribut title pour identifier les commandes de formulaire. Ce n’est pas largement pris en charge par AT.
  • Le texte de l’étiquette doit être court et concis.
  • Utiliser un texte d’étiquette unique sur une page.
  • Placer les étiquettes visuellement à droite des boutons radio et des cases à cocher.
  • Placer les étiquettes de façon visuelle, directement au-dessus des champs de formulaire (de préférence par la BOEW) ou à gauche, aligné à droite (solution de rechange à la BOEW, lorsqu’il faut conserver un espace vertical).

Regroupement des commandes

  • Utiliser l’élément <fieldset> pour regrouper les commandes connexes dans un formulaire.
  • Utiliser l’élément <legend> pour nommer l’élément <fieldset>.
  • Faire en sorte que la legend soit aussi courte que possible, car certaines technologies d’assistance la déclarent avec l’étiquette chaque fois.
  • Rendre les étiquettes individuelles explicites, car certaines technologies d’assistance ne déclarent pas la <legend>. Ne pas répéter la legend dans chaque étiquette.
  • Utiliser l’élément <optgroup> pour les éléments <select> avec groupes d’options.
  • Utiliser les attributs ARIA role="group" et aria-labelledby pour regrouper et étiqueter les éléments de formulaire lorsque vous ne pouvez pas utiliser des éléments HTML natifs <fieldset> et <legend>.
  • Utiliser <label> dans la mesure du possible pour prendre en charge le navigateur universel et le lecteur d’écran.

Instructions du formulaire

  • Fournir les instructions générales qui s’appliquent à l’ensemble du formulaire et les fournir avant l’élément <form>. Cela permet aux utilisateurs du lecteur d’écran de consulter l’information avant de passer aux modes formulaires.
  • Utiliser aria-labelledby ou aria-describedby pour fournir des instructions à l’extérieur des étiquettes.
  • Indiquer le type de champ de saisie du formulaire (p. ex., type= “email”) afin que les navigateurs et les technologies d’assistance puissent fournir des aides à la saisie comme des claviers personnalisés, des étiquettes de remplissage automatique et des icônes.
  • Indiquer les saisies, les formats de données et les autres renseignements pertinents requis.
  • S’assurer que le texte des attributs d’espace réservé respecte un rapport de contraste minimal de 4,5:1.

Validation des saisies

  • Valider les données utilisateur à l’aide des attributs de validation des éléments de formulaire HTML5.
  • Les attributs de validation communs comprennent required, type, pattern, et les attributs min et max requis.
  • Valider les données du côté client et du côté serveur pour assurer la sécurité.
  • Identifier les champs de formulaire requis à la fois visuellement dans l’étiquette et sémantiquement.
  • Utiliser les types de données HTML5 pour valider différents types de données, y compris l’adresse courriel, l’adresse URL, le numéro, le numéro de téléphone, la date et la plage.
  • Valider la saisie structurée en utilisant l’attribut structure pour spécifier une expression régulière pour l’appariement.
  • Valider la longueur des entrées en utilisant les attributs minlength, maxlength, min et max
  • Tenir compte autant que possible des différents formats de saisie.
  • Permettre à vos utilisateurs de vérifier et de corriger leurs saisies afin de réduire les erreurs.
  • Exiger la confirmation de l’utilisateur pour les actions irréversibles.
  • Offrir une fonction d’annulation pour s’assurer que les soumissions sont réversibles.

Avis à l’utilisateur

  • Lorsqu’un utilisateur soumet un formulaire, l’aviser de la réussite ou de toute erreur.
  • S’assurer que les messages d’erreur sont clairs et concis, et fournissent des instructions simples pour corriger l’erreur.
  • Fournir une rétroaction dans l’en-tête principal, dans l’élément du titre, sous forme de liste d’erreurs avant le formulaire, ainsi qu’en ligne, associée au programme à la commande du formulaire.
  • Les erreurs énumérées avant le formulaire devraient :
    • Faire référence au label de la commande de formulaire correspondant.
    • Fournir une description concise et facile à comprendre de l’erreur.
    • Indiquer comment corriger les erreurs et rappeler aux utilisateurs les exigences en matière de format;
    • Inclure dans la page un lien vers la commande de formulaire correspondant pour faciliter l’accès.

Formulaires à étapes multiples

  • Diviser le formulaire en fonction de ses groupes de commandes logiques (p. ex., coordonnées et questionnaire).
  • Valider l’étape en cours avant d’exposer la suivante.
  • Étiqueter les étapes facultatives et permettre aux utilisateurs de les sauter.
  • S’assurer que la cible du clavier se déplace facilement d’une étape à l’autre, vers l’arrière et vers l’avant. À une nouvelle étape, cibler de préférence le prochain élément de formulaire pertinent, ou l’en-tête ou le conteneur pertinent.
  • Éviter d’imposer une limite de temps pour remplir le formulaire. Si une limite est requise, permettre à l’utilisateur de la modifier ou de la prolonger.
  • Si les étapes se trouvent sur plusieurs pages, répéter les instructions générales sur chaque page.
  • Indiquer la progression dans le formulaire (« Étape x de y »).

Commandes personnalisées

  • Dans la mesure du possible, utiliser des éléments de formulaire HTML natifs plutôt que des commandes personnalisées.
  • Modéliser le comportement d’après les éléments de formulaire HTML natifs.
  • Ajoutez un nom, un rôle et des valeurs ARIA appropriés, au besoin.
  • Communiquer des mises à jour et des changements d’état par l’entremise de messages ARIA live lorsqu’ils ne peuvent pas être communiqués par l’entremise de méthodes HTML ou ARIA.

Module 7 - Conception visuelle et couleurs (pratiques exemplaires)

Module 7 - Conception visuelle et couleurs

Couleur

  • Assurez-vous que l’information véhiculée par les différences de couleur est également disponible en texte.
  • Incluez un indice textuel pour les étiquettes de formulaire en couleur.
  • Assurez-vous qu’il y a des indices visuels supplémentaires lorsque des différences de couleur de texte sont utilisées pour transmettre de l’information.
  • Assurez-vous que le rapport de contraste par rapport au texte environnant est de 3:1 et utilisez un indice visuel supplémentaire en cas de sélection de liens ou de commandes lorsque seule leur couleur les distingue.

Contraste

  • Assurez-vous que le rapport de contraste du texte en petits caractères (police ordinaire de moins de 18 points ou caractères gras de moins de 14 points) est d’au moins 4,5:1 par rapport à l’arrière-plan.
  • Assurez-vous que le rapport de contraste du texte en gros caractères (police standard d’au moins 18 points ou caractères gras de 14 points) est d’au moins 3:1 par rapport à l’arrière-plan.
  • Assurez-vous que le rapport de contraste des composants actifs de l’interface utilisateur (c.-à-d. les commandes), leurs états et les graphiques significatifs est d’au moins 3:1 par rapport aux couleurs adjacentes.
  • Dans la mesure du possible, augmentez le contraste et visez les valeurs maximales de 7:1 pour les textes en petits caractères et de 4,5:1 pour ceux en gros caractères.

Proximité visuelle des étiquettes

  • Placez les étiquettes relatives aux champs du formulaire immédiatement avant ceux-ci:
    • soit au-dessus du champ (privilégié par le Guide de style de la BOEW);
    • soit à gauche du champ, aligné à droite (privilégié par le Guide de style de la BOEW lorsqu’il faut conserver un espace vertical).
  • Placez les étiquettes des boutons radio et des cases à cocher après le champ.

Espacement du texte

Votre conception doit être suffisamment souple pour conserver son contenu et sa fonctionnalité lorsque l’utilisateur modifie l’espacement des textes, en tenant compte de ces contraintes:

  • hauteur de ligne (espacement des lignes) à au moins 1,5 fois la taille de la police;
  • espacement suivant les paragraphes d’au moins 2 fois la taille de la police;
  • interlettrage (approche de groupe) d’au moins 0,12 fois la taille de la police;
  • espacement entre les mots d’au moins 0,16 fois la taille de la police.

Pour contourner l’espacement des textes dans votre conception :

  • N’utilisez pas de contenants fixes dans vos styles de CSS.
  • Veiller à ce que le contenu s’affiche sans chevauchement ou perte de texte.
  • Utilisez des unités relatives de taille de police, de hauteur de ligne, d’espaces entre les caractères, les mots, les lignes et les paragraphes.

Texte et icônes générés par une CSS

  • Masquer le contenu décoratif généré par des feuilles de style en cascade des lecteurs d’écrans en utilisant l’attribut aria-hidden="true".
  • Ne pas utiliser du texte généré par des feuilles de style en cascade.
    • Exception : Utiliser du texte généré par des feuilles de style en cascade pour afficher les éléments mark, del, ins et s aux utilisateurs de lecteur d’écran.
  • Concernant les icônes d’information générées par des feuilles de style en cascade :
    • Configurer l’icône sur un élément <span>, et :
      • Le masquer sur le lecteur d’écran des utilisateurs avec l’attribut aria-hidden.
      • Ajouter une étiquette visible pour les utilisateurs de souris en utilisant l’attribut title.
    • Ajouter une étiquette pour les utilisateurs de lecteur d’écran dans un deuxième élément <span> , masqué visuellement avec la classe CSS de la BOEW .wb-inv.

Masquer un contenu

Il peut l’être pour trois groupes d’utilisateurs:

  • Pour tous les utilisateurs, en utilisant l’attribut display:none ou visibility:hidden de la CSS. Lorsque vous masquez du contenu inactif, comme les fenêtres modales non déclenchées et les sous-menus non sélectionnés, vous devez le masquer pour tous les utilisateurs.
  • Pour les utilisateurs d’une technologie d’aide, au moyen de l’attribut aria-hidden="true" pour supprimer l’élément de l’API d’accessibilité;
  • Pour les utilisateurs voyants, par l’entremise de la classe .wb-inv de CSS de la BOEW pour masquer le contenu.

Affichage d’un contenu lorsqu’on le survole avec le pointeur ou qu’on le sélectionne avec le clavier

Lorsque vous affichez un contenu masqué à l’aide du pointeur, assurez-vous que ce contenu satisfait aux trois critères suivants:

Peut être ignoré
L’utilisateur peut ignorer le contenu affiché sans déplacer le pointeur de la souris ou annuler la sélection avec le clavier, habituellement en appuyant sur la touche Escape.
Peut être survolé
L’utilisateur peut placer le pointeur de la souris sur le contenu affiché.
Persistant
Le contenu affiché ne disparaît pas tant que le pointeur ne l’a pas dépassé ou que la sélection avec le clavier n’est pas annulée.

Module 8 - Zoom et conception adaptée (pratiques exemplaires)

Module 8 - Zoom et conception adaptée

Zoom

Le contenu devrait apparaître dans une seule colonne sans défilement horizontal et sans perte d’information ou de fonctionnalité lors du réglage de la fenêtre de votre navigateur :

  • à 320 pixels de largeur sur 256 pixels de hauteur, ou
  • à 1280 pixels de largeur sur 1024 pixels de hauteur, puis zoomer le contenu à 400 %.

Mettre en œuvre une conception adaptative.

Lorsque vous concevez du contenu à reformater dans une seule colonne :

  • Le contenu principal remplit la zone d’affichage.
  • Le défilement horizontal ne se fait pas.
  • Évitez d’utiliser plusieurs colonnes. La longueur de ligne courte est difficile à lire.
  • Évitez d’utiliser des flotteurs CSS. Ils créent également une longueur de ligne courte, sauf si l’élément flotté est très petit.
  • Évitez d’utiliser des largeurs fixes et minimales CSS. Elles ont tendance à provoquer un défilement horizontal.

Conception adaptée

  • Utilisez les « requêtes média » CSS pour déterminer la taille de l’écran de l’utilisateur et servir des configurations distinctes selon différentes largeurs d’écran aux points d’interruption.

  • Réglez la zone d’affichage à l’aide du méta-élément dans l’en-tête :

    HTML

    									<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0; user-scalable=1">
    • width=device-width indique que la page correspond à la largeur de l’appareil, ce qui permet à la page de recharger le contenu pour qu’il corresponde à différentes tailles d’écran.
    • initial-scale=1.0 établit le niveau de zoom par défaut de la page.
    • maximum-scale=2.0 établit un zoom maximal de 200 % sur le zoom par pincement pour l’appareil mobile.
    • user-scalable=1 permet à l’utilisateur de zoomer par pincement sur son mobile.
  • Testez les points d’interruption à l’aide d’émulateurs de zone d’affichage.
  • Les utilisateurs malvoyants font souvent un zoom pour déclencher des configurations mobiles sur de grands affichages, ce qui donne du texte assez volumineux.

Formulaires adaptés

À mesure que la taille de la zone d’affichage change, assurez-vous que :

  • les champs de formulaire ne débordent pas, et
  • les champs de formulaire et les étiquettes ne sont pas séparés par de larges zones d’espace blanc :
    • Dans le mode bureau par défaut, les étiquettes sont positionnées à gauche de la commande et sont alignées à droite. (Cette disposition est préférable lorsqu’il est nécessaire de conserver un espace vertical.)
    • En mode petit écran, les étiquettes sont positionnées directement au-dessus de la commande afin de maximiser la zone de l’écran pour chaque étiquette.

Images adaptées

les images peuvent être adaptées de quatre façons :

  • Technique 1 – Styliser l’image avec la CSS : width: 100%
  • Technique 2 – Styliser l’image avec la CSS : max-width: 100%
  • Technique 3 – Servir différentes tailles d’image à différentes tailles d’écran en utilisant l’attribut srcset
  • Technique 4 – Servir différentes images à différentes tailles d’écran en utilisant l’élément picture.

Texte adapté

  • Les conteneurs de texte doivent être redimensionnés à mesure que la taille de la zone d’affichage change pour empêcher le texte de déborder.
  • Éviter les conteneurs fixes et statiques.

Objets et modules d’extension adaptés

  • Les objets et les modules d’extension peuvent être redimensionnés à mesure que la taille de la zone d’affichage change afin qu’ils ne débordent pas la zone d’affichage.
  • Régler CSS max-width="100%" sur le conteneur.
  • Utilisez l’élément <img> pour intégrer une image, l’élément <iframe> pour intégrer HTML et les éléments <video> et <audio> pour intégrer le contenu média.

Tableaux adaptés

  • Les tableaux de grande taille qui débordent de la zone d’affichage ne sont pas adaptés. Suivre ces conseils pour éviter les débordements:
    • Utiliser un pourcentage plutôt que des pixels fixes pour définir la largeur des colonnes et des tableaux
    • Diviser les tableaux de grande taille ou largeur en plusieurs tableaux plus petits ou étroits
    • Afficher une barre de défilement horizontale si l’écran est trop petit ou afficher le tableau complet
    • Rendre les tableaux plus étroits comme suit:
      • Réduire le nombre de colonnes
      • Fusionner des colonnes
      • Utiliser des acronymes ou des abréviations pour les mots longs
      • Ajouter d’un tiret conditionnel &shy; pour couper les mots longs
    • Redimensionner les tableaux en fonction de la zone d’affichage

Composantes d’interface utilisateur adaptées

Réorganiser et redimensionner les composantes de l’interface utilisateur pour maintenir la lisibilité.

Vidéo adaptée

Les vidéos sont redimensionnées à mesure que la taille de la zone d’affichage change afin qu’elles ne débordent pas de la zone d’affichage. Soit en :

  • réglant la propriété CSS max-width: 100% sur l’élément conteneur de la vidéo, ou en
  • réglant la propriété CSS width: 100% sur l’élément <video>

Les dimensionnements statiques peuvent rompre les configurations de la page.

Orientation

  • Permettre aux utilisateurs de visualiser votre contenu dans l’orientation (portrait ou paysage) qu’ils préfèrent.
  • Ne pas limiter l’orientation de la page.

Module 9 - Audio, vidéo, etc. (pratiques exemplaires)

Module 9 - Audio, vidéo, etc.

Sous-titres

  • Ajouter des sous-titres pour les vidéos préenregistrées et en direct avec piste audio
  • Utiliser l’élément <track> pour spécifier des pistes de texte chronométrées pour les éléments <audio> ou <video>.
  • Les sous-titres sont synchronisés avec l’audio.
  • Les sous-titres sont affichés en lettres minuscules et majuscules.
  • Les sous-titres ne comportent pas plus de trois lignes à la fois.
  • Placez une nouvelle phrase sur une nouvelle ligne.
  • Le nombre maximal de caractères par ligne est de 32 caractères.
  • Insérez les sauts de ligne des sous-titres à des points logiques plutôt qu’au milieu d’une phrase.
  • Les couleurs par défaut sont le texte blanc sur fond noir.
  • Le rapport de contraste par défaut entre la couleur de police et la couleur de fond est d’au moins 3:1 (taille de police d’au moins 18 points).
  • La taille de la police par défaut est d’au moins 22 points.
  • Placez les sous-titres de manière à ne pas masquer le texte à l’écran, le visage des gens et d’autres informations visuelles importantes.
  • Assurez-vous que l’intervalle entre les sous-titres est d’au moins 1,5 seconde.
  • Supprimez les sous-titres des longs intervalles silencieux. Les sous-titres ont une durée maximale de 6 secondes.

Transcriptions

  • Les transcriptions de base sont une version texte de l’information audio parlée et non parlée.
  • Les transcriptions descriptives comprennent également une description textuelle de l’information visuelle.
  • Fournir des transcriptions descriptives des vidéos préenregistrées avec piste audio.
  • Fournir des transcriptions descriptives ou une audiodescription pour le contenu vidéo seulement préenregistré.
  • Fournir une transcription de base pour un contenu audio seulement préenregistré
  • Fournir une transcription de base ou des sous-titres pour un contenu audio seulement en direct
  • Les transcriptions interactives permettant à l’utilisateur de cliquer sur une phrase n’importent où dans la transcription pour se rendre à ce point précis dans la vidéo (ou l’audio). Les transcriptions interactives sont produites à partir de fichiers texte chronométré spécifiés dans l’élément <track>.
  • Placez la transcription ou un lien vers celle-ci directement en dessous ou à côté du lecteur multimédia.
  • Si la transcription se trouve sur une autre page, fournissez un lien vers le fichier audio ou vidéo.
  • Ajoutez la transcription en HTML pour assurer une accessibilité maximale pour les utilisateurs et les moteurs de recherche.
  • Si vous utilisez un fichier de sous-titres, combinez plusieurs lignes en paragraphes sensés.

Transcription de l’audio en texte

  • La pratique exemplaire en matière de transcription est presque identique pour les sous-titres et les transcriptions.
  • Lors de la transcription, l’objectif est d’être le plus exact possible :
    • Ne paraphrasez pas et n’omettez jamais de mots (et ne censurez pas).
    • Ne remplacez jamais des mots.
    • Ne réorganisez jamais l’ordre des paroles.
    • Ne corrigez ni ne modifiez jamais la grammaire.
    • Ne fournissez jamais de précisions dans les sous-titres (vous pouvez le faire dans la transcription).
  • Transcrivez tous les sons parlés et non parlés (rires, grognements, soupirs, cris, ratés d’un moteur de voiture, bruits de pas, grands cris au loin)
  • Identifiez les personnes qui parlent. Utilisez le nom complet la première fois et le nom simple par la suite. Si une personne n’est pas identifiée, utilisez Personne + numéro (p. ex. Personne 1, Personne 2) ou utilisez un rôleou un titre sans numéro (p. ex. intervieweur, médecin).
  • Exclure les paroles non pertinentes et les bruits de fond non pertinents.
  • Ne pas divulguer les informations qui sont intentionnellement masquées avant le moment opportun.
  • Inclure des renseignements pertinents au sujet du discours, p. ex. (chuchotement), (silencieusement).
  • Mettre les sons non parlés entre parenthèses, en italiques, en minuscules et avec un espace avant et après, p. ex. ( bavardage au loin)
  • Utiliser la ponctuation pour exprimer l’emphase.
  • Pour des paroles interrompues, utiliser un tiret au bout de la ligne.
  • Utiliser des mots en majuscules pour indiquer un cri.
  • Lorsque le discours est inintelligible ou inaudible, transcrire [inaudible]
  • Indiquer les longues périodes de silence ainsi : (silence).
  • Inclure la musique de fond si elle est importante pour comprendre le contenu :
  • Identifier la musique avec l’étiquette en majuscules MUSIQUE (ou un verbe laissant entendre de la musique), suivie d’un deux-points et du titre entre guillemets suivi de l’artiste.
  • Transcrire les paroles importantes avec des notes de musique de chaque côté, p. ex.

    ♪ A long, long time ago ♪

  • Décrire toute musique qui ne fait pas partie de l’action, mais qui contribue à l’ambiance :

    ♪ musique effrayante ♪

  • Pratiques exemplaires propres aux transcriptions :
    • Pour les transcriptions descriptives, inclure toute l’information audio pertinente ainsi qu’une description de toutes les informations visuelles pertinentes.
    • Si votre transcription est générée à partir de fichiers texte chronométré, assurez-vous que les descriptions correspondent à des intervalles libres dans le contenu audio principal, ou utilisez un lecteur permettant de faire une pause pendant la description.
    • Les transcriptions affichent du texte à l’écran dans les vidéos. Les sous-titres n’affichent pas de texte à l’écran.
    • Assurez-vous que les transcriptions indiquent la source des sons plutôt que de simplement les décrire.
    • Dans certains cas, comme les dépositions judiciaires, la transcription doit être rendue intégralement, y compris les « ums », les « ahs » et les pauses.
    • L’utilisation d’en-têtes, de sujets et de liens peut rendre la transcription plus facile à utiliser.
    • Incluez des estampilles temporelles seulement lorsque cela est utile.
    • Ajoutez une estampille temporelle au contenu audio inaudible.

Description de l’information visuelle

  • Fournir une audiodescription pour un contenu vidéo préenregistré avec piste audio.
  • Fournir une audiodescription ou une transcription descriptive pour un contenu vidéo seulement
  • Concevoir de nouvelles vidéos avec descriptions intégrées (le script comprend toute l’information visuelle pertinente) pour éviter la nécessité d’une audiodescription
  • S’assurer que les éléments visuels importants sont décrits de façon appropriée et objective pour comprendre ce que la vidéo communique.
  • Rédiger la description de l’information visuelle au temps présent en utilisant une voix active et un style narratif à la troisième personne.
  • S’assurer d’inclure l’ensemble du texte, p. ex. le texte du titre au début, les liens et adresses courriel, le nom de la personne qui parle et le texte affiché dans une présentation.

Accessibilité du lecteur multimédia

Le lecteur multimédia idéal offre la prise en charge intégrée des sous-titres, des audiodescriptions et des transcriptions.

Accessibilité par clavier :

  • Toutes les commandes peuvent être focalisées au moyen de la touche de tabulation.
  • Les commandes comportent un indicateur visible de focus du clavier.
  • L’ordre des commandes activées par la touche de tabulation correspond à l’ordre visuel, de gauche à droite.
  • Toutes les commandes peuvent être activées par le clavier.
  • Le texte, les commandes et les arrière-plans présentent un contraste suffisant entre les couleurs.

Accessibilité des lecteurs d’écran :

  • Chaque commande présente aux lecteurs d’écran son nom, son rôle et sa valeur (si une ou plusieurs sont définies).

Contenu clignotant

S’assurer que le contenu clignotant :

  • Ne clignote pas à plus de 3 fois par seconde.
  • Ne dépasse pas 21 824 pixels carrés.
  • Ne présente pas de contraste élevé.

Évaluer le contenu clignotant à l’aide d’un outil comme Photosensitive Epilepsy Analysis Tool (PEAT).

Animations et mouvements

  • Permettre aux utilisateurs de désactiver les animations de mouvement.
  • Éviter les animations inutiles.

Mettre en pause, arrêter ou masquer

  • Pour tout contenu en mouvement, clignotant et défilant qui démarrent automatiquement, durent plus de cinq secondes et est présentées en parallèle avec d’autres contenus, offrez à l’utilisateur un moyen de le mettre en pause, de l’arrêter ou de le masquer.
  • Pour toute information actualisée automatiquement, offrir à l’utilisateur un moyen de mettre en pause, d’arrêter ou de masquer le contenu ou encore, offrez à l’utilisateur un moyen de contrôler la fréquence des actualisations.
  • Un « bouton pause » accessible par clavier ou d’autres mécanismes peuvent être utilisés pour mettre le contenu en pause.
  • Éviter les déplacements, les clignotements, les défilements ou les actualisations automatiques inutiles.

Contrôle du son

Si la fonction audio est activée automatiquement lors du chargement de la page pendant plus de 3 secondes, permettre à l’utilisateur :

  • de suspendre ou d’arrêter le fichier audio; ou
  • de contrôler le volume indépendamment du volume du système.

Il est également possible de lire des fichiers audio uniquement sur demande de l’utilisateur.

Module 10 - Méthodes de saisie de données (pratiques exemplaires)

Module 10 - Méthodes de saisie de données

Saisie avec la souris

  • Lorsque la réception puis la suppression du survol du curseur ou de la cible du clavier déclenchent un contenu supplémentaire pour le rendre visible puis masqué, ce contenu supplémentaire est :
    • Rejetable
    • Survolable
    • Persistant
  • Le contenu pouvant être déclenché par le survol du curseur devrait également pouvoir être déclenché par le positionnement de la cible du clavier.
  • Pour toute fonctionnalité qui se commande par pointage unique, au moins un des énoncés suivants est vrai :
    • Pas d’événement de pression
    • Abandon ou annulation
    • Annulation sur relâchement
    • Obligation
  • Utiliser le comportement par défaut des commandes (p. ex., événement onclick ou mouseup) et éviter d’annuler ce comportement par un déclencheur explicite par événement de pression.

Saisie avec clavier

Cible et ordre de cible

  • Assurer un ordre de tabulation significatif en positionnant le contenu ciblable dans la même séquence que le code sous-jacent.
  • S’assurer que l’ordre de navigation au clavier est logique et intuitif. Habituellement, il faut pour cela s’assurer que la navigation suit le flux visuel de la page, de gauche à droite et de haut en bas. Il passe successivement par la bannière, la navigation principale, la navigation et les commandes des pages, puis le pied de page d’une page type.
  • Éviter d’utiliser des valeurs tabindex supérieures à 0.

Indicateur visuel de la cible

  • Toujours éviter les styles qui éliminent ou limitent la visibilité des indicateurs de cible du clavier.
  • Utiliser CSS pour concevoir un indicateur de cible très visible avec un fort contraste.
  • Les liens doivent avoir un état ciblé visible.

Fonctionnalité du clavier

  • S’assurer que tout le contenu de la page puisse se commander à partir du clavier.
  • Dans la mesure du possible, utiliser des liens et des commandes de formulaire HTML natifs plutôt que des éléments personnalisés.
  • Utiliser l’événement onclick des ancrages et des boutons.
  • Jumeler les gestionnaires d’événement souris et les gestionnaires d’événement clavier.

Piège de clavier

  • S’assurer que l’utilisateur puisse entrer et sortir des éléments interactifs en utilisant uniquement le clavier.

Gestion de cible avec contenu injecté de JavaScript

  • Chaque fois qu’une fenêtre contextuelle apparaît sur la page en réponse à une action de l’utilisateur ou l’invocation d’une commande, s’assurer que l’utilisateur retourner au point de départ de l’interaction.

Saisie avec un dispositif de pointage

  • Toutes les fonctionnalités doivent être accessibles au moyen d’un dispositif de pointage (p. ex., souris, doigt sur un écran tactile, stylet électronique, pointeur laser).
  • Toutes les fonctionnalités peuvent être commandées par toucher ou clic simple, par double toucher, par double-clic, par pression longue ou par clic maintenu.
  • Coder des gestionnaires d’événement JavaScript qui se déclenchent à la fois en réaction aux clics de clavier et de souris. Une interface accessible par souris est généralement accessible au toucher.
  • La taille de la cible devrait faire au moins 44px sur 44px (niveau AAA, facultatif).

Saisie vocale

  • Lorsqu’une commande a un nom accessible défini au moyen d’une étiquette ARIA et d’une étiquette visible, le texte de l’étiquette visible doit faire partie de l’étiquette ARIA ou y correspondre.

Commande par le mouvement

  • Si des fonctions sont déclenchées par le mouvement (par exemple, par des secousses), il faut faire en sorte qu’elles se commandent également par des éléments d’interfaces utilisateurs classiques.
  • S’assurer que l’utilisateur puisse désactiver la commande par le mouvement.

Module 11 - Zones live ARIA et limites de temps (pratiques exemplaires)

Module 11 - Zones live ARIA et limites de temps

Zones live ARIA

  • Identifiez une zone live avec un attribut aria-live associé à un élément conteneur.
    • La zone live doit être vide au moment du chargement de la page ou au moment de son ajout initial au DOM.
    • Utilisez aria-live="polite" pour la plupart des annonces.
    • Utilisez aria-live="assertive" lorsque l’utilisateur a besoin d’une rétroaction immédiate.
  • Utilisez l’attribut aria-atomic pour préciser si toute la zone live doit être annoncé, ou seulement le texte qui a changé.
    • Utilisez aria-atomic="false" pour annoncer seulement le texte actualisé.
    • Utilisez aria-atomic="true" pour annoncer le texte statique et actualisé.
  • Utilisez l’attribut aria-relevant seulement si la suppression du contenu d’une zone live doit être annoncée.
  • Utilisez l’attribut aria-busy="true" pour aviser la technologie d’assistance qu’elle doit ignorer temporairement les changements apportés à un élément lorsque des éléments sont en cours de chargement. Une fois tous les éléments chargés, effacez l’attribut ou configurez-le à aria-busy="false".
  • Utilisez un type spécial de rôle de zone live, le cas échéant :
    • Utilisez role="alert" pour annoncer des informations importantes et généralement urgentes qui nécessitent l’attention immédiate de l’utilisateur.
    • Utilisez role="status" pour annoncer à l’utilisateur une information moins urgente qu’une alerte.
    • Utilisez role="timer" pour identifier un compteur numérique indiquant le temps écoulé depuis un point de départ ou le temps restant avant un point de fin.
    • Utilisez role="marquee" pour définir une zone comme un type de zone live comportant des annonces non essentielles qui changent fréquemment.
    • Utilisez role="log" pour faire le suivi des actualisations séquentielles, par exemple un journal de clavardage, un historique des messages, un journal de jeu ou un journal des erreurs.

Limites de temps

  • Toute conception comportant une limite de temps doit offrir à l’utilisateur l’une de ces options :
    • Désactiver la limite de temps avant qu’elle soit activée.
    • Ajuster la limite de temps avant qu’elle soit activée à une durée d’au moins dix fois la valeur par défaut.
    • Prolonger la limite de temps. L’utilisateur doit être averti au moins 20 secondes avant l’expiration du délai.
  • Lorsque la session est expirée, présentez des messages d’avertissement dans une boîte de dialogue contextuelle avec des options permettant à l’utilisateur de prolonger ou de terminer la session.
  • Pour les minuteries comportant des échéances fixes, offrez un compte à rebours avec annonces ARIA live à des intervalles appropriés.
  • Lorsqu’une page est rafraîchie ou rechargée, le système doit demander la permission de l’utilisateur. Il faut avertir l’utilisateur que du contenu plus récent est disponible et à lui offrir des options pour actualiser le contenu ou poursuivre avec l’ancien contenu.
Haut de la page