aria-sort

Cuándo utilizarlo

En role="columnheader" o role="rowheader" (o en un <th> nativo que actúe como tal) dentro de una cuadrícula o tabla que el usuario puede reordenar. El atributo comunica a las tecnologías de asistencia tanto que la columna es ordenable como en qué dirección está ordenada actualmente, de modo que el usuario de lector de pantalla escucha «Apellido, ordenado de forma ascendente» antes de recorrer la columna.

Si la columna no es ordenable, no se debe añadir aria-sort. El atributo es el contrato que indica «esto puede cambiarse».

Cómo se comporta

Acepta cuatro valores de token:

• "ascending" — A→Z, 0→9, del más antiguo al más reciente.
• "descending" — Z→A, 9→0, del más reciente al más antiguo.
• "none" — la columna es ordenable, pero en este momento la ordenación no está activa en ella. Es el estado predeterminado cuando otra columna toma el control.
• "other" — la columna es ordenable y está ordenada por una regla no alfabética ni numérica que no encaja en ascendente/descendente (por ejemplo, una puntuación de relevancia personalizada). Poco frecuente en la práctica.

Solo un encabezado por tabla debe llevar "ascending", "descending" o "other" a la vez. Cuando el usuario cambia la ordenación, se asigna el nuevo valor a la nueva columna y se restablece la columna anterior a "none" (o se elimina el atributo).

aria-sort es únicamente un anuncio. El comportamiento real de ordenación — el manejador de clic, la activación por teclado, el reordenamiento de filas — es responsabilidad del desarrollador. Las tecnologías de asistencia no ordenan la tabla.

Errores frecuentes

• Actualizar el indicador visual de ordenación (icono de flecha) pero olvidar actualizar aria-sort. Los usuarios de lector de pantalla escuchan una dirección incorrecta.
• Dejar dos columnas con aria-sort="ascending" tras hacer clic en un nuevo encabezado. La primera columna ya no controla la ordenación, pero sigue reclamando ese estado.
• Colocar aria-sort en una columna no ordenable. Las tecnologías de asistencia prometen un comportamiento de ordenación que el usuario no puede activar.
• Usar un valor fuera de los cuatro tokens permitidos — aria-sort="asc" no es válido y se ignora.
• Olvidar que el encabezado debe ser activable por teclado. aria-sort no convierte el encabezado de columna en enfocable; eso es responsabilidad del desarrollador.
• Tratar aria-sort como fuente de verdad en lugar de derivarlo del estado de ordenación. Si un re-renderizado elimina el atributo, el anuncio desaparece.

Ejemplo

<table>
  <thead>
    <tr>
      <th
        scope="col"
        aria-sort="ascending"
      >
        <button type="button">Apellido</button>
      </th>
      <th scope="col" aria-sort="none">
        <button type="button">Nombre</button>
      </th>
      <th scope="col">Correo electrónico</th>
    </tr>
  </thead>
  <tbody>
    <!-- … filas ordenadas por Apellido de forma ascendente -->
  </tbody>
</table>