Mit der Tab-Taste kann man sich auf der Seite bewegen. Dabei sieht man immer, wo man ist. Die Markierung verschwindet nicht.
Der Fokus-Anzeiger zeigt, auf welchem Teil der Seite man mit der Tastatur ist. Am Anfang ist das oft eine dünne, blaue Linie. Manche Designs nehmen diese Linie weg, weil sie sie nicht schön finden. Dann kann man die Seite nicht mehr mit der Tastatur benutzen.
Es gibt eine Regel, die klare Markierungen verlangt. Die Markierung muss mindestens 2 Mal so dick sein wie ein Punkt auf dem Bildschirm. Es muss ein starker Kontrast zum Hintergrund da sein. Ohne diese Markierung weiß man nicht, wohin man springt. Auch wichtig: Der Mauszeiger braucht keine Markierung, die Tastatur schon.
Wir bieten ein erstes Gespräch an. Wir finden heraus, ob das Thema wichtig für Ihre Seite ist. Weitere Infos: Übersicht über Barrierefreiheit, unsere Leistungen, Förderung, Antworten auf häufige Fragen.
Indicador de enfoque visible
Los usuarios que navegan mediante pestañas siempre saben dónde están. No hay contorno que desaparezca.
¿Qué significa "Indicador de enfoque visible"?
El indicador de enfoque es el marcador visible que muestra qué elemento se está seleccionando con el teclado. Por defecto, el navegador suele mostrar un fino contorno azul. Muchos temas eliminan este contorno ("queda feo"), lo que dificulta la navegación con teclado para quienes no usan el ratón.
Obligación y beneficio — WCAG 2.4.11.
WCAG 2.4.11 (Apariencia de Focus) Requiere un indicador de enfoque con una clara distinción visual: al menos 2 píxeles CSS de grosor, con una relación de contraste de 3:1 con respecto a su entorno. Sin un enfoque visible, la navegación con el teclado es prácticamente imposible (no se sabe adónde llevará pulsar Intro). También se requiere: :enfoque-visible Separa el clic del ratón (no se necesita contorno) del enfoque de la tecla Tab (se requiere contorno): una experiencia de usuario limpia.
Cómo lo resolveremos específicamente.
- Estilo de enfoque global: 3 px de color sólido de la marca + 3 px de desplazamiento, radio de borde de 6 px: muy visible, contraste AAA.
:enfoque-visibleen lugar de:enfocarLos clics del ratón no reciben un contorno, pero el foco de la tecla Tab sí.- Nunca global
esquema: ningunosin reemplazo. - A los componentes personalizados (carruseles, menús desplegables personalizados) se les asignan explícitamente sus propios estados de enfoque.
- Verificación: Prueba del teclado: cada elemento interactivo debe ser claramente identificable cuando está seleccionado.
Componentes básicos relacionados de nuestro conjunto de módulos
-
Formularios accesibles
WCAG 3.3.1Etiquetas claras, manejo programático de errores, validación: sin burbujas en el navegador, sin "por favor, rellene".
-
Contrastes AAA, probados por componente
WCAG 1.4.6≥ 7:1 para texto, ≥ 4,5:1 para fuente grande — probado por componente, no por muestra de página.
-
Saltar enlaces y puntos de referencia semánticos
WCAG 2.4.1El teclado salta directamente al contenido principal, sin tener que navegar por el menú de navegación ni el encabezado.
-
Lenguaje sencillo (con soporte de IA)
WCAG 3.1.5Contenido simplificado con solo pulsar un botón: para personas con dificultades de lectura, estudiantes de idiomas y personas con prisa.
¿Necesitas este módulo en concreto?
Consulta inicial de 15 minutos: aclararemos si es relevante para su sitio web.
Más información:
Descripción general de BFSG ·
Descripción general del rendimiento ·
Financiación de BAFA ·
Preguntas frecuentes
