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 .
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.![]()
¿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 Tablas complejasAhora pasemos a una tabla más compleja. ![]() Aquí está el código HTML para eso. La tabla ha utilizado
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:
Esas tres información se definen en tres tipos diferentes de celdas de encabezado estructural y visualmente:
Vamos a definir lo mismo para la accesibilidad.
En el marcado anterior, hemos agregado el Grupo de columnas![]() 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 los | Student Name | markup con Biology | que contiene John Doe | marcado con
---|
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 ,
yTema | 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
![](http://hideout-lastation.com/img/tech-design-tips/246/how-improve-html-table-accessibility-with-markup-5.jpg)
![Una guía para comprender los permisos de aplicaciones de Android (y cómo administrarlos)](http://hideout-lastation.com/img/tech-design-tips/925/guide-understanding-android-app-permissions.jpg)
Una guía para comprender los permisos de aplicaciones de Android (y cómo administrarlos)
Las aplicaciones dominan nuestro uso de teléfonos inteligentes y si bien la App Store de Apple tiene un criterio estricto para que las aplicaciones entren, Google Play Store es relativamente más indulgente. Como usuario de una aplicación para Android, debe tener en cuenta el tipo de datos que las aplicaciones que usa le quitan.Ad
![Fotografía de iPhone: fotos hermosas tomadas con iPhone 4](http://hideout-lastation.com/img/tech-design-tips/868/iphone-photography-beautiful-photos-taken-with-iphone-4.jpg)
Fotografía de iPhone: fotos hermosas tomadas con iPhone 4
Hace dos años, si le mostrabas a alguien una imagen impresionante y le preguntabas qué se llevó, probablemente apostaría por una cámara digital o réflex digital. Hazlo hoy, la gente se tomará un tiempo para meditar porque todo es posible dado que la tecnología avanza a medida que respira. Despídase de la opinión de que el teléfono móvil toma fotos de mierda. Sí, hoy po