web-dev-qa-db-fra.com

Les dialogues modaux sont-ils conformes aux WCAG?

Les dialogues modaux sont-ils conformes aux WCAG? Je comprends que les fenêtres contextuelles de toute sorte ne répondent pas aux exigences des WCAG, et je suppose que cela inclut les dialogues modaux?

Par exemple, je travaille avec un composant Primefaces, qui a un attribut modal: http://www.primefaces.org/showcase/ui/overlay/dialog/rtl.xhtml

Je voudrais savoir si je peux l'utiliser et savoir qu'il est conforme aux WCAG ou non.

10
Fuzzy Analysis

Il y a une section des WCAG 2.0 dédiée à cela. 2.1 Accessible au clavier.

https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html

Plus précisément:

2.1.1 Clavier : Toutes les fonctionnalités du contenu sont utilisables via une interface de clavier sans nécessiter de minutage spécifique pour les frappes individuelles, sauf lorsque la fonction sous-jacente nécessite une entrée qui dépend du chemin du mouvement de l'utilisateur et pas seulement des points d'extrémité. (Niveau A)

Et

2.1.2 Pas d'interruption clavier : si le focus clavier peut être déplacé vers un composant de la page à l'aide d'une interface clavier, alors le focus peut être éloigné de celui-ci composant utilisant uniquement une interface de clavier et, s'il nécessite plus que des touches fléchées ou tabulées non modifiées ou d'autres méthodes de sortie standard, l'utilisateur est informé de la méthode pour déplacer le focus. (Niveau A)

Vous remarquerez que les deux sont des exigences de niveau A, alors qu'il n'y a aucune mention des boîtes de dialogue modales, vous devez vous assurer que le focus du clavier passe de la page à la boîte de dialogue modale. .

Si vous êtes intéressé à apprendre à créer une boîte de dialogue modale accessible, cet excellent article vous guide étape par étape en HTML avec des balises ARIA supplémentaires et un peu de JavaScript: https: //www.marcozehe. de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs /

Évidemment, vous utilisez une technologie d'interface utilisateur tierce, donc l'implémentation réelle peut être différente et il pourrait y avoir des défis techniques, une personnalisation ou des contraintes, mais cela ne change pas l'essence des exigences de fonctionnement du clavier WCAG 2.1.

11
SteveD

WCAG est là pour évaluer l'accessibilité du contenu ou des services et non pour des composants comme les modaux. Pour comprendre si le modal garde les choses accessibles, vous devriez regarder l'accessibilité du contenu/service.

WCAG est également un ensemble de directives avec différents niveaux de mise en œuvre. Choisissez à quel point vous devez suivre les directives avant de mettre en œuvre quoi que ce soit.

Cependant pour répondre à la question; Oui, il est possible de respecter les directives WCAG lors de l'utilisation de modaux. Mais cela dépend du contenu lui-même, de la façon dont les modaux sont implémentés et, comme mentionné précédemment, de la rigueur avec laquelle vous souhaitez suivre les directives.

Ce que vous pouvez faire par exemple, c'est:
- Toujours afficher un titre au-dessus de chaque modal
- Avoir un bouton de fermeture avec une légende et une liaison de touches (comme SteveD déjà mentionné déplace le focus du clavier sur le modal)
- Évaluez le site et si nécessaire recherchez des alternatives lorsque le modal pose problème.

3
jazZRo

WCAG Fournit des directives sur l'accessibilité à Internet et non les méthodes d'interface elles-mêmes. En ce qui concerne la préoccupation directe - il n'y a pas de référence pour "Dialogues modaux" dans la documentation WCAG2.0.

Le plus proche que j'ai pu trouver était une référence aux fenêtres pop-up et aux nouveaux onglets, mais aucune indication sur la boîte de dialogue modale. Je pense qu'il est prudent de supposer que cela relève de la sécurité des WCAG.

Réf: https://www.w3.org/WAI/WCAG20/quickref/?currentsidebar=%23col_customize#top

2
Himanshu Vaishnav