Las tablas HTML son una excelente forma de mejorar la accesibilidad de las tablas HTML. Ayudan a las personas a comprender información que de otro modo sería difícil de leer. Por ejemplo, los usuarios pueden ver cómo la información en cada celda se relaciona con otra información en la tabla al escanearla rápidamente. Pero esto también dificulta que las personas ciegas entiendan cómo encajan estas células.
Y si les resulta difícil llegar a sus mesas, impedirá que muchas personas usen su producto. Podemos resolver este problema escribiendo el código HTML correctamente para que los lectores de pantalla puedan entenderlo. Y para hacer eso, necesitará saber cómo hacer que las tablas HTML sean más fáciles de usar. En este artículo, aprenderá más sobre la accesibilidad de las tablas HTML y cómo crear tablas que sean accesibles.
Cómo mejorar la accesibilidad de las tablas HTML
Use los atributos alt de manera significativa
La persona que escribió el contenido decidió usar imágenes de marcas de verificación verdes para mostrar cuándo una característica del plan es parte de un plan determinado, pero se olvidó de agregar atributos alt. Los usuarios de AT no pueden saber cuándo se agrega una función porque las imágenes en las celdas no les dicen nada.
Para solucionar esto, asegúrese de que las imágenes tengan texto alternativo que le diga al usuario qué es la imagen. es sobre. Aunque parece correcto, un atributo alt de”marca de verificación”no significaría nada. Usé la frase”característica incluida”en su lugar. (Aunque creo que sería mejor usar una fuente de icono que una imagen).
Ponle un título a esa tabla
Parece que esta tabla tiene un título que dice”Elige un plan, ” pero ese texto es en realidad un nivel de encabezado h3>. Moverlo dentro del elemento table> y marcarlo como título> permite que las tecnologías de asistencia, como un lector de pantalla, sepan que el texto está relacionado con la tabla> mediante programación.
Incluir texto de encabezado para cada columna
En este caso, la primera celda de la tabla está vacía. El lector de pantalla lee la fila 1, la columna 1. Todo listo. Pero, ¿qué pasa con el resto de la información en estas celdas? Se necesita un encabezado que diga cuáles son.
El autor del contenido no quiere un encabezado para la columna uno desde un punto de vista visual, pero los usuarios de AT se benefician cuando el nombre de la columna se menciona antes que el contenido de las siguientes celdas.
Revise su (con)texto
Los lectores de pantalla no siempre funcionan de la manera esperada con abreviaturas y puntuación. Esta tabla me mostró dos ejemplos interesantes. En primer lugar, la cantidad de usuarios del plan Team parece”2-50″, pero se anuncia como”250″porque no se muestra el guión. Para asegurarnos de que esto quede claro, podemos agregar la palabra”a”como texto auxiliar oculto y, para estar seguros, podemos ocultar el guión de AT.
¿Qué es la accesibilidad de la tabla HTML?
Existen características que hacen que el software y los sitios web sean más fáciles de usar para las personas con discapacidades. Algunas de estas características son atajos para el teclado, texto a voz, acceso para personas daltónicas, subtítulos, audio mono y más. Entonces, ¿qué es exactamente la accesibilidad de la tabla HTML?
Los lectores de pantalla son un tipo de herramienta de accesibilidad que ayuda a las personas ciegas a comprender qué hay en un sitio web o una aplicación. Estas útiles herramientas leen la información en voz alta de las etiquetas HTML. Pero, ¿cómo le dan sentido los lectores de pantalla a las tablas HTML?
Los lectores de pantalla van de izquierda a derecha y de arriba a abajo cuando leen tablas HTML. Debido a esto, a menudo les resulta difícil averiguar dónde está una celda o cómo se relaciona con otra celda o el encabezado. Por lo tanto, los desarrolladores deben escribir un código HTML correcto que pueda ser leído por tecnologías que ayuden a las personas con discapacidades. En la siguiente parte, hablaremos sobre cómo puedes hacer esto.