Hoy hablaremos de los formularios web y de cómo construirlos semánticamente para que sean más accesibles, la accesibilidad web es muy importante a la hora de construir una aplicación y muchas veces dejamos de lado muchos aspectos esenciales en favor de un diseño más bonito, informar semánticamente al usuario mediante etiquetas de la estructura de los contenidos y de la relación entre los campos es fundamental para la correcta comprensión de un formulario, para este propósito disponemos de las etiquetas <label>, <fieldset>, <legend> y <optgroup> y de otras técnicas que iremos viendo a lo largo del artículo.
La etiqueta <label>
La etiqueta <label> nos permite adjuntar información a los controles de los campos de los formularios, esta etiqueta soporta tanto los atributos globales como los atributos de evento, además tiene dos atributos propios, “for” y “form”, el atributo “form” es nuevo en Html5, tiene poco soporte de momento y se escapa al objetivo de este artículo, el atributo “for” establece una relación entre la etiqueta y el control del formulario, el valor de este atributo debe de ser igual al valor que el del atributo “id” del control del formulario.
<form action="formulario.php">
<label for="nombre">Nombre: </label>
<input type="text" name="nombre" id="nombre">
<input type="submit" value="Enviar">
</form>Donde usar el atributo for
Para etiquetar correctamente los controles de formulario, el atributo “for” debe usarse en los <input> de tipo “text”, “file”, “password”, “radio”, “checkbox” y en las etiquetas “textarea” y “select”.
Donde no usar el atributo for
El atributo “for” nunca debe usarse en los <input> de tipo “image”, “submit” o “reset”, estos elementos disponen de sus propios atributos para etiquetarse, tampoco debemos usar el atributo “for” en los <input> de tipo “hidden” ya que estos no se etiquetan, ni en las etiquetas <button> que se etiquetan con su contenido.
Donde colocamos la etiqueta <label>
La etiqueta <label> se coloca antes o después del campo dependiendo del tipo de campo al que estamos enlazando:
Antes del campo
Etiquetas textarea y select y etiquetas <input> de tipo text, file y password.
Después del campo
Etiquetas <input> de tipo radio y checkbox .
<form action="formulario.php">
<label for="nombre">Nombre: </label>
<input type="text" name="nombre" id="nombre">
<input type="radio" name="op_1" id="op_1" value="Opción 1">
<label for="op_1">Opción 1</label><br>
<input type="radio" name="op_2" id="op_2" value="Opción 2">
<label for="op_2">Opción 2</label><br>
<input type="submit" value="Enviar">
</form>En algunas ocasiones no podemos utilizar la etiqueta <label> porque no disponemos de un texto en el control del formulario, por ejemplo, en el caso de los campos para introducir una fecha, en estos casos debemos usar el atributo “title” en el control del formulario y usar el elemento <fieldset> para agrupar los elementos.
Las etiquetas <fieldset> y <legend>
La etiqueta <fieldset> se utiliza para agrupar semánticamente elementos relacionados en un formulario, con la etiqueta <legend> en su interior definimos un título para el elemento <fieldset>, con este elemento etiquetamos el conjunto de elementos que contiene el elemento <fieldset>, esta etiqueta envuelve con una línea todos los elementos que contiene formando un cuadro alrededor de los mismos, intentar eliminar este cuadro con CSS no ayuda ni a la accesibilidad ni a la usabilidad del sitio web, esta característica mejora la comprensión de la relación que existe entre los controles y mejora la usabilidad.
La etiqueta <fieldset>se presenta con los siguientes estilos por defecto en la mayoría de navegadores web:
fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove (internal value);
}<form>
<fieldset>
<legend>Datos personales:</legend>
<label for="nombre">Nombre: </label>
<input type="text" name="nombre" id="nombre">
<br>
<label for="apellidos">Apellidos: </label>
<input type="text" name="apellidos" id="apellidos">
<br>
<label for="ciudad">Ciudad: </label>
<input type="text" name="ciudad" id="ciudad">
<br>
</fieldset>
<input type="submit" value="Enviar">
</form>En los <input> de tipo “radio” y “checkbox” el elemento <fieldset> es más importante ya que estos elementos no describen muy bien el grupo en el que se encuentran y usar estas etiquetas mejora mucho la comprensión del grupo de elementos que contiene una parte del formulario.
<form>
<fieldset>
<legend>Elija una opción:</legend>
<input type="radio" name="op_1" id="op_1" value="Opción 1">
<label for="op_1">Opción 1</label><br>
<input type="radio" name="op_2" id="op_2" value="Opción 2">
<label for="op_2">Opción 2</label><br>
<input type="radio" name="op_3" id="op_3" value="Opción 3">
<label for="op_3">Opción 3</label>
</fieldset>
<input type="submit" value="Enviar">
</form>
No anides elementos <fieldset>
Anidar elementos <fieldset> dentro de elementos <fieldset> es una mala práctica que como desarrollador debes evitar en la construcción de tus aplicaciones web.
La etiqueta <optgroup>
Otro elemento importante en un formulario web que nos permite informar semánticamente de la relación entre una serie de elementos es la etiqueta <optgroup>, esta etiqueta ayuda visualmente a encontrar un elemento en una lista de opciones de forma que los usuarios puedan encontrar de forma más sencilla la opción que buscan.
<select>
<optgroup label="Opciones A">
<option value="volvo">A 1</option>
<option value="saab">A 2</option>
</optgroup>
<optgroup label="Opciones B">
<option value="mercedes">B 1</option>
<option value="audi">B 2</option>
</optgroup>
</select>
Elimina las barreras de acceso
Las personas con algún tipo de discapacidad no quieren que les proporcionemos ayuda, lo que quieren es que no les pongamos barreras, cuanto más accesibles sean nuestras aplicaciones, más personas podrán usarlas sin ningún tipo de restricción.
Controles estándar
Además de etiquetar correctamente los campos de los formularios debemos cumplir ciertas normas que ayuden a la mejor comprensión de nuestras aplicaciones a todos los usuarios, usar controles estándar es una buena práctica para que los controles sean accesibles por teclado y por los productos de apoyo como los lectores de pantalla que también podrán evaluar los cambios de estado de los mismos.
Identifica los campos obligatorios
Siempre debemos identificar aquellos campos que sean obligatorios e indicar textos de ayuda, ejemplos e instrucciones en los campos que consideremos que puedan necesitarlo para prevenir errores en el envío del formulario.
Mecanismos de validación
Los mecanismos de validación que utilicemos en los formularios deben proporcionar al usuario la opción de corregir los datos antes de enviarlos, debemos identificar y describir los errores al usuario con un texto, no basar la información en el color y llevar al usuario al foco del campo que contiene el error.
Cuidado con el uso de algunos elementos y funciones
El botón “reset” puede ser pulsado accidentalmente por lo que si proveemos al formulario de este botón, debemos crear un mecanismo para avisar al usuario de la acción que se va a realizar, teniendo mucho cuidado con el uso de Javascript si lo empleamos en alguna función.
Más información
Puedes encontrar más información y ejemplos sobre accesibilidad web en formularios en los siguientes enlaces:
http://www.w3.org/TR/WCAG20-TECHS/H44.html
http://www.w3.org/TR/WCAG20-TECHS/H65.html
http://www.w3.org/TR/WCAG20-TECHS/H90.html
http://www.w3.org/TR/WCAG20-TECHS/H71.html
Si te interesa la accesibilidad web te recomiendo estas páginas muy bien documentadas:
Valoraciones
Sé el primero en valorar