es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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 Doe32456456789Director
Miriam Luther78902456789Subdirector

¿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ácticoTeoríaPrácticoTeoríaPrácticoTeoría
John DoeUNA +segundoUNUNUN-
Miriam LutherUNUNdoC +UNUN-

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 DoeUNA +segundoUNUNUN-
Miriam LutherUNUNdoC +UNUN-

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
TemaJohn DoeMiriam Luther
BiologíaPrácticoUNUN
TeoríaA +UN
QuímicaPrácticosegundodo
TeoríaUNC +
FísicaPrácticoUNUN
TeoríaUN-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íaPrácticoUNUN
TeoríaA +UN
QuímicaPrácticosegundodo
TeoríaUNC +
FísicaPrácticoUNUN
TeoríaUN-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

12 complementos para acelerar tu sitio web de WordPress

12 complementos para acelerar tu sitio web de WordPress

Todo el mundo ama un sitio web de carga rápida (que también incluye a usted y a sus lectores), por lo que, por supuesto, ya sabe que las velocidades de carga del sitio web afectan la experiencia del usuario.En esta publicación, no vamos a convencerte aún más de por qué necesitas un sitio de WordPress más rápido, ni a compartir contigo cómo editar PHP, javascript y bases de datos, todos esos conocimientos técnicos para optimizar aún más tu sitio.¿Por qué en

(Consejos de tecnología y diseño)

Cómo instalar y ejecutar Android en PC

Cómo instalar y ejecutar Android en PC

¿Desea ejecutar Android en su PC? Aunque a las personas les encanta usar Android, no pueden experimentarlo en sus PC porque este sistema operativo no está diseñado para eso. Afortunadamente, hay un producto innovador conocido como Remix OS para PC que permite a las personas ejecutar Android en PC .Re

(Consejos de tecnología y diseño)