Foros del web, para los que viven de bits

kahlito · 07-feb-2008, 09:34

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:

Cita:

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 · 07-feb-2008, 10:06

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 · 07-feb-2008, 17:45

Hola PatomaS.

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

Muchas gracias

PatomaS · 08-feb-2008, 18:50

Genial :)

Cualquier cosa, por aquí andamos.

Felicidad

elquique · 18-feb-2008, 22:33

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

Fuera de broma va mi voto para el tema ;)

07-feb-2008, 17:45	#3 (permalink)
kahlito Colaborador Fecha de Ingreso: marzo-2003 Ubicación: En el Estrecho y el mar Mensajes: 2.554	Re: Haciendo una tabla accesible teniendo en cuenta la Prioridad 1 Punto 5.2 Hola PatomaS. Tu ejemplo y explicación me han solucionado el problema. Muchas gracias __________________ Portafolio Diseño Web Freelance

08-feb-2008, 18:50	#4 (permalink)
PatomaS Colaborador Fecha de Ingreso: marzo-2004 Ubicación: En alguna otra parte Mensajes: 4.393	Re: Haciendo una tabla accesible teniendo en cuenta la Prioridad 1 Punto 5.2 Genial :) Cualquier cosa, por aquí andamos. Felicidad __________________ De vuelta por aquí, más o menos ¡ hey, hou, hou, hey !

18-feb-2008, 22:33	#5 (permalink)
elquique Fecha de Ingreso: marzo-2004 Ubicación: Florida, Uruguay Mensajes: 1.781	Re: Haciendo una tabla accesible teniendo en cuenta la Prioridad 1 Punto 5.2 Excelente, con esto vuelvo a diseñar todo con tablas !! Fuera de broma va mi voto para el tema ;) __________________ Jorge Oyhenard Blog \| Tutoriales Photoshop

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado