Cómo hacer formularios accesibles

Los formularios son elementos fundamentales en muchos sitios web, ya que permiten a los usuarios enviar información y realizar acciones. Para garantizar formularios accesibles, es importante seguir ciertas pautas y buenas prácticas.

6. Cómo hacer formularios accesibles

A continuación, se presentan algunas técnicas HTML con ejemplos que nos ayudarán a crear formularios accesibles:

6.1. Etiquetas y atributos

Utiliza etiquetas <label> para cada campo de entrada y asocia cada etiqueta con su respectivo campo utilizando el atributo for o anidando el campo dentro de la etiqueta <label>. Ejemplo:

<form>
    <!-- Etiqueta asociada utilizando el atributo 'for' -->
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required>

    <!-- Etiqueta anidada dentro del elemento 'label' -->
    <label>
        Apellido:
        <input type="text" id="apellido" name="apellido" required>
    </label>
    <input type="submit" value="Enviar">
</form>

También es recomendable utilizar el atributo aria-label para proporcionar etiquetas accesibles en caso de que las etiquetas visibles no sean suficientemente descriptivas. Ejemplo:

<button aria-label="Cerrar ventana" onclick="cerrarVentana()">X</button>

En este ejemplo, hemos creado un botón con una «X» que representa un botón de cerrar ventana. Sin embargo, como no se proporciona un nombre entendible de la acción, hemos utilizado el atributo aria-label para proporcionar una etiqueta accesible para el botón.

Cuando un lector de pantalla o una herramienta de asistencia encuentre este botón, leerá el contenido del atributo aria-label, que en este caso es «Cerrar ventana». Esto permite a los usuarios de asistencia comprender el propósito y la función del botón, incluso si no pueden ver la «X» visible.

Es importante utilizar aria-label con moderación y solo cuando sea necesario para mejorar la accesibilidad de la interfaz para usuarios con discapacidades visuales o cognitivas.

6.2. Agrupación de campos

Utiliza etiquetas <fieldset> y <legend> para agrupar campos relacionados y proporcionar una estructura clara. Esto también es útil para usuarios de lectores de pantalla, ya que les permite navegar y comprender el formulario de manera más eficiente. Ejemplo:

<form>
  <fieldset>
    <legend>Información Personal</legend>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" required>

    <label for="email">Email:</label>
    <input type="email" id="email" required>
  </fieldset>

  <fieldset>
    <legend>Preferencias</legend>
    <label>
      <input type="radio" name="preferencia" value="opcion1" required>
      Opción 1
    </label>

    <label>
      <input type="radio" name="preferencia" value="opcion2" required>
      Opción 2
    </label>

    <label>
      <input type="checkbox" name="suscripcion" value="si">
      Suscribirse a nuestro boletín
    </label>
  </fieldset>
  <button type="submit">Enviar</button>
</form>

En este ejemplo, hemos dividido el formulario en dos grupos de campos relacionados utilizando la etiqueta <fieldset>. Cada <fieldset> contiene un <legend> que describe el grupo de campos, proporcionando una estructura clara para el formulario.

El primer <fieldset> agrupa los campos de «Información Personal», que incluye los campos de «Nombre» y «Email». El segundo <fieldset> agrupa los campos de «Preferencias», que incluye dos opciones de radio y una casilla de verificación.

Esto es útil para los usuarios de lectores de pantalla, ya que les permite navegar entre los grupos de campos de manera más eficiente y comprender cómo están organizados los campos en el formulario.

Además, hemos agregado el atributo required a algunos campos para indicar que son obligatorios. Esto asegura que los usuarios no puedan enviar el formulario sin completar estos campos requeridos.

Ejemplo en CodePen

0

6.3. Etiquetas para botones

Asegúrate de que los botones tengan etiquetas descriptivas y significativas. Evita utilizar simplemente «Enviar» o «Enviar formulario» como texto para el botón de envío, en su lugar, utiliza algo más descriptivo, como «Enviar consulta» o «Registrarse».

 <button type="submit" aria-label="Enviar consulta">Enviar</button>

6.4. Accesibilidad del teclado

Asegúrate de que los campos de entrada y los botones sean totalmente navegables y operables mediante el teclado. Esto es esencial para usuarios que no pueden utilizar un ratón. Ejemplo:

<form>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" required>

    <label for="email">Email:</label>
    <input type="email" id="email" required>

    <label for="consulta">Consulta:</label>
    <textarea id="consulta" required></textarea>

    <button type="submit" aria-label="Enviar consulta">Enviar</button>
    <!-- El botón de envío tiene una etiqueta descriptiva "Enviar consulta" utilizando el atributo aria-label -->
</form>

En este ejemplo, hemos agregado un formulario con campos de entrada de texto y un botón de envío.

Para asegurarnos de que los campos de entrada y los botones sean navegables y operables mediante el teclado, hemos utilizado etiquetas <label> para asociar cada campo de entrada con su respectiva etiqueta. Esto permite que los usuarios puedan seleccionar los campos de entrada utilizando la tecla «Tab» y navegar entre ellos utilizando las teclas de flecha.

También hemos agregado el atributo aria-label al botón de envío para proporcionar una etiqueta descriptiva «Enviar consulta». Esto asegura que los usuarios puedan entender la función del botón incluso cuando están navegando y operando el formulario mediante el teclado.

Es importante tener en cuenta la accesibilidad mediante teclado para garantizar que todos los usuarios, incluidos aquellos que no pueden utilizar un ratón, puedan interactuar con el formulario sin problemas. Esto mejora significativamente la experiencia del usuario y hace que el formulario sea más inclusivo para todas las personas.

6.5. Etiqueta de campo requerido

Utiliza el atributo required para indicar que ciertos campos son obligatorios y proporciona una etiqueta o texto indicativo para estos campos. Ejemplo:

<form>
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" required>
  <span class="required-label">(Campo obligatorio)</span>

  <label for="email">Email:</label>
  <input type="email" id="email" required>
  <span class="required-label">(Campo obligatorio)</span>

  <button type="submit">Enviar</button>
</form>

6.6. Contraste de color, tamaño y formato

Utiliza colores y contrastes adecuados para que los campos y etiquetas sean fácilmente legibles para todos los usuarios, incluyendo aquellos con discapacidad visual. Asegúrate de que los campos de entrada tengan un tamaño adecuado y un formato claro. Puedes poner ejemplos para ayudar a los usuarios a completar el formulario correctamente.

6.7. Orden de navegación

Define un orden de navegación lógico para los campos de entrada, de modo que los usuarios puedan avanzar de manera coherente y predecible. En caso de necesitarlo, también se puede utilizar el atributo tabindex para establecer el orden de navegación. Ejemplo:

HTML:

<form>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" tabindex="1" required>

    <label for="apellido">Apellido:</label>
    <input type="text" id="apellido" tabindex="2" required>

    <label for="email">Email:</label>
    <input type="email" id="email" tabindex="3" required>

    <label for="telefono">Teléfono:</label>
    <input type="tel" id="telefono" tabindex="4">

    <label for="direccion">Dirección:</label>
    <input type="text" id="direccion" tabindex="5">

    <label for="ciudad">Ciudad:</label>
    <input type="text" id="ciudad" tabindex="6">

    <label for="pais">País:</label>
    <input type="text" id="pais" tabindex="7">

    <button type="submit" tabindex="8">Enviar</button>
</form>

En este ejemplo, hemos utilizado el atributo tabindex para establecer el orden de navegación. Cada campo de entrada tiene un valor de tabindex que indica el orden en el que se puede acceder a ellos mediante la tecla Tab. El valor más bajo tiene el enfoque primero, y el valor más alto es el último.

Hemos comenzado con el campo de nombre, seguido del apellido, el email y otros campos de contacto. Luego, hemos continuado con los campos de dirección y ciudad, y finalmente el campo de país y el botón de envío.

Este orden de navegación lógico facilita a los usuarios avanzar de un campo a otro de manera coherente y predecible, mejorando la experiencia de usuario en el formulario.

Ejemplo en CodePen

0

Al seguir estas técnicas, podrás crear formularios más accesibles, lo que mejorará la experiencia de todos los usuarios, incluyendo aquellos con discapacidades. La accesibilidad web es fundamental para garantizar que todos los usuarios puedan interactuar de manera efectiva con los formularios y el contenido en general. Te recomendamos realizar pruebas con herramientas de accesibilidad y utiliza lectores de pantalla para verificar que el formulario sea totalmente accesible.