Cómo mejorar la accesibilidad de la tabla HTML con el marcado

La accesibilidad web se refiere al diseño de aplicaciones web de forma tal que las personas con discapacidad visual puedan usarla con facilidad. Algunos de estos usuarios confían en los lectores de pantalla para leer el contenido de las páginas web. Los lectores de pantalla interpretan el código presente en la página y leen su contenido al usuario .

es un elemento HTML ampliamente utilizado para mostrar datos de forma estructurada en páginas web. Su diseño abarca desde simples hasta complejos, completos con encabezados de fila, encabezados combinados, etc.

Si una tabla no está diseñada con accesibilidad en mente, será difícil para los lectores de pantalla traducir los datos en tablas complejas de manera significativa para los usuarios. Por lo tanto, para hacer que las tablas HTML complejas sean más fáciles de entender, para la accesibilidad, debemos asegurarnos de que los encabezados, grupos de columnas, grupos de filas, etc. estén claramente definidos . Veremos a continuación cómo se logra esto en el marcado .

El atributo del alcance

Incluso para una mesa simple con

markup 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, las células les gusta

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á el

marcado con scope="row" que define que las celdas que lo siguen en la misma fila contienen la información de "grado" con respecto a ese nombre de estudiante en particular.

Grupos de fila

Ahora pasemos a otro ejemplo, este ejemplo tendrá casi la misma tabla que el anterior, excepto que cambiaremos los encabezados de fila y columna, por lo que podremos trabajar con grupos de filas.

etiqueta que define claramente los encabezados, puede mejorar su accesibilidad con el atributo de scope y no ceder ante cualquier 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 del empleado John Doe 32456 456789 Director Miriam Luther 78902 456789 Subdirector ¿Qué hace el atributo de alcance? De acuerdo con 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	. Siempre que su scope tenga el valor col, se interpretará como el encabezado de la columna correspondiente. El atributo de scope puede tener cualquiera de estos cuatro valores; col, row, rowgroup, colgroup 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. Tablas complejas Ahora pasemos a una tabla más compleja. Arriba hay una tabla que enumera los estudiantes en una clase y sus grados en práctica y teoría para tres materias. Aquí está el código HTML para eso. La tabla ha utilizado rowspan 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 UN A + segundo UN UN UN- Miriam Luther UN UN do C + UN UN- En la tabla anterior, cada celda de datos, es decir, cada celda de la tabla que muestra la calificación, está asociada con tres elementos de información: ¿A qué estudiante pertenece este grado? ¿A qué asignatura pertenece este grado? ¿Es esta calificación para la sección de Práctica o Teoría? Esas tres información se definen en tres tipos diferentes de celdas de encabezado estructural y visualmente: Nombre del estudiante Nombre del tema Práctica o teoría Vamos a definir lo mismo para la accesibilidad. Nombre del estudiante Biología Química Física Práctico Teoría Práctico Teoría Práctico Teoría John Doe UN A + segundo UN UN UN- Miriam Luther UN UN do C + UN UN- En el marcado anterior, hemos agregado el scope a las 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 al agregar colspan="2" no se crean los grupos de columnas, solo indica que la celda en particular ocupará el espacio de dos celdas. Para crear un grupo de columnas, debe usar colgroup y luego agregarle el atributo span que indica cuántas columnas incluye ese grupo de columnas. los	Student Name	Biology		John Doe

Tema		John Doe	Miriam Luther
Biología	Práctico	UN	UN
	Teoría	A +	UN
Química	Práctico	segundo	do
	Teoría	UN	C +
Física	Práctico	UN	UN
	Teoría	UN-	UN-

Ahora que tenemos nuestra muestra para trabajar, comencemos creando grupos de filas como lo hicimos para los grupos de columnas en el ejemplo anterior.

Sin embargo, los grupos de filas no pueden crearse usando una etiqueta como colgroup porque no hay elemento de grupo de rowgroup .

Las filas HTML generalmente se agrupan usando , y elementos. Un solo HTML

elemento puede tener uno , uno y múltiple . Usaremos multiple tbody en nuestra tabla para crear los grupos de filas, y agregaremos el alcance respectivo a las celdas del encabezado.

Tema		John Doe	Miriam Luther
Biología	Práctico	UN	UN
	Teoría	A +	UN
Química	Práctico	segundo	do
	Teoría	UN	C +
Física	Práctico	UN	UN
	Teoría	UN-	UN-

Hemos agregado las filas "Práctica" y "Teoría" en cada tbody creando grupos de filas con dos filas en cada uno. También hemos agregado el scope="rowgroup" a las celdas que contienen la información del encabezado sobre esas dos filas (que es el nombre del sujeto al que pertenecen las calificaciones en este caso).

Ahora lectura: altura de columna igual con CSS