Wyobraź sobie sytuację, w której słońce pada Ci na ekran komputera czy telefonu i nie widzisz wyraźnie tekstu lub obrazu. Przypomnij sobie, ile razy próbowałeś/aś znaleźć coś na szybko w telefonie, prowadząc samochód czy rower i wydając komendy głosem lub też mając do dyspozycji tylko jedną rękę, bo w drugiej niesiesz zakupy albo trzymasz dziecko! Pomyśl, ile razy korzystałeś/aś z napisów, przeglądając instagramowe stories, bo czekałeś w poczekalni lub urzędzie albo usypiałeś dziecko.
To zaledwie kilka przykładów sytuacji, w których bywamy nie w pełni sprawni i w których technologia mogłaby nam pomagać. Często jednak tego nie robi tylko dlatego, że zabrakło uwagi przy jej tworzeniu.
Dołącz do newslettera Sektor 3.0
Porozmawiajmy więc o dostępności stron internetowych!
Mając z tyłu głowy sytuacje wspomniane przed chwilą, ale i ludzi, którzy na co dzień zmagają się z różnymi niepełnosprawnościami, musimy pamiętać o tym, aby tworzyć technologię dostępną dla wszystkich.
Co kryje się pod tym hasłem? Na pewno nie żadna wiedza tajemna. Wystarczy odrobina chęci, czasu i zainteresowanie tematem, aby zgłębić kwestie dostępności stron internetowych.
To, co także jest super ważne, to fakt, że od 4 kwietnia 2019 roku w Polsce obowiązuje ustawa, regulująca te kwestie. “Ustawa mówi o obowiązku dostępności cyfrowej i obowiązku umieszczenie deklaracji dostępności. Opisuje także zasady monitorowania dostępności cyfrowej i zasady postępowania w przypadku braku tej dostępności.” Na stronie rządowej znajdziesz wszystkie zasady i powyższą ustawę, ale w sieci pełno jest też poradników, które dokładnie opisują wymagane zasady.
Czym jest a11y?
Dostępność, po angielsku accessibility, a w slangu internetowym a11y, to nic innego jak zbiór zasad, dzięki którym strony www stają się dostępne dla wszystkich. Zarówno dla osób z wadami wzroku, jak i dla tych, którzy posługują się czytnikami, dla osób starszych czy tych, które nie korzystają z myszki, a jedynie klawiatury czy innej pomocy. Accessibility to troska o to, aby strony dostępne były dla każdego i w każdych warunkach!
Ale przejdźmy do konkretów…
Dobrze wiedzieć, czym jest a11y, ale o wiele istotniejsze jest to, aby wiedzieć, jak się o nie troszczyć i jak je wdrażać. Przede wszystkim warto rozróżnić dwie kategorie:
- to, co jesteś w stanie zrobić jako osoba obsługująca WordPressa czy inny CMS do tworzenia treści internetowych;
- to, co powinien zrobić programista, tworząc stronę Twojej organizacji.
Część tych wytycznych to poprawki w kodzie i trochę trudniejsze rzeczy, do których nie masz dostępu z poziomu edycji postów – i to właśnie jest zadanie dla programisty/stki. Ale jest też sporo rzeczy, które możesz robić pisząc bloga i dodając swoje treści na stronę. Zacznijmy więc od nich.
Praktyczne rady dla nie-developerów
Tekst alternatywny [ alt ]
Atrybut alt to alternatywny opis obrazka (eng: alternative text). Najprościej mówiąc, opis tego co się na nim znajduje. Wszystkie elementy dostępne jednym zmysłem (zdjęcia, grafiki, przyciski, dźwięki itp.) muszą mieć swoje opisy możliwe do odczytania przez czytniki ekranu. W WordPressie dodać je można niezwykle prosto. Należy wejść w zakładkę media, następnie kliknąć konkretne zdjęcie i w menu po prawej stronie pojawi się miejsce na wpisanie alternatywnego tekstu. Dodaj go, a pojawi on się on na stronie za każdym razem, gdy użyjesz tego zdjęcia.
Co ciekawe i nie bez znaczenia, z tych samych opisów korzystają też roboty Googla, co korzystnie wpływa na pozycjonowanie strony. Celem nadrzędnym jest jednak to, aby osoba niedowidząca mogła dowiedzieć się, co jest na zdjęciu. Nawet, jeśli jest na nim tylko kot czy krajobraz, pamiętaj, aby zawsze tworzyć te opisy.
Poprawne opisy linków
To drugi z najczęściej popełnianych błędów. Dodajemy link, a do niego opisy takie jak: „Zobacz więcej”, „Sprawdź to”, „Kliknij tutaj”. Opisy te zupełnie nic nie mówią odbiorcy naszej strony.Nie wie on, gdzie zostanie przeniesiony po kliknięciu, ani co kryje się pod linkami. Utrudnia to poruszanie się po stronie osobom korzystającym z czytników, ale i całej reszcie. Zwłaszcza w dobie wszechogarniających wirusów i dziwnych linków chcemy wiedzieć, w co klikamy i gdzie przeniesie nas dane hiperłącze. Pamiętaj więc, wstawiając linki na stronę, aby zawsze zawierały one informacje o tym, co się pod nimi kryje. Na przykład tak, jak robi to Sektor. 3.0.
Kontrasty kolorów
To już nie jest aż tak oczywiste, jeśli nie ma się problemu ze wzrokiem czy kolorami. Jednak to ważne, aby o tym pamiętać. Spójrz na te dwa przykłady:
Pierwszy – zupełnie nieczytelny, drugi – super wyraźny! Niby tylko kolory, a jednak tak bardzo wpływają na dostępność stron internetowych. Poprawny kontrast między tłem a kolorem to minimum 4,5:1. Jest to współczynnik kontrastu, który definiuje to, czy dany tekst jest czytelny. Możesz go w łatwy sposób sprawdzić, na przykład za pomocą tego narzędzia. Ogólna kolorystyka strony to oczywiście osobna kwestia, ale widziałam w swojej karierze sporo tekstów na blogach czy grafik, w których ktoś tak bardzo chciał wyróżnić swój tekst, że całkowicie zapominał o dostosowaniu go do standardów. W dalszej części tekstu znajdziesz spis narzędzi, które pomogą Ci dbać o poprawny kontrast na stronie www.
Wielkość fontu
Gdy masz 16 lat i w pełni zdrowy wzrok, wielkość fontu nie jest problemem.. Gorzej jest, gdy lat masz znacznie więcej, a do tego dochodzą problemy ze wzrokiem. Pamiętaj więc, że:
- 12px to minimum, aby tekst był czytelny;
- font bezszeryfowy to dobra praktyka;
- interlinia między wierszami: 1,15 lub 1,5 pkt to również dobra zasada.
Pamiętaj również, aby korzystać z wbudowanych stylów: Nagłówek 1, Nagłówek 2 itd. Pozwalają one osobom, korzystającym z czytników i klawiatury, sprawnie poruszać się po stronie i rozumieć jej konstrukcję. Nagłówek 1 powinien być na stronie tylko jeden i zazwyczaj jest to tytuł strony. Każdy tytuł o mniejszym priorytecie powinien mieć kolejny nagłówek – tak, aby całość stworzyła rodzaj konspektu dokumentu, który szybko pozwala zrozumieć logikę tekstu. Poniżej przykład.
Transkrypcje
To niestety ciągle największa bolączka polskiego Internetu. Transkrypcje filmów, audiodeskrypcje czy poprawne opisy są na ostatnim miejscu naszych checklist. A przecież sami tak często korzystamy z napisów, oglądając Instastories czy filmy w obcym języku z napisami. I wtedy wydaje nam się, że przecież one muszą być.. A gdy sami dodajemy film na stronę, zupełnie nie przywiązujemy do tego wagi.
O ile napisów do filmów jest już coraz więcej, co widać wyraźnie nawet na Instatories, to audiodeskrypcja to ciągle bolączka. Aby zrozumieć dlaczego jest ona tak ważna, puść jakikolwiek filmik na youtubie i zamknij oczy.
A teraz puść ten filmik i również zamknij oczy:
To właśnie audiodeskrypcja wykonana przez Fundację Katarynka. Dzięki niej osoby niewidzące lub bardzo słabo widzące mogą swoboodnie i, co najważniejsze, ze zrozumieniemobejrzeć film.
Fundacja Kultura Bez Barier stworzyła genialny poradnik o tym, jak tworzyć poprawne opisy i transkrypcje. Teraz już nie będziesz mieć wymówek.
Mobile first
Od paru dobrych lat strony internetowe to nie tylko komputer czy laptop, ale również telefon i tablet. Jest to wyzwanie zarówno dla projektantów stron internetowych, programistów, ale i samych odbiorców, bo nie zawsze strony dostosowane są do urządzeń mobilnych. Wielkość fontu to jeden z najczęstszych problemów, ale jest też drugi. Zupełnie zapominamy bowiem o odstępach.
Źródło: Mobile web – robisz to źle
Zwróć na to uwagę, gdy następny raz będziesz dodawać swój tekst na stronę. Każdy element powinien dać się kliknąć, być widoczny, czytelny i odpowiedniej wielkości.
Praktyczne rady dla developerów i developerek
Nie wszystkie poprawki jesteś w stanie zrobić sam/sama na stronie, ale powinieneś mieć ich świadomość i prosić swojego programiste/stkę, aby usprawniał i ulepszał Twoją stronę pod kątem a11y. O czym więc jeszcze powinieneś pamiętać?
Semantyka HTMLa – Zapytaj programistę, czy korzysta z html5 i wykorzystuje najnowsze znaczniki takie jak <section>, <article> czy <footer>.
Skip linki – Przejdź po swojej stronie, używając tylko przycisku Tab i zobacz, jakie to irytujące, gdy chcesz przejść już do treści, a ciągle jesteś w rozbudowanym menu. Przeczytaj o skip linkach i poproś o zaimplementowanie ich u siebie.
Focus elementów – Gdy poruszasz się po stronie tylko za pomocą klawiatury, powinieneś zawsze widzieć, w którym miejscu jesteś. Do tego właśnie służy focus. Często, aby strona była “ładniejsza”, jest on usuwany. Jednak jest to bardzo zła praktyka. Zwróć na to uwagę.
Ctr + – Jeśli dwukrotnie, trzykrotnie powiększysz wielkość fontu na Twojej stronie klikając CTR+ i nadal jest ona czytelna – super! Jeśli nie, koniecznie jest to do poprawy!
Tytuł strony – Nie chodzi tu tylko o ten widoczny gołym okiem, ale również i ten widoczny z perspektywy kodu. Zapytaj programistę, czy na Twojej stronie, ale i każdej podstronie jest użyty znacznik <title>.
Zrób audyt
Znajdziesz w sieci firmy, które zawodowo zajmują się audytem stron internetowych. Warto taki audyt choć raz swojej stronie zlecić. Ale są też dostępne narzędzia dzięki, którym możesz go zrobić samodzielnie. Oczywiście, jest on mniej szczegółowy, ale pomaga wyłapać najważniejsze błędy i szybko je naprawić.
Narzędzia ułatwiające tworzenie dostępnych stron:
- koa11y – to mój zdecydowany faworyt! Pobierasz program na komputer, wklejasz link strony, którą chcesz przeanalizować i dostajesz cudny plik z wszystkimi danymi. Bardzo szczegółowy, czytelny i niezwykle pomocny program!
- WAVE – narzędzie bardzo podobne do koa11y, ale w wersji przeglądarkowej.
- Google Lighthouse – przeglądarka chrome pozwala przeprowadzić audyt zarówno a11y, ale i seo czy performance. Kopalnia wiedzy zarówno pod kątem desktopów, jak i urządzeń mobilnych.
- Cotrast Checker – tutaj możesz dokładnie sprawdzić, czy Twoje kolory na stronie, spełniają zasadę kontrastu. Warto mieć tę stronę pod ręką.
Zapamiętaj!
Dostępność stron internetowych to dobra praktyka, ale i obowiązek! Dbajmy o to, aby internet był miejscem bez barier, dostępnym dla każdego. Czasem kosztuje to niespełna 5 minut więcej pracy, a korzyści są ogromne. W tym poradniku znajdziesz wyczerpującą wiedzę na temat dostępności w sieci. Poświęć trochę czasu na zgłębienie tego tematu, a obiecuję, że zaprocentuje!
A jeśli nadal nie do końca czujesz, czym jest accessibility to zachęcam do zapoznania się z najważniejszymi źródłami, które w wyczerpujący sposób opisują to zagadnienie.
- Fundacja Widzialni o WCAG 2.0
- Serwis Rzeczpospolitej Polskiej o dostępności
- Niepełnsprawni.pl o tym, jak tworzyć dostępne strony www
Dostępność Sektora 3.0
Od redakcji: tekst Eli Wróbel także i dla nas był impulsem do aktualizacji strony pod kątem dostępności. Korzystając ze wspomnianych narzędzi przeanalizowaliśmy zastosowane rozwiązania i wprowadziliśmy poprawki. Jedną z nich jest przycisk z symbolem oka po prawej stronie. Kryje pod sobą menu, dzięki któremu każdy czytelnik i czytelniczka może dostosować parametry wyświetlania strony do własnych potrzeb. W badaniu dostępności przy użyciu Google Lighthouse nasza strona otrzymała wynik 96 procent.
