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.
MisiónA 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.
CierreA 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.
