Focus Ring
Anneau de focus
Une ligne visible ou un surlignage autour du contrôle qui reçoit actuellement la saisie au clavier.
Appuyez sur Tab pour suivre le focus
Un vrai exemple
Appuyer sur Tab lors du paiement place un cercle clair autour de chaque champ et bouton sans déplacer la mise en page de la page.
Parties principales
- 01Étiquette visible
- 02Interaction target
- 03Current state
- 04Keyboard behavior
Utilisez-le lorsque
Montrer sur chaque contrôle pouvant recevoir le focus clavier. Tester sur chaque arrière-plan et dans chaque état.
Ne l'utilisez pas lorsque
Ne supprimez jamais le contour du navigateur sans un remplacement tout aussi clair. Un style au survol ne montre pas le focus clavier.
Nom utilisé dans le code
:focus-visible outline Avant d'expédier
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Anneau de focus (Focus Ring). User context: Appuyer sur Tab lors du paiement place un cercle clair autour de chaque champ et bouton sans déplacer la mise en page de la page. Design concept to apply: Anneau de focus (Focus Ring). Why it fits: Montrer sur chaque contrôle pouvant recevoir le focus clavier. Tester sur chaque arrière-plan et dans chaque état. Do not use it when: Ne supprimez jamais le contour du navigateur sans un remplacement tout aussi clair. Un style au survol ne montre pas le focus clavier. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): C'est officiel pour cette source. D'autres plateformes ou équipes peuvent utiliser le terme d'une autre manière. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Vérifiez cette demande
Review how Anneau de focus (Focus Ring) is used now. Definition: Une ligne visible ou un surlignage autour du contrôle qui reçoit actuellement la saisie au clavier. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.