6.8: Carruseles
- Page ID
- 152603
\( \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}\)Los carruseles se utilizan típicamente para presentar una serie de paneles o imágenes que giran a una frecuencia particular.
Funciones, estados y propiedades de WAI-ARIA utilizados en carruseles
- role="región”
- aria-live="educado”
- tabindex="0"
- aria-describedby= "[id de div con instrucciones]”
- aria-oculta= "(verdadero|falso)”
El siguiente JSFiddle presenta un típico widget de carrusel. Revise el marcado JavaScript y HTML. Pruebe el carrusel presentado bajo la pestaña Resultado con ChromeVox para entender cómo funciona sin que se agreguen características de accesibilidad. Puedes trabajar en JSFiddle haciendo clic en “Editar en JSFiddle”. Copia el código de Accesibilidad/Wai-aria que se describe a continuación para corregir la accesibilidad del acordeón antes de completar la Actividad 11 en la siguiente página.
Aunque no siempre se requieren instrucciones, pueden ser útiles para los usuarios de lectores de pantalla cuando hay navegación por teclado no estándar. En nuestro caso, agregaremos algunas palabras y las asignaremos a la variable “instructions” en la configuración predeterminada de la función init () para el carrusel. Las instrucciones serán renderizadas en su propio <div>y referenciadas con aria-describedby un poco más adelante en el código.
Definiremos algunos atributos cuando se inicialice el carrusel: darle un role="region” para agregarlo a los hitos, agregar un tabindex para que sea enfocable por teclado, y hacer referencia al ID de las instrucciones <div>con aria-describedby. Agregue la operabilidad del teclado con .on ('keydown') y una referencia a la función OnKeyDown, que se describe a continuación.
Los usuarios de lectores de pantalla no necesitarán los controles Siguiente/Anterior, así que escóndalos. Ellos estarán usando las teclas de flecha en su lugar, definidas en la función OnKeyDown más abajo.
Ocultar imágenes de lectores de pantalla. Observe que el texto alt para las imágenes se define en el HTML pero se deja vacío por lo que no se lee en este caso. Los lectores de pantalla leerán los figcaptions.
Agregue instrucciones del lector de pantalla generando un <div>que contenga el texto de instrucción definido anteriormente y oculte el <div>por defecto. Las instrucciones se leen cuando el carrusel recibe foco, y el atributo aria-describedby se agrega dinámicamente para hacer referencia a las instrucciones.
Agregue un atributo aria-live a la función StopTimer. Establezca su valor en cortés para que la actualización de contenido en la región en vivo anuncie cuando un lector de pantalla no esté leyendo en otra parte de la página. El contenido del panel de carrusel visible se lee automáticamente cuando está enfocado, navegando manualmente entre paneles con las teclas de flecha.
Elimine la región activa cuando se elimine el enfoque en el carrusel en la función StartTimer. Al hacerlo, la región en vivo deja de leer cuando el temporizador se reactiva onblur, y no interfiere con la lectura del lector de pantalla en otra parte de la página.
Oculta la diapositiva activa de los lectores de pantalla con aria-hidden="true”. Luego, haz que la siguiente diapositiva sea visible para los lectores de pantalla con aria-hidden="false” en la función GoToSlide.
Adición de operabilidad del teclado
Agregue operaciones de teclado para el carrusel, tirando eventos de teclado de ik_utils.js para usar las flechas Izquierda y Derecha para moverse entre paneles en el carrusel, y la tecla Esc para salir del carrusel y reanudar la rotación automática.
Carrusel accesible en acción
Mira el siguiente video para ver cómo ChromeVox interactúa con un carrusel. El carrusel gira automáticamente cuando el foco está en otra parte de la página. Cuando recibe el foco, la rotación se detiene y se leen las instrucciones de navegación. Las teclas de flecha Izquierda y Derecha se utilizan para moverse manualmente entre los paneles del carrusel mientras tiene foco. El contenido de cada panel se lee a través de una región en vivo, se agrega dinámicamente al contenedor principal <div>cuando el carrusel tiene foco. Al usar la tecla Tab mientras el carrusel tiene foco, se envía el enfoque a cualquier elemento enfocable dentro del panel que esté a la vista, un enlace a la persona que compartió la foto en este caso. Apunta a que el carrusel que actualices en la actividad en la siguiente página opere y anuncie como el del video.
Video: Carrusel 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=362