Accessibilité (a) Règles - 2

iFrames

• <iframe> doit inclure un élément de titre à l'intérieur de la balise parent.

• Comme bonne pratique, il est bon de définir le défilement sur "auto" ou "oui" dans le champ <iframe> paramètres de balise. Cela permet aux personnes malvoyantes de pouvoir faire défiler le contenu dans la zone <iframe> qu'ils ne pourraient peut-être pas voir autrement.

Ordre de mise au point

• L'ordre de focus par défaut doit être logique, intuitif et correspondre à l'ordre visuel d'une page.

Tabindex

• Un élément qui est normalement focalisable mais qui est dans un état inactif (par exemple, une zone de saisie ou un bouton désactivé) doit recevoir un tabindex négatif (tabindex="-1").

• Devrait rajouter le focus à l'élément lorsqu'il est actif ou nécessaire (peut utiliser JS ou TS).

• Devrait éviter les tabindex positifs. Donner le focus à des éléments non interactifs et perturber l’ordre normal de focus peut dérouter et frustrer les utilisateurs. Les circonstances justifient rarement l'ajout d'un tabindex positif, tel que tabindex=1 à un élément non focalisable.

Passer les liens

• Un lien de saut doit être inclus pour aider les utilisateurs à contourner le menu de navigation.

• Passer le lien doit inclure le contexte sur l'objectif du lien (par exemple, "Passer au contenu principal") et peut utiliser des propriétés ARIA supplémentaires comme aria-labelledby, aria-label.

• Le lien Ignorer peut être visible ou masqué visuellement (en fonction de la conception) jusqu'à ce qu'un utilisateur y accède.

Indicateur de mise au point

• Assurez-vous que l'indicateur de mise au point n'est pas caché sous d'autres composants.

Style par défaut du navigateur

• Ne doit pas remplacer le style de focus du navigateur par défaut (par exemple, « contour : 0 » ou « contour : aucun »).

• Les styles de mise au point personnalisés sont autorisés.

Javascript

Événements déclencheurs

• Si un événement de clic (par exemple onClick()) est appliqué à des éléments non sémantiques (par exemple <div>), un événement keydown/keyup doit être ajouté pour détecter l'appui sur la touche entrée ou espace.

Titres de pages

• Chaque page doit avoir un titre. Il est acceptable d'utiliser la propriété document.title ou un package tiers à cette fin

Contenu dynamique

Possible misuse	Correct use
Render large chunks of non-semantic HTML	Render smaller pieces of semantic HTML
Not allowing time for dynamic content to be recognized by assistive technology	Using a setTimeout() time delay to allow users to hear the full message
Applying style attributes for onFocus() dynamically	Use :focus for the related elements in your CSS stylesheet
Applying inline styles may cause user stylesheets to not be read properly	Keep your styles in CSS files to keep the consistency of the theme
Creating very large JavaScript files that slow down overall site performance	Use less JavaScript; prefer CSS for animations or sticky navigation for better performance

Gestion du focus au niveau des composants

• Lorsque l'utilisateur ouvre un modal, il doit pouvoir naviguer entre les éléments exploitables qu'il contient (par exemple, les boutons d'annulation et de soumission) à l'aide de la touche Tab. Cependant, le focus doit rester confiné au modal, empêchant l'utilisateur d'accéder à des éléments extérieurs à moins qu'il ne ferme explicitement le modal. Cela garantit que le focus est piégé dans le modal.

Gestion du focus au niveau de la page

• La concentration doit également être maintenue lorsqu'un utilisateur navigue de page en page.

• Chaque fois qu'un utilisateur clique sur un lien pour accéder à une autre page de l'application, le focus est soit conservé au même endroit, soit potentiellement placé complètement ailleurs.

• Voici les emplacements de focus suggérés lorsque l'utilisateur navigue d'une page à l'autre.

• Placez le focus sur le conteneur principal avec une annonce aria-live.

• Remettez le focus sur un lien pour passer au contenu principal.

• Déplacez le focus sur l'en-tête de niveau supérieur de la nouvelle page.

Gestion de l'état au niveau des composants

• L'état du composant doit être géré à l'aide des attributs ARIA (par exemple, utilisez un attribut aria-expanded pour indiquer à l'utilisateur si un menu déroulant ou une liste est développé ou réduit.).

• Il est important d'être sélectif lors de l'application des attributs ARIA. Réfléchissez au flux d'utilisateurs pour comprendre quelles informations critiques doivent être transmises à l'utilisateur.

Gestion de l'état au niveau de la page

• Si du contenu est ajouté ou mis à jour dynamiquement sur la page (par exemple, un message d'alerte ou un changement de texte), il doit être annoncé à l'utilisateur.

• Mieux vaut utiliser

  • React : réagir-aria-live ou réagir-a11y-annonceur
  • Angulaire : LiveAnnouncer
  • Vue : vue-a11y-utils

(continuer...)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!