Entendiendo el criterio etiquetas o instrucciones
En este artículo vamos a explicar en qué consiste y como cumplir con el criterio de conformidad 3.3.2 etiquetas o instrucciones de las pautas de accesibilidad para el contenido web, en inglés: Web Content Accessibility Guidelines (WCAG).
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 en situación de discapacidad cognitiva 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">
for e 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 obligatorio u opcional.
<label for="foo">Nombre (obligatorio)</label>
<input id="foo" type="text">
Instrucciones poco descriptivas
Si no definimos que un campo es obligatorio, 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 comprender las WCAG etiquetas o instrucciones (traducción no oficial del inglés al español):
La intención de este criterio de conformidad es que los autores de contenido ofrezcan 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 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 requisito 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 obligatorios 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 es un requisito 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 obligatorios, nuestra recomendación es la siguiente:
- Si un formulario cuenta con campos obligatorios y opcionales, no es necesario indicar ambos. Puedes indicar qué campos son obligatorios o cuáles son opcionales.
- Si utilizas un asterisco para indicar que un campo es obligatorio. Explica en formato de texto lo que significa el símbolo, y hazlo antes del formulario, no después.
- Cuando los campos son claramente obligatorios, no es necesario ofrecer una indicación visual. Por ejemplo, un formulario de login que tiene solo un campo de usuario y contraseña.