Fallo común WCAG 2.2
F86Partes de un campo dividido sin nombre para el lector de pantalla
Nombre oficial en el W3C: Fallo del criterio de conformidad 4.1.2 debido a no proporcionar nombres a cada una de las partes de un campo de formulario compuesto, como un número de teléfono de EE. UU.
En pocas palabras
Algunos datos se piden en varias casillas: una fecha en día, mes y año, o un teléfono en dos partes. El fallo ocurre cuando solo hay una etiqueta para todo el grupo, o va unida solo a la primera casilla. Las demás casillas no tienen nombre y el lector de pantalla no sabe decir qué va en cada una.
Por qué es importante
Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) anuncia el nombre de cada campo al llegar a él. Si una casilla no tiene nombre, solo dice «editar», o lee un signo cercano, como una barra o un guion.
Si la etiqueta «Fecha de nacimiento» va unida a la primera casilla, la persona cree que ahí va la fecha entera. Escribe «12/05/1980» en la casilla del día. El formulario da error y no entiende por qué.
Cómo evitarlo
- Dé un nombre a cada casilla: «Día», «Mes», «Año».
- Lo más sencillo es poner una etiqueta
labelvisible para cada una. - Si el diseño no deja sitio, use
aria-labelo unlabeloculto a la vista. El nombre no tiene que verse, pero el lector de pantalla debe poder leerlo. - Agrupe las casillas en un
fieldsetcon unlegendque nombre el dato completo. - Valore pedir el dato en un solo campo, si el formato lo permite.
Cómo comprobarlo
- Localice los datos divididos en varias casillas: fechas, teléfonos, IBAN o códigos de verificación.
- Recorra cada casilla con Tab usando un lector de pantalla y escuche su nombre.
- También puede abrir las herramientas del navegador (F12) y mirar el campo «Nombre» de cada casilla en el panel Accesibilidad.
- Si alguna casilla no tiene nombre, hay fallo.
Ejemplo
Fecha en tres casillas, cada una con su propia etiqueta y el grupo con un título común.
<fieldset>
<legend>Fecha de nacimiento</legend>
<label for="dia">Día</label>
<input id="dia" inputmode="numeric" size="2" autocomplete="bday-day">
<label for="mes">Mes</label>
<input id="mes" inputmode="numeric" size="2" autocomplete="bday-month">
<label for="anio">Año</label>
<input id="anio" inputmode="numeric" size="4" autocomplete="bday-year">
</fieldset>Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica F86 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
General
Descripción
Este documento describe una condición de fallo del criterio de conformidad 4.1.2 Nombre, función y valor en la que algunas o todas las partes de un campo de formulario compuesto carecen de nombre. A menudo existe una etiqueta para el campo compuesto, que está asociada por software a la primera parte o no está asociada por software a ninguna de las partes.
No es necesario que el nombre sea visible, pero sí debe ser visible para las tecnologías de asistencia.
Ejemplos
Un número de teléfono de EE. UU. se compone de un código de área de tres dígitos, un prefijo de tres dígitos y un sufijo de cuatro dígitos. Normalmente se presentan con el formato ([código de área]) [prefijo]-[sufijo], por ejemplo (939) 555-0113. Es frecuente que los formularios que piden un número de teléfono incluyan tres campos separados pero con una sola etiqueta, como en este caso:
Phone number: (<input type="text" size="3">)
<input type="text" size="3">-<input type="text" size="4">El fallo se produce cuando no existe un nombre para cada uno de los tres campos en la API de accesibilidad. Un usuario de tecnología de asistencia los percibirá como tres campos de texto sin definir. Algunas tecnologías de asistencia leen los signos de puntuación como identificación de los campos de texto, lo que puede resultar aún más confuso. En el caso de un número de teléfono de EE. UU. en tres campos, algunas tecnologías de asistencia darían a los campos los nombres "(", ")" y "-", lo que no resulta muy útil.
El mismo número de teléfono de EE. UU. En este caso, la etiqueta no está asociada por software a ninguna de las partes.
Phone number: (<input type="text" size="3">)
<input type="text" size="3">-<input type="text" size="4">Un usuario de tecnología de asistencia los percibirá como tres campos de texto sin definir.
El mismo número de teléfono de EE. UU. En este caso, la etiqueta está asociada por software a la primera parte.
<label for="area">Phone number:</label> (<input id="area" type="text" size="3">)
<input type="text" size="3">-<input type="text" size="4">Un usuario de tecnología de asistencia creerá que el primer campo es para el número de teléfono completo, y percibirá el segundo y el tercer campo como campos de texto sin definir.
Pruebas
Procedimiento
Para cada subcampo del campo de formulario compuesto:
- Comprobar que el campo tiene un nombre determinado por software.
Resultados esperados
- Si la comprobación n.º 1 es falsa para cualquiera de los subcampos, se da la condición de fallo y el contenido falla el criterio de conformidad.
Recursos
- Gnome Accessibility Toolkit documentation (documentación del kit de herramientas de accesibilidad de Gnome)
Cómo lo comprobamos en ADDAW
Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.
Basado en la técnica F86 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.