5.2: Botones de alternar (Ejemplo de actividad)
- Page ID
- 152617
\( \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}\)El resto de la instrucción aquí es práctica. Tomarás widgets inaccesibles, como el ejemplo de los botones de alternancia que se describen aquí, y los harás accesibles agregando WAI-ARIA y operabilidad del teclado apropiados. El widget de botones de alternancia que se muestra aquí se proporciona como ejemplo para los diez widgets en los que trabajarás en las siguientes tres unidades, describiendo los Elementos de Actividad que encontrarás en cada ejercicio.
Roles, estados y propiedades para botones de alternar
- role=” botón”
- tabindex=” 0″
- aria-label=” [nombre del botón]”
- aria-presionado=” [verdadero|falso]”
Elemento de actividad: Cada widget tendrá una versión inaccesible de JSFiddle proporcionada, como la que aparece a continuación. Puede examinar el JavaScript y el HTML para observar cómo se creó el widget. En la pestaña Resultado, vea y pruebe el widget para ver cómo funciona. También se proporciona CSS, aunque no trabajarás con CSS como parte de las actividades. En el JSFiddle aquí, los elementos de accesibilidad están incluidos pero comentados para que puedas ver cómo se han aplicado los fragmentos de código a continuación. En las actividades que siguen, los elementos de accesibilidad no estarán presentes. Tu tarea será aplicar los fragmentos de código tú mismo para hacer accesible la versión inaccesible proporcionada en el archivo de actividad.
En la parte superior derecha, puede optar por “Editar en JSFiddle” y probar los fragmentos de código que se proporcionarán a continuación, para comprender cómo agregan accesibilidad al widget. Puede comenzar descomentando los elementos de accesibilidad para los botones de alternancia y probando la versión resultante con ChromeVox.
El siguiente JSFiddle presenta un típico botón de alternar. Revise el marcado JavaScript y HTML. Pruebe los botones presentes en la pestaña Resultado con ChromeVox para entender cómo funciona sin agregar ninguna característica de accesibilidad (si funciona). Puedes trabajar en el propio JSFiddle haciendo clic en “Editar en JSFiddle” y copiando el código de Accesibilidad/Wai-aria que se describe a continuación para corregir la accesibilidad de los botones de alternancia, antes de completar la Actividad en la página que sigue (no hay actividad que siga en este caso de ejemplo). Saltar JSFiddle
Agrega un tabindex a cada botón para que sean enfocables por teclado, define el role="button”, y agrega una etiqueta con aria-label= "[nombre del botón]” y establece el estado predeterminado en “no presionado” con aria-pressed="false”.
Agregue acceso de teclado equivalente donde se proporciona acceso del mouse, haciendo referencia a la función onActivate (), descrita a continuación, con jQuery .on ('keydown').
Establece aria-pressed= "[true|false]” para los botones cuando se activan o desactivan para anunciar el estado del botón a los lectores de pantalla.
Adición de operabilidad del teclado
El acceso al teclado para los botones es bastante simple, sin que sea necesario definir eventos especiales de pulsación de teclas.
Interacción del teclado para botones de alternar
Cuando el botón tiene foco:
- Espacio: Activa el botón.
- Entrar: Activa el botón.
- Después de la activación del botón, el enfoque se establece dependiendo del tipo de acción que realice el botón. Por ejemplo:
- Si al activar el botón se abre un diálogo, el foco se mueve dentro del diálogo (ver patrón de diálogo).
- Si al activar el botón se cierra un diálogo, el enfoque suele volver al botón que abrió el diálogo a menos que la función realizada en el contexto del diálogo conduzca lógicamente a un elemento diferente. Por ejemplo, activar un botón de cancelación en un diálogo devuelve el foco al botón que abrió el diálogo. No obstante, si el diálogo estuviera confirmando la acción de eliminar la página desde la que se abrió, el foco se movería lógicamente a un nuevo contexto.
- Si activar el botón no descarta el contexto actual, entonces el enfoque generalmente permanece en el botón después de la activación, por ejemplo, un botón Aplicar o Recalcular.
- Si la acción del botón indica un cambio de contexto, como pasar al siguiente paso en un asistente o agregar otros criterios de búsqueda, a menudo es apropiado mover el enfoque al punto de inicio de esa acción.
- Si el botón se activa con una tecla de método abreviado, el enfoque generalmente permanece en el contexto desde el que se activó la tecla de método abreviado. Por ejemplo, si Alt + U se asignara a un botón “Arriba” que mueve el elemento actualmente enfocado en una lista una posición más alta en la lista, presionar Alt + U cuando el foco está en la lista no movería el foco de la lista.
Fuente: W3C WAI-ARIA 1.1 Prácticas de autoría
No se requiere ninguna interacción adicional con el teclado para los botones de alternar más allá de la barra espaciadora estándar y la tecla Enter definidas en el archivo ik_utils.js. La referencia a estos eventos clave se agrega a la función onActivate ().
Botones de alternancia accesibles en acción
Inicialmente se accede a los botones con la tecla Tab, y la tecla Tab se usa para moverse entre botones. La barra espaciadora o las teclas Enter se utilizan para activar y desactivar botones. Apunta a tener el widget que editas en la función de actividad asociada como el que se presenta en el video (no hay actividad asociada para este ejemplo).
Video: Botones de palanca accesibles
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=324