Cookies en Outbook

Esta web utiliza cookies propias para ofrecer una mejor experiencia. Al navegar, aceptas dichas cookies.
  • Más información acerca de las cookies

Outbook

UI-Dev & more

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.

Publicado

Categorías: