Curso HTML 7.6 Accesibilidad básica en tablas (scope, headers)

7.6 Accesibilidad básica en tablas (scope, headers)

Al diseñar tablas en HTML, es crucial asegurarse de que sean accesibles para todas las personas, incluidas aquellas que usan lectores de pantalla. Dos de los mecanismos más importantes para lograrlo son los atributos scope y headers. A continuación profundizamos en su uso y ofrecemos ejemplos detallados.

1. Estructura semántica básica

• Utilizar siempre <thead>, <tbody> y, opcionalmente, <tfoot> para dividir la tabla en secciones semánticas.
• Incluir una <caption> breve que describa el propósito de la tabla.
• Marcar las cabeceras de columna y fila mediante <th> en lugar de <td>.

2. Atributo scope

El atributo scope asocia de forma explícita cada <th> con su ámbito de celdas:

• scope='col': la cabecera aplica a todas las celdas de su columna.
• scope='row': la cabecera aplica a todas las celdas de su fila.
• scope='colgroup' y scope='rowgroup': para agrupar columnas o filas (menos usado, pero válido).

Ejemplo de tabla sencilla con scope:

  
Ventas mensuales por región
  

    

      
Mes
      
Norte
      
Sur
      
Este
      
Oeste
    
  
  

    

      
Enero
      
1200
      
1100
      
 900
      
1000
    
    

      
Febrero
      
1300
      
1150
      
 950
      
1020
    
    

      
Marzo
      
1250
      
1175
      
 980
      
1050
    
  

Explicación

• Cada <th> en <thead> usa scope='col' para declarar que es cabecera de columna.
• Cada <th> en <tbody> usa scope='row' para declarar que es cabecera de fila.
• Los lectores de pantalla anunciarán correctamente “Mes, Enero” o “Norte, 1200”.

3. Atributo headers para tablas complejas

Cuando la tabla tiene cabeceras jerárquicas, celdas que abarcan múltiples filas/columnas (rowspan, colspan) o agrupaciones complejas, scope puede no ser suficiente. El atributo headers en cada <td> referencia a uno o varios <th> mediante sus id, creando una asociación explícita.

Ejemplo de tabla compleja

  
Encuesta de satisfacción por departamento y periodo
  

    

      
Departamento
      
Q1 2024
      
Q2 2024
    
    

      
Satisfacción
      
Promedio
      
Satisfacción
      
Promedio
    
  
  

    

      
Recursos Humanos
      
4.2
      
3.8
      
4.5
      
4.0
    
    

      
Tecnologías
      
3.9
      
3.5
      
4.1
      
3.9
    
    

      
Ventas
      
4.6
      
4.2
      
4.7
      
4.3
    
  

Desglose técnico

• Cada <th> recibe un id único (dept, periodo1, satis1, etc.).
• Cada <td> de datos usa headers='...' con uno o varios id separados por espacios.
• Así, un lector de pantalla puede construir en tiempo real la relación completa: “Ventas, Q2 2024, Promedio, valor 4.3”.

4. Buenas prácticas adicionales

• No abusar de colspan y rowspan en exceso; preferir subdividir en tablas más sencillas si es posible.
• Combinar scope y headers en tablas muy complejas para máxima claridad.
• Añadir caption para describir el contenido global de la tabla.
• Verificar la accesibilidad con herramientas como WAVE, axe, NVDA o VoiceOver.

5. Resumen

Los atributos scope y headers son la clave para tablas semánticamente ricas y completamente accesibles. Mientras que scope cubre la mayoría de las necesidades de asociación simple, headers permite definir relaciones avanzadas en escenarios complejos. Incorporarlos mejora la experiencia de usuarios con tecnologías de asistencia y cumple con estándares WCAG.