Dostępność strony: pięć rzeczy, które zrobisz bez programisty

To nie jest robota od kodu. To robota od tekstu

Zacznijmy od pomyłki, przez którą ten temat u wielu firm nigdy nie rusza.

Słowo dostępność każe myśleć o kimś od kodu i o długiej liście zmian w szablonie. Część rzeczy faktycznie tak wygląda.

Ale nie wszystko. Osoba pisząca treści może przygotować lepszy opis zdjęcia, tekst linku, układ nagłówków i podpisy pól. Może też sprawdzić kontrast oraz zauważyć, że formularz potrzebuje poprawki technicznej.

Wypiszmy je od razu, żeby było wiadomo, o czym mowa. Opis obrazka. Kontrast tekstu. Treść linku. Nagłówki. Podpisy pól w formularzu.

Nie każda strona daje redaktorowi te same pola. Jeden panel pozwala oznaczyć obrazek jako ozdobny, drugi pokazuje tylko zwykłe pole opisu. Jeden formularz da się edytować, drugi jest częścią szablonu.

Dlatego hasło „bez programisty” znaczy tutaj coś konkretnego. Nie musisz umieć kodować, aby dobrze opisać problem albo przygotować treść. Czy daną poprawkę zapiszesz we własnym panelu, zależy od panelu i od szablonu.

Ta granica jest przydatna przy przygotowaniu briefu na stronę. Zamiast zgłaszać ogólne „zróbmy dostępność”, wskaż konkret. Ten obrazek nie ma opisu. Te trzy linki nic nie mówią. Ten podpis pola nie działa po kliknięciu.

Jest jeszcze jeden powód, żeby zacząć od treści. Kto dodaje zdjęcie, najczęściej najlepiej wie, co ono ma przekazać. Nikt z zewnątrz nie zgadnie tego bez kontekstu.

Dla kogo to robimy? Na przykład dla osoby, która nie widzi ekranu i słucha strony przez czytnik ekranu.

Ale nie tylko. Jasny tekst linku ułatwia wybór celu. Dobry kontrast pomaga czytać w trudniejszych warunkach. To konkretne ulepszenia, a nie osobny tryb strony.

Opis obrazka: co wpisać, a kiedy zostawić puste

Pierwsza rzecz i zarazem ta, o której najczęściej się zapomina.

W wielu panelach przy zdjęciu jest pole na opis. Nazywa się różnie: czasem tekst alternatywny, czasem po prostu opis. To tekstowa alternatywa dla informacji, którą niesie obrazek.

Reguła W3C jest krótka. Każda treść, która nie jest tekstem, ma mieć tekst, który pełni tę samą rolę. To jest kryterium 1.1.1 i stoi na najniższym, czyli najbardziej podstawowym progu.

Jak to zrobić dobrze? MDN radzi, żeby opis był krótki i zwięzły, i żeby zawierał to, czego nie ma już w tekście obok.

Zwróć uwagę na drugą część tej rady, bo tam siedzi najczęstszy błąd. Jeśli pod zdjęciem stoi podpis mówiący to samo, opis nie ma tego powtarzać.

Najprostszy sprawdzian brzmi tak. Zasłoń zdjęcie ręką i przeczytaj sam tekst dookoła. Czego teraz brakuje? To właśnie ma trafić do opisu.

A jeśli po zasłonięciu nic nie ginie, masz przed sobą ozdobnik. Wtedy technologia wspomagająca powinna móc go pominąć.

I teraz rzecz, która dziwi najbardziej. W kodzie obraz ozdobny ma pustą wartość atrybutu alt. Nie jest to to samo co pominięcie atrybutu.

W panelu może za to istnieć przełącznik typu „obraz ozdobny”. Jeśli go nie ma, nie zakładaj, że puste pole zrobi właściwą rzecz. Zgłoś programiście, że obrazek ma być pominięty przez technologie asystujące.

MDN pokazuje przykład, w którym VoiceOver bez tekstowej alternatywy odczytuje nazwę pliku. Inne czytniki mogą zachować się inaczej, ale żadna z tych odpowiedzi nie wyjaśnia sensu zdjęcia.

To przydaje się także przy wyborze materiału do zdjęć i wideo na stronę. Najpierw ustal, co obraz ma przekazać. Dopiero potem dobierz dla niego opis albo oznaczenie, że to ozdobnik.

Kontrast: jedyna rzecz z konkretną liczbą

Druga rzecz jest wyjątkowa, bo ma twardą liczbę zamiast oceny. Da się ją sprawdzić, jeśli panel pozwala Ci wybrać kolor tekstu albo tła.

W3C podaje, że tekst ma mieć wobec tła stosunek jasności co najmniej 4,5 do 1. Dla dużego tekstu wystarczy 3 do 1.

Duży tekst też jest zdefiniowany, nie zostawiony do uznania. To co najmniej osiemnaście punktów albo czternaście punktów pogrubione.

Skąd wziąć tę liczbę u siebie? Wpisujesz kolor tekstu i kolor tła do miernika kontrastu, a on podaje wynik dla tej pary.

Miernik kontrastu to zwykła strona, na której wklejasz dwa kolory. Jeśli ich kody są dostępne w panelu, możesz sprawdzić parę bez niczyjej pomocy.

Jedna uwaga do samego liczenia. Liczy się tło tuż pod tekstem, a nie ogólne tło sekcji. Przy napisie na zdjęciu to bywają dwie różne rzeczy.

Gdzie szukać problemów? Prawie zawsze w tych samych trzech miejscach.

Szary tekst na białym tle, bo wygląda elegancko w projekcie. Napis na zdjęciu, bo zdjęcie ma jasne i ciemne partie. I tekst na kolorze marki, bo kolor marki dobierano do logo, a nie do czytania.

To ostatnie bywa niewygodne, bo dotyka rzeczy ustalonej dawno i przez kogoś innego. Rozwiązaniem nie musi być zmiana koloru marki. Można zmienić kolor tekstu, zapewnić jednolite tło pod napisem albo zrezygnować z tekstu na zdjęciu. Samo pogrubienie nie zwalnia ze sprawdzenia kontrastu.

Trzy rzeczy, które ładnie wyglądają i nie działają

Teraz trzy sprawy, które łączy jedno. Na ekranie wygląda to poprawnie, a dla kogoś, kto słucha, po prostu nie istnieją.

Pierwsza to linki. W3C wymaga, żeby cel linku dało się rozpoznać z samego tekstu linku albo z tekstu razem z jego otoczeniem.

MDN mówi to samo prościej i podaje powód. Czytniki ekranu potrafią wyciągnąć ze strony samą listę linków. Wtedy widzisz je bez zdań dookoła.

Lista z pozycjami „kliknij tutaj”, „tutaj” i „więcej” nie mówi nic. Poprawka jest banalna: zamiast „aby dowiedzieć się więcej, kliknij tutaj” piszesz „dowiedz się więcej o cenach dostawy”.

Tekst linku bywa jedyną wskazówką, co jest po drugiej stronie. Dla człowieka i dla maszyny.

To jest też dobra zasada przy linkach w innych treściach, na przykład w artykule o czytaniu raportu z kampanii. Sam opis odsyłacza powinien powiedzieć, dokąd prowadzi.

Druga rzecz to nagłówki. Chodzi o to, żeby nagłówek był nagłówkiem, a nie zwykłym tekstem, któremu ktoś powiększył czcionkę.

Różnica jest niewidoczna na ekranie i ogromna w odbiorze. MDN wylicza, co daje prawdziwy nagłówek: czytnik zapowiada, że to nagłówek, pozwala przeskoczyć do następnego i potrafi pokazać spis wszystkich naraz.

Ten spis to w praktyce spis treści Twojej strony. Ktoś, kto słucha, przegląda go tak, jak Ty przebiegasz wzrokiem po stronie.

Jak sprawdzić, czy nagłówek jest prawdziwy? Postaw kursor w tym tekście i zobacz, co pokazuje lista stylów w panelu. Jeśli widnieje tam zwykły akapit, a tekst i tak jest duży, to właśnie ten przypadek.

Trzecia rzecz to podpisy pól w formularzu. Tekst „Twój adres e-mail” powinien jasno mówić, co wpisać, a technicznie powinien być powiązany z polem, nie tylko położony obok.

Tu dokładnie widać podział odpowiedzialności. Redaktor może poprawić niezrozumiały tekst podpisu. Powiązanie podpisu z polem jest zwykle częścią formularza lub szablonu, więc może wymagać programisty.

W3C podaje prosty objaw poprawnego powiązania: oznaczony podpis staje się klikalny i ułatwia obsługę pola. Jeśli po kliknięciu napisu kursor nie trafia do pola, opisz to osobie technicznej. To test, nie naprawa w panelu.

Przy formularzach warto też oddzielić dostępność od treści zgody. O tym, co dzieje się po kliknięciu zgody w formularzu, pisaliśmy osobno.

Kwadrans: sprawdź to na własnej stronie

Wszystko powyżej da się sprawdzić u siebie i nie trzeba do tego żadnego programu poza przeglądarką oraz miernikiem kontrastu.

Poniższa lista pochodzi w dużej części z zestawu wstępnych sprawdzeń W3C. To ich własna propozycja dla ludzi spoza działu technicznego.

Zrób to najpierw na jednej reprezentatywnej podstronie. Nie na wszystkich naraz, bo łatwiej wtedy sprawdzić, czy rozumiesz wynik testu.

Nie potrzebujesz do tego żadnego programu poza jednym miernikiem kontrastu. Reszta to patrzenie i klikanie.

Wynik zapisz gdziekolwiek, choćby w notesie. Dzięki temu osoba od treści i osoba od kodu zobaczą ten sam zakres pracy.

• Popatrz na tytuł podstrony w karcie przeglądarki. Czy krótko mówi, co tu jest, i czy różni się od tytułów innych podstron?
• Przejdź stronę samym tabulatorem, bez myszy. Czy dojdziesz do wszystkich linków, pól i przycisków, i czy widać, gdzie właśnie jesteś?
• Powiększ tekst do dwustu procent. Czy wszystko rośnie, nic nie znika, nic nie jest ucięte i nic nie nachodzi na siebie?
• Wypisz same teksty linków z jednej podstrony, bez zdań dookoła. Ile z nich mówi cokolwiek?
• Sprawdź trzy pary kolorów w mierniku kontrastu: tekst zwykły, tekst na kolorze marki i napis na zdjęciu.
• Otwórz pięć ostatnio dodanych zdjęć i zobacz, czy mają opisy. Osobno sprawdź, czy ozdobniki mają opis pusty, a nie przypadkowy.
• Kliknij w napis obok pola w swoim formularzu. Jeśli kursor nie wskoczył do pola, zanotuj to jako problem techniczny do sprawdzenia.

Czego ten tekst nie mówi

Teraz część, przez którą wpis wygląda na ostrożny. Jest ostrożny celowo.

Po tych pięciu poprawkach Twoja strona nie stanie się zgodna z WCAG i nie powiemy, że się stanie. Zgodność dotyczy całego zestawu kryteriów, a my mówimy o kilku z nich i o kilku sprawdzeniach.

Nie powiemy też, kto ma jaki obowiązek. To pytanie prawne, a my nie jesteśmy prawnikami. Mówimy, co stoi w dokumentach W3C i jak to zrobić, a nie kto musi.

Te pięć rzeczy nie jest pełnym przeglądem wykonanym przez kogoś, kto się tym zajmuje. To jednak ruch zamiast stania w miejscu, a to duża różnica.

Nie załatwi też wszystkiego, co siedzi w szablonie. Kolejność wczytywania, obsługa klawiatury w rozwijanych menu, komunikaty o błędach - to już jest robota dla kogoś od kodu.

Mówimy o tym wprost, bo inaczej cała lista brzmi jak obietnica. Te pięć rzeczy to początek, nie komplet.

Za to początek jest dobrze wybrany. Dotyczy zdjęć, linków, nagłówków i pól, czyli elementów obecnych na wielu stronach.

W małym serwisie część listy możesz przejść bez niczyjej pomocy. Jeśli panel nie daje potrzebnego pola albo test ujawnia problem techniczny, nie zgaduj. Zapisz konkretny objaw i przekaż go osobie od strony.

I ostatnia uwaga, żeby nie było wątpliwości. Nie sprawdzaliśmy Twojej strony i nic o niej tu nie twierdzimy.

Skąd to wiemy

Wszystkie reguły pochodzą z dokumentacji W3C albo MDN, nie z cudzych opracowań. Adresy są pod tekstem.

Treść kryteriów oraz liczby dotyczące kontrastu pochodzą wprost z WCAG 2.2, dokumentu W3C. Tłumaczenie jest nasze, więc przy wątpliwości warto zajrzeć do oryginału.

Lista sprawdzeń pochodzi z zestawu wstępnych sprawdzeń W3C. Ten zestaw wprost rozróżnia między innymi testy obrazów, nagłówków, klawiatury i formularzy.

Wyjaśnienia o liście linków, tekście alternatywnym i użyciu podpisu pola pochodzą z poradnika MDN, prowadzonego przez Mozillę.

Przejrzeliśmy też aktualne publikacje innych firm. Powtarzają one obrazki, nagłówki, kontrast i formularze. W tym tekście nie kopiujemy ich listy ani przykładów. Zamiast tego pokazujemy granicę między decyzją redakcyjną a poprawką w kodzie.