• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria
Juan Carlos Nieto

Juan Carlos Nieto

Desarrollo Web Profesional

  • Inicio
  • Blog
  • Sobre mí
  • Trabajos
  • Contacto
Usted está aquí: Inicio / Accesibilidad / Cómo hacer un formulario accesible

23 febrero, 2016 Dejar un comentario

Cómo hacer un formulario accesible

formularios-accesibles

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.

campo-necesario

Para hacer que estos campos sean accesibles tenemos que añadirles en el código el atributo aria-required=»true»

<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í:

<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»

<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.

 

 

Archivado en:Accesibilidad Etiquetado con:accesible, formulario

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Barra lateral primaria

Buscar

Recibe gratis las noticias

Contacta conmigo

  • Correo electrónico
  • Facebook
  • Instagram
  • LinkedIn
  • RSS
  • Twitter
  • YouTube

Quizás te guste…

  • Cómo solucionar el error de OpenOffice de que no detecta el entorno de ejecución de Java
  • exportar-objeto-seleccionado-illustrator Cómo exportar sólo el objeto seleccionado en Adobe Illustrator
  • desactivar-iis Desactivar el inicio automático de IIS en Windows para liberar el puerto 80
  • error de wordpress Cómo solucionar el error de WordPress «Hay en este momento otra actualización en marcha»
  • importar-mysql Cómo importar una base de datos MySQL
  • Cómo ver Reddit como galería de imágenes
  • wordpress-xmlrpc Ataques a WordPress a través de XML-RPC y cómo protegerse
  • cuenta-empresa-gmail Cómo configurar tu cuenta de correo de empresa en Gmail
  • ¿Es seguro utilizar la aplicación de Zoom?
  • comandos-linux Los comandos básicos de Linux que debes conocer
  • Política de Privacidad
  • Política de cookies
  • Aviso legal
  • Política de Privacidad
  • Política de cookies
  • Aviso legal

Copyright © 2021 · Juan Carlos Nieto

Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestro sitio web. Si continúa utilizando este sitio asumiremos que está de acuerdo.Estoy de acuerdoLeer más