Formularios
Crea formularios organizados y etiquetados para que sean accesibles.
Etiquetas
El elemento <label>
sirve para identificar los campos del formulario.
Cada etiqueta debe estar asociada con su correspondiente campo mediante los atributos for
y id
usando el mismo valor.
<form>
<label for="name">Nombre</label>
<input type="text" id="name" />
</form>
Atributo aria-label
Existen situaciones donde la función del campo del formulario es visualmente explícita, sin necesidad de añadir una etiqueta. En ese caso debemos ofrecer una alternativa para las tecnologías de apoyo.
En el siguiente ejemplo, la función del formulario se intuye claramente con el texto del botón, por tanto utilizamos el atributo aria-label
en lugar del elemento <label>
.
<form>
<input type="text" aria-label="Buscar" />
<button type="submit">Buscar</button>
</form>
Etiqueta en botones
Si usamos el elemento <button>
la etiqueta es el texto del botón.
<button type="submit">Enviar</button>
Y si usamos el elemento <input>
la etiqueta es el texto del atributo value
.
<input type="submit" value="Enviar" />
Nota: El elemento <button>
es más flexible a la hora de aplicar estilos y permite incluir más atributos de accesibilidad en el texto del botón que el elemento <input>
.
Campos
Los campos de formulario son elementos interactivos que permiten introducir contenido o hacer una selección.
Tipos de campos
El primer paso para ayudar a los usuarios a completar correctamente un formulario es utilizar el tipo de campo adecuado.
Existen diferentes tipos de campos en función del tipo de datos que se vayan a introducir (texto, correo electrónico, fecha, números…). Para indicar el tipo de campo utilizamos el atributo type
.
<label for="name">Nombre</label>
<input type="text" id="name" />
<label for="email">Email</label>
<input type="email" id="email" />
<label for="date">Fecha</label>
<input type="date" id="date" />
<label for="num">Número</label>
<input type="number" id="num" />
Agrupar campos
Agrupar los campos relacionados facilita la comprensión y la interacción con el formulario.
Para agrupar campos utilizamos el elemento <fieldset>
, junto al elemento <legend>
que identifica o describe al grupo.
<fieldset>
<legend>Datos de envío</legend>
<label for="name">Nombre</label>
<input type="text" id="name" />
<label for="address">Dirección</label>
<input type="text" id="address" />
<label for="city">Ciudad</label>
<input type="text" id="city" />
</fieldset>
Nota: Los controles de tipo radio
y checkbox
deben agruparse siempre para ser tratados como un único grupo.
Instrucciones
Proporciona instrucciones para ayudar a los usuarios a rellenar los formularios.
Instrucciones generales
Son instrucciones que afectan a todo el formulario. Pueden indicar qué entradas son obligatorias, el formato de datos, o cualquier otra información adicional.
El texto de las instrucciones debe incluirse antes de la etiqueta <form>
debido a que algunos lectores de pantalla no leen los textos que no formen parte de elementos de formulario, cuando están dentro de <form>
.
Instrucciones en línea
Son instrucciones relevantes que se incluyen junto al control del formulario.
La forma más simple de proporcionar instrucciones en línea es incluirlas dentro de la etiqueta label
.
<label for="email">Email (campo obligatorio)</label>
<input type="email" id="email" />
Otra forma de proporcionar instrucciones es usando el atributo aria-describedby
.
<label for="email">Email</label>
<input type="email" id="email" aria-describedby="emailHelp" />
<div id="emailHelp">Campo obligatorio.</div>
El atributo placeholder
nos permite incluir un texto dentro del campo de formulario que desaparece al empezar a escribir o, en algunos navegadores, al enfocar el campo.
<label for="email">Email</label>
<input type="email" id="email" placeholder="usuario@empresa.com" />
Este atributo es muy práctico pero presenta algunos problemas de accesibilidad:
- Los lectores de pantalla no tratan
placeholder
como una etiqueta. - Al desaparecer la información puede que el usuario no recuerde las instrucciones proporcionadas.
- Los navegadores suelen usar un tono más claro para el texto que no suele cumplir los requisitos mínimos de contraste (aunque esto se puede solucionar mediante CSS).
Nota: El atributo placeholder
no debería sustituir a la etiqueta del control de formulario. Para evitar información redundante se puede ocultar la etiqueta visualmente.
Validación de datos
Antes de enviar los datos de un formulario debemos validarlos y notificar al usuario si existe algún error.
Campos obligatorios
Los campos obligatorios deben identificarse claramente mediante etiquetas.
Para indicar que un campo de formulario es obligatorio añadimos el atributo required
. Si el campo queda vacío, al pulsar el botón de envío el navegador presentará un mensaje de aviso indicando que debe completarse.
<label for="name">Nombre (obligatorio)</label>
<input type="text" id="name" required />
Atributos y valores
HTML proporciona atributos para los tipos de datos más comunes de un formulario (email, fecha, url, números etc.). Estos atributos permiten validar el formato de los datos insertados y en algunos casos presentan controles específicos.
Algunos tipos de datos pueden incluir parámetros adicionales como valores mínimo y máximo, longitud máxima de caracteres o el rango de aumento o disminución de un valor.
<input type="number" min="1" max="10" />
<input type="text" minlength="3" />
<input type="range" max="5" step="0.5" />
Especificar un patrón
El atributo de HTML pattern
permite validar los datos de un campo de entrada usando expresiones regulares.
<label for="pwd">Contraseña</label>
<input
type="text"
id="pwd"
aria-describedby="pwdHelp"
pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n]).*$"
required
/>
<div id="pwdHelp">
Debe contener al menos un número o un carácter especial y mínimo 8 caracteres.
</div>
<button type="submit">Enviar</button>>
En el ejemplo anterior, si la contraseña no cumple los requisitos, el navegador muestra un mensaje indicando que el formato utilizado debe coincidir con el solicitado.
Nota: Además de la validación en el lado del cliente, siempre debe realizarse la validación en el servidor.
Notificaciones de usuario
Una vez enviados los datos del formulario, hay que informar al usuario de si todo ha ido bien o de si se ha producido algún error. Para ello podemos usar los siguientes elementos:
- El título de página: Es lo primero que suele leer un lector de pantalla, así el usuario se percata del error de forma inmediata.
- El encabezado principal: Suele ser el elemento más visible de la página.
- Una lista de errores: Debe colocarse al principio de la página, antes del formulario y conviene enlazar cada elemento de la lista con el control correspondiente donde se encuentra el error.