Dostępne strony – teksty w internecie zgodne z WCAG

To jest część poradnika, z którego dowiesz się, jak pisać dostępne treści na stronie internetowej, w wiadomości e-mail oraz dokumentach. Na przykładzie edytora w systemie WordPress oraz w popularnym Tiny MCE pokażemy jak poprawnie formatować teksty, żeby były zgodne z WCAG.
Pamiętaj, każdy twój użytkownik, nie tylko osoba z niepełnosprawnością, zyska na poprawie dostępności i czytelności twoich treści.

Stosuj odpowiednie elementy tekstu

Nawet jeśli tego nie widać na pierwszy rzut oka, to każdy tekst (i nie tylko tekst) na stronie internetowej składa się z elementów HTML. To taki język znaczników, który steruje przeglądarką i mówi jej, co ma wyświetlić. Twoja niezbędna wiedza to:

• Musisz wiedzieć, jakie to są podstawowe elementy i kiedy się ich używa.
• Podstawowych elementów jest zaledwie kilka/kilkanaście.
• Nie musisz znać składni ani umieć pisać kodu HTML.

Właśnie! Nie musisz umieć kodować. Podstawowa edycja treści odbywa się w wizualnych edytorach, które za ciebie generują odpowiednie znaczniki i ich atrybuty. Taki edytor ma WordPress, Gmail, Outlook, Word. Trzeba jednak wiedzieć, z jakich klocków (elementów HTML) składa się nasz tekst i jak prawidłowo układać te klocki, żeby były wygodne do odczytania dla każdego. Dobrze jest też znać podstawowe właściwości, czyli atrybuty tych elementów.

Zacznijmy od prostej prezentacji trzech podstawowych elementów.

Przy okazji dowiemy się, do czego są nam potrzebne. Przyjrzyj się poniższym tekstom.

Te teksty wizualnie wyglądają podobnie. To całkiem dobrze podzielona treść, która zawiera nagłówki, akapit tekstowy i listę punktów, które łatwiej zapamiętać i które porządkują informacje.

Niestety tekst pierwszy, choć wizualnie ma zbudowaną strukturę, to dla technologii wspomagających i wyszukiwarki Google składa się z jednakowo ważnych, niczym niewyróżniających się kawałków tekstu.

Zobaczmy uproszczony kod. Pamiętaj, nie musisz znać tych znaczników, wystarczy, że zobaczysz różnicę.

<p>Bardzo ważny tytuł (nagłówek) kawałka tekstu</p>

<p>To jest treść naszego akapitu. Tu znajdują się informacje, które opatrzyliśmy tytułem, żeby zwrócić na nie uwagę.</p>

<p>To jest mniej ważny tytuł, stanowi nadal treść opatrzoną pierwszym tytułem</p>

<p>- To są informacje łatwe do zapamiętania, więc wylistowane,
- oraz dalsza część tych informacji,
- i uzupełniająca część tych informacji.</p>

<h2>Bardzo ważny tytuł (nagłówek) kawałka tekstu</h2>

<p>To jest treść naszego akapitu. Tu znajdują się informacje, które opatrzyliśmy tytułem, żeby zwrócić na nie uwagę.</p>

<h3>To jest mniej ważny tytuł, stanowi nadal treść opatrzoną pierwszym tytułem</h3>

<ul>
<li>To są informacje łatwe do zapamiętania, więc wylistowane,</li>
<li>oraz dalsza część tych informacji,</li>
<li>i uzupełniająca część tych informacji.</li>
</ul>

W pierwszym przypadku mamy po prostu cztery akapity – <p> (ang. paragraph). Żaden z nich niczym się nie wyróżnia, tylko wizualnie został dodatkowo zmieniony ich wygląd. Użyto do tego tak zwanych styli CSS, ale chwilowo nie musimy się tym zajmować. Dla wyszukiwarki Google oraz dla np. osoby niewidomej każdy z tych kawałków tekstu jest równie istotny. Lub równie nieistotny!

Drugi tekst zawiera znaczniki nagłówków, akapitu i listy. Taka struktura niesie ze sobą użyteczne informacje.

• Główna informacja, o czym będzie dalszy tekst, – <h2> – przeczytaj, dlaczego nie wstawiać w WordPressie nagłówka pierwszego poziomu <h1>;
• Co jest właściwą treścią, – <p>;
• Treść zawiera dodatkowe, istotne fragmenty – <h3>;
• Kawałek treści wymienia kolejne punkty w postaci listy – <ul>;
• Wskazuje fragment tekstu, który jest punktem na tej liście – <li>.

Dlaczego to jest ważne

Wyszukiwarce pozwala łatwo ocenić istotność i kompletność twojego tekstu. Algorytmy wyszukują nagłówki, żeby wstępnie ocenić, o czym jest tekst. Badają długość i zawartość treści oraz łatwość jej odczytania. Na tej podstawie oceniają, czy warto wyświetlić je w odpowiedzi na wyszukiwanie. Tekst bez nagłówków najprawdopodobniej zostanie uznany za mało istotny, nawet jeśli merytorycznie jest wartościowy.

Osoby korzystające technologii wspomagających mają te same korzyści z poprawnie formatowanego tekstu, ale dodatkowo mogą swoimi czytnikami przeskakiwać od nagłówka do nagłówka, szukać list i innych elementów, jak linki, tabele. Dzięki temu osoba niewidoma, czy słabowidząca porusza się po treści szybko. Łatwo znajduje interesujący fragment i może się z nim zapoznać. Osoby widzące mogą jednym rzutem oka odnaleźć ciekawy nagłówek i tam rozpocząć czytanie właściwego tekstu.
Bez znaczników osoby niewidome musiałyby czytać mozolnie całość. Dzięki informacji o liście i podanej liczbie punktów tej listy mogą zdecydować, czy chcą ją czytać. To sprawia, że zrozumiałość i czas potrzebny na zapoznanie z tekstem jest niemal taki sam dla każdego użytkownika.

Zobacz, jak użyć tych znaczników w edytorach WordPressa, a także w MS Word

WordPress od kilku lat zawiera blokowy edytor Gutenberg, jednak wcześniejsze wersje korzystały podczas edycji treści z bardzo popularnego edytora TinyMCE. Nadal jest on dostępny jako Edytor Klasyczny. Wiele wtyczek nadal może go używać. Jest on również jednym z najczęściej występujących w innych CMS.

W Gutenbergu mamy dostępne bloki „Akapit”, „Nagłówek”, „Lista”. Każdy z tych bloków ma swoje parametry, np. nagłówkom można ustawić poziom (H1, H2, H3). Obrazek poniżej pokazuje pasek ustawień nagłówka.

W klasycznym edytorze TinyMCE wybieramy potrzebny znacznik tekstu z menu, trochę podobnie jak w Word. Obok na belce menu znajdują się także przyciski do zmiany tekstu np. na listę, czy cytat. Przedstawiamy to na kolejnym obrazku.

Podczas edycji tekstów w aplikacji MS Word — tu z pakietu Microsoft 365 — obowiązują te same zasady. Wstążka narzędzi głównych zawiera odpowiednie elementy tekstu. Używaj nagłówków, list, akapitów. Dzięki temu twoje dokumenty będą dostępne, a jeśli kopiujesz i wklejasz je na stronę, to większość znaczników zostaje zachowana i nie musisz formatować tekstu od nowa. Fragment wstążki narzędzi Worda pokazujemy na obrazku poniżej.

Sztuka wyróżniania, (nie)ozdabiania i (nie)kolorowania tekstu

Gdy krótki kawałek treści jest naprawdę bardzo ważny, lepiej użyj nagłówka zamiast pogrubienia.

W przypadku WordPressa używany motyw ma już przygotowane style wyświetlania różnych elementów. Nie zmieniaj tego bez naprawdę ważnej przyczyny.

• Nie zmieniaj koloru czcionki,
• Nie zmieniaj koloru tła,
• Nie dodawaj podkreśleń, jeśli tekst nie jest linkiem,
• Nie zmieniaj wielkości czcionki bez naprawdę ważnego powodu — to może utrudnić powiększenie tekstu osobom słabowidzącym.
• Nie stosuj kursywy, jeśli tekst nie jest specjalnym wyrażeniem.
• Nie justuj tekstu.

Kolory

Dobrze określone, wbudowane kolory zapewniają odpowiedni kontrast tekstu z tłem. To ważne dla osób z dysfunkcjami wzroku. To również ważne dla każdego, kto używa niewielkiego ekranu, albo po prostu ma już zmęczony wzrok.

Co więcej, często wbudowane są mechanizmy, które pozwalają zmienić kolory strony na tryb ciemny albo tryb o wysokim kontraście. W tym przypadku, jeśli wprost ustawisz kolor dla elementu, może się okazać, że w innym trybie staje się on słabo, albo wręcz całkowicie niewidoczny. Ta zasada dotyczy również tekstów w wiadomościach e-mail oraz w dokumentach DOCX.

Przykłady niepotrzebnego użycia koloru

Nasza strona BON ma takie narzędzie do zmiany trybu wyświetlania — ikona oka nad menu (otwórz narzędzia dostępności). Zobacz, co się stanie z poniższymi tekstami, jeśli zmienisz kolory. Zobacz, jaki efekt mają ustawione kolory.

To jest tekst o wysokim kontraście — wybrano kolory, które wchodzą ze sobą w optyczną wibrację. Mimo że spełnia wymogi WCAG, nie czyta się tego łatwo, a wzrok się męczy. To jest przykład pokazujący, że czasami nawet specyfikacja dostępności nie jest wystarczająca.

To jest tekst z wybranym kolorem i tłem, które nie mają razem odpowiedniego kontrastu. Przymruż odrobinę oczy i spróbuj przeczytać ten tekst.

Jeśli w systemie masz ustawiony ciemny schemat kolorów, to kliknij wewnątrz poniższej ramki trzykrotnie.

To jest tekst z ustawionym ostrym, żółtym kolorem tła. Jak wyżej.

Podkreślenia i kursywa — jak ich używać

Zasady dotyczące kursywy nie są krytyczne dla dostępności, choć warto je znać.

Teksty pisane kursywą mają swoje określone znaczenie. Pochyła czcionka wyróżnia z tekstu takie fragmenty jak wyrażenia idiomatyczne, wyrazy obce, myśli. Zazwyczaj edytory stron otaczają taki tekst znacznikiem <i> jak idiomatic lub <em> jak emphasize.

Cytaty także bywają pisane kursywą. Jednak jeżeli twój system pozwala, użyj do ich oznaczania bloku, czy elementu cytatu. Zwykle takie elementy mają spójny wygląd w twojej witrynie. Dodatkowo takie fragmenty tekstów są oznaczane elementem <blockquote>, co daje osobom używającym czytników ekranu oraz wyszukiwarkom jasny sygnał, że cytujemy czyjś tekst.

Justowanie tekstów — nie rób tego w internecie.

To może być zaskakujące. Dla prawników nawet oburzające. Przecież wystarczy zajrzeć na każdą stronę z dokumentem prawnym, w każdy urzędowy monitor. Wszystkie dokumenty są tam porządnie, równiutko wyjustowane.

Tylko że zwykle oglądamy dokumenty w formacie PDF. To jest wersja do druku na papierze, nie do wyświetlania na ekranie.

Publikując dokumenty w internecie, wyrównuj tekst do lewej. Tak. Nawet najważniejsze dokumenty prawne nie powinny być justowane, jeśli nie są w wersji do wydruku. Poniższy przykład powinien przekonać każdego:

To jest treść podstawowego aktu prawnego w Polsce. Jest opublikowana na stronie sejmu. Nie jest wyjustowany.

Dlaczego justowanie jest problemem? Osoby słabowidzące powiększają często czcionki na ekranie. Teksty bez ustawionego specjalnego formatu zachowują się wtedy poprawnie. Justowanie wymusza rozciągnięcie każdej linijki na całą szerokość. W komputerze działa to zupełnie inaczej niż w drukarni. Tam często zwiększane są minimalnie odstępy między znakami, pozycje wyrazów ustala się ręcznie. No i wydrukowany tekst nie zmienia pozycji tych wyrazów. Tekst w internecie tylko rozsuwa wyrazy, żeby wypełnić przestrzeń.

Dobra wiadomość. WordPress od jakiegoś czasu nie ma w swoim edytorze opcji justowania tekstów. W ramach dbania o dostępność społeczność usunęła potencjalnie problematyczną funkcję. Wklejanie wyjustowanego tekstu z np. edytora Word nie przenosi tego szkodliwego formatu.

W następnej części poradnika opowiemy, jak opisywać obrazki, które wstawiamy na stronę internetową.