Skip to main content

Jak używać skrótów klawiszowych w szablonach z WCAG?

 wcag-short-keyboard

 

Jeśli obserwujesz nasze działania, zapewne słyszałeś już o przedsięwzięciu, w którym bierzemy udział. Stworzyliśmy kilka szablonów spełniających wymogi WCAG. Oznacza to, że osoby niepełnosprawne, czy też wykluczone cyfrowo mają możliwość, by wygodnie korzystać ze stron internetowych zbudowanych na gruncie zasad dostępności. Trzeba przyznać, że jest to trudna sprawa, ponieważ zmiany nie dotyczą jedynie templatki, ale także powiązanych z nią dodatków. Ściśle współpracujemy z DJ-Extensions, którzy przystosowali je do wymogów WCAG.

W tym tutorialu pokażemy Ci, w jaki sposób poruszać się po stronie internetowej zgodnej z zasadami WCAG za pomocą klawiatury. Nawigacja dotyczy tych wszystkich elementów, które do czegoś prowadzą - są linkami. Jeśli element jest aktywny, to pojawia się wokół niego czerwone obramowanie.

Ogólne zasady używania skrótów klawiszowych:

  • przycisk TAB zaznacza kolejny element
  • jednoczesne użycie klawiszy TAB+SHIFT zaznacza poprzedni element
  • przycisk ENTER przenosi nas do linkowanej treści
  • niektórych przypadkach możesz użyć strzałek, by zaznaczyć poprzedni/ następny element

Skoki do konkretnych sekcji witryny

W zależności od zawartości witryny można określić sekcje, które umożliwią szybki dostęp do poszczególnych obszarów. Pierwsze naciśnięcie klawisza TAB spowoduje wyświetlenie nawigacyjnego menu, zawierającego poszczególne sekcje serwisu. Każde kolejne zaznacza następny element. Jeśli chcesz przejść do wybranego obszaru strony, naciśnij ENTER. Jeśli przegapiłeś obszar, do którego chciałeś wejść, naciśnij SHIFT + TAB - zaznaczony zostanie poprzedni element.

 

001

 

Poruszanie się po głównym menu, zawierającym wiele kolumn- DJ-MegaMenu

Aby poruszać się po głównym menu witryny, użyj klawiszy TAB / TAB + Shift. Na początku nawigujesz po pierwszym poziomie menu. Jeśli istnieje więcej poziomów, to poruszasz się po nich hierarchicznie. Za pomocą strzałek możesz przechodzić w prawo, w lewo, w górę i w dół. Masz szerszy zakres możliwości, ponieważ możesz pominąć podmenu lub przeskoczyć z jednej kolumny do drugiej. Aby dostać się pozycji menu naciśnij ENTER.

 

002

 

Nawigacja po prostym sliderze- DJ-ImageSlider

DJ-ImageSlider jest darmowym komponentem do wyświetlania slajdów. W module można wyświetlić przyciski prowadzące do następnego/poprzedniego elementu, a także przycisk odtwarzania i pauzy. Możesz pokazać tytuł slidu i przycisk “czytaj więcej”. Po wszystkich tych elementach możesz się przemieszczać za pomocą klawiszy TAB / SHIFT+TAB. Użyj prawej i lewej strzałki, żeby przełączać slajdy. Aby dostać się do artykułu związanego ze slajdem, naciśnij ENTER.

 

003

 

Nawigacja po zaawansowanej galerii zdjęć- DJ-MediaTools

Nawigacja przebiega identycznie, jak dla prostego slidera- DJ-ImageSlider. Możesz się poruszać po wszystkich linkach za pomocą przycisków TAB, SHIFT+TAB i strzałek.

Dla układu Gallery Grid: 

 

006

 

Dla slidera:

 

007

 

Nawigacja po zakładkach- DJ-Tabs

Ten komponent również spełnia wymogi WCAG. Użyj klawisza TAB aby otworzyć taba / poruszać się po zawartości wewnątrz karty, zaś SHIFT + TAB by powrócić do poprzedniej karty. Dla tabów:

 

005

 

Dla akordeonu:

 

004

 

Mamy nadzieję, że tutorial pomógł Ci zrozumieć zasady nawigacji po szablonach zgodnych z WCAG. Dziękujemy za wsparcie i miłe słowa - to dużo dla nas znaczy!