I blocchi Accordion e tabs consentono di esplorare concetti correlati in interazioni ricche di contenuti multimediali. Mostra gli elementi uno per uno o confronta più concetti in un formato pulito e facile da digerire.

1. Inserisci blocchi Accordion e Tabs
2. Aggiungi contenuti e nuovi elementi
3. Passa da un tipo di blocco all'altro
4. Modifica le impostazioni del blocco
5. Accessibilità

Passaggio 1: Inserisci i blocchi Accordion e Tabs

1. Apri un corso Rise 360, quindi modifica una lezione esistente o creane una nuova.
2. Fai clic su Tutti i blocchi nella barra dei collegamenti dei blocchi o sull'icona di inserimento del blocco che appare quando passi il mouse su un confine tra i blocchi.
3. Dalla barra laterale, seleziona la categoria Interattiva, quindi seleziona Accordion o Tabs.

Fase 2: Aggiungere contenuti e nuovi elementi

1. Passa con il mouse sopra il blocco per accedere alla barra degli strumenti di progettazione a sinistra. Fai clic sull'icona Contenuto.
2. Il pannello di modifica si apre sul lato sinistro. Puoi modificare il titolo e il testo di ogni elemento.
   
   Fai clic sull'icona della cartella multimediale per aggiungere immagini o contenuti web. Se i file multimediali sono già caricati, fai clic su Modifica per sostituirli o rimuoverli. Puoi anche ritagliare, aggiungere didascalie e aggiungere tag alt per i file multimediali esistenti. Fai clic sull'icona audio per aggiungere audio AI generato, audio registrato o caricare un file audio.
3. Fai clic sul pulsante Aggiungi elemento nella parte inferiore della barra laterale per aggiungere altri elementi. Puoi aggiungere tutti gli articoli che vuoi! Tieni presente che se aggiungi più di quattro elementi nelle schede, gli allievi dovranno scorrere per vederli tutti.
4. Fai clic sulla X nell'angolo in alto a destra per tornare alla lezione.

Puoi anche modificare il corpo del testo direttamente all'interno dei blocchi accordion e tabs. Tuttavia, puoi modificare solo il testo del titolo, le immagini, i contenuti multimediali e i contenuti web nel pannello di modifica.

Passaggio 3: passare da un tipo di blocco all'altro

Pensate che le vostre linguette starebbero meglio se usate come fisarmoniche o viceversa? Allora cambialo! Passa con il mouse sopra un blocco tabs esistente. Fai clic sul pulsante di selezione del tipo di blocco che appare a sinistra della barra degli strumenti di progettazione e seleziona Accordion o Tabs dal menu.

Questo è tutto! Inverti il processo se vuoi tornare indietro.

Passaggio 4: modifica le impostazioni del blocco

Modifica l'aspetto dei tuoi contenuti sullo schermo posizionando il mouse su un blocco esistente per accedere alla barra degli strumenti di progettazione a sinistra. Fai clic sull'icona Stile per accedere alle opzioni di sfondo del blocco. Hai anche la possibilità di mantenere uno sfondo bianco per gli elementi della fisarmonica e delle schede quando modifichi lo sfondo del blocco. Il menu Formato offre opzioni per modificare il padding e il comportamento della fisarmonica, alternare il posizionamento dell'audio e disabilitare lo zoom per le immagini.

Accessibilità

Le schede e i blocchi a fisarmonica sono progettati per supportare l'accessibilità, ma come autore sei tu a controllare l'accessibilità dei contenuti che aggiungi. Segui i suggerimenti seguenti per aiutare i tuoi contenuti a funzionare bene per tutti gli allievi.

• Aggiungi testo alternativo (testo alternativo) per tutte le immagini significative. Descrivi cosa mostra l'immagine e perché è importante nel contesto, non solo come appare. Contrassegna le immagini puramente decorative in modo che gli screen reader le ignorino (1.1.1 Contenuto non testuale).

• Includi sottotitoli codificati per i video. Assicurati che i sottotitoli siano accurati, sincronizzati con l'audio e includano suoni non vocali pertinenti quando aggiungono significato (1.2.2 Didascalie [Preregistrate]).

• Fornisci descrizioni audio o trascrizioni per video con contenuti visivi importanti. Una trascrizione deve contenere tutti i contenuti parlati e le informazioni visive chiave non incluse nella narrazione (1.2.1 Solo audio e solo video [preregistrato]).

• Controlla il contrasto del testo quando cambi i colori dello sfondo. Cerca di ottenere un rapporto almeno 4, 5:1 per il corpo del testo e 3:1 per il testo di grandi dimensioni (1.4.3 Contrasto [minimo]).

Per ulteriori indicazioni sulla creazione di contenuti accessibili, consulta i suggerimenti sulla progettazione dell'accessibilità nei nostri articoli seguenti:

• Rise 360: Come progettare un corso accessibile

• Indice di accessibilità

Navigazione tramite tastiera

La sezione seguente descrive cosa possono aspettarsi gli allievi che affrontano un corso di formazione con una tastiera utilizzando i blocchi fisarmonica e tabs. Queste informazioni possono anche aiutarti a verificare il comportamento previsto durante i test di accessibilità.

Blocco a fisarmonica

• L'attenzione inizia sulla prima testata per fisarmonica.

• Premi Tab e Shift + Tab per spostarti tra le intestazioni della fisarmonica.

• Quando l'attenzione si concentra sull'intestazione a fisarmonica di un pannello compresso, Invio o Spazio espande il pannello.

• Quando il focus è sull'intestazione a fisarmonica di un pannello espanso, Enter o Space comprimono il pannello.

• Se il pannello a fisarmonica è espanso e contiene contenuti interattivi come un'immagine o un video, premendo Tab mentre ci si trova nell'intestazione si sposta l'attenzione su tali elementi.

Blocco Tabs

• L'attenzione inizia sul primo elemento della scheda.

• Quando l'elemento tab è attivo, usate i tasti freccia sinistra e destra per spostarvi tra le schede.

• Premete Tab per passare al pannello a schede e Shift + Tab per tornare all'elemento di tabulazione.

• Se il focus è sull'ultimo elemento della scheda, premendo il tasto freccia destra si sposta lo stato attivo sulla prima scheda. Se l'attenzione è concentrata sul primo elemento della scheda, premendo il tasto freccia sinistra si sposta l'attenzione sull'ultima scheda.

• Se il pannello a schede contiene contenuti interattivi come un'immagine o un video, premendo Tab mentre ci si trova nel pannello a schede si sposta l'attenzione su tali elementi.

Esperienza con uno screen reader

La sezione seguente descrive cosa possono aspettarsi gli allievi che utilizzano screen reader quando navigano tra i blocchi di fisarmonica e schede. Puoi anche usarlo per verificare il comportamento previsto durante i test di accessibilità.

Blocco a fisarmonica

• L'attenzione inizia sulla prima testata per fisarmonica.

• Lo screen reader annuncia il titolo, lo stato e il livello del titolo, ad esempio «Il pulsante TITLE ha compresso il titolo di livello 2».

• Premi Tab e Shift + Tab per spostarti tra le intestazioni a fisarmonica.

• Quando l'attenzione si concentra sull'intestazione a fisarmonica di un pannello compresso, Invio o Spazio espande il pannello. Lo screen reader annuncia «espanso». Premi il tasto freccia giù per spostare l'attenzione sul contenuto. Lo screen reader annuncia «TITLE + region», seguito dal contenuto. Premi il tasto freccia su per tornare all'intestazione della fisarmonica.

• Quando l'attenzione si concentra sull'intestazione a fisarmonica di un pannello espanso, Invio o Spazio comprimono il pannello. Lo screen reader annuncia «collassato».

• Se il pannello a fisarmonica è espanso e contiene contenuti interattivi come un'immagine o un video, premendo Tab mentre è attivo il contenuto si sposta l'attenzione su tali elementi.

Blocco Tabs

• L'attenzione inizia sul primo elemento della scheda.

• Lo screen reader annuncia «tab control» per indicare che l'allievo ha inserito un blocco tabs, seguito dal titolo del primo elemento della scheda, ad esempio «tab control, scheda TITLE selezionata 1 di 3».

• Quando l'elemento tab è attivo, usate i tasti freccia sinistra e destra per spostarvi tra le schede. Lo screen reader annuncia il titolo e lo stato dell'elemento della scheda, ad esempio «La scheda TITOLO è stata selezionata 2 di 3».

• Premi Tab per passare al pannello a schede e Shift + Tab per tornare all'elemento di tabulazione. Lo screen reader annuncia per primo il titolo dell'elemento della scheda, ad esempio «pagina delle proprietà TITLE» seguito dal contenuto del pannello a schede.

• Se il focus è sull'ultimo elemento della scheda, premendo il tasto freccia destra si sposta lo stato attivo sulla prima scheda. Se l'attenzione è concentrata sul primo elemento della scheda, premendo il tasto freccia sinistra si sposta l'attenzione sull'ultima scheda.

• Se il pannello a schede contiene contenuti interattivi come un'immagine o un video, premendo Tab mentre ci si trova nel pannello a schede si sposta l'attenzione su tali elementi.

Esperienza mobile

La sezione seguente descrive cosa possono aspettarsi gli allievi che utilizzano lettori di schermo mobili quando navigano tra i blocchi Accordion e Tabs. Puoi anche usarlo per verificare il comportamento previsto durante i test di accessibilità.

Blocco per fisarmonica

• L'attenzione inizia sulla prima testata per fisarmonica.

• Tocca due volte per aprire una fisarmonica. Scorri verso destra per passare al contenuto. Scorri verso sinistra per tornare all'intestazione della fisarmonica. Tocca nuovamente due volte per chiuderlo.

• Se un'intestazione è chiusa, scorri verso destra per passare all'intestazione a fisarmonica successiva.

• Se un'intestazione è aperta, scorri verso destra per passare al suo contenuto. Continuando a scorrere verso destra dal contenuto, si sposta l'attenzione sull'intestazione a fisarmonica successiva.

Blocco schede

• L'attenzione inizia sul primo elemento della scheda.

• Scorri verso destra per passare all'elemento della scheda successivo. Tocca due volte per selezionarlo.

• Continua a scorrere verso destra tra gli elementi della scheda per raggiungere il pannello a schede e ascoltarne il contenuto.

• Scorri verso sinistra per tornare a un elemento della scheda.

Il nostro approccio

I blocchi Accordion and tabs sono stati creati seguendo le indicazioni della WAI-ARIA Authoring Practices Guide (APG), in particolare il modello a fisarmonica e il modello a schede.

Questo approccio aiuta gli allievi a:

• Comprendi che l'interazione contiene più sezioni di contenuto

• Spostati tra le sezioni in modo efficiente utilizzando i controlli da tastiera standard

• Scopri quale sezione è attualmente espansa o attiva

Abbiamo condotto test di usabilità con utenti di screen reader e tastiere per contribuire a definire questo approccio. Tuttavia, i modelli di accessibilità possono variare in base al contesto e nessuna soluzione singola funziona in ogni scenario. Continueremo a valutare e migliorare queste esperienze nel tempo sulla base del feedback degli allievo e delle migliori pratiche in evoluzione.