El formulario que creas es para personas. Las personas usan distintos dispositivos. Algunos usan un mouse, otros dispositivos táctiles, otros teclados, otros dispositivos controlados por movimientos oculares. Algunas usan un lector de pantalla, otras usan una pantalla pequeña y otras usan software para agrandar texto. Todos quieren usar tu formulario. Descubre cómo lograr que tu formulario sea accesible y fácil de usar para todos.
Asegúrate de que los usuarios comprendan el propósito de los campos de formulario
Existen muchos controles de formulario que puedes elegir.
¿Qué tienen en común?
Cada control de formulario debe tener un elemento <label> asociado.
El elemento <label> describe el propósito de un control de formulario.
El texto <label> se asocia visualmente con el control de formulario y se lee en los lectores de pantalla.
Además, si presionas o haces clic en la <label>, se enfoca el control de formulario asociado y se convierte en un objetivo más grande.
Usa código HTML significativo para acceder a las funciones integradas del navegador
En teoría, podrías compilar un formulario usando solo elementos <div>.
Incluso puedes hacer que parezca un <form> nativo.
¿Cuál es el problema de usar elementos no semánticos?
Los elementos de formulario integrados proporcionan muchas funciones integradas. Veamos un ejemplo.
Visualmente, el <input> (el primero del ejemplo) y el <div> tienen el mismo aspecto.
Incluso puedes insertar texto para ambos, ya que <div> tiene un atributo contenteditable.
Sin embargo, existen muchas diferencias entre usar un elemento <input> apropiado y un <div> con apariencia de <input>.
Un usuario de un lector de pantalla no reconoce el <div> como un elemento de entrada y no puede completar el formulario.
Lo único que escucha el usuario del lector de pantalla es "Nombre", sin indicación de que el elemento es un control de formulario para agregar texto.
Hacer clic en <div>Name</div> no enfoca el <div> que lo acompaña, mientras que <label> y <input> se conectan mediante los atributos for y id.
Después de enviar el formulario, los datos ingresados en <div> no se incluyen en la solicitud.
Si bien es posible adjuntar datos con JavaScript, un <input> lo hace de forma predeterminada.
Los elementos de formulario integrados tienen otras funciones.
Por ejemplo, con los elementos de formulario apropiados y el inputmode o type correcto, un teclado en pantalla muestra los caracteres correspondientes. No puedes usar el atributo inputmode en una <div>.
Asegúrate de que los usuarios conozcan el formato de datos esperado
Puedes definir varias reglas de validación para un control de formulario.
Por ejemplo, supongamos que un campo de formulario siempre debe tener al menos ocho caracteres.
Usas el atributo minlength, que indica la regla de validación a los navegadores.
¿Cómo puedes asegurarte de que los usuarios también conozcan la regla de validación? Dígales.
Agrega información sobre el formato esperado directamente debajo del control de formularios.
Para que quede claro para los dispositivos de asistencia, usa el atributo aria-describedby en el control del formulario y un id en el mensaje de error con el mismo valor para conectar ambos.
Ayudar a los usuarios a encontrar el mensaje de error de un control de formulario
En un módulo anterior sobre la validación, aprendiste cómo mostrar mensajes de error en caso de una entrada de datos no válida.
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
Por ejemplo, si un campo tiene un atributo required y se ingresan datos no válidos, el navegador mostrará un mensaje de error junto al control de formulario cuando se envíe. Los lectores de pantalla también anuncian el mensaje de error.
También puedes definir tu propio mensaje de error:
En este ejemplo, se necesitan más cambios para conectar el mensaje de error al control de formularios.
Un enfoque simple es usar el atributo aria-describedby en el control de formulario que coincide con el id en el elemento del mensaje de error.
Luego, usa aria-live="assertive" para el mensaje de error.
Las regiones activas de ARIA anuncian un error a los usuarios de lectores de pantalla en el momento en que se muestra.
El problema con este enfoque en el caso de los formularios con varios campos es que, por lo general, aria-live solo anunciará el primer error en caso de que haya varios.
Como se explica en este artículo sobre varios anuncios de aria-live en la misma acción, puedes crear un solo mensaje concatenando todos los errores. Otro enfoque sería anunciar que hay errores y, luego, anunciar errores individuales cuando el campo está enfocado.
Asegúrate de que los usuarios reconozcan los errores
A veces, los diseñadores colorean el estado no válido de color rojo, con la seudoclase :invalid.
Sin embargo, para comunicar un error o un éxito, nunca debes confiar solo en el color.
Para las personas con daltonismo, los bordes verde y rojo lucen casi iguales.
Es imposible ver si el mensaje está relacionado con un error.
Además del color, usa un ícono o agrega el tipo de error a tus mensajes de error.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
Ayuda a los usuarios a navegar por tu formulario
Puedes cambiar el orden visual de los controles de formularios con CSS. Una desconexión entre el orden visual y la navegación con el teclado (orden del DOM) genera problemas para los usuarios de lectores de pantalla y teclado.
Obtén más información para garantizar que el orden visual de la página cumpla con el orden del DOM.
Ayudar a los usuarios a identificar el control de formulario enfocado actualmente
Usa el teclado para navegar por este formulario.
¿Reconociste que el estilo de los controles de formulario cambió una vez que estaban activos?
Este es el estilo de enfoque predeterminado.
Puedes anularla con la seudoclase de CSS :focus.
Independientemente de los estilos que uses dentro de :focus, siempre asegúrate de que se pueda reconocer la diferencia visual entre el estado predeterminado y el de enfoque.
Obtén más información sobre cómo diseñar indicadores de enfoque.
Asegúrate de que tu formulario sea fácil de usar
Puedes identificar muchos problemas habituales completando el formulario con distintos dispositivos. Usa solo el teclado, un lector de pantalla (como NVDA en Windows o VoiceOver en Mac) o haz zoom en la página al 200%. Siempre prueba tus formularios en diferentes plataformas, especialmente en dispositivos o parámetros de configuración que no uses todos los días. ¿Conoces a alguien que use un lector de pantalla o a alguien que use software para agrandar texto? Pídeles que completen tu formulario. Las revisiones de accesibilidad son excelentes, las pruebas con usuarios reales son aún mejores.
Obtén más información para hacer una revisión de accesibilidad y realizar pruebas con usuarios reales.