7.6: Listas clasificables

Última actualización
Guardar como PDF

Page ID: 152645

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

Uno de los tipos más comunes de widgets que presentan barreras para los usuarios de lectores de pantalla son las funciones de arrastrar y soltar. Estos se pueden configurar en una cuadrícula, donde los elementos arrastrables se pueden reorganizar horizontal o verticalmente haciendo clic en un elemento y moviéndolo a una nueva posición en la cuadrícula. Un arrastrar y soltar también puede ser una lista ordenable, donde los elementos de una lista se pueden arrastrar verticalmente para tal vez posicionar los elementos de la lista más importantes cerca de la parte superior de la lista. Para los elementos de arrastrar y soltar que puede encontrarse en la Web hoy en día, la gran mayoría solo funcionan con un mouse, haciéndolos inaccesibles para muchas personas que confían en un teclado para navegar. Aquí, veremos una lista ordenable, y la operabilidad WAI-ARIA y el teclado asociado requeridos para hacer que esa lista se pueda ordenar mientras se usa solo un lector de pantalla y un teclado.

Rol, estados y propiedades utilizados en una lista ordenable

role = “lista”
role = “listitem”
tabindex = “[0 | -1]”
aria-labelledby = “[instrucción div id]”
aria-hidden = “[true | false]”

Lectura sugerida: 4 patrones principales para arrastrar y soltar accesibles

El siguiente JSFiddle presenta un widget típico de lista ordenable. Revisa el marcado JavaScript y HTML, y prueba la lista presentada bajo la pestaña Resultado con ChromeVox para entender cómo funciona sin ninguna característica de accesibilidad agregada. Puedes trabajar en JSFiddle haciendo clic en “Editar en JSFiddle” en la parte superior, a la derecha, copiando el código de Accesibilidad/Wai-Aria que se describe a continuación para corregir la accesibilidad de la barra de menús antes de completar la Actividad 14 en la página que sigue.