Acccesibilidad web: ¿Cómo hacer formularios accesibles?

Hace unos días hablé sobre consejos para llevar a cabo la accesibilidad web en WordPress, y comenté que había que hacer los formularios accesibles.

El tema de los formularios es muy amplio, por eso he decidido hacer una entrada dedicada a ello.

formularios accesibles

Para hacer formularios accesibles hay que saber etiquetar correctamente los controles del formulario. Para ello, hay que respetar la semántica, que es lo que va a permitir que los campos sean accesibles.

Campos de formulario

Cada campo de formulario está asociado a un control, que determinará qué tipo de campo es.

Para establecer la relación entre la etiqueta y el control del formulario, tal y como indica la técnica H44, hay que asociarla con el atributo forcuyo valor debe ser igual al id del control del formulario. Sólo una etiqueta puede estar asociado a cada elemento de forma única, el id debe ser único en la página.

Campos de tipo Texto:

<label for="name" > Nombre (obligatorio) </label>
<input type="text" name="nombre" id="name"

El elemento label debe usarse con los elementos <textarea> <select> y los inputs de tipo "text", "checkbox", "file" y "password."

El elemento label no debe usarse con los input de tipo imagen, porque estos se etiquetan con el atributo alt, como indica la técnica H36.

Tampoco debe usarse en los input de tipo "submit" o "reset", los cuales se etiquetan con el atributo value.

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

Tampoco se usa con el elemento "button", donde ya se usa el contenido como etiqueta.

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

Tipo textarea: Es la caja que aparece cuando vamos a envíar un formulario y escribimos nuestra consulta o dudas al respecto.

<label for="address">Pon tu dirección:</label><br />
<textarea id="address" name="addresstext"></textarea>

Campos con opciones: Para establecer campos donde se den opciones a elegir, a la hora de hacerlos accesibles es necesario contar con dos etiquetas, para que los campos sean reconocidos por los dispositivos de apoyo, como el lector de pantallas. Estas etiquetas son: <fieldset></fieldset>, que nos servirá para agrupar los elementos dentro del campo. Y usar la etiqueta <legend></legend> para poner un título al campo.

Para trabajar los campos con opciones existen dos tipos: de tipo checkbox, y de tipo radio.

Tipo checkbox: Estos campos permiten seleccionar más de una opción a la hora de elegir.

<fieldset>
<legend> Selecciona el tipo de envío </legend>
<p><label> <input type="checkbox" name="deliverytype" value="urgente" checked > Urgente </label></p>
<p><label> <input type="checkbox" name="deliverytype" value="acuse" > Acuse </label></p>
<p><label> <input type="checkbox" name="deliverytype" value="contrareembolso" > Contrareembolso </label></p>
</fieldset>

Y el otro tipo de campo de opciones es el de tipo radio. Se usa igual que el del tipo checkbox, pero hay que que especificar que es de tipo radio. Este tipo de campos sólo permite marcar una sola opción a la hora de elegir.

<fieldset>
<legend> Selecciona una prioridad </legend>
<p><label> <input type="radio" name="priority" value="baja" checked > Baja </label></p>
<p><label> <input type="radio" name="priority" value="media" > Media </label></p>
<p><label> <input type="radio" name="priority" value="alta" > Alta </label></p>
</fieldset>

El uso de estas etiquetas viene especificada en la técnica H71 de las WCAG 2.0.

Campos de selección: Asociar la etiqueta <label></label> para el título del grupo y el campo (select) para agrupar las opciones, y (option) para poner cada uno de los valores a seleccionar.

<label for="favteam">Elige tu equipo favorito:</label>
<select id="favteam" name="select">
<option value="1">Real Madrid CF</option>
<option value="2">FC Barcelona</option>
<option value="3">Atlético de Madrid</option>
<option value="4">Valencia CF</option>
<option value="5">Sevilla FC</option>
<option value="6">R. Betis Balompie</option>
<option value="7">Málaga CF</option>
<option value="8">RC Deportivo de La Coruña</option>
<option value="9">RCD Espanyol</option>
<option value="10">Villareal CF</option>
</select>

En la técnica H89, se especifica que hay que usar el atributotitle que sirva como ayuda a la hora de rellenar el formulario.

<label for="direccion">Dirección</label>
<input id="direccion" 
title="Address example: 101 Collins St, Melbourne, Australia" name="direccion" size="30" type="text" value="" />

En la técnica H90 se especifica que hay que indicar los controles de formulario que es obligatorio rellenar y para una buena presentación, en los campos que sean obligatorios, es preferible poner un texto antes del campo, en vez del asterisco.

Formulario con texto adyacente

Hablando de campos obligatorios, la técnica ARIA2, establece que los campos obligatorios hay que identificarlos con la propiedad aria-required.

   <label for="fname">First name: </label>
    <input type="text" id="fname" aria-required="true" />
    [required]

Otra técnica que se puede usar y es muy importante es la técnica H85, que establece la importancia del elemento optgroup, que permite agrupar las diferentes opciones (options) dentro de un campo (select)

<label for="food">¿Cuál es tu comida favorita?</label>
<select id="food" name="food">
<optgroup label="Frutas">
<option value="1">Manzanas</option>
<option value="3">Plátanos</option>
<option value="4">Peras</option>
<option value="5">Naranjas</option>
</optgroup>
<optgroup label="Verduras">
<option value="2">Zanahorias</option>
<option value="6">Pepinos</option>
<option value="7">Lechuga</option>
</optgroup>
<optgroup label="Productos de panadería y confitería">
<option value="8">Tarta de manzana</option>
<option value="9">Pastel de chocolate</option>
<option value="10">Merengue</option>
</optgroup>
</select>

Otra técnica a tener en cuenta es la G205, que establece que no se debe poner un formulario basado en el color, ya que puede dar problemas de accesibilidad a muchos usuarios, principalmente a personas que tengan problemas de ceguera al color.

Por otro lado, en la técnica G89, se explica que para evitar errores, hay que indicar a los usuarios qué tipo de formato deben aplicar. Por ejemplo, en un campo de tipo fecha:

<label for="date">Fecha (dd-mm-yyyy)</label>
<input type="text" name="date" id="date" />

Cuando en algunos casos no se pueda usar el elemento label, las WCAG 2.0 permiten utilizar el atributo title para etiquetar los controles del formulario e identificar su propósito. Este es el caso de los campos en los que hay que introducir datos por partes, como una fecha o un número de cuenta, tal y como indica la técnica H65.

<fieldset>
<legend>Fecha de nacimiento(dd/mm/aaaa):</legend>
<input type="text" id="dia" name="dia"
title="Día (dos dígitos)"/> /
<input type="text" id="mes" name="mes"
title="Mes (dos dígitos)"/> /
<input type="text" id="año" name="año"
title="Año (cuatro dígitos)"/>
</fieldset>

En la técnica G5, se especifica que no hay que poner límite de tiempo a los usuarios para rellenar los formularios. Y en el caso de que exista ese límite, poner un mecanismo para los usuarios puedan ampliar el tiempo, como establece las técnica G133.

También en la técnica G162, se indica cómo deben ser colocadas las etiquetas de los campos. Se indica que se deben colocar encima del campo o a la izquierda del campo, con los elementos textarea y select y con los input de tipo: "text","checkbox", "radio", "file" y "password".

En la técnica G167, se especifica la utilización de un botón al lado del campo del formulario para definir su finalidad, como es el caso del cuadro de búsqueda. En este caso, este campo identifica una región de una página, landmarks roles (o puntos de referencia), por lo que hay que usar el rol ARIA correspondiente para que sea detectado por los dispositivos de apoyo.

<div role="search">
<label for="busqueda">
<input id="busqueda" type="text"></label>
<button type="submit">Buscar</button>
</div>

Es muy importante tener en cuenta los Roles ARIA.

En la técnica H84 especifica que cuando tenemos que elegir entre varias opciones para navegar a una página diferente, hay que poner un botón para que el usuario lo elija libremente.

<label for="idioma">Selecciona un idioma</label>
<select name="idioma" id="idioma">
<option value="1">Español</option>
<option value="2"> Italiano</option>
<option value="12">Inglés</option>
</select>
<input type="button" name="submit" value="Cambiar de idioma">

Por todas estas razones, es importante tener en cuenta la accesibilidad de los formularios, para facilitar la vida a muchas personas.

Pero también existen otras opciones para aquellas personas que no se atrevan a usar código, lo pueden hacer mediante un plugin. Normalmente en WordPress, para establecer un formulario de contacto usamos el plugin Contact Form 7, pero lamentablemente los campos no son accesibles por defecto.

Para solucionar este problema, tenemos que instalar el plugin Contact Form 7 Accessible Defaults. Este plugin sí tiene los campos accesibles por defecto.

 

Entradas relacionadas:

Si quieres tener más información acerca de los formularios puedes leer la entrada “Usabilidad web: Cómo hacer formularios usables?”

Y si quieres aprender más sobre ellos, lee la entrada Mensajes de error en los formularios”. Otra entrada interesante para leer es “Cómo hacer un buen uso del marcador de posición en los formularios.”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *