Cómo mejorar la accesibilidad de la tabla HTML con el marcado
La accesibilidad web se refiere al diseño de aplicaciones web de manera que las personas con discapacidades visuales puedan utilizarlas con facilidad. Algunos de estos usuarios confían en lectores de pantalla Para leer en voz alta el contenido de las páginas web. Los lectores de pantalla Interpreta el código presente en la página. y leer su contenido al usuario.
es un elemento HTML muy utilizado para mostrar datos de forma estructurada en páginas web. Su diseño abarca desde los más simples hasta los más complejos, con encabezados de fila, encabezados combinados, etc..
Si una tabla no está diseñada teniendo en cuenta la accesibilidad, será difícil para los lectores de pantalla traducir los datos en tablas complejas de manera significativa para los usuarios. Por lo tanto, para que las tablas HTML complejas sean más fácilmente comprensibles, para la accesibilidad, debemos asegúrese de que los encabezados, grupos de columnas, grupos de filas, etc. estén claramente definidos. A continuación veremos cómo es esto. logrado en el marcado.
El atributo de alcance
Incluso para una mesa simple con
etiqueta que define claramente los encabezados, puede mejorar su accesibilidad con el alcance atribuir y no dar lugar a ninguna confusión que pueda surgir de tipos similares de datos en las celdas.
Nombre de empleado
Código de empleado
Código de proyecto
Designación de empleado
John Doe
32456
456789
Director
Miriam Luther
78902
456789
Subdirector
¿Qué hace el atributo de alcance? Según W3C:
En otras palabras, nos ayuda a asociar las celdas de datos con sus celdas de encabezado correspondientes.
Tenga en cuenta que en el ejemplo anterior puede cambiar
para
. Mientras sea alcance tiene el valor columna, Se interpretará como el encabezado de la columna correspondiente..
los alcance atributo puede tener cualquiera de estos cuatro valores; columna, fila, grupo de filas, colgante para referirse al encabezado de una columna, al encabezado de una fila, al encabezado de un grupo de columnas y al encabezado de un grupo de filas respectivamente.
Mesas complejas
Ahora pasemos a una mesa más compleja..
Arriba hay una tabla que enumera a los estudiantes en una clase y sus calificaciones en práctica y teoría para tres materias.
Aquí está el código HTML para ello. La mesa ha utilizado filas de filas y colspan para crear encabezados combinados para las celdas de datos.
Nombre del estudiante
Biología
Química
Física
Práctico
Teoría
Práctico
Teoría
Práctico
Teoría
John Doe
UNA
UNA+
segundo
UNA
UNA
UNA-
Miriam Luther
UNA
UNA
do
do+
UNA
UNA-
En la tabla anterior, cada celda de datos, que es cada una de las celdas de la tabla mostrando el grado, Se asocia con tres piezas de información:
¿A qué estudiante pertenece este grado??
¿A qué asignatura pertenece este grado??
Es este grado para la sección de Práctica o Teoría.?
Esos tres datos se definen en tres tipos diferentes de celdas de encabezado estructural y visualmente:
Nombre del estudiante
Nombre del tema
Practica o teoria
Definamos lo mismo por accesibilidad..
Nombre del estudiante
Biología
Química
Física
Práctico
Teoría
Práctico
Teoría
Práctico
Teoría
John Doe
UNA
UNA+
segundo
UNA
UNA
UNA-
Miriam Luther
UNA
UNA
do
do+
UNA
UNA-
En el marcado anterior hemos añadido alcance a celdas que contienen información de encabezado sobre las celdas de datos.
Grupo de columnas
Las células de biología, química y física deben asociarse con un grupo de dos columnas cada una (teoría y práctica). Solo añadiendo colspan = "2" no crea los grupos de columnas, solo indica que la celda en particular debe ocupar el espacio de dos celdas.
Para crear el grupo de columnas debes usar colgante y luego agregar el lapso atribúyalo indicando cuántas columnas incluye ese grupo de columnas.
los
Nombre del estudiante
marcado con scope = "col" ayuda a la tecnología de asistencia a identificar que las celdas que siguen en la misma columna son nombres de estudiantes.
Del mismo modo, células como
Biología
que contiene scope = "colgroup" ayuda a los usuarios a identificar que los datos en las celdas que siguen en el grupo de columnas que abarca están asociados con ese tema en particular.
Luego está la
John Doe
marcado con scope = "fila" que define que las celdas que lo siguen en la misma fila, que contiene el “grado” información sobre el nombre de ese estudiante en particular.
Grupos de filas
Ahora pasemos a otro ejemplo, este ejemplo tendrá casi la misma tabla que la anterior, excepto que intercambiaremos los encabezados de fila y columna, por lo que podremos trabajar con grupos de filas.
Tema
John Doe
Miriam Luther
Biología
Práctico
UNA
UNA
Teoría
UNA+
UNA
Química
Práctico
segundo
do
Teoría
UNA
do+
Física
Práctico
UNA
UNA
Teoría
UNA-
UNA-
Ahora que tenemos nuestro ejemplo para trabajar, comencemos creando grupos de filas como hicimos para los grupos de columnas del ejemplo anterior..
Sin embargo, los grupos de filas no se pueden crear utilizando una etiqueta como colgante porque no hay grupo de filas elemento.
Las filas HTML generalmente se agrupan usando , y elementos. Un solo HTML
elemento puede tener uno , uno y multiples . Usaremos multiples tbody en nuestra tabla para crear los grupos de filas y agregar el ámbito respectivo a las celdas de encabezado.
Tema
John Doe
Miriam Luther
Biología
Práctico
UNA
UNA
Teoría
UNA+
UNA
Química
Práctico
segundo
do
Teoría
UNA
do+
Física
Práctico
UNA
UNA
Teoría
UNA-
UNA-
Hemos añadido las filas. “Práctico” y “Teoría” en cada tbody creando grupos de filas con dos filas en cada uno. También hemos añadido el scope = "rowgroup" a las celdas que contienen la información de encabezado de esas dos filas (que es el nombre del sujeto al que pertenecen las calificaciones en este caso).
