Los bloques de acordeón y pestañas te permiten explorar conceptos relacionados en interacciones ricas en contenido multimedia. Muestra los elementos uno por uno o compara varios conceptos en un formato limpio y fácil de digerir.

1. Inserta bloques de acordeón y pestañas
2. Agrega contenido y nuevos elementos
3. Cambia entre tipos de bloques
4. Modifique la configuración del bloque
5. Accesibilidad

Paso 1: inserta bloques de acordeón y pestañas

1. Abre un curso de Rise 360 y, a continuación, edita una lección existente o crea una nueva.
2. Haz clic en Todos los bloques en la barra de atajos de bloques o en el icono de inserción de bloques que aparece cuando pasas el ratón por encima de un límite entre bloques.
3. En la barra lateral, selecciona la categoría Interactivo y, a continuación, selecciona Acordeón o Tabulaciones.

Paso 2: Añadir contenido y nuevos elementos

1. Pase el ratón sobre el bloque para acceder a la barra de herramientas de diseño de la izquierda. Haz clic en el icono de contenido.
2. El panel de edición se abre en el lado izquierdo. Puede modificar el título y el texto de cada elemento.
   
   Haga clic en el icono de la carpeta multimedia para agregar imágenes o contenido web. Si el contenido multimedia ya está cargado, haga clic en Editar para reemplazarlo o eliminarlo. También puedes recortar, agregar subtítulos y etiquetas alternativas para los medios existentes. Haga clic en el icono de audio para agregar audio generado por IA, audio grabado o cargar un archivo de audio.
3. Haz clic en el botón Añadir artículo en la parte inferior de la barra lateral para agregar elementos adicionales. ¡Puedes agregar tantos artículos como quieras! Tenga en cuenta que si agrega más de cuatro elementos en las pestañas, los alumnos deberán desplazarse para verlos todos.
4. Haga clic en la X de la esquina superior derecha para volver a la lección.

También puedes editar el cuerpo del texto directamente dentro de los bloques de acordeón y pestañas. Sin embargo, solo puedes editar el texto del título, las imágenes, el contenido multimedia y el contenido web en el panel de edición.

Paso 3: Cambiar entre tipos de bloques

¿Crees que tus pestañas se verían mejor como acordeones o viceversa? ¡Pues cámbialo! Coloca el cursor sobre un bloque de pestañas existente. Haz clic en el botón selector de tipo de bloque que aparece a la izquierda de la barra de herramientas de diseño y selecciona Acordeón o Tabulaciones en el menú.

¡Eso es todo! Invierte el proceso si quieres volver a cambiar.

Paso 4: Modifica la configuración del bloque

Modifica el aspecto de tu contenido en la pantalla pasando el ratón sobre un bloque existente para acceder a la barra de herramientas de diseño situada a la izquierda. Haz clic en el icono de estilo para acceder a las opciones de fondo del bloque. También tienes la opción de mantener un fondo blanco para los elementos del acordeón y de las pestañas al modificar el fondo del bloque. El menú Formato ofrece opciones para cambiar el comportamiento del relleno y del acordeón, cambiar la ubicación del audio y deshabilitar el zoom de las imágenes.

Accesibilidad

Las pestañas y los bloques de acordeón están diseñados para dar soporte técnico a la accesibilidad, pero como autor, tú controlas la accesibilidad del contenido que vas a agregar. Sigue los consejos que aparecen a continuación para que tu contenido funcione bien para todos los alumnos.

• Agrega texto alternativo (texto alternativo) a todas las imágenes significativas. Describa lo que muestra la imagen y por qué es importante en su contexto, no solo su aspecto. Marque las imágenes meramente decorativas para que los lectores de pantalla las omitan (1.1.1 Contenido no textual).

• Incluye subtítulos opcionales para los vídeos. Asegúrese de que los subtítulos sean precisos, estén sincronizados con el audio e incluyan sonidos relevantes que no sean del habla al agregar significado (1.2.2 Subtítulos [pregrabados]).

• Proporcione descripciones de audio o transcripciones de los vídeos con contenido visual importante. La transcripción debe incluir todo el contenido hablado y la información visual clave no incluida en la narración (1.2.1 Solo audio y solo vídeo [pregrabado]).

• Compruebe el contraste del texto al cambiar los colores de fondo. Intenta que el texto principal tenga una proporción mínima de 4. 5:1 y si el texto es grande (contraste de 1.4.3 [mínimo]).

Para obtener más información sobre la creación de contenido accesible, consulta los consejos de diseño de accesibilidad de los siguientes artículos:

• Rise 360: Cómo diseñar un curso accesible

• Índice de accesibilidad

Navegación por teclado

En la siguiente sección se describe lo que pueden esperar los alumnos que navegan por un curso con un teclado cuando utilizan bloques de acordeón y tabulaciones. Esta información también puede ayudarte a verificar el comportamiento esperado durante las pruebas de accesibilidad.

Bloque de acordeón

• El foco comienza en la primera cabecera del acordeón.

• Presiona Tab y Shift + Tab para moverte entre los encabezados de acordeón.

• Si el foco está en la cabecera en forma de acordeón de un panel plegado, el panel se expande mediante la tecla Enter o Space.

• Si el foco está en el encabezado en forma de acordeón de un panel expandido, el panel se contrae con la tecla Enter o Space.

• Si el panel de acordeón está expandido y contiene contenido interactivo, como una imagen o un video, al presionar la tecla Tab mientras se encuentra en el encabezado, el foco se mueve hacia esos elementos.

Bloque de pestañas

• El foco comienza en el primer elemento de la pestaña.

• Cuando el elemento de pestaña esté enfocado, use las teclas de flecha izquierda y derecha para moverse entre las pestañas.

• Presiona Tab para ir al panel de pestañas y Shift + Tab para volver al elemento de pestañas.

• Si el foco está en el último elemento de la pestaña, al presionar la tecla de flecha derecha, el foco se mueve a la primera pestaña. Si el foco está en el primer elemento de la pestaña, al presionar la tecla de flecha izquierda, el foco se mueve a la última pestaña.

• Si el panel de pestañas contiene contenido interactivo, como una imagen o un video, al presionar la tecla Tab mientras se está en el panel de pestañas, el foco se dirige a esos elementos.

Experiencia de lector de pantalla

En la siguiente sección se describe lo que pueden esperar los alumnos que utilizan lectores de pantalla al navegar por bloques de acordeón y pestañas. También puedes usarlo para verificar el comportamiento esperado durante las pruebas de accesibilidad.

Bloque de acordeón

• El foco comienza en la primera cabecera del acordeón.

• El lector de pantalla anuncia el título, el estado y el nivel del encabezado, por ejemplo, «Título contraído con el botón TITLE de nivel 2».

• Presiona Tab y Shift + Tab para moverte entre los encabezados del acordeón.

• Si el foco está en la cabecera en forma de acordeón de un panel plegado, el panel se expande mediante la tecla Enter o Space. El lector de pantalla anuncia que está «expandido». Pulse la tecla de flecha hacia abajo para centrar la atención en el contenido. El lector de pantalla indica la región «TÍTULO +», seguida del contenido. Pulse la tecla de flecha hacia arriba para volver al encabezado del acordeón.

• Si el foco está en la cabecera del acordeón de un panel expandido, el panel se contrae mediante la tecla Enter o Space. El lector de pantalla indica que está «colapsado».

• Si el panel de acordeón está expandido y contiene contenido interactivo, como una imagen o un video, al presionar la tecla Tab mientras el foco está en el contenido, el enfoque se mueve hacia esos elementos.

Bloqueo de pestañas

• El foco comienza en el primer elemento de la pestaña.

• El lector de pantalla anuncia «control de pestañas» para indicar que el alumno ha introducido un bloque de pestañas, seguido del título del primer elemento de pestaña, por ejemplo, «control de pestañas, pestaña TITLE seleccionada 1 de 3».

• Cuando el elemento de pestaña esté enfocado, use las teclas de flecha izquierda y derecha para moverse entre las pestañas. El lector de pantalla anuncia el título y el estado del elemento de pestaña, por ejemplo, «La pestaña TÍTULO ha sido seleccionada 2 de 3».

• Presiona Tab para ir al panel de pestañas y Shift + Tab para volver al elemento de pestañas. El lector de pantalla anuncia primero el título del elemento de pestaña, por ejemplo, «página de propiedades del TÍTULO» seguido del contenido del panel de pestañas.

• Si el foco está en el último elemento de la pestaña, al pulsar la tecla de flecha derecha, el foco se mueve a la primera pestaña. Si el foco está en el primer elemento de la pestaña, al presionar la tecla de flecha izquierda, el foco se mueve a la última pestaña.

• Si el panel de pestañas contiene contenido interactivo, como una imagen o un video, al presionar la tecla Tab mientras se está en el panel de pestañas, el foco se dirige a esos elementos.

Experiencia móvil

En la siguiente sección se describe lo que pueden esperar los alumnos que utilizan lectores de pantalla móviles al navegar por bloques de acordeón y pestañas. También puedes usarlo para verificar el comportamiento esperado durante las pruebas de accesibilidad.

Bloque de acordeón

• El foco comienza en la primera cabecera del acordeón.

• Pulsa dos veces para abrir un acordeón. Desliza el dedo hacia la derecha para pasar al contenido. Desliza el dedo hacia la izquierda para volver al encabezado del acordeón. Pulsa dos veces de nuevo para cerrarlo.

• Si un encabezado está cerrado, desliza el dedo hacia la derecha para pasar al siguiente encabezado de acordeón.

• Si un encabezado está abierto, desliza el dedo hacia la derecha para pasar a su contenido. Si sigues deslizando el dedo hacia la derecha desde el contenido, el foco pasa al siguiente encabezado en forma de acordeón.

Bloque de pestañas

• El foco comienza en el primer elemento de la pestaña.

• Desliza el dedo hacia la derecha para pasar al siguiente elemento de la pestaña. Pulsa dos veces para seleccionarlo.

• Sigue deslizando el dedo hacia la derecha por los elementos de la pestaña para llegar al panel de pestañas y escuchar su contenido.

• Desliza el dedo hacia la izquierda para volver a un elemento de pestaña.

Nuestro enfoque

Los bloques de acordeón y pestañas se crearon siguiendo las instrucciones de la Guía de prácticas de autoría (APG) de WAI-ARIA, específicamente el patrón de acordeón y el patrón de pestañas.

Este enfoque ayuda a los alumnos a:

• Comprenda que la interacción contiene varias secciones de contenido

• Muévete de una sección a otra de forma eficiente con los controles de teclado estándar

• Sepa qué sección está actualmente expandida o activa

Hemos realizado pruebas de usabilidad con usuarios de lectores de pantalla y teclados para ayudar a fundamentar este enfoque. Sin embargo, los patrones de accesibilidad pueden variar según el contexto y no hay una solución única que funcione en todos los escenarios. Seguiremos evaluando y mejorando estas experiencias a lo largo del tiempo basándonos en los comentarios de los alumnos y en la evolución de las mejores prácticas.