Las novedades de 2.2: apariencia del foco y tamaño del objetivo
Aplique los criterios nuevos de la versión más reciente.
Las novedades de 2.2: apariencia del foco y tamaño del objetivo es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
What 2.2 Brought
WCAG 2.2 added nine new success criteria in 2023. Two of the most practical for everyday UI are Focus Appearance and Target Size.
Focus Not Obscured
New rule 2.4.11 (Focus Not Obscured) at AA says the focused element must not be fully hidden behind sticky headers or cookie bars.
Why Hidden Focus Hurts
If a sticky banner covers the focused control, keyboard users lose track of where they are. They must see the item they just tabbed to.
Focus Appearance at AAA
Criterion 2.4.13 (Focus Appearance) is AAA. It specifies a minimum indicator area and 3:1 contrast so the focus ring is unmistakable.
Target Size (Minimum)
The AA rule 2.5.8 (Target Size Minimum) asks that tap targets be at least 24 by 24 CSS pixels, or have enough spacing around them.
Why 24 Pixels
Small targets are hard for people with tremors or large fingers. A 24px floor cuts mis-taps without forcing a chunky design everywhere.
The Spacing Exception
A target under 24px can still pass if a 24px circle around its center does not overlap a neighbor. Spacing buys back the size.
Sizing a Target in CSS
Give small buttons a real minimum size so they comfortably clear the 24px floor.
button {
min-width: 24px;
min-height: 24px;
}Inline Links Are Exempt
Links inside a sentence are exempt from 2.5.8, since shrinking text just to enlarge them would harm the reading experience.
Consistent Help: 3.2.6
Another 2.2 add, 3.2.6 (Consistent Help) at A, keeps help links and contact info in the same relative spot across pages.
Redundant Entry: 3.3.7
Criterion 3.3.7 (Redundant Entry) at A says do not make users re-type info they already gave, unless it is essential like a password.
Quick Check
Recall the minimum touch target size from WCAG 2.2.
Recap: The 2.2 Additions
2.2 added focus and target rules: keep focus visible, make targets 24px or well spaced, and stop redundant entry. Next: dragging and authentication. 🎯
Preguntas frecuentes
¿La lección «Las novedades de 2.2: apariencia del foco y tamaño del objetivo» es gratis?
Sí — el texto completo de «Las novedades de 2.2: apariencia del foco y tamaño del objetivo» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Las novedades de 2.2: apariencia del foco y tamaño del objetivo»?
Aplique los criterios nuevos de la versión más reciente. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Las novedades de 2.2: apariencia del foco y tamaño del objetivo»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- A, AA, AAA: elegir el nivel adecuado
- Las novedades de 2.2: apariencia del foco y tamaño del objetivo
- Movimientos de arrastre y autenticación accesible
- Redactar una declaración de conformidad defendible