Tabla datos accesible con ordenación y paginación

3
31961

Tabla de datos accesible
con ordenación y paginación

0. Índice de contenidos.

1. Introducción

En la
charla que tuvimos
recientemente en Autentia sobre accesibilidad web se habló
de tres
conceptos fundamentales a la hora de implementar una web accesible:

  1. Implementación de la
    vista en tres capas:
    esto es la separación del
    código correspondiente a la vista en: contenido (XHTML),
    estilo (CSS) y funcionalidad (Javascript).

  2. Progressive enhancement:
    esto es el concepto de mejora progresiva, es decir, primero tenemos que
    tener toda la información codificada en formato XHTML 1.0
    Strict y debemos estar seguro de que pasa los validadores de la W3C y
    que cumple las pautas de accesibilidad, después ya nos
    preocuparemos de añadirle el estilo (CSS) y la funcionalidad
    (Javascript).

  3. Javascript no obstrusivo:
    esto es utilizar Javascript para proporcionar un valor
    añadido a las personas que dispongan de él, pero
    que no impida el acceso a la información a las personas que
    no lo tienen.

Pues
bien, en este
tutorial lo que se pretende es crear un pequeño ejemplo que
cumpla las
premisas anteriores, y que se ajuste a un problema muy común
en la
mayoría de proyectos web que es el de paginar y ordenar una
tabla de datos.

2. Entorno

El tutorial está escrito usando el siguiente
entorno:

  • Hardware: Portátil Asus G50Vseries (Core Duo
    P8600 2.4GHz, 4GB RAM, 320 GB HD).
  • Sistema operativo: Windows Vista Ultimate.
  • Mozilla Firefox/3.0.6 

3. Creamos el contenido XHTML

Como ya
hemos comentado,
tenemos que crear un contenido que sea válido utilizando la
gramática XHTML 1.0 Strict y que cumpla con las pautas de
accesibilidad. En este caso vamos a crear una tabla de datos, por lo
que los puntos de verificación que debemos cumplir son:

  • (5.1) En las
    tablas de datos, identifique los encabezamientos de fila y columna
    [Prioridad 1]:
    esto es utilizar <td> para
    identificar las celdas de datos y <th> para los
    encabezamientos; este punto ya lo cumplimos.
  • (5.2) Para
    las tablas de datos que tienen dos o más niveles
    lógicos de encabezamiento de fila o columna, utilice
    marcadores para asociar las celdas de encabezamiento y las celdas de
    datos [Prioridad 1]:
    esto es utilizar
    <thead>, <tfoot> y <tbody>
    para agrupar filas, <col> y <colgroup> para
    agrupar columnas y los atributos “axis”,
    “scope”, y “headers” para
    describir relaciones más complejas entre los datos; nuestra
    tabla no es muy compleja aún así utilizamos las
    etiquetas <thead> y <tbody>.
  • (5.3) No
    utilice tablas para maquetar [Prioridad 2]:
    este punto no
    aplica, ya que la tabla la utilizamos para visualizar datos.
  • (5.4) Si se
    utiliza una tabla para maquetar, no utilice marcadores estructurales
    para realizar un efecto visual de formato [Prioridad 2]:
    este
    punto no aplica.
  • (5.5)
    Proporcione resumenes de las tablas [Prioridad 3]:
    esto es
    establecer el atributo “summary” del elemento
    <table>.
  • (5.6)
    Proporcione abreviaturas para las etiquetas de encabezamiento
    [Prioridad 3]:
    esto es establecer el atributo
    “abbr” del elemento <th>

Atendiendo
a estas
premisas nuestro contenido debería de ser algo muy parecido
a esto:

Si comprobamos este código contra el validador de
la W3C veremos que es un código válido y que
cumple con los puntos de verificación vistos anteriormente.
El aspecto sería este:

4. Añadimos la funcionalidad

Ahora
es el momento de introducir la funcionalidad que aporte un valor
añadido a nuestra tabla, esto es que se capaz de paginar y
ordenar
por un campo cualquiera.

Para
ello vamos a hacer uso de YUI que es una librería Javascript
desarrollada por el equipo de YAHOO y que tiene como
característica
pincipal que ha tenido en cuenta el concepto de “progressive
enhancement” para su desarrollo.

Otra
de las ventajas que presenta es que sus librerías
están publicadas
en Internet, por tanto no tenemos porque descargar ningún
fichero
sólo referenciarlo. Es obvio que esta no es la
situación ideal en
entornos de producción por lo que nos podemos descargar la
librería
desde la dirección http://developer.yahoo.com/yui/.

Entonces
lo que vamos a hacer es modificar nuestro código XHTML para
añadir
en la cabecera, esto es entre las etiquetas <head> y
</head>, las referencias a las librerías necesarias, que
en el caso
de una
tabla con ordenación y paginación son:

Como
se puede apreciar también se incluyen unas CSS necesarias
para la
correcta visualización de la tabla, pero que podremos
sobreescribir
como veremos en el apartado de añadir estilo. Lo que si es
importante, para aplicar estilos con YUI es añadir la clase
“yui-skin-sam” al <body> del
contenido HTML.

La
última referencia Javascript establece el fichero .js que va
a
contener nuestra funcionalidad específica , donde se va a
hacer uso
del resto de librerías. El código de este fichero
es el siguiente:

Para
comprender mejor este código ir a la
documentación de YUI que se
encuentra en http://developer.yahoo.com/yui/datatable/.
Después de
aplicar la funcionalidad este es el aspecto de la tabla:

Esta
tabla ya es perfectamente funcional, gracias a Javascript podemos
ordenar cada uno de los campos y paginar por el número de
registros
que establezcamos en el configuración del elemento Paginator
del
Datatable.

Pero
y ahora qué ocurre si yo deshabilito el Javascript de mi
navegador,
pues nada, la tabla se muestra y se interpreta tal cual esta en el
contenido HTML.

5. Añadimos el estilo

Por
último, podemos centrar esfuerzos en modificar el estilo.
Para ello,
podemos crear un nuevo fichero .css en el que ir introduciendo las
variaciones que creamos oportunas. Para ver que clases maneja YUI lo
mejor es abrir alguno de los ficheros .css que importabamos en el
código anterior y modificar alguna de sus propiedades. Por
ejemplo,
si quisiéramos que el color de los textos de la tabla fuera
en rojo,
el fondo de la primera columna amarillo y el de la última
rojo, este
sería el código CSS necesario:

Y
el resultado es algo tan espantoso como esto:

Sólo
espero que vosotros tengáis más estilo que yo 😉

6. Conclusiones

Como
hemos podido ver, tampoco es tan difícil hacer las cosas
accesibles,
sobre todo si contamos con una librería como YUI, que es de
las
pocas que tienen en cuenta el “progessive
enhancement”.
Actualmente, la última versión de esta
librería es la 2.7 que va a
ser la última de lo que ellos llaman YUI 2, para pasar a YUI
3,
donde por lo que he podido ver van a empezar de cero haciendo
especial hincapié en la accesibilidad, así que
esto promete.

Este
tutorial no pretende explicar la librería YUI sino aplicarla
en un
caso particular. Si queréis que inicie una serie de
tutoriales para
hablar específicamente de esta librería y de
todas sus bondades
como por ejemplo la selección de filas de la tabla o la
edición en
linea de las celdas o cómo crear un campo que se
autocompleta a
medida que vas escribiendo, sólo tenéis que
escribir a
raguilera@autentia.com.
Si veo que hay suficiente
gente que muestra
interés por la librería, hablaré de
ella en próximos tutoriales.

Para
comunicarme cualquier problema o sugerencia de mejora utilizad la
zona de comentarios, de este modo todo el mundo se podrá
aprovechar
de las respuestas.

Saludos

3 Comentarios

  1. [Nova] Hola! He seguido los pasos del tutorial pero no funciona, sale solamente la tabla simple. Ya verifiqué mi conexión a internet, y la clase \\\»yui-skin-sam\\\» como atributo de la etiqueta body, pero sigue sin funcionar… Que me puede estar faltando?

Dejar respuesta

Please enter your comment!
Please enter your name here