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

Logo laravel (otwiera nową kartę)

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
  2. 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ę (otwiera nową kartę) za pomocą Google, Facebooka lub użyj własnego adresu e-mail i hasła. Formularz rejestracji Po założeniu konta przejdź do zakładki "Moje strony", a następnie kliknij przycisk "Dodaj nową" (otwiera nową kartę).wcag my sites 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 (otwiera nową kartę). Na koniec kliknij przycisk "Zapisz" i skopiuj wygenerowany token. wcag token copy

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]"
  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
  2. Wklej dyrektywę @assistForWCAG przed 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.

  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 = '//wcag.dock.codes/accessibility/' + t + '/start.js';
        f.parentNode.insertBefore(j, f);
    })(document, 'script', '_TOKEN_');
</script>
  3. Dodaj kod do szablonu Blade:Otwórz główny plik layoutu, np.: 
    resources/views/layouts/app.blade.php

    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

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

Powiązane wpisy

Nadal szukasz odpowiedzi?

Zapytaj naszych specjalistów używając czatu online.

Skontaktuj się z nami