Instalacja wtyczki dostępności MODX

Instalacja wtyczki

Krok 1: Rejestracja witryny i uzyskanie tokenu

Jeśli masz już konto, zaloguj się do DockWCAG, przejdź do swojego konta i skopiuj wygenerowany token.

Jeżeli instalujesz wtyczkę po raz pierwszy, zarejestruj się za pomocą Google, Facebooka lub użyj własnego adresu e-mail i hasła. 

Po założeniu konta przejdź do zakładki „Moje tokeny”, a następnie kliknij przycisk „Dodaj nowy”.

W formularz dodawania nowego tokena podaj adresy stron internetowych, na których chcesz zastosować ten token. Jeśli twoja strona działa na domenie np. example.com i www.example.com to konieczne jest dodanie obu adresów. Więcej na ten temat w dokumentacji.

Podczas tworzenia tokena oraz później podczas edycji możesz zaznaczyć opcję, aby dla twoje strony internetowej została wygenerowana deklaracja dostępności. Deklaracja dostępności to dokument wymagany dla instytucji publicznych w Unii Europejskiej. Jeśli dotyczy to twojej strony, to włącz deklarację dostępności i uzupełnij wymagane pola. Więcej na ten temat w dokumentacji.

Na koniec kliknij przycisk „Zapisz” i skopiuj wygenerowany token.

Krok 2: Dodawanie pluginu DockWCAG w MODX

W celu dodania pluginu w MODX przejdź do zakładki “Elementy”, a następnie “Pluginy” i kliknij przycisk dodawania pluginu.

Nadaj nazwę np “Assist For WCAG”, a w polu Plugin Code (PHP) wklej poniższy kod:

<?php

function loadAccessibility($token, $config)
{
    $html = "<script>";
    $html .= "(function (w, d, s, l, t, c = {}) {";
    $html .= "w[l] = c;";
    $html .= "w[l].token = t;";
    $html .= "var f = d.getElementsByTagName(s)[0],";
    $html .= "j = d.createElement(s),";
    $html .= "a = new Date().getTime();";
    $html .= "j.async = true;";
    $html .= "j.src = '//wcag.dock.codes/accessibility/' + t + '/start.js?t=' + a;";
    $html .= "f.parentNode.insertBefore(j, f);";
    $html .= "})(window, document, 'script', 'accessibility', '".urlencode($token)."', ".json_encode($config).");";
    $html .= "</script>";
    return $html;
}
$modx->regClientHTMLBlock(loadAccessibility('***', [
    'widget' => true,
    'options' => [
        'contrast' => true,
        'underline' => true,
        /// ...
    ],
    'selectors' => [
        'contrast' => '.wcag-contrast',
        'underline' => '.wcag-underline',
        /// ...
    ],
    /// ...
]));

Więcej na temat konfiguracji widgetu znajdziesz w dokumentacji.

Wklej kod i zastąp *** swoim unikalnym tokenem, który został wygenerowany w poprzednim kroku. 

Na koniec w zakładce “Zdarzenia systemowe” zaznaczamy opcję “OnWebPageInit” i klikamy „Zapisz”.

Krok 3: Podgląd witryny

Po dodaniu skryptu, przetestuj swoją stronę, aby upewnić się, że widżet jest prawidłowo zainstalowany i działa zgodnie z oczekiwaniami. Sprawdź wszystkie funkcje widżetu, aby zweryfikować, że instalacja przebiegła pomyślnie.