Dostępnik o latarnii morskiej

Strona internetowa powinna być dostępna, szybka i doskonale się wyszukiwać. Opowiem Ci dzisiaj, jak rzucić światło na stronę internetową i to w bardzo prosty sposób.

Każdy człowiek zajmujący się stronami internetowymi ma swój ulubiony kącik. Niektórzy cyzelują wygląd co do piksela i eksperymentują z nowymi właściwościami arkuszy stylów. Ja skupiam się na cyfrowej dostępności i robię to już machinalnie. Jeszcze inni optymalizują strony pod SEO, żeby pojawiały się jak najwyżej w wynikach wyszukiwania. Są i tacy, dla których kluczowe jest bezpieczeństwo, zgodność ze standardami, architektura informacji lub wydajność. Zawsze wtedy coś umknie i nie ma na to rady. Jednak jest narzędzie, które pozwala zminimalizować ten problem. A do tego obecne w niemal każdej przeglądarce internetowej.

Latarnia morska

Siostro, proszę skalpel i więcej światła. Otwieram klatkę piersiową i zaglądam do pacjenta. Więcej światła! Strona internetowa już prezentuje swoje wnętrze, które - dla niewprawnego oka - wygląda dość nieprzyjemnie. Ty też możesz zrobić to samo. Otwórz stronę internetową, której chcesz się przyjrzeć, w Chrome lub Edge. Teraz sięgnij po skalpel, czyli skrót klawiszowy ctrl + shift + i w Windows lub cmd + shift + i na Macos. Twoja piękna strona pokaże swoje brzydkie wnętrze.

Ten skrót klawiszowy uruchamia zestaw narzędzi deweloperskich. Poszukaj menu more tools i wybierz Lighthouse. To jest właśnie tytułowa latarnia morska, która rzuci światło na różne aspekty Twojej strony. Wystarczy teraz kliknąć przycisk Analyze page load i rozsiąść się wygodnie, a Lighthouse będzie milił. Po pewnym czasie wyświetli raport, który możesz przejrzeć.

Co w raporcie?

W wyświetlonym raporcie znajdziesz zestaw informacji w następujących tematach:

1. Performance (wydajność).

2. Accessibility (dostępność).

3. Best practices (najlepsze praktyki).

4. SEO (optymalizacja dla wyszukiwarek).

5. PWA (progressive web apps).

6. Publisher Ads.

Najbardziej interesują nas sekcje 1-4, a zatem wydajność, dostępność, dobre praktyki i SEO. Przy każdej sekcji znajdziesz procentowy wskaźnik opisujący jak bardzo Twoja strona podoba się latarni. Oczywiście dążymy do 100%, chociaż taki wynik uzyskać jest dość trudno.

Wydajność

W tej sekcji zobaczysz mnóstwo cyferek i wskaźników, które mogą być trudne do ogarnięcia. Jednak wszystko można rozwinąć i doczytać. Możesz tu sprawdzić, jaką robotę wykonał programista, żeby stronę uczynić ociężałą i irytującą. Przede wszystkim poczytaj ile skryptów i arkuszy stylów ładuje strona przy otwieraniu. Może za dużo… /sprawdź też, jakiej wielkości są te elementy i może uda się wyeliminować setki kilobajtów ładowanych do pamięci i przetwarzanych przez przeglądarkę. Na mojej stronie wydajność jest niezła i wynosi 70%.

Dostępność

Ten fragment raportu pochodzi z biblioteki Axe, czyli najbardziej znanego silnika do wykrywania błędów cyfrowej dostępności. Raport wyświetli wykryte błędy, zaproponuje sposób na ich rozwiązanie, wyjaśni o co w nich chodzi, a także przypomni, że część rzeczy trzeba sprawdzić ręcznie.

Najlepsze praktyki

Tu znajdziesz różne informacje, w tym o wykrytych bibliotekach JavaScript. Lighthouse sprawdzi przy okazji, czy użyte biblioteki są bezpieczne, to znaczy czy nie ma w nich wykrytych luk bezpieczeństwa. Jakie rzeczy znajdowałem w tej części raportu dla różnych stron… Nawet bardzo znanych i bogatych przedsiębiorstw. Ta część jest raczej dla administratorów, bo dużo tu bardzo technicznych pojęć.

SEO

W tej części raportu znajdziesz propozycje, jak zwiększyć widoczność swojej strony w Internecie. Strony mogą być lepiej lub gorzej wyszukiwane i czasem niewiele trzeba zrobić, żeby poprawić swoje wyniki w Google i innych wyszukiwarkach. Z drugiej strony - spotkałem stronę internetową, gdzie plik robots.txt był tak skonfigurowany, że strony prawie nie dawało się wyszukać. Jeżeli zatem zależy Ci na dobrym pozycjonowaniu, to zajrzyj właśnie tutaj..

Co jeszcze?

Pozostałych dwóch modułów nie będę opisywał, bo dotyczą bardzo wąskiego obszaru. Wspomnę jeszcze, że raport można zapisać na kilka sposobów. Możesz go wydrukować w podsumowania lub pełnej wersji oraz pobrać jako HTML lub JSON. I jeszcze jedna rada - używaj Lighthouse w przeglądarce brz rozszerzeń i w trybie incognito. To daje prawdziwsze rezultaty.

Polecanki

1. Razem z Agatą Gawską i Piotrem Osipą skończyliśmy Planer, czyli narzędzie do wspomagania koordynatorów do spraw dostępności. Pozwala na przygotowanie planu na rzecz dostępności w podmiotach publicznych. Planer jest bezpłatny i bardzo liczę, że także użyteczny. Jeżeli znasz koordynatorkę lub koordynatora - podziel się linkiem do Planera.

2. A skoro o Planerze, to opublikowałem w Saloniku rozmowę z Piotrem Osipą o naszej współpracy przy kilku aplikacjach. Piotr jest programistą, który dba o cały zestaw narzędzi na deklaracja-dostepnosci.info, w tym o generator, walidator i monitor deklaracji dostępności, Quizally i teraz także Planer. A sam pomysł Planera pojawił się po nagraniu z Agatą Gawską i tego też warto posłuchać, bo jest świetnym wprowadzeniem do samego Planera.

3. Pojawiła się informacja o pierwszym wydarzeniu związanym z GAAD. Piotr Źrołka z Kinaole zaprasza do zgłaszania prezentacji i uczestniczenia. Przypomnę, że GAAD (Global Accessibility Awareness Day) to coroczna inicjatywa podnoszenia wiedzy o dostępności. Inicjatywa jest globalna i każdy może się do niej przyłączyć. Strona wydarzenia jest na razie niemal pusta, ale z czasem będzie zapełniać się informacjami.

4. Konkurencja depcze mi po piętach! Fundacja Katarynka opublikowała pierwszy odcinek swojego podcastu. Jest oczywiście o dostępności, bo inaczej bym go tu nie opublikował. Odcinek jest zaś o tym, czy podcast może być dla osób głuchych. Jak sądzisz? Kataryniarze są super!

5. W życie wchodzi nowelizacja ustawy o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych. Podczas “dostępnej środy” Adam pietrasiewicz zreferował zmiany, a ja streściłem je u siebie na blogu. Kto ciekaw - niech czyta.

No proszę… Dotarliśmy do brzegu. Trochę się zastanawiam, czy Dostępnik nie robi się zbyt długi, ale tu potrzebuję informacji zwrotnej od Ciebie. A teraz życzę Ci spokojnych świąt Wielkiej Nocy. A jeżeli to dla Ciebie rzadne święto, to przynajmniej odpoczynku.