To jest część poradnika, z którego dowiesz się, jak pisać dostępne treści na stronie internetowej. 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. 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.
Bardzo ważny tytuł (nagłówek) kawałka tekstu
To jest treść naszego akapitu. Tu znajdują się informacje, które opatrzyliśmy tytułem, żeby zwrócić na nie uwagę.
To jest mniej ważny tytuł, stanowi nadal treść opatrzoną pierwszym tytułem
– To są informacje łatwe do zapamiętania, więc wylistowane,
– Oraz dalsza część tych informacji,
– I uzupełniająca część tych informacji.
Bardzo ważny tytuł (nagłówek) kawałka tekstu
To jest treść naszego akapitu. Tu znajdują się informacje, które opatrzyliśmy tytułem, żeby zwrócić na nie uwagę.
To jest mniej ważny tytuł, stanowi nadal treść opatrzoną pierwszym tytułem
- To są informacje łatwe do zapamiętania, więc wylistowane,
- Oraz dalsza część tych informacji,
- I uzupełniająca część tych informacji.
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ą informacje:
- O czym będzie ten tekst, – <h2> – przeczytaj, dlaczego nie stosujesz 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.
W WordPressie (w wielu innych systemach jest podobnie) nie stosuj nagłówka pierwszego poziomu <h1>. Zasada jest taka, że taki nagłówek powinien być tylko jeden. Jest on tytułem całej treści danego artykułu, czy strony. W edytorze masz miejsce na tytuł i w poprawnie zbudowanym szablonie strony WordPress sam już zadba, żeby ten właśnie tytuł miał znacznik <h1>. Zwykle też podaje go jako tytuł w pasku kart przeglądarki.
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.
Czy koniecznie musisz stosować te wszystkie znaczniki?
Istnienie znaczników nagłówków, akapitów, czy list nie jest wprost wymagane, ani wymuszane specyfikacjami, albo regulacjami prawnymi. Możesz ich nie chcieć, ponieważ:
- Zdarzają się przypadki, kiedy rodzaj tekstu wymaga specyficznych układów (np. poezja).
- Możesz uznać, że wśród twoich użytkowników nie będzie osób niewidomych, czy z niepełnosprawnościami (praktyka pokazuje, że zwykle to mylne założenie).
- Możesz też postanowić, że nawet jeśli będą to niewielu i nie chcesz poświęcać swojego czasu dla kilku osób.
Tylko że najczęściej i tak warto podzielić teksty na wizualnie łatwiejsze do przeczytania fragmenty. Taki tekst jest zwykle bardziej atrakcyjny dla oka. Jest większe prawdopodobieństwo, że każdy użytkownik doczyta go do końca, a o to przecież zwykle chodzi.
Skoro i tak wykonujesz pracę z formatowaniem tekstów, to przepisy wymagają, żeby elementy wyróżnione wizualnie, były odpowiednio oznaczone programowo (czyli znacznikami HTML). Rozwiązanie jest proste. Wystarczy, że zrobisz to, pamiętając o podstawowych zasadach. Otrzymasz tekst wyglądający nie tylko dobrze, ale dostępny i zgodny z WCAG.
A różnicę widać od razu.
Czy koniecznie musisz stosować te wszystkie znaczniki? Istnienie znaczników nagłówków, akapitów, czy list nie jest wprost wymagane, ani wymuszane specyfikacjami, albo regulacjami prawnymi. Możesz ich nie chcieć, ponieważ: Zdarzają się przypadki, kiedy rodzaj tekstu wymaga specyficznych układów (np. poezja). Możesz uznać, że wśród twoich użytkowników nie będzie osób niewidomych, czy z niepełnosprawnościami (praktyka pokazuje, że zwykle to mylne założenie). Możesz też postanowić, że nawet jeśli będą to niewielu i nie chcesz poświęcać swojego czasu dla kilku osób. Tylko że najczęściej i tak warto podzielić teksty na wizualnie łatwiejsze do przeczytania fragmenty. Taki tekst jest zwykle bardziej atrakcyjny dla oka. Jest większe prawdopodobieństwo, że każdy użytkownik doczyta go do końca, a o to przecież zwykle chodzi. Skoro i tak wykonujesz pracę z formatowaniem tekstów, to przepisy wymagają, żeby elementy wyróżnione wizualnie, były odpowiednio oznaczone programowo (czyli znacznikami HTML). Rozwiązanie jest proste. Wystarczy, że zrobisz to, pamiętając o podstawowych zasadach. Otrzymasz tekst wyglądający nie tylko dobrze, ale dostępny i zgodny z WCAG. A różnicę widać od razu.
Sztuka wyróżniania, (nie)ozdabiania i (nie)kolorowania tekstu
Najlepszym sposobem na zaznaczenie najważniejszych fragmentów wewnątrz akapitu jest pogrubienie. Naprawdę. Nic więcej nie trzeba.
Pogrubienie wyróżnia tekst wizualnie za pomocą elementu <strong>. Zwykle czytniki ekranu nie sygnalizują tego użytkownikowi. Google może, ale nie musi analizować takich elementów. Dlaczego więc to wystarczy?
- Osoby widzące częściej zatrzymają na tym wzrok.
- Osoby niewidome zwykle czytają znacznie uważniej, a dodatkowe elementy tylko przeszkadzają. Pogrubienie nie wpłynie na ich komfort.
Gdy krótki kawałek treści jest naprawdę bardzo ważny, lepiej użyj nagłówka.
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 teks nie jest specjalnym wyrażeniem.
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, czasem 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.
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 z ustawionym wysokim kontrastem — wybrano kolory, które wchodzą ze sobą w optyczną wibrację. Mimo spełnienia wymogów nie czyta się tego łatwo, a wzrok się męczy.
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 w poniższej ramce trzykrotnie.
To jest tekst z ustawionym całkiem czarnym kolorem czcionki. Dodałem do niego białą ramkę. Zobacz, co się stanie, jeśli przełączysz stronę na tryb ciemny, a jeśli masz taki już ustawiony w swoim systemie, to pewnie nie przeczytasz tej informacji :-).
To jest tekst z ustawionym ostrym, żółtym kolorem tła. Jak wyżej.
Podkreślenia i kursywa — jak ich używać
Podkreślaj tylko odnośniki (linki). To uniwersalna zasada. Wynika ona z historii stron internetowych i przyzwyczajenia użytkowników. Przeglądarki domyślnie wyświetlają tekst linków z podkreśleniem. Dzięki temu oszczędzisz użytkownikom frustracji, bo wiele osób będzie próbowało kliknąć podkreślony tekst.
Tekst, który tylko wygląda jak link, naprawdę można łatwo pomylić z prawdziwym linkiem.
Zasady dotyczące kursywy nie są już tak krytyczne, 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, ale też wyszukiwarkom jasny sygnał, że cytujemy czyjś tekst.
W następnej części poradnika opowiemy, jak opisywać obrazki, które wstawiamy na stronę internetową.