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.
- Instalacja pakietu:Uruchom terminal w katalogu głównym swojej aplikacji Laravel i wpisz polecenie:
composer require dockcodes/assistforwcag - Publikacja pliku konfiguracyjnego:Po zakończeniu instalacji opublikuj plik konfiguracyjny pakietu:
php artisan vendor:publish --provider="Dock\AssistForWCAG\DockServiceProvider" --tag="config"
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ę 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 strony", a następnie kliknij przycisk "Dodaj nową".
W formularzu dodawania nowego strony podaj adresy stron internetowych, na których chcesz zastosować token. Jeśli twoja strona działa na domenie np. example.com i np. www.example.com to konieczne jest dodanie obu adresów. Więcej na ten temat w dokumentacji.
Na koniec kliknij przycisk "Zapisz" i skopiuj wygenerowany token.
Krok 3: Konfiguracja tokenu
Po wygenerowaniu tokenu należy dodać go do pliku konfiguracyjnego środowiska Laravel.
- Otwórz plik
.envznajdujący się w katalogu głównym aplikacji. - Dodaj następujący wpis:
ASSIST_FOR_WCAG_TOKEN="[Wklej tutaj token]" - 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.
- Otwórz główny szablon Blade swojej aplikacji, np.:
resources/views/layouts/app.blade.php - Wklej dyrektywę
@assistForWCAGprzed zamknięciem znacznika</body>:<body> @assistForWCAG </body>
Krok 5: Wyczyść cache konfiguracji
Po zapisaniu zmian zaleca się wyczyszczenie cache konfiguracji Laravel.
php artisan config:clear
php artisan cache:clear
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.
- Uzyskaj token:Wykonaj kroki opisane w sekcji „Krok 2” powyżej.
- Skopiuj kod skryptu:
<script> (function (d, s, t) { var f = d.getElementsByTagName(s)[0], j = d.createElement(s); j.async = true; j.src = '//wcag.dock.codes/accessibility/' + t + '/start.js'; f.parentNode.insertBefore(j, f); })(document, 'script', '_TOKEN_'); </script> - Dodaj kod do szablonu Blade:Otwórz główny plik layoutu, np.:
resources/views/layouts/app.blade.phpNastępnie wklej skrypt przed znacznikiem zamykającym
</body>. - Zastąp token:Zamień ciąg
_TOKEN_na swój unikalny token. - Wyczyść cache:
php artisan config:clear php artisan cache:clear
Po wykonaniu powyższych kroków widżet dostępności WCAG będzie aktywny w Twojej aplikacji Laravel.