PODNIESIENIE DOSTĘPNOŚCI STRONY INTERNETOWEJ CZ. 3

Po lewej fragment strony w dark mode, po prawej dla porównania jasny tryb

Zacznijmy od podstaw – czym jest dark mode?

Dark mode jest układem kolorystycznym, który charakteryzuje się użyciem mniejszej ilości jasnych kolorów. Zazwyczaj podstawą jest ciemne tło z jasnym tekstem, jasnymi ikonami itp.

Co daje użycie Dark Mode?

Po pierwsze – zmniejszenie zużycia energii. Oczywiście, jeśli mówimy o odpowiednich wyświetlaczach. Przykładowo, jeśli jesteś właścicielem urządzenia z systemem OLED lub AMOLED, z pewnością zaoszczędzisz.

Po drugie –  łatwiejsze czytanie w ciemnym pomieszczeniu. Jednak tu też jest małe ale – osoby z astygmatyzmem mogą odbierać gorzej jasny tekst na ciemnym tle.

Po trzecie – od wieki wieków używasz monitora z lampą kineskopową, jedyne co znasz to ciemna linia komend i jak już włączysz swój najnowszy smartphone, razi Cię niemiłosiernie 🙂

Czy możemy uznać za dodanie trybu ciemnego jako podniesienie dostępności strony internetowej?

Wspomogę się tutaj cytatem:

“The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.”
Tim Berner-Lee, W3C Director and inventor of the World Wide Web

Jeżeli zwiększymy uniwersalność poprzez dodanie trybu ciemnego i chociaż jeden z naszych czytelników na tym skorzysta, to zdecydowanie mogę stwierdzić, że tak – wprowadzenie tego trybu zwiększa Accessibility.

Dodam tylko jeden warunek: pozwólmy użytkownikom swobodnie zmieniać tryby i nie wymuszajmy użycie tylko jednego z nich.

Jeśli jesteś użytkownikiem WordPressa, polecam wtyczkę WP Night Mode. Dość prosta w użyciu, w moim przypadku spowodowała jedna małą niedogodność – w dark mode zniknęło hamburger menu na widokach mobilnych 😀 Trochę grzebania w CSSach i mam teraz nowe, lepsze, czerwone menu!

 

PODNIESIENIE DOSTĘPNOŚCI STRONY INTERNETOWEJ CZ. 2

W ostatnim czasie wróciłam do zagłębiania tajników dostępności stron internetowych. Na stronie W3C wygrzebałam bardzo ciekawy kurs Web Accessibility. Polecam go właściwie wszystkim. Temat do zgłębienia zarówno dla dev, QA, BA, design, PO, PM itd.

W kusie pokazali m.in. różne narzędzia, które pozwolą sprawdzić poziom dostępności strony. Oczywiście od razu postanowiłam sprawdzać na żywym organizmie 🙂  (do tej pory pokazałam jak zmierzyć dostępność za pomocą Lighthouse wbudowanego w Chroma).

Pierwsza na celownik poszła wtyczka do przeglądarki WAVE. U mnie pokazała masę błędów, których Lighthouse nie wychwycił:

Wynik audytu wtyczni wave przed zmianami.

36 błędów pokazało ewidentnie, że jest sporo do zrobienia. Na szczęście okazało się, że przede wszystkim brakowało alternatywnych tekstów. Po jakiejś godzinie edytowania kolejnych wpisów wynik znacznie się poprawił:

Wynik audytu wave po wprowadzeniu kilku zmian.

14 błędów mniej wydaje się niezłym sukcesem jak na godzinę pracy. I w tym momencie nasuwa się pytanie: czy gdybym od razu dodawała do każdego obrazka alternatywny tekst, musiałabym w niedzielne popołudnie stracić aż godzinę? Oczywiście, że nie. Skończyłoby się na kilku sekundach podczas pisania każdego wpisu. To taki mały przykład tego, jak wczesne myślenie o Accessibility redukuje czas wprowadzania go w późniejszym okresie projektu.

Kolejne 24 błędy związane są brakiem tekstu w linkach umożliwiających udostępnienie postu w różnych kanałach społecznościowych:

Pokazanie screena z błędem.

Jedak tu będę musiała dłużej pogrzebać czy w WordPressie jestem w stanie cokolwiek sama z tym zrobić.

Ciekawe jest również to, że po wprowadzeniu kilku zmian pojawiły się dwa błędy związane z kontrastem, długo się nad nimi głowiłam. Ostatecznie okazało się, że test po poprawkach robiłam będąc w trybie admina w WordPressie i błędy te odnoszą się bezpośrednio do panelu admina.

Pierwsze wrażenie wtyczki jest całkiem pozytywne. Prosta, łatwe odniesienia i, co najważniejsze, mnóstwo podpowiedzi i odnośników, które pomagają łatwo i szybko poprawić dostępność testowanego elementu.

W następnej kolejności zabieram się za wszystkie alerty! Krok po kroczku i wkrótce moja strona będzie przyzwoicie dostępna 🙂