Formularios accesibles
Etiquetas claras, manejo programático de errores, validación: sin burbujas en el navegador, sin "por favor, rellene".
¿Qué significa "formatos accesibles"?
Un formulario accesible se caracteriza por tres propiedades: (1) cada campo tiene un identificador visible asignado mediante programación. ; (2) Los mensajes de error aparecen como texto plano, no como una burbuja del navegador; (3) Los errores están vinculados al campo (aria-descrita por, aria-inválida), para que el lector de pantalla pueda anunciar el campo y el error en una sola frase.
Obligación y beneficio — WCAG 3.3.1.
WCAG 3.3.1 (Identificación de errores) + 3.3.3 (Sugerencia de error) La accesibilidad de nivel A/AA es obligatoria. Los formularios son el punto de conversión más frecuente y, a la vez, el punto donde más a menudo falla la accesibilidad. Las sugerencias emergentes estándar del navegador („Por favor, introduzca su dirección de correo electrónico") no son ni semánticas ni compatibles con lectores de pantalla; deben sustituirse.
Cómo lo resolveremos específicamente.
- Cada campo:
Visibles, no solo marcadores de posición. - Validación nativa con
inválido-Evento interceptado, propio mensaje en línea en<span class="field-error">. aria-descrita porcampo vinculado con intervalo de error,aria-inválido="verdadero""Establece el estado.- Textos de ayuda claros antes de introducir los datos: sin sorpresas ("teléfono con código de área, sin espacios").
- El botón de envío es accesible mediante el teclado; en caso de error, concéntrese en el primer campo no válido.
- En vivo en el plugin DigElite:
Solicitudes SP-Módulo de formulario + JSsite-pages.js.
Componentes básicos relacionados de nuestro conjunto de módulos
-
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.
-
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.
-
Escáner de contraste con auditoría automática
WCAG 1.4.3Se realiza una comprobación continua del contraste en el sistema interno: se informa de cualquier regresión antes de que el equipo editorial se dé cuenta.
-
Jefe de Higiene y Estructura
WCAG 1.3.1Estructura limpia para lectores de pantalla y motores de búsqueda: un encabezado H1 por página, sin saltos.
¿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
