Siempre se debe incluir un elemento LABEL para todos los controles del formulario, excepto los botones, identificando claramente qué información se pide al usuario en cada control.

Para ampliar la información sobre formularios se recomienda descargar la Guía de Comprobación de la Accesibilidad: Formularios.

Volver al listado de buenas prácticas

Para realizar una asociación correcta se debe realizar una asociación implícita y una explícita de las etiquetas con sus respectivos controles.

La asociación implícita se realiza situando las etiquetas junto a sus controles, de forma que sea perfectamente distinguible qué etiqueta corresponde a qué control.

La asociación explícita se realiza a nivel de código HTML, indicando un atributo for para la etiqueta y un atributo id para el control. Ambos atributos deben tener el mismo valor.

Ejemplo de código:

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

<p>Sexo: </p>
<p><input type="radio" name="sexo" id="hombre" value="hombre" /> <label for="hombre">Hombre</label></p>
<p><input type="radio" name="sexo" id="mujer" value="mujer" /> <label for="mujer">Mujer</label></p>

<p><label for="hijos">Número de hijos: </label> <select id="hijos"> <option value="0">Ninguno</option> <option value="1">Uno</option> <option value="mas">Más de dos</option> </select><p>
</label>

Para ampliar la información sobre formularios se recomienda descargar la Guía de Comprobación de la Accesibilidad: Formularios.

Volver al listado de buenas prácticas

Una manera adecuada y accesible para identificar los campos obligatorios de un formulario es utilizar asteriscos para marcarlos. Antes del formulario se colocará una nota explicativa indicando que los campos con un asterisco son obligatorios.

En la etiqueta de cada campo obligatorio se colocará un asterisco, preferentemente antes del texto de la etiqueta. Dicho asterisco se podría marcar como una abreviatura cuyo atributo title será “campo obligatorio” por ejemplo.

Ejemplo de código:

<form action=”formulario.html” method=”post”>
<p>Nota: Los campos marcados con un * son obligatorios</p>
<label for=”nombre”> <abbr title=”campo obligatorio”>*</abbr> Nombre: <input type=”text” id=”nombre” />
</label>
<input type=”submit” value=”Enviar” />
</form>

Para ampliar la información sobre formularios se recomienda descargar la Guía de Comprobación de la Accesibilidad: Formularios.

Volver al listado de buenas prácticas

La validación de los datos introducidos en un formulario se debe realizar de forma que no dependa únicamente de JavaScript. Normalmente se realizará la validación del lado del servidor. De esta forma, cuando no se dispone de JavaScript, el usuario enviará los datos del formulario sin validar, el servidor realizará la validación y devolverá el resultado de la misma con los errores que haya detectado, si los hubiese.

Por otra parte se debe informar al usuario de todos los errores de validación que se produzcan. Dicho aviso deberá mostrar de manera accesible antes del formulario de forma que no pasen inadvertidos para el usuario.

Para ampliar la información sobre formularios se recomienda descargar la Guía de Comprobación de la Accesibilidad: Formularios.

Volver al listado de buenas prácticas