Met accordeon- en tabblokken kun je verwante concepten verkennen in mediarijke interacties. Breng items één voor één onder de aandacht of vergelijk meerdere concepten in een overzichtelijke, gemakkelijk verteerbare indeling.

1. Accordeon- en tabblokken invoegen
2. Inhoud en nieuwe items toevoegen
3. Tussen bloktypen schakelen
4. De blokinstellingen aanpassen
5. Toegankelijkheid

Stap 1: Accordeon- en tabsblokken invoegen

1. Open een Rise 360-cursus en bewerk vervolgens een bestaande les of maak een nieuwe les.
2. Klik op Alle blokken in de sneltoetsbalk van de blokken of op het pictogram voor het invoegen van blokken dat verschijnt wanneer u met de muis over een grens tussen blokken beweegt.
3. Selecteer in de zijbalk de categorie Interactief en selecteer vervolgens Accordeon of Tabs.

Stap 2: inhoud en nieuwe items toevoegen

1. Zweven over het blok om toegang te krijgen tot de ontwerpwerkbalk aan de linkerkant. Klik op het pictogram Inhoud.
2. Het bewerkingspaneel wordt aan de linkerkant geopend. Je kunt de titel en tekst van elk item aanpassen.
   
   Klik op het pictogram van de mediamap om afbeeldingen of webcontent toe te voegen. Als het medium al is geüpload, klikt u op Bewerken om het te vervangen of te verwijderen. Je kunt ook bijsnijden, bijschriften toevoegen en alt-tags toevoegen voor bestaande media. Klik op het audiopictogram om gegenereerde AI-audio of opgenomen audio toe te voegen of een audiobestand te uploaden.
3. Klik op de knop Item toevoegen aan de onderkant van de zijbalk om extra items toe te voegen. Je kunt zoveel items toevoegen als je wilt! Houd er rekening mee dat als je meer dan vier items in tabbladen toevoegt, cursisten moeten scrollen om ze allemaal te zien.
4. Klik op X in de rechterbovenhoek om terug te keren naar je les.

Je kunt de hoofdtekst ook rechtstreeks in accordeon- en tabblokken bewerken. U kunt echter alleen titeltekst, afbeeldingen, multimedia en webinhoud bewerken in het bewerkingspaneel.

Stap 3: schakelen tussen bloktypen

Denk je dat je tabs er beter uit zouden zien als accordeonartikelen of andersom? Verander het dan! Zweven over een bestaand tabblok. Klik op de knop voor het selecteren van bloktypen aan de linkerkant van de ontwerpwerkbalk en selecteer Accordeon of Tabs in het menu.

Dat is het! Keer het proces om als je terug wilt schakelen.

Stap 4: De blokinstellingen aanpassen

Pas aan hoe je content eruitziet op het scherm door met je muis over een bestaand blok te gaan om toegang te krijgen tot de ontwerpwerkbalk aan de linkerkant. Klik op het pictogram Stijl om de opties voor blokachtergrond te openen. Je hebt ook de mogelijkheid om een witte achtergrond te behouden voor accordeon- en tabitems wanneer je de blokachtergrond aanpast. Het menu Opmaak biedt opties voor het wijzigen van de vulling en het gedrag van de accordeon, het wijzigen van de plaatsing van audio en het uitschakelen van de zoom voor afbeeldingen.

Toegankelijkheid

Tabbladen en accordeonblokken zijn ontworpen om de toegankelijkheid te ondersteunen, maar als maker bepaal je de toegankelijkheid van de inhoud die je toevoegt. Volg de onderstaande tips om ervoor te zorgen dat je inhoud goed werkt voor alle cursisten.

• Voeg alternatieve tekst (alt-tekst) toe voor alle betekenisvolle afbeeldingen. Beschrijf wat de afbeelding laat zien en waarom het belangrijk is in de context, niet alleen hoe het eruit ziet. Markeer puur decoratieve afbeeldingen zodat schermlezers ze overslaan (1.1.1 Niet-tekstuele inhoud).

• Voeg ondertitels toe aan video's. Zorg ervoor dat de ondertitels nauwkeurig zijn, gesynchroniseerd zijn met de audio en dat ze relevante niet-spraakgeluiden bevatten wanneer ze betekenis toevoegen (1.2.2 Ondertitels [vooraf opgenomen]).

• Zorg voor audiobeschrijvingen of transcripties voor video's met belangrijke visuele inhoud. Een transcript moet alle gesproken inhoud en belangrijke visuele informatie bevatten die niet in de vertelling aan bod komt (1.2.1 Alleen audio en alleen video [vooraf opgenomen]).

• Controleer het tekstcontrast wanneer u de achtergrondkleuren wijzigt. Streef naar een verhouding van ten minste 4,5:1 voor hoofdtekst en 3:1 voor grote tekst (1.4.3 Contrast [Minimum]).

Raadpleeg de ontwerptips voor toegankelijkheid in onze artikelen hieronder voor meer informatie over het maken van toegankelijke inhoud:

• Rise 360: Hoe ontwerp je een toegankelijke cursus

• Toegankelijkheidsindex

Navigatie met toetsenbord

In het volgende gedeelte wordt beschreven wat cursisten die een training met een toetsenbord volgen, kunnen verwachten wanneer ze accordeon- en tabblokken gebruiken. Deze informatie kan u ook helpen bij het verifiëren van het verwachte gedrag tijdens toegankelijkheidstests.

Accordeonblok

• De focus begint op de eerste accordeonkop.

• Druk op Tab en Shift + Tab om tussen de accordeonkoppen te schakelen.

• Wanneer de focus op de accordeonkop van een samengevouwen paneel ligt, vergroot Enter of Space het paneel.

• Wanneer de focus op de accordeonkop van een uitgevouwen paneel ligt, wordt het paneel samengevouwen met Enter of Space.

• Als het accordeonpaneel is uitgevouwen en interactieve inhoud bevat, zoals een afbeelding of video, wordt de focus naar die items verplaatst wanneer u op Tab drukt terwijl u op de koptekst staat.

Tabs blokkeren

• De focus begint op het eerste tabbladelement.

• Wanneer het tabelement scherp is, gebruikt u de toetsen Pijl-links en Rechts om tussen tabbladen te schakelen.

• Druk op Tab om naar het tabvenster te gaan en op Shift + Tab om terug te gaan naar het tab-element.

• Als de focus op het laatste tabelement ligt, wordt de focus naar het eerste tabblad verplaatst door op de rechterpijltoets te drukken. Als de focus op het eerste tabelement ligt, wordt de focus naar het laatste tabblad verplaatst door op de linkerpijltoets te drukken.

• Als het tabbladvenster interactieve inhoud bevat, zoals een afbeelding of video, wordt de focus naar die items verplaatst wanneer u op Tab drukt terwijl u in het tabvenster bent.

Ervaring met schermlezer

In het volgende gedeelte wordt beschreven wat cursisten die schermlezers gebruiken, kunnen verwachten wanneer ze door accordeon- en tabblokken navigeren. Je kunt het ook gebruiken om het verwachte gedrag tijdens toegankelijkheidstests te verifiëren.

Accordeonblok

• De focus begint op de eerste accordeonkop.

• De schermlezer kondigt de titel, de staat en het kopniveau aan, bijvoorbeeld de knop 'TITLE is samengevouwen op kopniveau 2'.

• Druk op Tab en Shift + Tab om tussen de accordeonkoppen te schakelen.

• Wanneer de focus op de accordeonkop van een samengevouwen paneel ligt, vergroot Enter of Space het paneel. De schermlezer kondigt „uitgebreid” aan. Druk op de toets Pijl-omlaag om de focus naar de inhoud te verplaatsen. De schermlezer kondigt „TITLE + region” aan, gevolgd door de inhoud. Druk op de toets Pijl-omhoog om terug te gaan naar de koptekst van de accordeon.

• Wanneer de focus op de accordeonkop van een uitgevouwen paneel ligt, wordt het paneel samengevouwen met Enter of Space. De schermlezer meldt „samengevouwen”.

• Als het accordeonpaneel is uitgevouwen en interactieve inhoud bevat, zoals een afbeelding of video, wordt de focus naar die items verplaatst wanneer u op Tab drukt terwijl de focus op de inhoud ligt.

Tabs blokkeren

• De focus begint op het eerste tabbladelement.

• De schermlezer kondigt „tabbeheer” aan om aan te geven dat de cursist een tabblok heeft ingevoerd, gevolgd door de titel van het eerste tabelement, bijvoorbeeld „tabbladbeheer, tabblad TITEL geselecteerd 1 van 3”.

• Wanneer het tabelement scherp is, gebruikt u de toetsen Pijl-links en Rechts om tussen tabbladen te schakelen. De schermlezer kondigt de titel en status van het tabelement aan, bijvoorbeeld 'TITLE tab selected 2 of 3'.

• Druk op Tab om naar het tabvenster te gaan en op Shift + Tab om terug te gaan naar het tab-element. De schermlezer kondigt eerst de titel van het tabelement aan, bijvoorbeeld 'TITLE-eigenschapspagina', gevolgd door de inhoud van het tabpaneel.

• Als de focus op het laatste tabelement ligt, wordt de focus naar het eerste tabblad verplaatst door op de rechterpijltoets te drukken. Als de focus op het eerste tabelement ligt, wordt de focus naar het laatste tabblad verplaatst door op de linkerpijltoets te drukken.

• Als het tabbladvenster interactieve inhoud bevat, zoals een afbeelding of video, wordt de focus naar die items verplaatst wanneer u op Tab drukt terwijl u in het tabvenster bent.

Mobiele ervaring

In het volgende gedeelte wordt beschreven wat cursisten die mobiele schermlezers gebruiken, kunnen verwachten wanneer ze door accordeon- en tabblokken navigeren. Je kunt het ook gebruiken om het verwachte gedrag tijdens toegankelijkheidstests te verifiëren.

Accordeonblok

• De focus begint op de eerste accordeonkop.

• Dubbeltik om een accordeon te openen. Veeg naar rechts om naar de inhoud te gaan. Veeg naar links om terug te keren naar de koptekst van de accordeon. Dubbeltik nogmaals om het te sluiten.

• Als een koptekst gesloten is, veeg dan naar rechts om naar de volgende accordeonkop te gaan.

• Als een koptekst is geopend, veeg dan naar rechts om naar de inhoud te gaan. Als je vanaf de inhoud naar rechts blijft vegen, wordt de focus verplaatst naar de volgende accordeonkop.

Tabs blokkeren

• De focus begint op het eerste tabbladelement.

• Veeg naar rechts om naar het volgende tabbladelement te gaan. Dubbeltik om het te selecteren.

• Blijf rechtsaf door de tabbladelementen vegen om naar het tabvenster te gaan en de inhoud ervan te beluisteren.

• Veeg naar links om terug te gaan naar een tabelement.

Onze aanpak

Accordeon- en tabblokken werden gebouwd met behulp van richtlijnen van de WAI-ARIA Authoring Practices Guide (APG), met name het accordeonpatroon en het tabpatroon.

Deze aanpak helpt cursisten:

• Begrijp dat de interactie meerdere inhoudsgedeelten bevat

• Efficiënt tussen secties schakelen met behulp van standaard toetsenbordbesturingselementen

• Weet welke sectie momenteel uitgebreid of actief is

We hebben bruikbaarheidstests uitgevoerd met gebruikers van schermlezers en toetsenborden om deze aanpak te onderbouwen. Toegankelijkheidspatronen kunnen echter per context verschillen en geen enkele oplossing werkt in elk scenario. We zullen deze ervaringen in de loop van de tijd blijven evalueren en verbeteren op basis van feedback van cursist en evoluerende beste praktijken.