Instalacja widgetu dostępności – 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-widgetlub Yarn:
yarn add @dockcodes/accessibility-widget2. 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!");
});
Uwaga: metoda
init() jest asynchroniczna – pamiętaj o użyciu await.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/
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();
5. Pełna lista dostępnych metod
| Metoda | Opis |
|---|---|
toggleContrast() |
Włącza/wyłącza kontrast |
setContrast(enabled: boolean) |
Ustawia kontrast |
toggleInvertColors() |
Odwraca kolory |
setInvertColors(enabled: boolean) |
Ustawia odwracanie kolorów |
toggleUnderline() |
Podkreślenia linków |
setUnderline(enabled: boolean) |
Ustawia podkreślenia linków |
setFontSize(level: number) |
Ustawia rozmiar fontu 1-5 |
increaseFontSize() |
Zwiększa rozmiar fontu |
decreaseFontSize() |
Zmniejsza rozmiar fontu |
increaseLetterSpacing() |
Zwiększa odstępy |
setLetterSpacing(level: number) |
Ustawia odstępy 1-5 |
increaseLineHeight() |
Zwiększa wysokość linii |
setLineHeight(level: number) |
Ustawia wysokość linii 1-5 |
increaseSaturation() |
Zwiększa saturację |
setSaturation(level: number) |
Ustawia saturację 1-3 |
toggleTextToSpeech() |
TTS – czytanie treści |
setTextToSpeech(enabled: boolean) |
Włącza/wyłącza TTS |
toggleCursorEnlarge() |
Powiększony kursor |
setCursorEnlarge(enabled: boolean) |
Włącza powiększony kursor |
toggleHideMedia() |
Ukrywanie mediów |
setHideMedia(enabled: boolean) |
Włącza/wyłącza ukrywanie mediów |
toggleDisableAnimations() |
Wyłącza animacje |
setDisableAnimations(enabled: boolean) |
Włącza/wyłącza animacje |
toggleReadingGuide() |
Linia prowadząca do czytania |
setReadingGuide(enabled: boolean) |
Włącza/wyłącza przewodnik |
toggleDyslexicFont() |
Font dla dyslektyków |
setDyslexicFont(enabled: boolean) |
Włącza font dla dyslektyków |
toggleProfileBlind() |
Profil całkowicie niewidomych |
setProfileBlind(enabled: boolean) |
Ustawia profil niewidomych |
toggleProfileLowVision() |
Profil słabowidzących |
toggleProfileEpileptic() |
Profil bezpieczny dla epileptyków |
resetAll() |
Reset wszystkich opcji |
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);
});Lista dostępnych eventów:
onMenuOpen(cb)– otwarcie menuonMenuClose(cb)– zamknięcie menuonChangeLanguage(cb)– zmiana językaonChangePosition(cb)– zmiana pozycjonowaniaonChangeOption(cb)– dowolna zmiana opcjionChangeOptionContrast(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
});
});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