Etiquetas de formulario: Requisitos esenciales de accesibilidad para campos de entrada

Los formularios son una parte fundamental de la web. Desde simples formularios de contacto hasta complejos procesos de pago en comercio electrónico, permiten a los usuarios interactuar con sitios web y aplicaciones. Sin embargo, los formularios mal diseñados pueden crear barreras significativas para los usuarios con discapacidades. Un elemento crucial en la creación de formularios accesibles es el uso adecuado de las etiquetas de formulario. Esta guía ofrece una descripción completa de los requisitos de accesibilidad de las etiquetas de formulario, asegurando que sus formularios sean utilizables por todos, independientemente de sus habilidades.

¿Por qué son importantes las etiquetas de formulario accesibles?

Las etiquetas de formulario accesibles son vitales por varias razones:

Usabilidad: Las etiquetas claras y concisas ayudan a todos los usuarios a comprender el propósito de cada campo de entrada, mejorando la usabilidad general.
Accesibilidad: Las etiquetas proporcionan información esencial para los usuarios con discapacidades, especialmente aquellos que dependen de tecnologías de asistencia como los lectores de pantalla. Sin las etiquetas adecuadas, es posible que estos usuarios no puedan completar los formularios.
Cumplimiento de las WCAG: Las Pautas de Accesibilidad para el Contenido Web (WCAG) exigen que todos los controles de formulario tengan etiquetas asociadas. Cumplir con estas pautas garantiza que su sitio web sea accesible y legalmente conforme en muchas jurisdicciones.
SEO: Aunque no es un factor de clasificación directo, los sitios web accesibles tienden a tener una mejor experiencia de usuario, lo que puede mejorar indirectamente el rendimiento del SEO.

Entendiendo los requisitos de las WCAG para las etiquetas de formulario

Las WCAG proporcionan pautas específicas para garantizar la accesibilidad de los formularios. Aquí están los requisitos clave relacionados con las etiquetas de formulario:

Criterio de Éxito 1.1.1 de las WCAG 2.1 Contenido no textual (Nivel A)

Aunque no se trata directamente de las etiquetas, este criterio subraya la importancia de proporcionar alternativas textuales para todo el contenido no textual, incluidos los CAPTCHA y las imágenes utilizadas en los formularios. Un formulario correctamente etiquetado es crucial para proporcionar contexto a estas alternativas.

Criterio de Éxito 1.3.1 de las WCAG 2.1 Información y relaciones (Nivel A)

La información, la estructura y las relaciones transmitidas a través de la presentación deben poder ser determinadas por software o estar disponibles en texto. Esto significa que la relación entre una etiqueta y su campo de entrada correspondiente debe definirse explícitamente en el código HTML.

Criterio de Éxito 2.4.6 de las WCAG 2.1 Encabezados y etiquetas (Nivel AA)

Los encabezados y las etiquetas describen el tema o el propósito. Las etiquetas de formulario proporcionan un contexto descriptivo para los campos de entrada, lo que facilita a los usuarios la comprensión de la estructura del formulario y su correcta cumplimentación.

Criterio de Éxito 3.3.2 de las WCAG 2.1 Etiquetas o instrucciones (Nivel A)

Se proporcionan etiquetas o instrucciones cuando el contenido requiere la introducción de datos por parte del usuario.

Criterio de Éxito 4.1.2 de las WCAG 2.1 Nombre, función, valor (Nivel A)

Para todos los componentes de la interfaz de usuario (incluidos, pero no limitados a, elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función pueden ser determinados por software; los estados, propiedades y valores que pueden ser establecidos por el usuario pueden ser establecidos por software; y la notificación de los cambios en estos elementos está disponible para los agentes de usuario, incluidas las tecnologías de asistencia.

Mejores prácticas para implementar etiquetas de formulario accesibles

A continuación se presentan varias de las mejores prácticas para crear etiquetas de formulario accesibles:

1. Use el elemento <label>

El elemento <label> es la forma principal de asociar una etiqueta de texto con un campo de entrada. Proporciona una conexión semántica y estructural entre la etiqueta y el control. El atributo for del elemento <label> debe coincidir con el atributo id del campo de entrada correspondiente.

Ejemplo:


<label for="name">Nombre:</label>
<input type="text" id="name" name="name">

Ejemplo incorrecto (Evitar):


<span>Nombre:</span>
<input type="text" id="name" name="name">

Usar un elemento span en lugar de una label no crea la asociación programática necesaria, lo que lo hace inaccesible para los lectores de pantalla.

2. Asocie explícitamente las etiquetas con los campos de entrada

Asegúrese de que haya una asociación clara y explícita entre la etiqueta y el campo de entrada utilizando los atributos for e id como se muestra en el ejemplo anterior.

3. Posicione las etiquetas correctamente

La ubicación de las etiquetas puede afectar la usabilidad. Generalmente, las etiquetas deben colocarse:

Encima del campo de entrada: Esta suele ser la opción más accesible y fácil de usar, especialmente para campos de texto y áreas de texto.
A la izquierda del campo de entrada: Común, pero puede ser menos efectivo para usuarios con discapacidades visuales que pueden tener dificultades para escanear la página.
Para botones de opción y casillas de verificación: Las etiquetas deben colocarse a la derecha del control.

Considere las normas culturales al posicionar las etiquetas. En algunos idiomas, las etiquetas se colocan tradicionalmente después del campo de entrada. Adapte su diseño para dar cabida a estas preferencias.

4. Proporcione etiquetas claras y concisas

Las etiquetas deben ser breves, descriptivas y fáciles de entender. Evite la jerga o los términos técnicos que puedan confundir a los usuarios. Por ejemplo, en lugar de "IDUsuario", use "Nombre de usuario" o "Dirección de correo electrónico". Considere la localización. Asegúrese de que sus etiquetas se puedan traducir fácilmente a diferentes idiomas conservando su significado.

5. Use atributos ARIA cuando sea necesario

Los atributos ARIA (Accessible Rich Internet Applications) pueden mejorar la accesibilidad de los elementos del formulario, especialmente en escenarios complejos. Sin embargo, use ARIA con sensatez y solo cuando los elementos y atributos HTML nativos sean insuficientes.

aria-label: Use este atributo para proporcionar una etiqueta cuando una etiqueta visible no sea posible o práctica.
aria-labelledby: Use este atributo para hacer referencia al ID de un elemento existente en la página para que sirva como etiqueta.
aria-describedby: Use este atributo para proporcionar información o instrucciones adicionales para el campo de entrada. Esto es útil para proporcionar contexto o explicar las reglas de validación.

Ejemplo usando aria-label:


<input type="search" aria-label="Buscar en el sitio web">

Ejemplo usando aria-labelledby:


<h2 id="newsletter-title">Suscripción al boletín</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Introduzca su dirección de correo electrónico">

6. Agrupe elementos de formulario relacionados con <fieldset> y <legend>

El elemento <fieldset> agrupa los controles de formulario relacionados, y el elemento <legend> proporciona un título para el fieldset. Esto mejora la estructura del formulario y facilita que los usuarios comprendan las relaciones entre los diferentes campos de entrada.

Ejemplo:


<fieldset>
  <legend>Información de contacto</legend>
  <label for="name">Nombre:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Proporcione mensajes de error claros

Cuando los usuarios cometen errores al rellenar un formulario, proporcione mensajes de error claros e informativos que expliquen qué salió mal y cómo corregir el error. Asocie estos mensajes de error con los campos de entrada correspondientes utilizando atributos ARIA como aria-describedby.

Ejemplo:


<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Por favor, introduzca una dirección de correo electrónico válida.</span>

Asegúrese de que el mensaje de error sea visualmente distintivo (por ejemplo, usando color o iconos) y programáticamente accesible para las tecnologías de asistencia.

8. Use suficiente contraste de color

Asegúrese de que haya suficiente contraste de color entre el texto de la etiqueta y el color de fondo para cumplir con los requisitos de las WCAG. Use una herramienta de análisis de contraste de color para verificar que la relación de contraste cumpla con los requisitos mínimos (4.5:1 para texto normal y 3:1 para texto grande). Esto ayuda a los usuarios con baja visión a leer las etiquetas más fácilmente.

9. Asegure la accesibilidad por teclado

Todos los elementos del formulario deben ser accesibles usando solo el teclado. Los usuarios deben poder navegar por el formulario usando la tecla Tab y interactuar con los controles del formulario usando la barra espaciadora o la tecla Intro. Pruebe sus formularios a fondo con un teclado para garantizar una correcta accesibilidad por teclado.

10. Pruebe con tecnologías de asistencia

La mejor manera de asegurarse de que sus formularios son accesibles es probarlos con tecnologías de asistencia como los lectores de pantalla (por ejemplo, NVDA, JAWS, VoiceOver). Esto le ayudará a identificar cualquier problema de accesibilidad que pueda no ser aparente durante la inspección visual. Involucre a usuarios con discapacidades en su proceso de prueba para obtener comentarios valiosos.

Ejemplos de implementaciones de etiquetas de formulario accesibles

Ejemplo 1: Formulario de contacto simple (Perspectiva internacional)

Considere un formulario de contacto para una audiencia global. Las etiquetas deben ser claras, concisas y fácilmente traducibles.


<form>
  <label for="name">Nombre completo:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Dirección de correo electrónico:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">País:</label>
  <select id="country" name="country">
    <option value="">Seleccione un país</option>
    <option value="us">Estados Unidos</option>
    <option value="ca">Canadá</option>
    <option value="uk">Reino Unido</option>
    <option value="de">Alemania</option>
    <option value="fr">Francia</option>
    <option value="jp">Japón</option>
    <option value="au">Australia</option>
    <!-- Añadir más países -->
  </select><br><br>

  <label for="message">Mensaje:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <input type="submit" value="Enviar">
</form>

Note el uso de "Nombre completo" en lugar de solo "Nombre" para mayor claridad, especialmente para culturas donde los apellidos preceden a los nombres de pila.

Ejemplo 2: Formulario de pago de comercio electrónico

Los formularios de pago de comercio electrónico a menudo requieren información sensible. Las etiquetas e instrucciones claras son cruciales para generar confianza y garantizar la accesibilidad.


<form>
  <fieldset>
    <legend>Dirección de envío</legend>
    <label for="shipping_name">Nombre completo:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

    <label for="shipping_address">Dirección:</label>
    <input type="text" id="shipping_address" name="shipping_address"><br><br>

    <label for="shipping_city">Ciudad:</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">Código postal:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">País:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Seleccione un país</option>
      <option value="us">Estados Unidos</option>
      <option value="ca">Canadá</option>
      <!-- Añadir más países -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Información de pago</legend>
    <label for="card_number">Número de tarjeta de crédito:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Fecha de caducidad (MM/AA):</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="MM/AA"><br><br>

    <label for="cvv">CVV:</label>
    <input type="text" id="cvv" name="cvv"><br><br>
  </fieldset>

  <input type="submit" value="Realizar pedido">
</form>

El uso de fieldsets y legends organiza claramente el formulario en secciones lógicas. El texto del placeholder proporciona una guía adicional, pero recuerde que el texto del placeholder no debe usarse como sustituto de las etiquetas.

Ejemplo 3: Formulario de registro con atributos ARIA

Considere un formulario de registro donde un apodo es opcional. Usando atributos ARIA, podemos proporcionar contexto adicional.


<form>
  <label for="username">Nombre de usuario:</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">Contraseña:</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Apodo (Opcional):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Este apodo se mostrará públicamente.</span><br><br>

  <input type="submit" value="Registrarse">
</form>

El atributo aria-describedby vincula el campo de entrada del apodo a un elemento span que proporciona información adicional sobre cómo se utilizará el apodo.

Herramientas para probar la accesibilidad de formularios

Varias herramientas pueden ayudarle a evaluar la accesibilidad de sus formularios:

Accessibility Insights: Una extensión de navegador que identifica problemas de accesibilidad en las páginas web.
WAVE (Web Accessibility Evaluation Tool): Una herramienta en línea que evalúa las páginas web en busca de errores de accesibilidad.
axe DevTools: Una extensión de navegador que realiza pruebas de accesibilidad automatizadas.
Lectores de pantalla (NVDA, JAWS, VoiceOver): Probar con lectores de pantalla es esencial para identificar problemas de accesibilidad que pueden no ser evidentes a través de pruebas automatizadas.

Conclusión

Las etiquetas de formulario accesibles son esenciales para crear experiencias web inclusivas. Siguiendo las mejores prácticas descritas en esta guía, puede asegurarse de que sus formularios sean utilizables por todos, independientemente de sus habilidades. Priorizar la accesibilidad no solo beneficia a los usuarios con discapacidades, sino que también mejora la usabilidad general de su sitio web para todos los usuarios. Recuerde probar constantemente sus formularios con tecnologías de asistencia e involucrar a usuarios con discapacidades en su proceso de prueba para obtener comentarios valiosos y mejorar continuamente la accesibilidad de su sitio web.

Adoptar la accesibilidad no es solo una cuestión de cumplimiento; se trata de crear una web más inclusiva y equitativa para todos. Al invertir en un diseño de formularios accesible, demuestra un compromiso con la inclusión y crea una mejor experiencia de usuario para todos.