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

Parametr Typ Opis Wartości
widget Boolean Określa, czy wyświetlić gotowy widget dostępności. true, false

2. Opcje widgetu

Klucz Typ Opis
contrast Boolean Włącza funkcję wysokiego kontrastu.
invertColor Boolean Włącza inwersję kolorów.
fontSize Boolean Umożliwia zmianę rozmiaru czcionki.
underline Boolean Podkreśla linki na stronie.
letterSpacing Boolean Zwiększa odstępy między literami.
lineHeight Boolean Zwiększa wysokość linii w tekście.
textToSpeech Boolean Dodaje funkcję czytania tekstu na głos.
saturation Boolean Regulacja nasycenia kolorów.
enlargeCursor Boolean Powiększa wskaźnik kursora.
hideMedia Boolean Ukrywa elementy multimedialne na stronie.
disableAnimations Boolean Wyłącza animacje na stronie.
showLine Boolean Dodaje linię ułatwiającą skupienie się na czytaniu.
dyslexic Boolean Zmienia czcionkę na przyjazną dla dysleksji.

3. Pozycja widgetu

Parametr Typ Opis Wartości
position String Ustawia domyślną pozycję przycisku aktywującego widget. "right", "left"

4. Dostosowanie kolorów

Klucz Typ Opis Przykład wartości
primary String Określa główny kolor widgetu. #0021c8
secondary String Określa kolor pomocniczy widgetu. #000243

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.

Klucz Typ Opis
invertColor String Przycisk do włączania inwersji kolorów.
contrast String Przycisk do włączania wysokiego kontrastu.
increase String Przycisk do zwiększania czcionki.
decrease String Przycisk do zmniejszania czcionki.
textResize String Przycisk do ogólnej zmiany rozmiaru tekstu.
showLine String Przycisk do włączania widocznej linii podkreślenia.
lineHeight String Przycisk do zmiany wysokości linii tekstu.
letterSpacing String Przycisk do zwiększania odstępów między literami.
underline String Przycisk do podkreślania linków.
textToSpeech String Przycisk do włączania funkcji czytania tekstu na głos.
saturation String Przycisk do regulacji nasycenia kolorów.
enlargeCursor String Przycisk do powiększania wskaźnika kursora.
hideMedia String Przycisk do ukrywania elementów multimedialnych.
dyslexic String Przycisk do zmiany czcionki na przyjazną dla dysleksji.
disableAnimations String Przycisk do wyłączania animacji.
motorImpaired String Przycisk aktywujący profil dostosowany do użytkowników z ograniczeniami motorycznymi.
adhd String Przycisk aktywujący profil wspierający osoby z ADHD.
blind String Przycisk aktywujący profil wspierający użytkowników niewidomych.
cognitiveAndLearning String Przycisk aktywujący profil dla osób z trudnościami poznawczymi.
colorBlind String Przycisk aktywujący profil dla osób z daltonizmem.
dyslexia String Przycisk aktywujący profil wspierający użytkowników z dysleksją.
epileptic String Przycisk aktywujący profil wspierający użytkowników z epilepsją.
lowVision String Przycisk aktywujący profil wspierający osoby z niskim widzeniem.
reset String Przycisk resetujący wszystkie ustawienia.
statement String Przycisk wyświetlający deklarację dostępności.

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.
Przegląd prywatności

Ta strona korzysta z ciasteczek, aby zapewnić Ci najlepszą możliwą obsługę. Informacje o ciasteczkach są przechowywane w przeglądarce i wykonują funkcje takie jak rozpoznawanie Cię po powrocie na naszą stronę internetową i pomaganie naszemu zespołowi w zrozumieniu, które sekcje witryny są dla Ciebie najbardziej interesujące i przydatne.