Obsługa zdarzeń
Widżet dostępności emituje zdarzenia w odpowiedzi na interakcje użytkownika, takie jak zmiana opcji, profilu, języka, pozycji czy otwieranie i zamykanie menu.
Zastosowanie wykrywania zdarzeń
Rejestrowanie tych zdarzeń umożliwia:
- Integrację z interfejsem strony – dynamiczne dostosowanie treści lub stylów w odpowiedzi na zmiany w widżecie.
- Śledzenie interakcji użytkownika – analiza wykorzystania funkcji dostępności w celu optymalizacji UI.
- Synchronizację ustawień – np. automatyczne dostosowanie języka strony po zmianie języka w widżecie.
Poniżej przedstawiono listę dostępnych zdarzeń
| Nazwa | Opis |
|---|---|
| AccessibilityOnChangeOption | wywoływane przy zmianie dowolnej opcji dostępności |
| AccessibilityOnChangeOptionContrast | zmiana kontrastu strony |
| AccessibilityOnChangeOptionFontSize | zmiana rozmiaru czcionki |
| AccessibilityOnChangeOptionInvertColor | odwrócenie kolorów strony |
| AccessibilityOnChangeOptionUnderline | włączenie lub wyłączenie podkreślenia linków |
| AccessibilityOnChangeOptionDisableAnimations | wyłączenie animacji na stronie |
| AccessibilityOnChangeOptionDyslexic | zastosowanie czcionki dla dyslektyków |
| AccessibilityOnChangeOptionEnlargeCursor | powiększenie kursora |
| AccessibilityOnChangeOptionHideMedia | ukrycie osadzonych multimediów |
| AccessibilityOnChangeOptionLetterSpacing | dostosowanie odstępów między literami |
| AccessibilityOnChangeOptionLineHeight | dostosowanie wysokości linii tekstu |
| AccessibilityOnChangeOptionSaturation | regulacja nasycenia kolorów |
| AccessibilityOnChangeOptionShowLine | wyświetlenie prowadnicy ułatwiającej czytanie |
| AccessibilityOnChangeOptionTextToSpeech | aktywacja funkcji zamiany tekstu na mowę |
| AccessibilityOnChangeProfile | wywoływane przy zmianie dowolnego profilu dostępności |
| AccessibilityOnChangeProfileAdhd | aktywacja profilu dla osób z ADHD |
| AccessibilityOnChangeProfileBlind | aktywacja profilu dla osób niewidomych |
| AccessibilityOnChangeProfileCognitiveAndLearning | aktywacja profilu dla osób z trudnościami poznawczymi i w nauce |
| AccessibilityOnChangeProfileColorBlind | aktywacja profilu dla osób z daltonizmem |
| AccessibilityOnChangeProfileDyslexia | aktywacja profilu dla osób z dysleksją |
| AccessibilityOnChangeProfileEpileptic | aktywacja profilu dla osób z epilepsją |
| AccessibilityOnChangeProfileLowVision | aktywacja profilu dla osób słabowidzących |
| AccessibilityOnChangeProfileMotorImpaired | aktywacja profilu dla osób z ograniczeniami ruchowymi |
| AccessibilityOnMenuOpen | otwarcie menu widżetu dostępności |
| AccessibilityOnMenuClose | zamknięcie menu widżetu dostępności |
| AccessibilityOnChangePosition | zmiana pozycji widżetu na stronie |
| AccessibilityOnChangeLanguage | zmiana języka widżetu |
Możesz używać tych zdarzeń w aplikacji nasłuchując zdarzeń w taki sposób:
window.addEventListener('AccessibilityOnChangeOption', function (event) {
console.log(event.detail.type, event.detail.value);
})
Przykład wysłania zdarzenia do Google Tag Manager’a:
window.addEventListener('AccessibilityOnChangeOption', function (event) {
window.dataLayer = window.dataLayer || []
window.dataLayer.push({
event: 'AccessibilityChange',
optionType: event.detail.type,
optionValue: event.detail.value
})
})
