¿Cuál es el valor de ámbito correcto que se debe utilizar para una celda de tabla HTML <th> que abarca varias columnas?

Question

Supongamos que tiene una tabla HTML, con una celda <th> que abarca varias columnas, p.

<table> 
    <tr> 
     <th colspan="3" scope="?">Scores</th> 
     <!-- ...more headings here... --> 
    </tr> 
    <tr> 
     <th scope="col">English</th> 
     <th scope="col">Maths</th> 
     <th scope="col">Science</th> 
     <!-- ...more sub-headings here... --> 
    </tr> 
    <tr> 
     <td>12</td> 
     <td>16</td> 
     <td>20</td> 
     <!-- ...more cells here... --> 
    </tr> 
</table> 

¿Cuál es el valor correcto para el atributo de alcance para la celda del encabezado de expansión? col parece incorrecto ya que encabeza varias columnas, pero colgroup no parece correcto si realmente no tengo ninguna etiqueta colgroup.

Answer 1

Según la segunda tabla de ejemplo en la especificación de HTML, es colgroup, a pesar de la falta de etiquetas colgroup.

http://www.w3.org/TR/html4/struct/tables.html#h-11.4.1

Answer 2

El WebAIM (Web Accessibility in Mind) grupo tiene un gran artículo sobre creating accessible data tables. En general, recomiendan evitar filas o columnas distribuidas, ya que los lectores de pantalla no pueden interpretar el marcado de manera confiable.

A menos que se eviten por completo las columnas cruzadas, he tenido mucha suerte usando los atributos id/headers en combinación con el atributo scope. Aunque el marcado es más detallado, esto parece simplificar las cosas para JAWS, y como resultado tiene menos problemas para interpretar los datos.

Esto es lo que su ejemplo se vería con id/encabezados:

<table> 
    <tr> 
     <th id="scores" colspan="3">Scores</th> 
    </tr> 
    <tr> 
     <th id="english" scope="col">English</th> 
     <th id="maths" scope="col">Maths</th> 
     <th id="science" scope="col">Science</th> 
    </tr> 
    <tr> 
     <td headers="scores english">12</td> 
     <td headers="scores maths">16</td> 
     <td headers="scores science">20</td> 
    </tr> 
</table> 

Answer 3

Tal vez la función de subtítulos pueden ser más adecuados para usted ...

<table> 
    <caption>Scores</caption> 
    <thead> 
    <tr> 
     <th scope="col">English</th> 
     <th scope="col">Maths</th> 
     <th scope="col">Science</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>12</td> 
     <td>16</td> 
     <td>20</td> 
    </tr> 
    </tbody> 
</table> 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption