Infiltration meilleures pratiques

Ce guide résume les meilleures pratiques pour les infractions accessibles, en dessinez à partir de principaux experts en accessibilité.

Comprendre les info-bulleurs

Les info-bulleurs offrent de brèves conseils de texte pour les éléments d'interface utilisateur, apparaissant sur le plan ou la mise au point. Une définition concise: une superposition non modale fournissant un texte supplémentaire et descriptif sur un contrôle de l'interface utilisateur. Surtout, les info-bulles accessibles contiennent uniquement du texte descriptif et aucun éléments interactifs. Si l'interactivité est nécessaire, utilisez plutôt une boîte de dialogue.

Deux types d'infiltration

Les info-bulleurs servent deux objectifs principaux:

1. Étiquetage de l'icône: Pour les brèves étiquettes (un ou deux mots), utilisez l'attribut aria-labelledby. Pour un contexte supplémentaire (par exemple, un décompte de notification), fournissez une liste d'identification séparée dans l'espace.

   <button aria-labelledby="notification-count notification-label">
       <span id="notification-count">3</span>
       <span id="notification-label">Notifications</span>
   </button>
   <div role="tooltip" id="tooltip-label">Notifications</div>

2. Description contextuelle: Pour les descriptions plus longues, utilisez aria-describedby. L'icône elle-même a besoin d'un nom accessible, idéalement inclus comme texte caché dans l'élément.

   <button aria-describedby="tooltip-description">
       <span style="display:none;">Notifications</span>
       <span aria-hidden="true">?</span>
   </button>
   <div role="tooltip" id="tooltip-description">View and manage notification settings</div>

Do et ne pas faire les choses essentielles

faire:

• utiliser aria-labelledby ou aria-describedby de manière appropriée.
• Utilisez le role="tooltip" même si le support actuel du lecteur d'écran est limité; Le soutien futur peut s'améliorer.
• Ouvert sur MouseOver / Focus, Fermez sur Mouseout / Blur.
• Empêcher le licenciement info-bulle lors de la survol de son contenu.
• Activer la fermeture du clavier via la touche d'échappement (WCAG 1.4.13).

ne pas:

• Utilisez l'attribut title (il a des problèmes d'accessibilité importants).
• Utiliser aria-haspopup avec role="tooltip" (les info-bulleurs sont non interactifs).
• Placer le contenu essentiel dans les info-bulleurs; Les lecteurs d'écran peuvent ignorer les attributs ARIA associés.

Limitations et alternatives

Les info La meilleure solution consiste souvent à intégrer l'étiquette ou la description directement dans la conception. Pour un contenu étendu (y compris les éléments interactifs), envisagez un toggletip ou un élément

. Les toggletips, souvent indiqués par une icône "i", révèlent des informations dans une région en direct en utilisant le <dialog></dialog>. role="status"

<button aria-controls="toggletip-content">
    <span aria-hidden="true">ⓘ</span>
</button>
<div id="toggletip-content" role="status" aria-live="assertive" style="display:none;">This clarifies whatever needs clarifying</div>

Pour en savoir plus sur les toggletips, reportez-vous aux ressources ci-dessous.

lecture plus approfondie

clarifier la relation entre les popovers et les dialogues (Zell Liew)
Info-bullets et toggletips (composants inclusifs)
Infiltrations au temps de WCAG 2.1 (Sarah Higley)
Courte note sur Aria-LABEL, ARIA-LABELLEDBY et ARIA-DESCRIEDBY (Léonie Watson)
Certains avec l'élément de dialogue HTML (Chris Coyier)

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!