Cuando creamos una web siempre deberíamos tener en cuenta que ésta sea accesible. Esto es, que se pueda usar y navegar por ella a pesar de que el usuario pueda tener limitaciones por una discapacidad.
Ahora vamos a centrarnos en sólo algunos parámetros que nos serán muy útiles a la hora de crear un formulario accesible.
Lo primero que solemos hacer es marcar los campos que son obligatorios para rellenar y para eso se suele poner un asterisco (*) o un texto de “obligatorio” al lado del nombre del campo a rellenar.
Yo particularmente, en mi formulario de contacto uso la indicación de “necesario”, que suena menos exigente.
Para hacer que estos campos sean accesibles tenemos que añadirles en el código el atributo aria-required=”true”
|
1 |
<input type="text" name="nombre" value="" size="40" aria-required="true"> |
Una vez enviado el formulario, lo primero que se hace es validar los datos y si hay algún error debemos especificarlo con el atributo aria-invalid. Que puede tomar tres valores:
- false: cuando no hay ningún error de validación.
- grammar: cuando hay un error de formato, por ejemplo fecha, email.
- spelling: cuando hay un error de caracteres, por ejemplo, que no llega al mínimo de caracteres especificados o que los sobrepasa.
- true: cuando hay un error pero no se especifica cuál.
Por ejemplo quedaría así:
|
1 |
<input type="text" name="email" value="" size="40" aria-invalid="grammar"> |
Cuando existe un error de validación hay que indicar al usuario que no se ha podido enviar el formulario por un fallo. Para eso se hace una notificación en la que tenemos que incluir el atributo role=”alert”
|
1 |
<h2 role="alert">Se ha producido un error en el envío del formulario</h2> |
Con esto tienes algunas técnicas para hacer tus formularios más accesibles.
Recuerda hacer tus web siempre accesibles.