Por qué las hojas de datos son un punto ciego de accesibilidad (y cómo pueden ayudar las WCAG)
Las hojas de datos se utilizan en muchos productos y entornos diferentes. Se utilizan en paneles de control, comparaciones de productos e incluso informes financieros internos. Ayudan a los usuarios a tomar decisiones, descubrir patrones en los datos y actuar cuando sea necesario.
Pero cuando se trata de accesibilidad, las tablas de datos a menudo se omiten. Se supone que se manejan mediante HTML predeterminado o se aplazan a la fase de desarrollo.
Visualmente, la tabla parece fácil de leer, con columnas y filas claras y encabezados distintos. Pero para muchos usuarios (como aquellos que utilizan lectores de pantalla o navegación con teclado), estas tablas pueden resultar confusas o incluso inutilizables.
Sólo para mayor claridad; Las WCAG no prohíben las tablas de datos, simplemente requieren que la información, las relaciones y la funcionalidad de la tabla estén disponibles para todos los usuarios. Es más, no necesita soluciones complejas para tener una hoja de datos y un diseño compatible con las WCAG.
Analicemos por qué las tablas de datos a menudo se pasan por alto, los requisitos de las WCAG para las tablas de datos y cómo los diseñadores y equipos de productos pueden crear tablas de datos accesibles.
¿Por qué los escritorios son un punto ciego de accesibilidad?
Para ser justos, las hojas de datos ocupan una posición incómoda entre el diseño y el desarrollo. Se sienten demasiado técnicos para ser puramente una cuestión de diseño, pero también demasiado intuitivos para ser considerados simplemente código. Como resultado, se ignoran los problemas de accesibilidad.
Pero, ¿cuáles son los problemas específicos que surgen cuando ni el diseñador ni el desarrollador se apropian completamente de la mesa?
La tabla carece de estructura semántica.
Visualmente, la mayoría de las tablas parecen fáciles de escanear, con encabezados de columna alineados y filas diferenciadas. Sin embargo, cuando la misma estructura no se transmite adecuadamente en el código, la tecnología de asistencia pierde el contexto visual que obtienen los usuarios videntes.
Sin la asociación correcta del encabezado, los lectores de pantalla (como Voiceover o NVDA) pueden leer un valor sin indicar a qué columna o fila pertenece.
Por ejemplo, suponga que tiene una tabla de datos que describe los conciertos a los que asistió el año pasado. Los usuarios videntes pueden comprender fácilmente la hora y el lugar de cada concierto, pero un lector de pantalla anunciará “12 de febrero” sin un concierto relacionado correspondiente.
<table>
<tr>
<th>Date</th>
<th>Event</th>
<th>Venue</th>
</tr>
<tr>
<td>12 February</td>
<td>Waltz with Strauss</td>
<td>Main Hall</td>
</tr>
(…)
</table>
Diseño de sistemas con lagunas de información.
Muchos sistemas de diseño incluyen un componente tabular, pero a veces no aclaran cómo se debe utilizar el componente en la naturaleza. La guía deja preguntas abiertas sobre accesibilidad, tales como:
- ¿Cuándo debería utilizar una tabla en lugar de una lista?
- ¿Cómo se debe hacer la clasificación?
- ¿Qué sucede cuando los datos están vacíos, truncados o cargados?
Sin estándares claros, las tablas utilizadas por diferentes equipos se comportarán de manera diferente y la accesibilidad será inconsistente.
Se agregó interacción inaccesible.
Las tablas modernas suelen ser dinámicas, con columnas ordenables, filas seleccionables y operaciones en línea. Pero estos modos de interacción están superpuestos a la tabla, sin una guía clara sobre el comportamiento del teclado, el orden de enfoque o los anuncios del lector de pantalla.
Al abordar problemas de accesibilidad en una fase avanzada del desarrollo, los equipos pueden agregar atributos ARIA improvisados en lugar de diseñar de manera inclusiva desde el principio. Esto da como resultado una tabla que “funciona” pero resulta impredecible o laboriosa de navegar usando solo el teclado.
Anatomía de una tabla de datos accesible
estructura general
- Las filas y columnas reflejan la relación de los datos (no solo la alineación visual)
- Los títulos describen claramente a qué corresponden.
- El orden de lectura coincide con la forma en que se entienden los datos.
relación de datos
- Los valores individuales están conectados a sus encabezados de columna y encabezados de fila (incluso en tablas multidimensionales)
- El contexto se transmite a través de asociaciones programáticas (no solo a través de medios visuales como el espaciado o la alineación)
- Los usuarios navegan celda por celda y comprenden todos los datos
Navegación predecible
- Los filtros, encabezados de columnas y acciones están claramente etiquetados.
- El foco del teclado siempre está visible en la hoja de datos
- El orden de enfoque (tabulación) es coherente con el diseño visual y lógico de la tabla.
la interacción correcta
- Las tablas interactivas tienen funciones claras, etiquetas accesibles y estados visibles.
- Los usuarios saben cuándo se puede ordenar una columna y en qué dirección.
- Los usuarios saben qué sucede cuando activan un control usando el teclado o el mouse
notas: Esta estructura anatómica permite que la tecnología de asistencia responda preguntas básicas como: ¿En qué columna estoy? ¿Qué representa este valor? Sin él, los usuarios se ven obligados a adivinar.
Los estándares WCAG más importantes para hojas de datos
WCAG no considera que las hojas de datos sean casos especiales. No existen pautas que digan “hacer que la mesa sea accesible”. En cambio, las WCAG están más preocupadas por si el usuario puede percibir las relaciones, operar la funcionalidad y comprender el contenido de la tabla.
WCAG proporciona un marco, pero depende del diseñador y del equipo cumplir con las expectativas.
SC 1.3.1 Información y Relaciones (Nivel A)
Este estándar requiere que todos los usuarios comprendan la relación entre los encabezados y las celdas de datos, independientemente de la apariencia visual de la tabla. Cuando faltan relaciones de encabezado, las tecnologías de asistencia no pueden proporcionar un contexto significativo.
Ejemplos de tecnologías aprobadas:
- Utilice el marcado de tabla para presentar información de la tabla (Tecnología H51)
- Utilice el elemento de título para asociar el título o título de una tabla de datos con la tabla (Tecnología H39)
- Utilice el atributo de rango para asociar celdas de encabezado con celdas en la tabla de datos (Tecnología H63)
- Utilice los atributos id y headers para asociar celdas con celdas de encabezado en la tabla de datos (Tecnología H43)
https://medium.com/media/338e43f81349ebc2a12841deaf0dd258/href
Teclado SC 2.1.1 (Clase A)
Cualquier interacción contenida en la tabla debe ser únicamente mediante teclado. Esto incluye no solo la tabla de navegación en sí, sino también el uso de funciones como filtrado, paginación y operaciones a nivel de fila.
Ejemplos de tecnologías aprobadas:
- Asegúrese de que el teclado controle todas las funciones (Tecnología G202)
- Proporciona un controlador de eventos activado por teclado (Tecnología G90)
SC 2.4.3 Secuencia de enfoque (Nivel A)
Los usuarios que utilizan la navegación con el teclado necesitan saber dónde se encuentran en todo momento. Las WCAG requieren indicadores de enfoque visibles y una comunicación clara de los cambios de estado.
Ejemplos de tecnologías aprobadas:
- Coloque los elementos interactivos en orden y relación dentro del contenido (Tecnología G59)
- Hacer que el orden DOM coincida con el orden visual (Tecnología C27)
SC 2.4.6 Títulos y Etiquetas (Nivel AA)
Las WCAG requieren que los controles y el contenido tengan etiquetas claras y descriptivas. En una tabla de datos, esto se aplica al título de la tabla, los encabezados de las columnas y sus controles interactivos.
Ejemplos de tecnologías aprobadas:
- Proporcione un título descriptivo (Tecnología G130)
- Proporcionar etiquetas descriptivas (Tecnología G131)
https://medium.com/media/64748825f9b314ce382b355646219ca9/href
SC 4.1.2 Nombre, Rol, Valor (Nivel A)
Las WCAG requieren que el contenido funcione de manera confiable con la tecnología de asistencia ahora y en el futuro. Para las tablas de datos, esto significa confiar en la estructura semántica y el comportamiento predecible en lugar de soluciones basadas en imágenes.
Ejemplos de tecnologías aprobadas:
- Utilice aria-label para proporcionar un nombre accesible donde no se puedan utilizar etiquetas visibles (Tecnología ARIA14)
- Utilice aria-labelledby para proporcionar nombres para los controles de la interfaz de usuario (tecnología ARIA16)
¿Qué deberían hacer los diseñadores antes de que los desarrolladores toque el código?
Las tablas de datos accesibles comienzan con las decisiones de diseño. Los diseñadores tienen la responsabilidad de prevenir problemas de accesibilidad mucho antes de que los desarrolladores comiencen a codificar. Esto incluye definir decisiones de diseño como la estructura de la tabla, las interacciones y la complejidad de los datos.
Utilice una estructura real, no solo el diseño
Antes de considerar el estilo visual, los diseñadores deben responder las siguientes preguntas:
- ¿Qué está bien?
- ¿Qué columnas hay?
- ¿Qué relaciones son las más importantes?
Si estas respuestas no son obvias en el diseño, tampoco lo serán para la tecnología de asistencia. Necesita encabezados de columna claros, etiquetas de fila significativas y una estructura de datos coherente.
participar en interacciones intencionales
No todas las tablas requieren operaciones de clasificación, filtrado u operaciones en línea. Cada interacción aumenta la carga cognitiva y la complejidad de la accesibilidad. Cuando se requiere interacción, los diseñadores deben definir:
- ¿Qué columnas se pueden ordenar?
- ¿Qué sucede cuando se aplica la clasificación?
- Cómo se mueven los usuarios entre el contenido de la tabla y los controles
- Si la operación se aplica a filas, celdas o a toda la tabla
Diseñado específicamente para usuarios de teclados
Usar el teclado es el método de entrada principal para muchos usuarios. Los diseñadores deben asegurarse de que se pueda navegar por la tabla en un orden lógico y predecible haciendo las siguientes preguntas:
- ¿Es posible acceder a todos los elementos interactivos sin un mouse/trackpad?
- ¿La forma en que se mueve el foco del teclado coincide con la estructura de la tabla?
- ¿Se pueden realizar acciones de solo desplazamiento mediante el teclado también?
Considere varios tamaños de pantalla
Los diseñadores deben definir claramente cómo se preservan las estructuras y relaciones de las tablas entre los puntos de interrupción. A medida que el tamaño de la pantalla se reduce, es fácil contraer y ocultar contenido, pero los diseñadores deben tener en cuenta:
- Cómo las etiquetas se mantienen conectadas con sus valores
- Cómo los usuarios navegan entre datos
- Cómo mantener interacciones accesibles
Expectativas de la tabla de documentación en sistemas de diseño.
Cuando las tablas de datos son un estándar compartido, pueden escalar y permanecer consistentes. El comportamiento de sus registros es tan importante como su apariencia.
La documentación útil incluye:
- Cuándo usar tablas (y cuándo usar otros componentes como listas)
- Semántica requerida para estructura, títulos y etiquetas.
- Comportamientos de interacción y teclado (como enfoque y paginación)
- Estados interactivos y casos extremos (como estados vacíos, de carga o de error)
- Cualquier consideración o limitación de accesibilidad conocida
Las tablas de datos se consideran contenedores de información, pero son algunos de los elementos más complejos de la interacción del usuario. Sin incorporar la accesibilidad a las tablas, los usuarios pierden contexto, la navegación se vuelve frustrante y los datos clave se vuelven difíciles de entender.
Cumplir con los estándares WCAG ayuda a todos los usuarios, independientemente de su capacidad. Las tablas accesibles son más fáciles de escanear, más predecibles de navegar y comunican el significado con claridad. Benefician a los usuarios de lectores de pantalla, usuarios de teclados y a cualquiera que trabaje con una gran cantidad de datos. Cuando las tablas se diseñan con el mismo cuidado que cualquier otra interfaz, la accesibilidad surge naturalmente.
La tabla de datos también debe ser accesible. Publicado originalmente en Colectivo de experiencia de usuario En Medium, la gente continúa la conversación destacando y respondiendo a esta historia.
