Entendiendo el criterio: etiquetas o instrucciones
En este artículo vamos a explicar en qué consiste y como cumplir con el criterio de conformidad saliendo del sitio: 3.3.2 etiquetas o instrucciones de las pautas de accesibilidad para el contenido web, en inglés: Web Content Accessibility Guidelines (WCAG).
Te recomendamos nuestro artículo sobre
saliendo del sitio:
qué son las pautas de accesibilidad para el contenido web
si no sabes lo que son los criterios de conformidad.
Partamos por definir lo que dice el texto normativo:
Se proporcionan etiquetas o instrucciones cuando el contenido requiere la introducción de datos por parte del usuario.
El objetivo del criterio de conformidad es dejar en claro qué tipo de información es esperada en un control de formulario. Esto se hace a través de una etiqueta visible o de ser necesario, ofreciendo instrucciones.
Si bien esto puede resultar especialmente beneficioso para personas con discapacidades cognitivas o del aprendizaje, ayuda a todas las personas a prevenir errores al completar un formulario.
Como cumplir con el criterio
A continuación veremos qué es necesario para cumplir con el criterio, ejemplos de fallos y mejores prácticas.
Etiquetas visibles
Todos los controles de entrada deben tener una etiqueta visible para que el propósito de este sea entendible y para que el usuario sepa qué tipo de información debe ingresar.
<label for="foo">Nombre</label>
<input id="foo" type="text">
Nota: el criterio de conformidad
saliendo del sitio:
3.3.2 etiquetas o instrucciones
solo exige que el control de entrada tenga una etiqueta visible. Si la etiqueta no está asociada programáticamente es un fallo al criterio
saliendo del sitio:
1.3.1 información y relaciones
. Por lo tanto, si bien en el ejemplo anterior la etiqueta está asociada al control de entrada usando el atributo
for y un selector id, no es necesario para cumplir con el criterio.
Excepciones
En algunos casos un ícono puede reemplazar una etiqueta visible. Un ejemplo de esto es el ícono de una lupa que representa una búsqueda. Como el significado de la lupa es universalmente reconocible, una etiqueta visible no es necesaria.
Uso del atributo placeholder
Es muy común encontrarse con controles de entrada que usan un atributo placeholder como su única etiqueta visible. A continuación vemos el formulario de registro del sitio Lider:
El problema aquí es que el atributo deja de ser visible cuando el usuario ingresa algún dato. Esto es considerado un fallo al criterio de conformidad dado que la visibilidad de la etiqueta debe ser persistente. Una vez que los campos del formulario han sido llenados, no es posible determinar el propósito de ellos. Hay ocasiones en que el navegador te permite llenar los campos automáticamente, y no siempre son llenados correctamente, pero si no existe una etiqueta visible no es posible darse cuenta de aquellos errores.
Instrucciones
Es importante ayudar al usuario a evitar que cometa errores al llenar un formulario. Esto se puede hacer a través de instrucciones en caso de ser necesario. Por ejemplo si un campo requiere que la información sea escrita en un formato determinado.
<label for="foo">Fecha de nacimiento (dd-mm-aaaa)</label>
<input id="foo" type="text">
Otro ejemplo es informar al usuario si un campo es requerido u opcional.
<label for="foo">Nombre (requerido)</label>
<input id="foo" type="text">
Instrucciones poco descriptivas
Si no definimos que un campo es requerido, o no especificamos que los datos deben ser ingresados en un formato en particular. Es considerado un fallo al criterio de conformidad?
Partamos por ver qué dice el texto en saliendo del sitio: comprender las WCAG etiquetas o instrucciones (traducido por nosotros del inglés al español):
La intención de este criterio de conformidad es que los autores de contenido proporcionen instrucciones o etiquetas que identifiquen los controles en un formulario para que los usuarios sepan qué información debe ser ingresada . . . Si bien este criterio de conformidad requiere que los controles tengan etiquetas, si estas etiquetas son suficientemente claras y descriptivas es cubierto por saliendo del sitio: 2.4.6: Encabezados y etiquetas
Y en la sección de beneficios dice:
- Proporcionar ejemplos del formato esperado de los datos ayuda a los usuarios con deficiencias cognitivas, de lenguaje y de aprendizaje a ingresar la información correctamente.
- Identificar claramente los campos requeridos evita a quienes sólo usan el teclado enviar un formulario incompleto y tener que navegar nuevamente hasta el formulario para encontrar los campos incompletos y proporcionar la información faltante.
En base a este documento, se podría argumentar que sí es un requerimiento para cumplir con el criterio. Sin embargo, es importante mencionar que el texto de “entendiendo las WCAG” no es normativo, y si bien estos documentos ayudan a dar claridad a la intención y propósito del criterio de conformidad, lo que determina si se cumple o falla un criterio es el texto normativo. Y si queremos ser estrictos, el texto normativo no hace mención a ello. Solo dice que deben existir etiquetas o instrucciones. No dice nada sobre si las etiquetas deben ser suficientemente descriptivas, eso lo cubre el criterio 2.4.6 Encabezados y etiquetas. Por tanto, si un formulario cuenta con campos tanto requeridos como opcionales y estos no son informados al usuario visualmente, se podría argumentar que mientras exista una etiqueta, no es un fallo al criterio 3.3.2 etiquetas o instrucciones, pero sí a 2.4.6 encabezados y etiquetas.
En resumen, todo depende de que tan pedante quieras ser. Técnicamente, no está requerido en el texto normativo, pero el documento informativo da a entender que esa era la intención del criterio.
Al final del día, más que determinar si un caso en particular falla a un criterio u otro, lo importante es crear una buena experiencia al usuario. En el caso de campos requeridos, nuestra recomendación es la siguiente:
- Si un formulario cuenta con campos requeridos y opcionales, no es necesario indicar ambos. Puedes indicar qué campos son requeridos o cuales son opcionales.
- Si utilizas un asterisco para indicar que un campo es requerido. Explica en formato de texto lo que significa el símbolo, y hazlo antes del formulario, no después.
- Cuando los campos son claramente requeridos, no es necesario ofrecer una indicación visual. Por ejemplo, un formulario de login que tiene solo un campo de usuario y contraseña.