Dostępność i obsługa czytników ekranu

W Sleeknote dostępność stanowi podstawowy element tworzenia kampanii. Nasze widżety są zaprojektowane tak, aby użytkownicy korzystający z technologii wspomagających — w tym czytników ekranu, takich jak NVDA, JAWS i VoiceOver — mogli bez przeszkód i samodzielnie postrzegać kampanie, poruszać się po nich i wchodzić z nimi w interakcję.

Obsługiwane formaty kampanii:

Nasze standardy dostępności mają zastosowanie do wszystkich rodzajów kampanii, w tym:

• Popups nakładki centralne, wysuwane okienka, widżety narożne)
• Banery (górne i dolne paski)
• Formularze osadzone (wbudowane na stronie)
• Kody kuponów
• Kampanie interaktywne (quizy, loterie, zdrapki)
• Rekomendacje produktów
• Kampanie kalendarzowe i kampanie typu „door-style”

Zachowanie czytnika ekranu

Kiedy pojawia się kampania, jest ona przedstawiana technologiom wspomagającym jako okno dialogowe. Dzięki temu wyraźnie komunikuje się, że otwarto odrębny, interaktywny obszar.

• Kampanie modalne (takie jak popups slajdy) tymczasowo dezaktywują pozostałą część strony, aby zapobiec nieporozumieniom.
• Kampanie niemodalne (takie jak banery i osadzone formularze) umożliwiają ciągły dostęp do treści otaczającej strony.
• Elementy dekoracyjne — w tym obrazy tła, odstępy w układzie i elementy czysto wizualne — są ukryte przed czytnikami ekranowymi, aby użytkownicy słyszeli wyłącznie istotne treści.

Zarządzanie skupieniem

Wdrażamy ustrukturyzowane zachowania fokusowe, aby wspierać użytkowników klawiatury i czytników ekranu:

• Po otwarciu: Fokus automatycznie przenosi się na pierwszy interaktywny element w kampanii.
• Przechwytywanie fokusu: W kampaniach modalnych klawisz Tab przechodzi tylko między elementami w ramach kampanii. Fokus przechodzi od ostatniego elementu z powrotem do pierwszego (i odwrotnie za pomocą Shift + Tab).
• Zgodność z Shadow DOM: Kampanie są renderowane wewnątrz Shadow DOM w celu izolacji stylów. Nasze zarządzanie fokusem przekracza granice shadow, dzięki czemu wszystkie interaktywne elementy pozostają dostępne.

Nawigacja za pomocą klawiatury

Wszystkie kampanie można w pełni obsługiwać za pomocą klawiatury:

• Tab — Przejdź do następnego elementu interaktywnego
• Shift + Tab — Przejdź do poprzedniego elementu interaktywnego
• Ucieczka — Zamknij kampanię
• Enter / Spacja — aktywuj przyciski, prześlij formularze, wybierz opcje
• Klawisze strzałek — poruszanie się po listach rozwijanych i polach autouzupełniania

Dostępność formularza

Dbamy o to, aby formularze były poprawnie skonstruowane i ogłoszone:

• Etykiety: Każde pole formularza ma przypisaną etykietę, dzięki czemu czytniki ekranu wyraźnie informują o jego przeznaczeniu.
• Pola wymagane: Wymagane dane są oznaczone jako wymagane po zaznaczeniu.
• Błędy walidacji: Błędy są natychmiast zgłaszane za pomocą regionów aktywnych i są programowo powiązane z odpowiednimi danymi wejściowymi.
• Przyciski: Elementy interaktywne wykorzystują semantykę <button> elementy o dostępnych nazwach pochodzących z widocznego tekstu.

Kody rabatowe

Kody kuponów są dostępne zarówno dla użytkowników klawiatury, jak i czytników ekranu:
Sam kod jest przedstawiony jako tekst, który można zaznaczyć.

Semantyczny przycisk Kopiuj umożliwia łatwe kopiowanie i jest w pełni obsługiwany za pomocą klawiatury i technologii wspomagających.

Kampanie interaktywne

Elementy interaktywne są tworzone przy użyciu znaczników semantycznych i obsługiwane za pomocą klawiatury:

• Stany wyboru wykorzystują standardowe kontrolki formularza (przyciski opcji, pola wyboru) z powiązanymi etykietami.
• Rozwijane menu i listy wyboru przekazują aktualnie wybraną opcję do technologii wspomagających.

Ukryte przed technologią wspomagającą

Aby zmniejszyć poziom hałasu i poprawić przejrzystość, następujące elementy są ukryte przed czytnikami ekranowymi:

• Obrazy tła i dekoracyjne nakładki
• Wizualne elementy dystansowe i elementy służące wyłącznie do układu
• Ozdobne ikony SVG