Si vous avez des questions ou des commentaires, merci de les adresser à accessibilite@radio-canada.ca. Nous y répondrons dès que possible.
Versions Compared
Key
- This line was added.
- This line was removed.
- Formatting was changed.
Table of Contents |
---|
Contexte et objectifs
Cette notice regroupe l’ensemble des spécifications à prendre en compte lors du développement des composants riches en Javascript et HTML d’un site ou d’une application web, et ce, quel que soit le périphérique d’affichage ciblé (ordinateur, mobile, etc.).
À qui s’adresse cette notice, comment l’utiliser?
Ce document doit être transmis aux intervenants et/ou prestataires réalisant les spécifications techniques, les gabarits HTML/CSS et les différents développements techniques des interfaces. Il vient en complément aux spécifications techniques d’un projet. Les recommandations peuvent être complétées ou retirées selon les contextes d’utilisation, ce qui peut être notamment réalisé par la maîtrise d’ouvrage.
Les recommandations doivent être prises en compte en phase d’intégration HTML/CSS, et pour certaines d’entre elles, lors de la dynamisation des pages lorsque les gabarits sont affectés à un outil de gestion de contenu (CMS).
Certaines annotations viennent compléter le document, celles-ci sont nécessaires pour la compréhension de chaque recommandation.
Image RemovedREMARQUES
Les remarques permettent de compléter les recommandations en apportant des précisions applicables à des situations techniques précises et ponctuelles.Image RemovedHTML5
Les encarts HTML5 apportent des éclaircissements aux critères ou des avertissements en tenant compte des évolutions proposées par la nouvelle spécification HTML.Image RemovedASTUCES
Les astuces ne sont pas directement liées à l’accessibilité, mais leur prise en compte permet généralement d’améliorer la qualité générale des interfaces ou de faciliter la prise en compte de l’accessibilité sur les étapes suivantes du projet. À l’inverse, les recommandations de ce document, bien que dédiées à l’accessibilité, rejoignent souvent de bonnes pratiques en matière d’ergonomie, d’expérience utilisateur, de performance ou de référencement.Image RemovedASTUCES - BONIFICATION
Les encarts HTML5 apportent des éclaircissements aux critères ou des avertissements en tenant compte des évolutions proposées par la nouvelle spécification HTML.Image RemovedATTENTION
Les avertissements mettent en avant des points particuliers qu’il est important de respecter ou des pièges à éviter pour garantir une bonne accessibilité.Image RemovedCAPTURES D'ÉCRAN
Des exemples provenant d’ICI Radio-Canada, ICI Musique, ICI tou.tv, ou d’autres exemples pertinents sont inclus dans le document.
Image RemovedRESSOURCES
Des liens sont inclus pour faciliter l'application des normes : ils mènent soit à des sites externes (lectures, meilleures pratiques, etc.), ou font référence à d'autres sections du présent guide.Mention légale
La société Atalan est l'auteure et la responsable du site web : www.accede-web.com. Les documents disponibles dans Repères sont une version modifiée des normes d’accessibilité de www.accede-web.com.
Interfaces riches et Javascript
1.Recommandations génériques interfaces riches et Javascript
1.1 Liens ressources
- Supported States and Properties (en anglais)
- Notes on Using ARIA in HTML (en anglais)
- WAI-ARIA 1.0 Authoring Practices (en anglais)
- Code Library Deque University (en anglais)
Autres technologies
- JavaScript and JQuery Accessibility (en anglais)
- JQuery UI (en anglais)
- Accessibility Plugin for Bootstrap 3 (en anglais)
1.2 Différencier les boutons des liens
Pour une meilleure compréhension des interfaces riches par les utilisateurs, les boutons sont à différencier des liens :
- Les boutons <button> / <input> permettent à l’utilisateur de déclencher des actions. Ils sont à employer pour soumettre des informations, pour afficher l’élément suivant ou précédent dans un carrousel, pour fermer une fenêtre modale, etc.
- Les liens <a> permettent à l’utilisateur de naviguer. Ils sont à employer pour pointer sur une autre page ou sur une zone précise de la page courante par l’intermédiaire d’un système d’ancres.
Image RemovedREMARQUES
Il est recommandé d'utiliser la balise <input type="button"> à l'intérieur d'un <form> (bouton Envoyer, etc...) et d'utiliser la balise <button> lorsque c'est une action (flèche, bouton fermer, etc...).
Image RemovedRESSOURCES
- Voir aussi le document HTML et CSS : Différencier les boutons des liens
1.3 Mettre en place des solutions de remplacement à Javascript
Image Removed
On prend pour acquis que Javascript est une composante intégrale du navigateur, du poste ou de l’appareil de l’utilisateur en se fiant au fait que les contenus générés ou les interactions gérées par script sont conformes aux guides d’accessibilité. D’autre part, lorsque Javascript est volontairement désactivé sur le poste ou l’appareil de l’utilisateur, le message « Pour une expérience optimale, merci d’activer le module JavaScript » s’affichera en en-tête des sites.
Cependant dans certains cas il faut prévoir le comportement suivant :
- Pour la gestion des erreurs d’un formulaire, même si la validation des données est effectuée côté client par Javascript, la validation des données doit être effectuée côté serveur également.
- Pour les composantes comme les accordéons, les tabulations et les carrousels, l’initialisation des styles doit être effectuée côté Javascript et non au chargement des feuilles de styles. Ainsi, si le JavaScript est désactivé, le contenu peut être visible.
1.4 Mettre en place des solutions de remplacement à Flash
Chaque fois que des contenus ou des fonctionnalités sont proposés par l’intermédiaire de Flash, penser à en informer l’utilisateur :
- indiquer à proximité de la mention HTLML : « Autre version non disponible ».
- préciser par une icône que l’animation est en Flash.
Image RemovedASTUCES
Dans le cas où l'utilisation de flash est indispensable, considérer ce contenu comme une image informative complexe (DataV).
- Voir la remarque de HTML et CSS : Préciser un text alternatif sur les images informatives
- Voir Contributeur éditoriaux pour le type de donnée entrée : Images informatives complexes (DataV), cartes interactives et contenus riches et multimédia
Image RemovedATTENTION
Puisque sa compatibilité dans les navigateurs est très base, il est fortement déconseillé d'utiliser la technologie Flash.
Image RemovedRESSOURCES
- Préciser un text alternatif sur les images informatives (HTML et CSS)
- Images informatives complexes (DataV), cartes interactives et contenus riches et multimédia (Contributeur éditoriaux)
1.4.1 Pour les médias
À Radio-Canada, nous utilisons un lecteur audio/vidéo maison qui a été développé avec la technologie HTML5.
Image RemovedASTUCES
Lorsqu’une vidéo est affichée sur une page, sa transcription peut être considérée comme solution de remplacement. Autre possibilité, la vidéo en téléchargement (en supplément de la transcription).
Image RemovedRESSOURCES
- Voir aussi le document HTML et CSS : Contenus multimédia
1.4.2 Pour les animations
Sur Radio-Canada, il n’y a plus de contenu Flash sauf la section « Je joue » de la zone Jeunesse, dont les jeux seront retirés à l’expiration des licences.
On préconise l’utilisation des outils qui génèrent des animations en non-Flash (HTML5, Javascript, CSS3, etc.). Sinon, dans les cas où l’utilisation de Flash est indispensable, indiquer à proximité de la mention HTLML : « Autre version non disponible ». De plus, préciser par une icône que l’animation est en Flash.
Dans le cas des animations faite à l’aide d’une technologie autre que GIF comme Cinématographe/Flixel, animations CSS ou vidéo d’arrière plan décorative n’utilisant pas le contrôleur vidéo de Radio-Canada, nous recommandons l’application suivante :
Image Removed
1.5 Permettre le contrôle des scripts à la fois avec la souris et le clavier
Chaque fois qu’un script peut être contrôlé par la souris, il doit être possible de contrôler ce dernier également avec le clavier.
C’est-à-dire que chaque fois que la souris permet de contrôler un script depuis un élément (un lien ou un bouton), celui-ci doit :
- Être atteignable au clavier.
- Permettre le contrôle du script avec le clavier une fois le focus placé sur l’élément.
Il est très important de veiller à l’absence de pièges au clavier. Les pièges au clavier bloquent les utilisateurs qui naviguent au clavier, car ils empêchent l’interaction avec certaines zones de la page.
Les pièges se manifestent lorsqu’un utilisateur se retrouve bloqué dans la page lors de la navigation au clavier :
- Soit parce qu’un élément empêche la prise de focus sur les éléments interactifs qui le précèdent ou le suivent.
- Soit parce qu’un élément ne laisse pas le focus le quitter, une fois appliqué sur l’élément.
Image RemovedREMARQUES
L'ajout et la suppression d'action tabulable sur un élément est a proscrire : on doit toujours garder le comportement natif.
- Si vous avez un élément qui doit pouvoir être cliquable/tabulable, utiliser une balise d'action avec la sémantique appropriée (button, link, input, select)
- Un élément qui ne comporte pas d'action ne doit pas pouvoir être tabulable (div, etc...)
Image RemovedASTUCES
Par défaut, l'événement "click" est très bien supporté par la navigation au clavier, il est nativement associé à la touche "Enter" au clavier.
Source : JavaScript and JQuery Accessibility (en anglais)
Image RemovedATTENTION
Chaque fois que cela est possible, privilégier l’utilisation d’écouteurs d’événements génériques plutôt que spécifiques à l’appui sur une touche du clavier. Par exemple, privilégier onfocus / onblur à onkeydown. En effet, les raccourcis clavier ne sont pas toujours les mêmes selon les systèmes ou les navigateurs. Par exemple, avec le navigateur Opéra, c’est la touche Maj, associée aux flèches directionnelles, qui permet de naviguer de lien en lien au clavier, contrairement à la plupart des autres navigateurs qui utilisent la touche Tab.
Image RemovedRESSOURCES
- JavaScript and JQuery Accessibility (en anglais)
- Voir aussi le document HTML et CSS : Garantir la visibilité de la prise de focus au clavier
- Voir aussi le document HTML et CSS : Veiller à ce que l’ordre de tabulation suive la logique de l’ordre de lecture
1.6 Permettre la mise en pause des animations automatiques et des rafraîchissements automatiques de page
Un moyen de mettre en pause et de relancer l’animation doit être prévu pour chaque contenu animé (défilement, clignotement, mouvement, mise à jour automatique, etc.).
Sur le site de Radio-Canada, il y a les publicités (à l’occasion), les carrousels, les vidéos/audios et les GIF animés.
Pour les GIF animés, le moyen privilégié est de laisser la configuration et les fonctionnalités natives du navigateur pour figer les images (Safari) ou les faire disparaître (Firefox). Dans tous les cas, il faut s’assurer que le texte qui accompagne l’image est bien représentatif de l’image animée.
À l’instar des animations automatiques, il faut prévoir un moyen de mettre en pause le rafraîchissement automatique de page (par exemple: la page d’accueil de Radio-Canada) afin que les utilisateurs aient le choix de relire ou non la page.
Image RemovedREMARQUES
Quelle que soit la position visuelle de ce bouton dans la page, celui-ci doit toujours être placé avant les éléments animés, dans le DOM. Dans le cas d’un lecteur multimédia, faire en sorte que ce bouton soit le premier élément tabulable du lecteur.
Image RemovedATTENTION
L’utilisation des GIF animés n'est pas recommandée, car ceux-ci peuvent gravement perturber certains utilisateurs tout en causant de graves problèmes de performance due au poids de tel type de fichiers.
Image RemovedRESSOURCES
- Voir aussi le document Conception graphique : Prévoir l’arrêt manuel de chaque contenu animé
- Voir aussi le document HTML et CSS : Écrire le code HTML en suivant la logique de l’ordre de lecture
- Voir aussi le document Interfaces Riches et JavaScript : Carrousels
2. Cas d'usage
2.1 Personnalisation des balises d'actions
Définition
Les balises d’actions sont des éléments de formulaires qui permettent à l’utilisateur de sélectionner une ou plusieurs options parmi un groupe d’options proposées.
Toujours utiliser la balise native pour s’assurer que le comportement attendu, qu’importe le navigateur, soit respecté.
S’il y a des demande de personnalisation, celle-ci doivent-être faites au niveau des styles (CSS).
Image Removed
Comportements attendus
Case à cocher
- Chaque conteneur de case à cocher peut recevoir le focus clavier.
- Lorsque le focus du clavier est positionné sur le conteneur d’une case à cocher, il est possible de cocher et de décocher cette case, en boucle, en appuyant sur la touche Espace.
- Plusieurs cases à cocher d’un même groupe peuvent être cochées simultanément.
Bouton radio
- Si aucun bouton radio n’est sélectionné au moment où le focus clavier arrive dans le module, le focus est positionné au niveau du premier conteneur de bouton radio. Si la navigation se fait dans l’ordre de lecture de la page, ou au niveau du dernier si la navigation se fait dans l’ordre inverse.
- Lorsque le focus clavier est positionné sur un bouton radio, il est possible de sélectionner le bouton radio avec la touche Espace.
- Par défaut, les flèches de navigation sont utilisées pour naviguer dans la liste des boutons radio et pour sélectionner le bouton radio courant. Lorsque la touche Ctrl est pressée en parallèle, seul le focus clavier est déplacé, le bouton radio courant n’est pas sélectionné.
- Parmi tous les boutons radio d’un même groupe, seul l’un d’entre eux peut être sélectionné à un instant donné. Lorsqu’un bouton radio est sélectionné, l’éventuel bouton radio précédemment sélectionné est alors désélectionné.
Input range
- Le focus clavier est positionné sur le curseur lors de l’utilisation du slider et y reste jusqu’à l’utilisation de la touche Tab.
- Lorsque le focus clavier est positionné sur le curseur, il est possible de modifier la valeur du slider en utilisant les touches Image Removed
- La valeur de l’attribut
value
doit être modifié dynamiquement à chaque mise à jour du slider et doit être identique à la valeur du dis slider. - La valeur du slider ne peut être supérieure à la valeur renseignée dans l’attribut
max
. - La valeur du slider ne peut être inférieure à la valeur renseignée dans l’attribut
min
.
Image RemovedRESSOURCES
- WAI-ARIA - Authoring practices
- Personnalisation en CSS de la balise input[range] : How to Style Input Type Range in Chrome, Firefox, and IE | Brenna O'Brien (en anglais)
2.2 Menus déroulants
Définition
Les menus déroulants sont des menus dynamiques dans lesquels seuls les éléments de premier niveau sont affichés par défaut, mais où des panneaux déroulants associés aux éléments de premier niveau peuvent être affichés en cliquant sur ceux du premier niveau.
Comment ça marche?
Pour des fins de compréhension, voici comment le composant est bâti. Le code HTML de base pour un menu déroulant peut, par exemple, être le suivant. Ce code est à adapter au contexte, notamment pour ce qui concerne le contenu des panneaux déroulants.
Image Removed
Sans CSS ni JavaScript, la totalité des éléments du menu (éléments de premier niveau et second niveau) sont affichés.
Les attributs ARIA utilisés ici sur le bouton permettant d’ouvrir le menu afin que celui-ci soit correctement vocalisé au lecteur d’écran sont :
L’attribut aria-haspopup="true" permet de faire vocaliser par le lecteur d’écran qu’il s’agit d’un menu.
L’attribut aria-expanded avec comme valeur true/false, permet de faire vocaliser l’état du menu (ouvert ou fermé).
Le script JavaScript doit gérer les points suivants :
- La gestion de la classe is-expanded sur les éléments de deuxième niveau pour permettre au CSS d’afficher le block.
- La gestion du aria-expanded sur les éléments de premier niveau :
- Lorsqu’un élément de premier niveau est cliqué ou activé par Enter, le panneau associé à l’élément concerné est affiché à l’écran, l’attribut aria-expanded est alors à true. Le focus doit se mettre sur le premier élément du panneau associé.
- Lorsqu’un élément de premier niveau est cliqué à nouveau ou réactivé par Enter , le panneau associé à l’élément concerné est à nouveau masqué, l’attribut aria-expanded est à false, et la classe is-expanded n’est plsu présente. Le focus revient sur l’élément de premier niveau.
- La gestion du clavier :
- Le comportement des flèches haut et bas pour naviguer dans un sous-menu.
- Le comportement des flèches droite et gauche pour naviguer de sous-menu en sous-menu.
- Le comportement de la touche Enter et Escape pour ouvrir ou fermer des éléments de sous-menus.
- Le comportement de la touche Tab.
Image RemovedATTENTION
Veuillez utiliser ce composant-ci : Menu - Exemples pratiques - Boîte à outils de l'expérience Web Si beaucoup d’éléments interactifs sont présents dans les panneaux déroulants (liens, éléments de formulaire, etc.), une bonne pratique d’accessibilité consiste à privilégier l’accordéon.
Image RemovedRESSOURCES
- WAI-ARIA 1.0 Authoring Practices : Menu (en anglais)
- Menu - Exemples pratiques - Boîte à outils de l'expérience Web
- Voir aussi le document Html et CSS : Garantir la compréhension de l’information même lorsque CSS est désactivé
- Voir aussi le document Html et CSS : Structurer le menu de navigation avec des listes
- Voir aussi le document Html et CSS : Ne pas utiliser les propriétés CSS display ou visibility pour masquer un contenu qui ne peut pas être affiché par l’utilisateur
2.3 Accordéons (plier/déplier)
Définition
Les accordéons sont des composants dynamiques qui permettent d’optimiser l’affichage d’un contenu dans un espace réduit grâce à un système de « plier/déplier » appliqué sur un groupe de panneaux.
Ils sont contrôlables par l’utilisateur, le plus souvent à partir d’une action sur un bouton qui se trouve au dessus du contenu de chaque panneau.
Image Removed
Comportements attendus
Dans cet exemple, les panneaux sont masqués par défaut à l’aide de display:none; à l’aide de JavaScript et non en CSS.Sélectionner à la souris ou au clavier une en-tête affiche et masque alternativement le panneau associé (display:none; pour le masquage et display:block; pour l’afficher) . Lorsque l’attribut aria-multiselectable est mis à false, les autres panneaux doivent être cachés ( à l’aide dedisplay:none;) quand une en-tête est sélectionné.Sémantique requise
Le tableau suivant liste les rôles WAI-ARIA requis pour les différents éléments qui composent l’accordéon, ainsi que les attributes WAI-ARIA requis pour chacun d’eux en fonction de leur état ou des options du comportement désiré pour le contrôle.
État/option de l’élément
Élément parent
tablist
aria-multiselectable
Multiple panneaux dépliables
true
Un seul panneau dépliable
false
En-tête
tab
aria-selected
Sélectionné
true
Déselectionné
false
aria-expanded
Panneau associé déplié
true
Panneau associé replié
anneau
tabpanel
aria-hidden
Déplié
false
Replié
true
aria-labelledby
L’id de l’en-tête du panneau associé
Focus sur les éléments
Fonctionnement
Il est nécessaire de changer dynamiquement la valeur des tabindex afin d’obtenir le comportement décrit dans les paragraphes suivants
- Lorsqu’aucun en-tête n’a été sélectionné, tabindex="-1" doit être présent sur toutes les en-têtes, excepté pour le premier qui aura tabindex="0"
- Lorsqu’un en-tête a été sélectionné, son tabindex="0" tandis que celui de tous les autres entêtes devra être tabindex="-1"
Comportement
Lorsque le focus clavier est positionné sur un entête de panneau :
- Si des éléments interactifs (boutons, liens, etc.) sont présents dans l’entête de ce panneau, déplace successivement le focus clavier vers chacun de ces éléments, avant de sortir de l’entête du panneau, dans l’ordre logique de lecture.
- Puis, si le panneau correspondant à l’entête est déplié, déplace le focus vers le premier élément interactif disponible dans le panneau.
- Enfin, si le panneau correspondant à l’entête est replié, ou bien lorsque que le dernier élément interactif disponible dans le panneau a été atteint :
- Si un panneau déplié contenant un élément interactif est disponible à la suite de cet élément, déplace le focus vers le premier élément interactif disponible dans ce panneau.
- Sinon, déplace le focus vers le premier élément interactif disponible en dehors du système d’accordéon.
Dans le cas où aucun entête de panneau n’est sélectionné au moment où l’utilisateur accède au système d’accordéon au clavier, le focus clavier est positionné au niveau du premier entête de panneau du système d’accordéon.
Navigation à l’aide du clavier
Maj + Tab
Même comportement qu’avec la touche Tab, mais cette fois dans l’ordre inverse de lecture.
↑ et →
Lorsque le focus est positionné sur un entête de panneau, déplace le focus clavier vers le précédent entête de panneau du système d’accordéon, et sélectionne cet entête de panneau. Si le focus clavier est positionné au niveau du premier entête de panneau du système d’accordéon au moment où la touche est pressée, le focus clavier est déplacé au niveau du dernier entête de panneau du système d’accordéon, et cet entête de panneau est sélectionné.
↓ et →
Lorsque le focus est positionné sur un entête de panneau, déplace le focus clavier vers l’entête de panneau suivant dans le système d’accordéon, et sélectionne cet entête de panneau. Si le focus clavier est positionné au niveau du dernier entête de panneau du système d’accordéon au moment où la touche est pressée, le focus clavier est déplacé au niveau du premier entête de panneau du système d’accordéon, et cet entête de panneau est sélectionné.
Ctrl + ↑
Lorsque le focus est positionné dans un panneau, déplace le focus clavier vers l’entête associé à ce panneau.
Ctrl + ⇞
Lorsque le focus est positionné dans un panneau, déplace le focus clavier vers le précédent entête de panneau du système d’accordéon, et sélectionne cet entête de panneau. Si le focus clavier est positionné au niveau du premier entête de panneau du système d’accordéon au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du dernier entête de panneau du système d’accordéon, et cet entête de panneau est sélectionné.
Ctrl + ⇟
Lorsque le focus est positionné dans un panneau, déplace le focus clavier vers l’entête de panneau suivant dans le système d’accordéon, et sélectionne cet entête de panneau. Si le focus clavier est positionné au niveau du dernier entête de panneau du système d’accordéon au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du premier entête de panneau du système d’accordéon, et cet entête de panneau est sélectionné.
↖
Lorsque le focus clavier est positionné sur un entête de panneau, déplace le focus clavier vers le premier entête de panneau du système d’accordéon.
Fin
Lorsque le focus clavier est positionné sur un entête de panneau, déplace le focus clavier vers le dernier entête de panneau du système d’accordéon.
Entree et Espace
Lorsque le focus clavier est positionné sur un entête de panneau, déplie/replie alternativement le panneau dépliant associé.
Alt + Suppr
Quand l’utilisateur a la possibilité de supprimer un panneau, et lorsque le focus est positionné dans ce panneau ou sur l’entête de ce panneau, supprime à la fois le panneau et l’entête associé à ce panneau. Si au moins un autre panneau reste présent dans le système d’accordéon suite à la suppression, déplace le focus clavier vers le prochain entête de panneau.
Avant toute suppression, une alerte demandant la confirmation de l’action doit être renvoyée à l’utilisateur.
Image RemovedREMARQUES
Dans l'exemple HTML proposé ici, des titres de niveau N (exemple: h2) sont utilisés pour baliser les entêtes des différents panneaux. Le niveau de ces titres est éventuellement à adapter en fonction du contexte d’intégration de ce type de composant : il est important de veiller à maintenir une hiérarchie des titres logique dans la page. Ainsi, si un h2 ce trouve au dessus des accordéon, chaque entête de panneau devient donc un enfant de ce titre de niveau 2 et devra donc être balisé avec h3.
Image RemovedATTENTION
Veuillez utiliser l'un des composants suivants :
- jQuery Accessible Accordion system, using ARIA (en anglais)
- Accessible jQuery-ui Components Demo : Accordion (en anglais)
Image RemovedRESSOURCES
- Example 35 - Tab Panel: Accordian1 (en anglais)
- Accessible jQuery-ui Components Demo : Accordion (en anglais)
- WAI-ARIA 1.1 Authoring Practices : Accordion (en anglais)
- jQuery Accessible Accordion system, using ARIA (en anglais)
- Voir le document Html et CSS : Ne pas utiliser les propriétés CSS display ou visibility pour masquer un contenu qui ne peut pas être affiché par l’utilisateur
- Utilisation des Wai-aria pour intégrer un accordéon
2.4 Onglets
Définition
Les onglets sont des modules dynamiques qui permettent d’optimiser l’affichage du contenu d’une page dans un espace réduit. Ils se présentent généralement sous la forme d’une liste de liens accolés, qui permettent d’afficher en cliquant du contenu relatif à l’onglet sélectionné. Un seul onglet peut être activé à la fois.
Image Removed
Sémantique requise
Le tableau suivant liste les rôles WAI-ARIA requis pour les différents éléments qui composent le socle de l’accordéon, ainsi que les attributes WAI-ARIA requis pour chacun d’eux en fonction de leur état ou des options du comportement désiré pour le contrôle.
WAI-ARIA
Élément englobant les onglets
tablist
N/A
N/A
N/A
Onglet
tab
aria-selected
Sélectionné
true
Déselectionné
false
Déasactivé
false
aria-disabled
Activé
false (optionnel)
Désactivé
true
aria-controls
N/A
Chaque onglet doit posséder un attribut aria-controls renseigné avec la valeur de l’attribut id du panneau associé.
Panneau
tabpanel
aria-hidden
Affiché
false
Masqué
true
aria-labelledby(optionnel)
L’id de l’en-tête de panneau associé
id
N/A
Chaque panneau doit posséder un attribut idrenseigné avec une valeur unique.
Focus sur les éléments
Il est nécessaire de changer dynamiquement la valeur des tabindex afin d’obtenir le comportement décrit dans les paragraphes suivants
- Lorsque aucune en-tête n’est sélectionnée, tous les en-têtes doivent avoir tabindex="-1", excepté pour le premier qui aura tabindex="0"
- Lorsqu’une en-tête est sélectionné, son tabindex="0" tandis que celui de tous les autres devra être tabindex="-1"
Comportements attendus
Sans JavaScript, la totalité des panneaux est affiché. Les onglets servent donc de liens d’accès direct au contenu du panneau associé.
Sur cette base, les scripts doivent ensuite gérer les points suivants :
Navigation à l’aide du clavier
Tab et Maj + Tab
Lorsque l’utilisateur accède en tabulant sur le groupe d’onglets, le focus est positionné au niveau de l’onglet sélectionné dans le groupe d’onglets. Lorsque le focus est positionné sur un onglet, la tabulation suivante permet à l’utilisateur de quitter le groupe d’onglets.
↑ et ←
Lorsque le focus est positionné sur un onglet, les flèches du clavier déplace le focus vers le précédent onglet activable du groupe tout en sélectionnant cet onglet. Si le focus du clavier est positionné au niveau du premier onglet activable du groupe au moment où la touche est pressée. Alors, le focus clavier est déplacé au niveau du dernier onglet activable du groupe et cet onglet est sélectionné.
↓ et →
Lorsque le focus est positionné sur un onglet, les flèches du clavier déplacent le focus vers l’onglet activable suivant dans le groupe et sélectionne cet onglet. Si le focus est positionné au niveau du dernier onglet activable du groupe au moment où la touche est pressée, le focus du clavier est déplacé au niveau du premier onglet activable du groupe et cet onglet est sélectionné.
Ctrl + ↑
Lorsque le focus est positionné dans un panneau, cette combinaison de touches déplace le focus vers l’onglet associé à ce panneau.
Ctrl + ⇞
Lorsque le focus est positionné dans un panneau, cette combinaison de touches déplace le focus vers le précédent onglet activable du groupe et sélectionne cet onglet. Si le focus est positionné au niveau du premier panneau du groupe au moment où la combinaison de touches est pressée, le focus est alors déplacé au niveau du dernier onglet activable du groupe et cet onglet est sélectionné.
Ctrl + ⇟
Lorsque le focus est positionné dans un panneau, cette combinaison de touches déplace le focus vers l’onglet activable suivant dans le groupe et sélectionne cet onglet. Si le focus est positionné au niveau du dernier panneau du groupe au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du premier onglet activable du groupe et cet onglet est sélectionné.
Alt + Suppr
Quand l’utilisateur a la possibilité de supprimer un onglet et lorsque le focus est positionné dans un panneau, cette combinaison de touche supprime à la fois le panneau et l’onglet associé à ce panneau. Si au moins un autre onglet activable reste présent dans le module suite à la suppression, le focus ira vers le prochain onglet du groupe.
Avant toute suppression, une alerte demandant la confirmation de l’action doit être renvoyée à l’utilisateur.
Image RemovedATTENTION
Veuillez utiliser l'un des composants suivant :
- Interface à onglets - Exemples pratiques - Boîte à outils de l'expérience Web
- Tab Panel with Keyboard Instruction
Image RemovedRESSOURCES
- WAI-ARIA 1.0 Authoring Practices : Tab Panel (en anglais)
- Interface à onglets - Exemples pratiques - Boîte à outils de l'expérience Web
- Voir le document Html et CSS : Renseigner un titre précis sur chaque page
- Voir le document Html et CSS : Ne pas utiliser les propriétés CSS display ou visibility pour masquer un contenu qui ne peut pas être affiché par l’utilisateur
2.5 Carrousels (slideshows)
DÉFINITION
Les carrousels (ou slideshows) sont des modules qui permettent l’affichage de panneaux de contenus défilants dans une zone réduite.
Dans le cadre d’une mise en accessibilité, trois types de carrousels sont principalement à distinguer :
- Les carrousels à défilement manuel.
- Les carrousels avec ouverture de tiroir.
- Les carrousels à défilement automatique.
Ils doivent être agrémentés d’un système de pagination, de flèches de navigation, et/ou encore d’un système de mise en pause et de relance du mouvement dans le cas d’un carrousel à défilement automatique.
COMPORTEMENT SOUHAITÉ:
Pour tous les types de carrousel :
La navigation par point de progression est masquée au lecteur d’écran et non atteignable par la tabulation.
Carrousel avec tiroir :
Carrousel automatique :
Image RemovedATTENTION
Pour les carrousels automatique, le système de mise en pause (ici, le bouton « Lecture/Pause ») doit toujours être placé avant les éléments sur lesquels il agit, dans le DOM, quelle que soit sa position à l’écran.
Image RemovedRESSOURCES
- Voir le document Conception graphique : Utiliser des icônes d’action pour les carrousels
- Voir le document Conception graphique : Contenus animés (carrousel, bannière, contenus défilants, musique)
- Voir le document Interfaces riches et Javascript : Permettre la mise en pause des animations automatiques
- Voir le document Html et CSS : Ne pas utiliser les propriétés CSS display ou visibility pour masquer un contenu qui ne peut pas être affiché par l’utilisateur
2.6 Fenêtres modales (popins)
Définition
Les fenêtres modales (popins) sont des fenêtres qui apparaissent directement à l’intérieur de la fenêtre courante du navigateur, au-dessus de la page web qui les appelle.
Il s’agit de fenêtres modales, c’est-à-dire de fenêtres qui prennent le contrôle de la page courante tant qu’elles sont affichées à l’écran.
Elles sont à opposer aux pop-up et pop-under, qui déclenchent respectivement l’ouverture de nouvelles fenêtres externes, par-dessus et en dessous de la fenêtre courante.
Cette norme classifie les fenêtres modales en deux types
Dialogue:
Elles interrompent la navigation de l’utilisateur et apparaissent dans le but de lui demander de renseigner une information ou de soumettre une réponse.
Alerte:
Elles renvoient une alerte concise ou demandent une confirmation rapide à l’utilisateur et sont adaptées lorsque :
- Le message ne dépasse pas une phrase.
- La ponctuation n’est pas essentielle à la compréhension du message. Les boîtes d’alerte modales sont donc par exemple inadaptées pour annoncer qu’une syntaxe précise du type « JJ/MM/AAAA » est attendue pour un champ de date.
- Le message ne contient pas d’informations que l’utilisateur pourrait avoir besoin de réutiliser, comme un numéro de téléphone.
- Le message ne contient pas d’éléments interactifs, comme un lien vers une ressource.
Exemple HTML d’un dialogue
Image Removed
Exemple HTML d’une alerte
Image Removed
Sémantique requise
Le tableau suivant liste les rôles WAI-ARIA requis pour les différents éléments qui composent le socle de l’accordéon, ainsi que les attributes WAI-ARIA requis pour chacun d’eux en fonction de leur état ou des options du comportement désiré pour le contrôle.
WAI-ARIA
Attribut
Nom de l’attribut
État/option de l’élément
Valeur de l’attribut
Élément englobant le contenu de la fenêtre modale
dialog
aria-hidden
Ouvert
false
Fermé
true
aria-labelledby(optionnel)
Id de l’élément qui fait office d’entête dans la fenêtre modale. Optionnel car ne fenêtre modale pourrait ne pas avoir de titre.
aria-describedby
Id de l’élément qui fait office de description de la fenêtre modale
Comportement attendu
Le contenu des fenêtres modales peut être intégré dans la page, indifféremment et de deux façons :
- Soit le contenu est présent par défaut dans le DOM, mais masqué, avant d’être affiché dans la fenêtre modale sur action de l’utilisateur. Il faut alors veiller à ce que l’ordre de lecture reste cohérent, lorsque les CSS sont désactivées (reportez-vous à « HTML et CSS : Écrire le code HTML en suivant la logique de l’ordre de lecture »).
- Soit le contenu est absent par défaut du DOM, avant d’être chargé dynamiquement dans la fenêtre modale sur action de l’utilisateur. Il faut alors veiller à ce que le contenu soit supprimé à nouveau du DOM lorsque la fenêtre modale se referme.
Lorsqu’une fenêtre modale est affichée à l’écran :
- Le focus doit être placé au niveau du conteneur de la fenêtre modale. Rajouter pour cela un tabindex=”0″sur le conteneur de la fenêtre modale, et y placer dynamiquement le focus en JavaScript.
- L’attribut aria-hidden du conteneur de la fenêtre modale doit être égal à false.
- L’utilisateur ne doit pas pouvoir tabuler sur le reste de la page, à l’arrière de la fenêtre modale. Rajouter pour cela un tabindex="-1" sur tous les éléments tabulables du reste de la page. Il est également possible de créer une loop de focus en JavaScript qui garde le focus dans un élément sélectionné.
Lorsqu’une fenêtre modale est fermée :
Navigation avec le clavier
Tab
Lorsque la popin est affichée, déplace successivement le focus clavier vers chacun des éléments interactifs contenus dans la popin. Si le focus clavier est positionné au niveau du dernier élément interactif contenu dans la popin au moment où la touche est pressée, le focus clavier est déplacé au niveau du premier élément interactif contenu dans la popin.
Maj + Tab
Même comportement qu’avec la touche Tab, mais cette fois dans l’ordre inverse de lecture. Si le focus clavier est positionné au niveau du premier élément interactif contenu dans la popin au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du dernier élément interactif contenu dans la popin.
Esc
Lorsque la popin est affichée, ferme la popin et déplace le focus clavier sur l’élément interactif qui a déclenché l’ouverture de la popin.
Image RemovedREMARQUES
Dans la situation où les conteneurs HTML de la boîte de dialogue modale et celui du reste de la page sont frères dans le code source, c’est-à-dire au même niveau hiérarchique dans l’arbre DOM, appliquer un attribut aria-hidden="true" sur le conteneur du reste de la page, lorsque la boîte de dialogue modale est affichée :
Image Removed
Image RemovedASTUCES
- Ajouter le tabindex="-1" à la balise qui contient tout le contenu visible de la page au moment d’ouvrir la fenêtre modale. Puis le remettre à l’état initial au moment de fermer la fenêtre modale.
- Lorsque la fenêtre est ouverte, placer un écouteur sur le dernier élément interactif contenu dans la popin et déplacer le focus clavier au niveau du premier élément interactif contenu dans la popin lorsque la touche Tab est pressée. Faire de même pour, respectivement, le premier élément interactif de la popin et la combinaison de touches Maj + Tab.
Image RemovedATTENTION
Veuillez vous baser sur les composants suivants :
- Lightbox - Exemples pratiques - Boîte à outils de l'expérience Web (en anglais)
- Alert Dialog (en anglais)
- Modal dialog (en anglais)
- jQuery simple and accessible modal window, using ARIA. (en anglais)
Image RemovedRESSOURCES
Pour plus de resource, veuillez consulter les références suivantes:
- WAI-ARIA 1.1 Authoring Practices : Lightbox (en anglais)
- Lightbox - Exemples pratiques - Boîte à outils de l'expérience Web
- Example - Alert example using a modal ARIA dialog box (en anglais)
- Accessible jQuery-ui Components Demo (en anglais)
- Voir le document Html et CSS : Écrire le code HTML en suivant la logique de l’ordre de lecture
- Voir le document Html et CSS : Ne pas utiliser les propriétés CSS display ou visibility pour masquer un contenu qui ne peut pas être affiché par l’utilisateur
2.7 Boutons "Adfficher plus"
Les boutons « Afficher plus » sont des composants dynamiques qui se présentent sous la forme de bouton permettant l’affichage d’un contenu complémentaire juste avant ce dernier, à chaque fois que le bouton est activé, et tant que du contenu complémentaire reste disponible.
Les boutons« Afficher plus » disparaissent ou se désactivent lorsque la totalité du contenu complémentaire a été affiché dans la page.
COMPORTEMENTS ATTENDUS
- Lorsque le focus clavier est positionné au niveau du bouton, il est possible d’afficher du contenu complémentaire avec les touches Espace et Entrée.
- Lorsque le bouton est activé, le focus clavier est positionné dynamiquement au niveau du premier élément interactif nouvellement apparu.
- Dans le cas où le contenu complémentaire affiché n’est pas interactif, positionner dynamiquement le focus sur le conteneur de celui-ci (en ajoutant l’attribut tabindex=”0″. Après que l’utilisateur se soit déplacé du conteneur, celui-ci doit redevenir non tabulable (enlever l’attribut tabindex).
- Lorsqu’il ne reste plus de contenu complémentaire à afficher, le bouton « Afficher plus » se désactive ou est supprimé du HTML.
2.8 Infobulles (tooltips)
Les infobulles sont des messages qui permettent à l’utilisateur d’obtenir une information complémentaire sur un élément. Elles se présentent sous la forme d’un message qui apparaît au survol et à la prise de focus clavier d’un élément.
Les infobulles sont dites « simulées en ARIA » lorsqu’elles ne sont pas construites sur la base du code HTML standard prévu pour ces éléments par la spécification : l’attribut title
.
SOCLE HTML
Image Removed
RÔLES, ÉTATS ET PROPRIÉTÉS ARIA
role="tooltip"
doit être appliqué sur le conteneur de l’infobulle.- L’élément qui permet l’affichage de l’infobulle doit être rattaché à l’infobulle via l’attribut
aria-describedby
:- Le conteneur de l’infobulle doit posséder un attribut
id
renseigné avec une valeur unique. - L’élément qui permet l’affichage de l’infobulle doit posséder un attribut
aria-describedby
renseigné avec la valeur de l’attributid
du conteneur de l’infobulle.
- Le conteneur de l’infobulle doit posséder un attribut
- L’attribut
aria-hidden
doit être appliqué sur le conteneur de l’infobulle. Sa valeur doit être renseignée dynamiquement en fonction de l’état de l’infobulle :aria-hidden="false"
lorsque l’infobulle est affichée.aria-hidden="true"
lorsque l’infobulle est masquée.
COMPORTEMENTS ATTENDUS
- L’infobulle doit s’afficher lorsque l’élément qui en permet l’affichage :
- Est survolé par la souris.
- Prend le focus clavier.
- L’infobulle doit être masquée lorsque l’élément qui en permet l’affichage :
- N’est plus survolé par la souris.
- Perd le focus clavier.
- Il est également possible de masquer l’infobulle avec la touche Échap.
- Lorsque l’infobulle est masquée, elle doit l’être à l’aide de
aria-hidden="true"
etdisplay: none;
ouvisibility: hidden;
. Ou encore supprimée du code source. - L’état de l’infobulle (aria-hidden, display, etc.) doit être modifiée dynamiquement à chaque mise à jour de son statut.
Image RemovedREMARQUES
L’avantage majeur d’une infobulle simulée en ARIA par rapport à son homologue HTML standard (attribut title
) réside dans le fait que la première est également accessible aux utilisateurs qui naviguent au clavier.
Image RemovedATTENTION
Dans le cas où le l'infobulle est utilisé avec une abréviation, il faut aussi :
- Prévoir que l'infobulle soit caché pour les lecteurs d'écran (aria-hidden="false") en tout temps. Seul l'abréviation sera lu.
- Ajouter l'attribut tabindex="0" pour permettre le focus sur l'élément <abbr />
Image Removed
Image RemovedRESSOURCES
Consultez les resources suivantes pour plus d'information:
- WAI-ARIA 1.0 Authoring Practices - Tooltip widget (en anglais)
2.9 Champ à saisie semi-automatique (autocomplete)
Définition
Les champs à saisie semi-automatique permettent de sélectionner une valeur précise selon le début d’une valeur saisie dans ce champ. Cela permet à l’utilisateur de l’aider à préciser la valeur de ce qu’il veut saisir.
Pour cela, vous devez utiliser la balise HTML5 <datalist> qui est liée au champ de saisie qui aura l’attributlist. (Voir exemple ci-dessous).
Image RemovedHTML5
Image Removed
Image RemovedASTUCES
On peut utiliser un script JavaScript pour préremplir la liste au chargement du formulaire si jamais les valeurs de la liste de suggestions proviennent d’une base de données ou d’une autre source.
Image RemovedRESSOURCES
Correctif « datalist » (saisie automatique) - Exemples pratiques - Boîte à outils de l'expérience WebTable des matières |
---|
- 1.Recommandations génériques interfaces riches et Javascript
- 1.1 Liens ressources
- 1.2 Différencier les boutons des liens
- 1.3 Mettre en place des solutions de remplacement à Javascript
- 1.4 Mettre en place des solutions de remplacement à Flash
- 1.4.1 Pour les médias
- 1.4.2 Pour les animations
- 1.5 Permettre le contrôle des scripts à la fois avec la souris et le clavier
- 1.6 Permettre la mise en pause des animations automatiques et des rafraîchissements automatiques de page
- 2. Cas d'usage
- 2.1 Personnalisation des balises d'actions
- 2.2 Menus déroulants
- 2.3 Accordéons (plier/déplier)
- 2.4 Onglets
- 2.5 Carrousels (slideshows)
- 2.6 Fenêtres modales (popins)
- 2.7 Boutons "Adfficher plus"
- 2.8 Infobulles (tooltips)
- 2.9 Champ à saisie semi-automatique (autocomplete)
Contexte et objectifs
Cette notice regroupe l’ensemble des spécifications à prendre en compte lors du développement des composants riches en Javascript et HTML d’un site ou d’une application web, et ce, quel que soit le périphérique d’affichage ciblé (ordinateur, mobile, etc.).
À qui s’adresse cette notice, comment l’utiliser?
Ce document doit être transmis aux intervenants et/ou prestataires réalisant les spécifications techniques, les gabarits HTML/CSS et les différents développements techniques des interfaces. Il vient en complément aux spécifications techniques d’un projet. Les recommandations peuvent être complétées ou retirées selon les contextes d’utilisation, ce qui peut être notamment réalisé par la maîtrise d’ouvrage.
Les recommandations doivent être prises en compte en phase d’intégration HTML/CSS, et pour certaines d’entre elles, lors de la dynamisation des pages lorsque les gabarits sont affectés à un outil de gestion de contenu (CMS).
Certaines annotations viennent compléter le document, celles-ci sont nécessaires pour la compréhension de chaque recommandation.
Image AddedREMARQUES
Les remarques permettent de compléter les recommandations en apportant des précisions applicables à des situations techniques précises et ponctuelles.Image AddedHTML5
Les encarts HTML5 apportent des éclaircissements aux critères ou des avertissements en tenant compte des évolutions proposées par la nouvelle spécification HTML.Image AddedASTUCES
Les astuces ne sont pas directement liées à l’accessibilité, mais leur prise en compte permet généralement d’améliorer la qualité générale des interfaces ou de faciliter la prise en compte de l’accessibilité sur les étapes suivantes du projet. À l’inverse, les recommandations de ce document, bien que dédiées à l’accessibilité, rejoignent souvent de bonnes pratiques en matière d’ergonomie, d’expérience utilisateur, de performance ou de référencement.Image AddedASTUCES - BONIFICATION
Les encarts HTML5 apportent des éclaircissements aux critères ou des avertissements en tenant compte des évolutions proposées par la nouvelle spécification HTML.Image AddedATTENTION
Les avertissements mettent en avant des points particuliers qu’il est important de respecter ou des pièges à éviter pour garantir une bonne accessibilité.Image AddedCAPTURES D'ÉCRAN
Des exemples provenant d’ICI Radio-Canada, ICI Musique, ICI tou.tv, ou d’autres exemples pertinents sont inclus dans le document.
Image AddedRESSOURCES
Des liens sont inclus pour faciliter l'application des normes : ils mènent soit à des sites externes (lectures, meilleures pratiques, etc.), ou font référence à d'autres sections du présent guide.Mention légale
La société Atalan est l'auteure et la responsable du site web : www.accede-web.com. Les documents disponibles dans Repères sont une version modifiée des normes d’accessibilité de www.accede-web.com.
Si vous avez des questions ou des commentaires, merci de les adresser à accessibilite@radio-canada.ca. Nous y répondrons dès que possible.