Jak zainstalować widżet dostępności jako paczkę NPM

Poniższa dokumentacja przedstawia sposób instalacji, inicjalizacji oraz wykorzystania widgetu dostępności w projektach TypeScript/JavaScript przy użyciu paczki @dockcodes/accessibility-widget.

1. Instalacja paczki

Za pomocą NPM:

npm install @dockcodes/accessibility-widget
Skopiuj tekst

lub Yarn:

yarn add @dockcodes/accessibility-widget
Skopiuj tekst

2. Podstawowe użycie

import accessibility from "@dockcodes/accessibility-widget";

await accessibility.init("YOUR_TOKEN");

accessibility.setContrast(true);
accessibility.setLanguage("en");
accessibility.setFontSize(4);

accessibility.onMenuOpen(() => {
  console.log("Menu opened!");
});
Skopiuj tekst

3. Inicjalizacja widgetu

Aby poprawnie uruchomić widget, wywołaj metodę init() z ważnym tokenem API: await accessibility.init("YOUR_TOKEN"); 🔑 Token możesz wygenerować bezpłatnie tutaj: wcag.dock.codes/pl/moje-konto/tokens/ (otwiera nową kartę)

4. Zarządzanie funkcjami widgetu

Biblioteka udostępnia bogaty zestaw metod pozwalających kontrolować funkcje ułatwień dostępu.

Przykłady najczęściej używanych metod:

// Kontrast
accessibility.toggleContrast();
accessibility.setContrast(true);

// Ustawienie języka
accessibility.setLanguage("pl");

// Tekst: powiększanie / zmniejszanie
accessibility.increaseFontSize();
accessibility.setFontSize(5);

// Przewodnik czytania
accessibility.toggleReadingGuide();
Skopiuj tekst

5. Pełna lista dostępnych metod

6. Obsługa zdarzeń (Event Handlers)

Widget udostępnia zdarzenia, które możesz wykorzystać np. do analityki lub integracji z aplikacją.

accessibility.onChangeLanguage((lang) => {
  console.log("Nowy język:", lang);
});

accessibility.onChangeOptionContrast((value) => {
  console.log("Kontrast zmieniony na:", value);
});
Skopiuj tekst

Lista dostępnych eventów:

• onMenuOpen(cb) – otwarcie menu
• onMenuClose(cb) – zamknięcie menu
• onChangeLanguage(cb) – zmiana języka
• onChangePosition(cb) – zmiana pozycjonowania
• onChangeOption(cb) – dowolna zmiana opcji
• onChangeOptionContrast(cb)
• onChangeOptionFontSize(cb)
• onChangeOptionInvertColor(cb)
• onChangeOptionUnderline(cb)
• onChangeOptionDisableAnimations(cb)
• onChangeOptionDyslexic(cb)
• onChangeOptionEnlargeCursor(cb)
• onChangeOptionHideMedia(cb)
• onChangeOptionLetterSpacing(cb)
• onChangeOptionLineHeight(cb)
• onChangeOptionSaturation(cb)
• onChangeOptionShowLine(cb)
• onChangeOptionTextToSpeech(cb)
• onChangeProfile(cb)
• onChangeProfileAdhd(cb)
• onChangeProfileBlind(cb)
• onChangeProfileCognitiveAndLearning(cb)
• onChangeProfileColorBlind(cb)
• onChangeProfileDyslexia(cb)
• onChangeProfileEpileptic(cb)
• onChangeProfileLowVision(cb)
• onChangeProfileMotorImpaired(cb)

7. Integracja z Google Tag Manager

import accessibility from "@dockcodes/accessibility-widget";

await accessibility.init("YOUR_TOKEN");

accessibility.onChangeOption((data) => {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: "AccessibilityChange",
    optionType: data.type,
    optionValue: data.value
  });
});
Skopiuj tekst

8. Resetowanie ustawień

W każdej chwili można przywrócić ustawienia widgetu do wartości domyślnych: accessibility.resetAll();

9. Źródła i zgłaszanie błędów

👉 Jeżeli napotkasz problem lub chcesz zgłosić propozycję ulepszenia, odwiedź: GitHub (otwiera nową kartę)