Haciendo una tabla accesible teniendo en cuenta la Prioridad 1 Punto 5.2

[kahlito]

Hola, estoy intentando hacer esta tabla lo más accesible posible:

Código HTML:

<table summary="Horarios Academia de Baile">
        <caption>Horarios válidos hasta el 15 de Junio del 2008.</caption>
        <thead>
        <tr>
        <td>&nbsp;</td>
        <th id="lm" class="th2">Lunes y Miércoles</th>
        <th id="mj" class="th2">Martes y Jueves</th>
        <th id="vi" class="th2">Viernes</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        	<th>17:30 a 18:30</th>
            <td headers="lm">Sevillanas -Carmen- Sala 2</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>18:00 a 19:00</th>
            <td headers="lm">Caribeños Iniciación - Carolina- Sala 1</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>18:30 a 19:30</th>
            <td headers="lm">Bailes de Salón Intermedio - Danny- Sala 2</td>
            <td headers="mj">Bailes de Salón Iniciación - Danny- Sala 1 </td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>19:00 a 20:00</th>
            <th id="en" class="th3">Enero 2008</th>
            <td headers="mj">Caribeños Iniciación - Carolina- Sala 2 </td>
             <td>&nbsp;</td>
        </tr>
        <tr>
        	<th>19:30 a 20:30</th>
        	<td headers="lm">Estilo Latino - Rocío- Sala 2 
        	</td>
            <td headers="mj">Danza del Vientre - Inma- Sala 1 </td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <th>20:00 a 21:00</th>
            <td headers="lm">Caribeños Iniciación - Carolina- Sala 1 </td>
            <td headers="mj">Salsalón Intermedio - Danny- Sala 2</td>
            <td headers="vi">Tanto argentino. Graciela Sala 1 - 20:00 a 21:30</td>
        </tr>
        <tr>
            <th>20:30 a 21:30</th>
            <td headers="lm">Salsalón I - Danny- Sala 2 </td>
            <td headers="mj">Caribeños Iniciación - Víctor- Sala 1</td>
            <td headers="vi">Prácticas Libres</td>
        </tr>
        <tr>
            <th>21:00 a 22:00</th>
            <td headers="lm">Caribeños Iniciación - Víctor- Sala 1 </td>
            <td headers="mj">Caribeños Avanzado II - Danny- Sala 2</td>
            <td headers="vi">Prácticas Libres</td>
        </tr>
        <tr>
            <th>21:30 a 22:30</th>
            <td headers="lm">Caribeños Intermedio I - Carolina- Sala 2 </td>
            <td headers="mj">Caribeños Intermedio II - Carolina- Sala 1</td>
            <td headers="vi"> Bachata y Kizomba - Danny- Sala 1</td>
        </tr>
        <tr>
            <th>22:00 a 23:00</th>
            <td headers="lm">Caribeños Avanzado I - Danny- Sala 1</td>
            <td headers="mj">Caribeños Inic.-Intermedio - Danny- Sala 2 </td>
            <td>&nbsp;</td>
        </tr>
            </tbody>
        </table> 

Sin embargo mirando en algunos examinadores (como por ejemplo examinator) me advierte lo siguiente:

Hay 14 celda(s) de encabezados y ninguna de ellas tiene atributos de asociación.

Debe asociarse el contenido de las celdas de datos con su correspondiente celda de encabezado usando atributos como "axis", "headers", "scope", etc. De esta manera, las aplicaciones podrán transmitir la relación entre los distintos elementos de la tabla.

WCAG 5.2: Para las tablas de datos que tengan dos o más niveles lógicos de encabezados de filas o columnas, utilice marcadores para asociar las celdas de datos con las celdas de encabezados. (Prioridad 1)

¿Qué cambiarían, añadirían o quitarían?

[PatomaS]

Hola

En principio la tabla que estás usando es relativamente sencilla, por lo que no necesitas demasiados elementos extra quel a compliquen.

Por otro lado, estás aportando suficiente información para que sea accesible.

Personalmente, no me gusta el uso de headers, prefiero el scope y si nos apegamos al texto del examinator, parece que coincidimos en eso.

Puedes cambiar tu código de esta manera:

Código HTML:

<table summary="Horarios Academia de Baile">
	<caption>Horarios válidos hasta el 15 de Junio del 2008.</caption>
	<thead>
		<tr>
			<td>&nbsp;</td>
			<th id="lm" class="th2" scope="col">Lunes y Miércoles</th>
			<th id="mj" class="th2" scope="col">Martes y Jueves</th>
			<th id="vi" class="th2" scope="col">Viernes</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">17:30 a 18:30</th>
			<td>Sevillanas -Carmen- Sala 2</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<th scope="row">18:00 a 19:00</th>
			<td>Caribeños Iniciación - Carolina- Sala 1</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<th scope="row">18:30 a 19:30</th>
			<td>Bailes de Salón Intermedio - Danny- Sala 2</td>
			<td>Bailes de Salón Iniciación - Danny- Sala 1 </td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<th scope="row">19:00 a 20:00</th>
			<th id="en" class="th3">Enero 2008</th>
			<td>Caribeños Iniciación - Carolina- Sala 2 </td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<th scope="row">19:30 a 20:30</th>
			<td>Estilo Latino - Rocío- Sala 2 
			</td>
			<td>Danza del Vientre - Inma- Sala 1 </td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<th scope="row">20:00 a 21:00</th>
			<td>Caribeños Iniciación - Carolina- Sala 1 </td>
			<td>Salsalón Intermedio - Danny- Sala 2</td>
			<td>Tanto argentino. Graciela Sala 1 - 20:00 a 21:30</td>
		</tr>
		<tr>
			<th scope="row">20:30 a 21:30</th>
			<td>Salsalón I - Danny- Sala 2 </td>
			<td>Caribeños Iniciación - Víctor- Sala 1</td>
			<td>Prácticas Libres</td>
		</tr>
		<tr>
			<th scope="row">21:00 a 22:00</th>
			<td>Caribeños Iniciación - Víctor- Sala 1 </td>
			<td>Caribeños Avanzado II - Danny- Sala 2</td>
			<td>Prácticas Libres</td>
		</tr>
		<tr>
			<th scope="row">21:30 a 22:30</th>
			<td>Caribeños Intermedio I - Carolina- Sala 2 </td>
			<td>Caribeños Intermedio II - Carolina- Sala 1</td>
			<td> Bachata y Kizomba - Danny- Sala 1</td>
		</tr>
		<tr>
			<th scope="row">22:00 a 23:00</th>
			<td>Caribeños Avanzado I - Danny- Sala 1</td>
			<td>Caribeños Inic.-Intermedio - Danny- Sala 2 </td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table> 

Si quisieras aportar aun más información, puedes hacer uso de los headers y el scope, aunque creo que es redundante en este caso. También puedes agregar el summary

Felicidad

[kahlito]

Hola PatomaS.

Tu ejemplo y explicación me han solucionado el problema.

Muchas gracias

[PatomaS]

Genial :)

Cualquier cosa, por aquí andamos.

Felicidad

[elquique]

Excelente, con esto vuelvo a diseñar todo con tablas !!

Fuera de broma va mi voto para el tema ;)