Skrypt widgetu dostępności

Wymagany poziom znajomości JavaScript

Aby skonfigurować i wdrożyć skrypt dostępności WCAG, wystarczy podstawowa znajomość JavaScript, obejmująca:

• Dodawanie skryptów do stron internetowych.
• Tworzenie i modyfikowanie obiektów JavaScript.
• Przekazywanie argumentów do funkcji.
• Praca z selektorami CSS.

Nie jest wymagana zaawansowana wiedza programistyczna – skrypt został zaprojektowany tak, aby był łatwy w użyciu dla osób niebędących ekspertami w kodowaniu.

Struktura i działanie skryptu

Podstawowy szkielet skryptu:

<script>
    (function (w, d, s, l, t, c = {}) {
        w[l] = c;
        w[l].token = t;
        var f = d.getElementsByTagName(s)[0], 
        j = d.createElement(s), 
        a = new Date().getTime();
        j.async = true;
        j.src = '//wcag.dock.codes/accessibility/' + t + '/start.js?t=' + a;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'accessibility', '_TOKEN_', {_KONFIGURACJA_});
</script>

Parametry skryptu:

1. '_TOKEN_'
   • Opis: Unikalny token, który możesz wygenerować za darmo w swoim koncie DockWCAG.
   • Wymagane: Tak.
   • Przykład: 'abcde12345'.
2. {_KONFIGURACJA_}
   • Opis: Obiekt zawierający szczegóły dotyczące działania widgetu.
   • Wymagane: Nie, ale zalecane dla dostosowania funkcji do potrzeb.
   • Możliwe parametry zostały opisane poniżej.

Parametry konfiguracji {_KONFIGURACJA_}

Obiekt pozwala dostosować działanie widgetu. Poniżej opisano dostępne opcje w przystępnej formie.

1. Widget

2. Opcje widgetu

3. Pozycja widgetu

4. Dostosowanie kolorów

Przykład obiektu

colors: {primary: '#0021c8', secondary: '#000243'}

Te parametry pozwalają na pełne dostosowanie wyglądu widgetu, aby pasował do kolorystyki strony, na której jest umieszczony. Kolory są przekazywane w formacie hex (np. #0021c8), który jest najczęściej stosowany w stylach CSS i pozwala na precyzyjne określenie odcieni.

5. Selektory własnych przycisków

Obiekt selectors pozwala przypisać własne przyciski do funkcji dostępności.
Każdy klucz odpowiada konkretnej funkcji, a wartość to selektor CSS wskazujący element HTML.

Przykładowy obiekt selectors:

{
    "invertColor": ".btn-invert",
    "contrast": ".btn-contrast",
    "fontSize": ".btn-font-size",
    "textToSpeech": ".btn-tts"
}

Przykłady wdrożenia

Prosta konfiguracja z gotowym widgetem

<script>
    (function (w, d, s, l, t, c = {}) {
        w[l] = c;
        w[l].token = t;
        var f = d.getElementsByTagName(s)[0], 
        j = d.createElement(s), 
        a = new Date().getTime();
        j.async = true;
        j.src = '//wcag.dock.codes/accessibility/' + t + '/start.js?t=' + a;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'accessibility', 'abcde12345', {
        widget: true,
        position: 'right',
        colors: {primary: '#0021c8', secondary: '#000243'},
        options: {contrast: true, underline: true}
    });
</script>

Zaawansowana konfiguracja z własnymi selektorami

<script>
    (function (w, d, s, l, t, c = {}) {
        w[l] = c;
        w[l].token = t;
        var f = d.getElementsByTagName(s)[0], 
        j = d.createElement(s), 
        a = new Date().getTime();
        j.async = true;
        j.src = '//wcag.dock.codes/accessibility/' + t + '/start.js?t=' + a;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'accessibility', 'abcde12345', {
        widget: false,
        selectors: {
            showLine: ".wcag-focus",
            lineHeight: ".wcag-line-height",
            letterSpacing: ".wcag-letter-spacings",
            underline: ".wcag-underline",
            textToSpeech: ".wcag-text-to-speech",
            saturation: ".wcag-saturation",
            reset: ".wcag-reset",
        }
    });
</script>

Uwagi końcowe

• Przed wdrożeniem upewnij się, że Twój unikalny token jest poprawny.
• Własne selektory umożliwiają pełną kontrolę nad funkcjami, dzięki czemu możesz dostosować je do projektu strony.