Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Accesibilidad que contiene a Accesibilidad: ordenación de columnas en tablas

Datos de búsqueda

Accesibilidad: ordenación de columnas en tablas

En las tablas de datos hechas con (X)HTML no es infrecuente encontrarse con que el encabezado de algunas columnas es un enlace que sirve para ordenar los datos en orden ascendente o descendente. Habitualmente se utiliza una imagen para indicar la ordenación que se ha seleccionado, pero, ¿es accesible?

Para que sea accesible el enlace tiene que reunir algunas características:

  • Indicar el tipo de ordenación que se va a realizar al pulsar el enlace.
  • Especificar el tipo de ordenación que hay en este momento si la hubiera.

Las dos informaciones enumeradas anteriormente deberán estar en texto (o en el alt de la imagen).

Un ejemplo de tres encabezados de tabla:

<th><a href="#">Fecha <img src="flecha_ascendente.gif" alt="en orden ascendente, cambiar a orden descendente" /></a></th>

<th><a href="#">Precio <img src="flecha_descendente.gif" alt="en orden descendente, quitar ordenación" /></a></th>

<th><a href="#">Unidades en stock<span class="oculto">, cambiar a orden ascendente</span></a></th>

El class="oculto" debe llevar asociados estilos que hagan desaparecer a la vista su contenido, pero no usando display:none que lo ocultaría a lectores de pantalla.

Esta es una forma de hacerlo accesible, pero seguro que hay otras tanto o más válidas.

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay un comentario a “Accesibilidad: ordenación de columnas en tablas”

soluciones web dice:

Fecha de comentario: 2010/02/12 17:12

Totalmente de acuerdo. Un factor imprescindible para realizar una ordenación usable, es especificar el tipo de orden actual y el que vamos a efectuar si completamos una acción.

Un saludo.

Información del sitio