Saltar al contenido principal
LibreTexts Español

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

    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)”
    Lectura sugerida: El Tutorial de Carrusel del W3C proporciona detalles adicionales sobre la construcción de carruseles accesibles.

    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.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta 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.

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

    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.

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

    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.

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

    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.

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

    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.

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

    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.

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

    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.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta 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.

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

    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.

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

    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

    Miniatura del elemento incrustado “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


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