Bloki akordeonu i tabulatorów pozwalają odkrywać powiązane pojęcia w interakcjach bogatych w media. Prezentuj elementy pojedynczo lub porównuj wiele koncepcji w czystym, łatwym do strawienia formacie.

1. Wstaw bloki akordeonu i tabulatorów
2. Dodaj zawartość i nowe elementy
3. Przełączanie między typami bloków
4. Modyfikowanie ustawień bloku
5. Dostępność

Krok 1: Wstaw bloki akordeonu i tabulatorów

1. Otwórz kurs Rise 360, a następnie edytuj istniejącą lekcję lub utwórz nową.
2. Kliknij opcję Wszystkie bloki na pasku skrótów bloków lub ikona wstawiania bloku, która pojawia się po najechaniu kursorem myszy na obwiednię między blokami.
3. Na pasku bocznym wybierz kategorię Interaktywne, a następnie wybierz Akordeon lub Tabs.

Krok 2: Dodaj zawartość i nowe elementy

1. Najedź kursorem na blok, aby uzyskać dostęp do lewego paska narzędzi projektowania. Kliknij ikonę Zawartość.
2. Panel edycji zostanie otwarty po lewej stronie. Możesz modyfikować tytuł i tekst każdego elementu.
   
   Kliknij ikonę folderu multimedialnego, aby dodać obrazy lub zawartość internetową. Jeśli media zostały już przesłane, kliknij Edytuj, aby je zastąpić lub usunąć. Możesz także przycinać, dodawać podpisy i dodawać tagi alt dla istniejących mediów. Kliknij ikonę audio, aby dodać wygenerowany dźwięk AI, nagrany dźwięk lub przesłać plik audio.
3. Kliknij Dodaj element przycisk u dołu paska bocznego, aby dodać dodatkowe elementy. Możesz dodać tyle elementów, ile chcesz! Pamiętaj, że jeśli dodasz więcej niż cztery elementy na kartach, uczestnicy będą musieli przewinąć, aby zobaczyć je wszystkie.
4. Kliknij X w prawym górnym rogu, aby powrócić do lekcji.

Możesz także edytować tekst treści bezpośrednio w blokach akordeonu i tabulatorów. W panelu edycji można jednak edytować tylko tekst tytułu, obrazy, multimedia i zawartość internetową.

Krok 3: Przełączanie między typami bloków

Myślisz, że twoje zakładki wyglądałyby lepiej jako elementy akordeonu lub odwrotnie? To zmień to! Najedź kursorem na istniejący blok kart. Kliknij przycisk wyboru typów bloku, który pojawia się po lewej stronie paska narzędzi projektu i wybierz z menu opcję Akordeon lub Tabs.

To jest to! Odwróć proces, jeśli chcesz przełączyć się z powrotem.

Krok 4: Zmodyfikuj ustawienia bloku

Zmień wygląd zawartości na ekranie, najeżdżając kursorem na istniejący blok, aby uzyskać dostęp do lewego paska narzędzi projektowania. Kliknij ikonę Styl, aby uzyskać dostęp do opcji tła bloku. Istnieje również możliwość zachowania białego tła dla elementów akordeonu i tabulatora podczas modyfikowania tła bloku. Menu Format zawiera opcje zmiany zachowania wypełnienia i akordeonu, przełączania rozmieszczenia dźwięku, a także wyłączania powiększania obrazów.

Dostępność

Tabulatory i bloki akordeonu są zaprojektowane tak, aby wspierać dostępność, ale jako autor kontrolujesz dostępność dodawanej zawartości. Postępuj zgodnie z poniższymi wskazówkami, aby Twoje treści działały dobrze dla wszystkich uczestników.

• Dodaj tekst alternatywny (tekst alternatywny) dla wszystkich znaczących obrazów. Opisz, co pokazuje obraz i dlaczego ma znaczenie w kontekście, a nie tylko to, jak wygląda. Zaznacz obrazy czysto dekoracyjne, aby czytniki ekranu je pomijały (1.1.1 Treść nietekstowa).

• Dołącz napisy zamknięte do filmów. Upewnij się, że napisy są dokładne, zsynchronizowane z dźwiękiem i zawierają odpowiednie dźwięki niezwiązane z mową, gdy dodają znaczenia (1.2.2 Napisy [nagrane wcześniej]).

• Zapewnij audiodeskrypcje lub transkrypcje filmów z ważną treścią wizualną. Transkrypcja powinna przechwytywać wszystkie treści mówione i kluczowe informacje wizualne nieuwzględnione w narracji (1.2.1 Tylko audio i tylko wideo [Nagrane wcześniej]).

• Sprawdź kontrast tekstu podczas zmiany kolorów tła. Celuj w co najmniej stosunek 4, 5:1 dla tekstu podstawowego i 3:1 dla dużego tekstu (1.4.3 Kontrast [Minimum]).

Aby uzyskać dalsze wskazówki dotyczące tworzenia dostępnych treści, zapoznaj się ze wskazówkami dotyczącymi projektowania dostępności w naszych artykułach poniżej:

• Rise 360: Jak zaprojektować dostępny kurs

• Indeks dostępności

Nawigacja klawiatury

W poniższej sekcji opisano, czego mogą oczekiwać uczestnicy poruszający się po szkoleniu za pomocą klawiatury podczas korzystania z bloków akordeonu i tabulatorów. Informacje te mogą również pomóc w weryfikacji oczekiwanego zachowania podczas testowania dostępności.

Blok akordeonu

• Focus zaczyna się od pierwszego nagłówka akordeonu.

• Naciśnij klawisze Tab i Shift + Tab, aby poruszać się między nagłówkami akordeonu.

• Gdy fokus znajduje się na nagłówku harmonijki dla zwiniętego panelu, Enter lub Spacja rozszerza panel.

• Gdy fokus znajduje się na nagłówku akordeonu dla rozwiniętego panelu, Enter lub Spacja zwija panel.

• Jeśli panel akordeonu jest rozwinięty i zawiera zawartość interaktywną, taką jak obraz lub wideo, naciśnięcie klawisza Tab w nagłówku powoduje przeniesienie fokusu na te elementy.

Blok kart

• Focus rozpoczyna się na pierwszym elemencie zakładki.

• Gdy element tabulacji jest aktywny, użyj klawiszy strzałek w lewo i w prawo, aby poruszać się między kartami.

• Naciśnij klawisz Tab, aby przejść do panelu kart, a Shift + Tab, aby powrócić do elementu tabulatora.

• Jeśli fokus znajduje się na ostatnim elemencie tabulatora, naciśnięcie klawisza strzałki w prawo powoduje przeniesienie fokusu do pierwszej karty. Jeśli fokus znajduje się na pierwszym elemencie tabulatora, naciśnięcie klawisza strzałki w lewo powoduje przeniesienie fokusu na ostatnią kartę.

• Jeśli panel kart zawiera zawartość interaktywną, taką jak obraz lub wideo, naciśnięcie klawisza Tab w panelu kart powoduje przeniesienie fokusu na te elementy.

Doświadczenie czytnika ekranu

W poniższej sekcji opisano, czego mogą oczekiwać uczestnicy korzystający z czytników ekranu podczas poruszania się po akordeonach i blokach kart. Można go również użyć do zweryfikowania oczekiwanego zachowania podczas testowania dostępności.

Blok akordeonu

• Focus zaczyna się od pierwszego nagłówka akordeonu.

• Czytnik ekranu ogłasza tytuł, stan i poziom nagłówka — na przykład „Przycisk TITLE zwinięty nagłówek poziom 2”.

• Naciśnij klawisze Tab i Shift + Tab, aby poruszać się między nagłówkami akordeonu.

• Gdy fokus znajduje się na nagłówku harmonijki dla zwiniętego panelu, Enter lub Spacja rozszerza panel. Czytnik ekranu ogłasza „rozszerzony”. Naciśnij klawisz Strzałka w dół, aby przenieść fokus na zawartość. Czytnik ekranu ogłasza „TITLE + region”, a następnie zawartość. Naciśnij klawisz Strzałka w górę, aby wrócić do nagłówka akordeonu.

• Gdy fokus znajduje się na nagłówku akordeonu dla rozwiniętego panelu, Enter lub Spacja zwija panel. Czytnik ekranu ogłasza „zwinięty”.

• Jeśli panel akordeonu jest rozwinięty i zawiera zawartość interaktywną, taką jak obraz lub wideo, naciśnięcie klawisza Tab podczas ustawiania fokusu na zawartość powoduje przeniesienie fokusu na te elementy.

Blok kart

• Focus rozpoczyna się na pierwszym elemencie zakładki.

• Czytnik ekranu ogłasza „kontrolę tabulacji”, aby wskazać, że uczestnik wprowadził blok kart, a następnie tytuł pierwszego elementu karty - na przykład „kontrola tabulacji, karta TITLE wybrana 1 z 3”.

• Gdy element tabulacji jest aktywny, użyj klawiszy strzałek w lewo i w prawo, aby poruszać się między kartami. Czytnik ekranu ogłasza tytuł i stan elementu zakładki — na przykład „Zakładka TITLE wybrana 2 z 3”.

• Naciśnij klawisz Tab, aby przejść do panelu kart, a Shift + Tab, aby powrócić do elementu tabulatora. Czytnik ekranu najpierw ogłasza tytuł elementu tabulatora — na przykład „Strona właściwości TITLE”, a następnie zawartość panelu karty.

• Jeśli fokus znajduje się na ostatnim elemencie tabulatora, naciśnięcie klawisza strzałki w prawo powoduje przeniesienie fokusu do pierwszej karty. Jeśli fokus znajduje się na pierwszym elemencie tabulatora, naciśnięcie klawisza strzałki w lewo powoduje przeniesienie fokusu na ostatnią kartę.

• Jeśli panel kart zawiera zawartość interaktywną, taką jak obraz lub wideo, naciśnięcie klawisza Tab w panelu kart powoduje przeniesienie fokusu na te elementy.

Mobilne doświadczenie

W poniższej sekcji opisano, czego mogą oczekiwać uczestnicy korzystający z mobilnych czytników ekranu podczas poruszania się po akordeonach i blokach kart. Można go również użyć do zweryfikowania oczekiwanego zachowania podczas testowania dostępności.

Blok akordeonu

• Focus zaczyna się od pierwszego nagłówka akordeonu.

• Naciśnij dwukrotnie, aby otworzyć akordeon. Przesuń w prawo, aby przejść do zawartości. Przesuń w lewo, aby powrócić do nagłówka akordeonu. Naciśnij dwukrotnie ponownie, aby go zamknąć.

• Jeśli nagłówek jest zamknięty, przesuń palcem w prawo, aby przejść do następnego nagłówka akordeonu.

• Jeśli nagłówek jest otwarty, przesuń palcem w prawo, aby przejść do jego zawartości. Kontynuowanie przesuwania palcem w prawo od zawartości powoduje przeniesienie fokusu do następnego nagłówka akordeonu.

Blok kart

• Focus rozpoczyna się na pierwszym elemencie zakładki.

• Przesuń w prawo, aby przejść do następnego elementu zakładki. Naciśnij dwukrotnie, aby go wybrać.

• Kontynuuj przesuwanie w prawo przez elementy karty, aby dotrzeć do panelu kart i usłyszeć jego zawartość.

• Przesuń palcem w lewo, aby powrócić do elementu tabulatora.

Nasze podejście

Bloki akordeonu i tabulatorów zostały zbudowane przy użyciu wskazówek zawartych w przewodniku WAI-ARIA Authoring Practices Guide (APG) — w szczególności wzoru akordeonu i wzoru zakładek.

Takie podejście pomaga uczestnikom:

• Zrozum, że interakcja zawiera wiele sekcji treści

• Wydajne poruszanie się między sekcjami za pomocą standardowych sterowanie klawiaturą

• Dowiedz się, która sekcja jest aktualnie rozszerzona lub aktywna

Przeprowadziliśmy testy użyteczności z czytnikami ekranu i użytkownikami klawiatury, aby pomóc w poinformowaniu o tym podejściu. Jednak wzorce dostępności mogą się różnić w zależności od kontekstu i żadne pojedyncze rozwiązanie nie działa w każdym scenariuszu. Z czasem będziemy nadal oceniać i ulepszać te doświadczenia w oparciu o opinie uczestników i rozwijające się najlepsze praktyki.