Ver Mensaje Individual
  #2 (permalink)  
Antiguo 05/02/2008, 04:14
feral
 
Fecha de Ingreso: septiembre-2007
Mensajes: 184
Antigüedad: 16 años, 7 meses
Puntos: 4
Re: Tablas - Diferencia de etiquetas

El atributo scope puede tener cuatro valores row o col y rowgroup o colgroup solo se usa con etiquetas <th> o <td>.

En realidad es solo un atributo para personas con discapacidades visuales (ciegas), que usan navegadores no visuales.
Cuando una persona ciega se encuentra una tabla mientras navega con los navegadores especiales de voz o traductores a braile se encuentra con un problema, es un autentico calvario que se enteren como esta la informacion estructurada y que tenga sentido algo.

Para ello existen una serie de atributos que les facilitan la tarea de comprender como esta estructurada la informacion.

Imaginate que tienes una tabla en la que se guarda informacion sobre las estadisticas de un partido de baloncesto.
http://www.nba.com/games/20080204/PHIATL/boxscore.html

Si te fijas en esa tabla hay un listado de nombres de jugadores con un monton de estadisticas individuales para cada uno de ellos.

Cuando un ciego con navegadores no visuales se posiciona en una celda no sabe en que direccion esta la informacion relacionada o cuales son los campos importantes y sus datos asociados.

¿Cuales serian los campos importantes en esa tabla? Pues los nombres de los jugadores y cada estadistica individual (rebotes, porcentaje de tiros) y los datos asociados serian las estadisticas individuales de cada jugador.

Por lo tanto en esa tabla habria que poner celdas de cabecera <th> a los campos importantes de nombres de jugadores y tambien a las de las estadisticas, las demas celdas serian <td> y recogerian los datos de cada estadistica de cada jugador.

Esta diferenciacion de th y td le indica a una persona ciega cuales son los campos importantes y cuales son datos asociados.

Entonces entra en juego el atributo scope que es a donde queriamos llegar.
La persona ciega ahora conoce mas o menos la estructura general de los datos, pero para facilitar aun mas esa lectura le proporcionamos el atributo scope que aunque se puede usar con td o th, tiene mucho mas sentido usarlo solo con th.

Vayamos a los th de los jugadores, cada jugador esta en una celda th y los datos estadisticos de cada jugador estan a su derecha formando una linea en diferentes celdad td.
Por lo tanto el scope para el th del jugador es ROW (linea), porque los datos asociados a ese th estan formando una linea a su derecha.

Ahora vamos a los th de los datos estadisticos, siguendo el ejemplo de la tabla el primero seria POS (ver link,que es la posicion en la que juega cada jugador ), como vemos los datos estan hacia abajo formando una columna, por lo tanto el scope seria COL (columna).

Todo esto ayuda a la persona ciega a saber que existe un jugador con unos datos asociados que estan en las celdas consecutivas hacia la derecha, en linea y estos datos pertenecen a un tipo de dato concreto (posicion, rebotes..) que estan asociados a su vez por columnas.

Por lo tanto scope marca una relacion entre cabeceras y sus datos para navagedores lectores y dispositivos de braile para personas con dificultad visual o ciegas. Estas personas leen las celdas de una en una siguiendo un proceso de linearizacion.
Para facilarles la tarea haremos buen uso de las cabeceras th, del atributo scope, y del atributo summary de table y del atributo abr.

Y para tablas que segun su estructura compleja sea dificil aplicar scope correctamente usaremos atributos id y headers, pero esta ultima tecnica es un poco liosa, asi que recomiendo mantener las tablas simples, claras y bien estructuradas, y por supuesto solo usarlas para presentar datos tabulares. Por lo tanto no hace falta decir que tablas usadas para la presentacion, generalmente anidadas y no linerializadas rompen la accesibilidad del sitio de una manera radical para toda persona con carencia visual a parte de ser una forma de tratar las tablas obsoleta y no estandar ya que el xhtml tiene que mantenerse ajeno a todo dato de presentacion (para eso esta el CSS).

Si no usas CSS y un marcado xhtml estandar, los navegadores formatean los th generalmente en negrita y centrandolos y obvian los scope, pero si buscas un codigo de calidad toda informacion de estilo tiene que ser tratada mediante CSS.

*Obviamente si se mira el codigo del ejemplo que te he puesto en el link rompe las reglas de accesibilidad por muy NBA que sean pero solo ha sido a modo de ejemplo para entender el proceso.

Espero que te haya servido la explicacion aunque quizas la he hecho algo engorrosa de entender.

Última edición por feral; 05/02/2008 a las 04:41