Una persona con discapacidad visual tendría escaso acceso a un formulario, debido a la falta de un marcado con asociaciones entre sus campos. Por tal motivo, identificaremos etiquetas de HTML para englobar campos de un formulario.

Con el propósito de agregar asociaciones semánticas entre campos para lectores de pantalla, crearemos formularios accesibles en un documento HTML, según las recomendaciones oficiales de este lenguaje.

Cuando marcamos un documento web con lenguaje HTML, es necesario cuidar detalles y utilizar las etiquetas semánticas proporcionadas por este lenguaje, a fin de asegurar una comprensión correcta por las personas con discapacidades. Lo mismo sucede cuando creamos formularios, por lo tanto, mediante las etiquetas label, fieldset y legend es posible identificar las partes, para entenderlo con mayor facilidad por cualquier tipo de usuario, inclusive a nivel de programación.

061-01_1010_ilu01. Etiquetas de accesibilidad

La etiqueta label se utiliza para asociar los elementos encontrados dentro de ella. En la misma se incluye el atributo for, para indicar el nombre de la etiqueta a asociar. Además, es posible especificarle los atributos globales de HTML, como por ejemplo class, dir, id, lang, style y tittle.

061-01_1010_ilu02. Creación de la etiqueta label

En el siguiente código apreciamos las dos formas de realizar la asociación:

061-01_1010_ilu03. Diferentes de la etiqueta label

• El primer ejemplo asocia el contenido dentro de label con el input llamado dirección.
• El segundo ejemplo asocia todo el contenido entre sí, ya que envuelve el nombre del campo, el tipo y los posibles valores del mismo.

La etiqueta fieldset, por su parte, permite identificar la función de un grupo de botones, con la finalidad de hacerlos más legibles para un lector de pantalla. Luego de esta etiqueta, es preciso agregar inmediatamente legend, para especificar el nombre de ese grupo de botones.

061-01_1010_ilu04. Propósito de las etiquetas fieldset y legend

Con el fin de comprender cómo se aplican ambas etiquetas, para englobar los botones correspondientes a las características de la compra, veremos el siguiente código como ejemplo:

061-01_1010_ilu05. Creación de las etiquetas fieldset y legend

En la ilustración está la vista del usuario, donde el navegador web muestra la agrupación de la etiqueta fieldset con un cuadro, sin embargo, ello puede ser modificado a través de una hoja de estilos CSS.

Si utilizamos este mismo código en navegadores web, como Internet Explorer o Mozilla Firefox, es posible verificar cómo ambos la interpretan y muestran de igual forma, por lo tanto, lo ideal es utilizarlas en el marcado de formulario, para aportar semántica al mismo y omitir el estilo.

Keynotes

• Cuando marcamos un documento web con lenguaje HTML, es necesario cuidar detalles y utilizar las etiquetas semánticas proporcionadas por este lenguaje, a fin de asegurar una comprensión correcta por las personas con discapacidades. Lo mismo sucede cuando creamos formularios.
• Mediante las etiquetas label, fieldset y legend es posible identificar las partes de un formulario, para entenderlo con mayor facilidad  por cualquier tipo de usuario, inclusive a nivel de programación.
• La etiqueta label se utiliza para asociar los elementos encontrados dentro de ella. En la misma se incluye el atributo for, para indicar el nombre de la etiqueta a asociar. Además, es posible especificarle los atributos globales de HTML, como por ejemplo class, dir, id, lang, style y tittle.
• La etiqueta fieldset, por su parte, permite identificar la función de un grupo de botones, con la finalidad de hacerlos más legibles para un lector de pantalla. Luego de esta etiqueta, es preciso agregar inmediatamente legend, para especificar el nombre de ese grupo de botones.

A fin de agrega asociaciones semánticas entre campos para lectores de pantalla con profesionalidad, crea un formulario accesible en un documento HTML, según las recomendaciones oficiales de este lenguaje.

Pasos a seguir:

• Ubica en estándar de HTML actual y lee las recomendaciones de las etiquetas label, fieldset y legend.
• Investiga sobre una etiqueta adicional ubicada en la misma categoria.
• Crea un documento HTML donde en el marcado del formulario se encuentren las etiquetas del resumen y la aprendida.
• Muestra tu código a un experto, a través de vKonnect, y toma nota de sus recomendaciones.

Sabrás que has tenido éxito cuando el código se muestre correctamente en el navegador web, según las especificaciones realizadas.

Realiza las modificaciones necesarias al código, a fin de compartirlo en tu vPages y solicita a tus compañeros una sugerencia de optimización para el marcado utilizado.

Tiempo disponible: 3 horas.

A través de la creación de formularios accesibles en un documento HTML, según las recomendaciones oficiales de este lenguaje, aseguramos un entendimiento completo del mismo por parte de personas con discapacidad visual. También, agregamos asociaciones semánticas entre campos con eficiencia. La práctica constante y organización son determinantes para un marcado profesional de formularios.