Focus Ring
Anillo de enfoque
Una línea visible o un resaltado alrededor del control que ahora recibe la entrada del teclado.
Presione Tab para seguir el enfoque
Un ejemplo real
Presionar Tab en la caja de pago pone un anillo claro alrededor de cada campo y botón sin mover el diseño de la página.
Partes principales
- 01Etiqueta visible
- 02Interaction target
- 03Current state
- 04Keyboard behavior
Úsalo cuando
Mostrarlo en cada control que pueda recibir enfoque de teclado. Pruébalo en cada fondo y en cada estado.
No lo uses cuando
Nunca elimines el contorno del navegador sin un reemplazo igualmente claro. Un estilo al pasar el cursor no muestra el enfoque del teclado.
Nombre usado en código
:focus-visible outline Antes de lanzarlo
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 Anillo de enfoque (Focus Ring). User context: Presionar Tab en la caja de pago pone un anillo claro alrededor de cada campo y botón sin mover el diseño de la página. Design concept to apply: Anillo de enfoque (Focus Ring). Why it fits: Mostrarlo en cada control que pueda recibir enfoque de teclado. Pruébalo en cada fondo y en cada estado. Do not use it when: Nunca elimines el contorno del navegador sin un reemplazo igualmente claro. Un estilo al pasar el cursor no muestra el enfoque del teclado. 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): Es oficial para esa fuente. Otras plataformas o equipos pueden usar el término de otra manera. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how Anillo de enfoque (Focus Ring) is used now. Definition: Una línea visible o un resaltado alrededor del control que ahora recibe la entrada del teclado. 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.