Saltar al contenido principal
LibreTexts Español

7.6: Listas clasificables

  • 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}}\)

    \( \newcommand{\vectorA}[1]{\vec{#1}}      % arrow\)

    \( \newcommand{\vectorAt}[1]{\vec{\text{#1}}}      % arrow\)

    \( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vectorC}[1]{\textbf{#1}} \)

    \( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)

    \( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)

    \( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)

    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)

    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.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Como de costumbre, cree instrucciones sobre el uso de la lista ordenable con un teclado. En este caso, también queremos determinar qué tecla modificadora incluir en las instrucciones. Para Mac, será la tecla Comando, de lo contrario será la tecla Control. Aquí, los comandos estándar de teclas de acceso también funcionarán como modificadores y potencialmente también se pueden describir (por ejemplo, Ctrl + Alt en Mac o Ctrl en Windows).

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Asigne un role="list” redundante a la ul de apertura, haga que el teclado ul sea enfocable y adjunte la instrucción con aria-labelledby= "[instrucción div id]” para que los detalles de navegación del teclado se anuncien cuando la lista recibe inicialmente el enfoque mientras se usa una pantalla lector.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Dentro de la función init (), genere el <div>que contendrá las instrucciones, y agregue aria-hidden="true” para ocultarlo de los lectores de pantalla por defecto.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    En la sección items de la función init (), donde se define arrastrable para cada elemento de la lista, agregue un role="listitem” redundante y genere una etiqueta para cada elemento que describa la posición actual del elemento de la lista y que ese elemento de lista sea “móvil”. Finalmente, establezca tabindex="0" en el primer elemento de la lista, y tabindex=” -1" en los otros elementos de la lista para garantizar que un elemento de la lista sea enfocable por defecto.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Donde los atributos arrastrables se definen cerca del final de la función init (), adjunte una referencia keydown a la función onKeyDown () para que la lista sea arrastrable con un teclado.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    En la función ResetNumeración (), actualice la etiqueta de los elementos movidos para reflejar su nueva posición en la lista usando aria-label = “[nueva posición]”.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Adición de operabilidad del teclado

    La operación del teclado para una lista ordenable de arrastrar y soltar es relativamente simple, en comparación con la barra de menú y el menú de árbol. Esencialmente, solo se necesitan las teclas de flecha Arriba y Abajo. Las teclas modificadoras estándar del sistema operativo, normalmente utilizadas con tabindex (por ejemplo, Crtl + Alt, Alt o Ctrl), funcionan como teclas modificadoras cuando las usan además de las flechas Arriba y Abajo para agarrar, arrastrar y soltar un elemento de la lista.

    La función onKeyDown () para la lista ordenable que se presenta a continuación, define solo la operabilidad de las teclas de flecha arriba y abajo, junto con un tabindex errante. El W3C aún no ha creado una práctica recomendada para crear la interacción con el teclado para elementos de arrastrar y soltar.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Lista ordenable en acción

    Mire el siguiente video que muestra a ChromeVox interactuando con una lista ordenable. La tecla Tab se utiliza para navegar a la lista y salir de la lista. Las flechas Arriba y Abajo se utilizan para moverse entre los elementos de la lista. En una Mac, la tecla Comando más la flecha Arriba o Abajo, selecciona un elemento de la lista y lo mueve a una nueva ubicación. En las ventanas se usa la tecla Ctrl en lugar de Comando, junto con las teclas de flecha Arriba o Abajo para mover los elementos de la lista. Apunta a que opere la lista ordenable que actualices en la actividad en la página siguiente y se anuncie como la del video.

    Video: Lista Clasificable Accesible

    Miniaturas del elemento incrustado “Lista clasificable accesible”

    Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/wafd/?p=379


    This page titled 7.6: Listas clasificables is shared under a CC BY-SA license and was authored, remixed, and/or curated by Digital Education Strategies, The Chang School.