Jak zainstalować widżet dostępności w Laravel

Poniższa instrukcja przeprowadzi Cię przez proces instalacji pakietu oraz konfiguracji widżetu dostępności WCAG w aplikacji Laravel.

Krok 1: Instalacja pakietu

W środowisku Laravel rekomendowaną metodą instalacji pakietów jest użycie menedżera Composer.

1. Instalacja pakietu:Uruchom terminal w katalogu głównym swojej aplikacji Laravel i wpisz polecenie:

   composer require dockcodes/assistforwcag
   Skopiuj tekst

2. Publikacja pliku konfiguracyjnego:Po zakończeniu instalacji opublikuj plik konfiguracyjny pakietu:

   php artisan vendor:publish --provider="Dock\AssistForWCAG\DockServiceProvider" --tag="config"
   Skopiuj tekst

Krok 2: Rejestracja witryny i uzyskanie tokenu

Aby widżet mógł połączyć się z usługą, wymagane jest wygenerowanie unikalnego tokenu API.

Jeżeli instalujesz wtyczkę po raz pierwszy, zarejestruj się (otwiera nową kartę) za pomocą Google, Facebook, GitHub lub własnego adresu e-mail i hasła.

Po założeniu konta przejdź do zakładki „Moje strony”, a następnie kliknij przycisk „Dodaj stronę” (otwiera nową kartę).

W formularzu dodawania nowej strony podaj adresy stron internetowych, na których chcesz zastosować token. Jeśli Twoja strona działa np. na domenie example.com oraz www.example.com, dodaj oba adresy. Więcej na ten temat w dokumentacji (otwiera nową kartę).

Na koniec kliknij przycisk „Zapisz” i skopiuj wygenerowany token z pola „Twój token”.

Krok 3: Konfiguracja tokenu

Po wygenerowaniu tokenu należy dodać go do pliku konfiguracyjnego środowiska Laravel.

1. Otwórz plik .env znajdujący się w katalogu głównym aplikacji.
2. Dodaj następujący wpis:

   ASSIST_FOR_WCAG_TOKEN="[Wklej tutaj token]"
   Skopiuj tekst

3. Zapisz plik.

Krok 4: Dodanie widżetu do aplikacji

Pakiet udostępnia dyrektywę Blade, dzięki której możesz łatwo osadzić widżet w dowolnym miejscu aplikacji.

1. Otwórz główny szablon Blade swojej aplikacji, np.:

   resources/views/layouts/app.blade.php
   Skopiuj tekst

2. Wklej dyrektywę @assistForWCAG przed zamknięciem znacznika </body>:

   <body>
       @assistForWCAG
   </body>
   Skopiuj tekst

Krok 5: Wyczyść cache konfiguracji

Po zapisaniu zmian zaleca się wyczyszczenie cache konfiguracji Laravel.

php artisan config:clear
php artisan cache:clear
Skopiuj tekst

Krok 6: Podgląd witryny

Po zakończeniu konfiguracji przejdź na swoją stronę internetową i sprawdź, czy widżet dostępności został poprawnie załadowany. Przetestuj funkcje dostępności, takie jak:

• zmiana kontrastu,
• powiększanie tekstu,
• czytanie tekstu na głos,
• nawigacja klawiaturą,
• profile dostępności WCAG.

---

Alternatywa: Ręczne dodanie skryptu (bez użycia pakietu)

Jeśli z jakiegoś powodu nie możesz użyć pakietu Composer, możesz dodać widżet ręcznie do swojej aplikacji Laravel.

1. Uzyskaj token:Wykonaj kroki opisane w sekcji „Krok 2” powyżej.
2. Skopiuj kod skryptu:

   <script>
       (function (d, s, t) {
           var f = d.getElementsByTagName(s)[0],
               j = d.createElement(s);
           j.async = true;
           j.src = '//dockaccess.org/accessibility/' + t + '/start.js';
           f.parentNode.insertBefore(j, f);
       })(document, 'script', '_TOKEN_');
   </script>
   Skopiuj tekst

3. Dodaj kod do szablonu Blade:Otwórz główny plik layoutu, np.:

   resources/views/layouts/app.blade.php
   Skopiuj tekst

   Następnie wklej skrypt przed znacznikiem zamykającym </body>.
4. Zastąp token:Zamień ciąg _TOKEN_ na swój unikalny token.
5. Wyczyść cache:

   php artisan config:clear
   php artisan cache:clear
   Skopiuj tekst

Po wykonaniu powyższych kroków widżet dostępności WCAG będzie aktywny w Twojej aplikacji Laravel.