Znaczenie dostępności list w E-bookach

A woman with dark hair in a bun, sitting at a desk, working on a computer. The screen displays a numbered list and an image placeholder. To her left, there is a snippet of HTML code showing a nested list structure.

Autor

Monika Zarczuk-Engelsma

Opublikowano

21 lut 2025

Category

Dostępność

Chociaż CSS pozwala na szerokie modyfikowanie wyglądu list, należy pamiętać, by nie wpływać negatywnie na ich dostępność.

W Have a Book często pracujemy nad konwersją książek edukacyjnych i akademickich, w których listy są powszechne. Ich poprawne oznaczanie już na etapie składu ma kluczowe znaczenie dla tworzenia ebooków o poprawnej strukturze, dostępnych dla czytników ekranowych i technologii asystujących.

Prawidłowo sformatowane listy nie tylko zwiększają dostępność i przyswajalność treści, ale i poprawiają komfort czytania wszystkim użytkownikom.

 Semantyka list w E-bookach

Aby listy były dostępne, powinny być tworzone z wykorzystaniem semantycznych tagów HTML:

  • <ul> (unordered list) – lista nieuporządkowana, używana do grupowania elementów bez określonej hierarchii, np. wyliczenia cech czy kategorii. Czytniki ekranowe rozpoznają je jako „lista punktowana, X elementów”.

  • <ol> (ordered list) – lista uporządkowana, stosowana, gdy kolejność elementów ma znaczenie, np. instrukcje krok po kroku. Czytniki ekranowe odczytują je jako „lista numerowana, X elementów” i informują o ich prawidłowej kolejności.

  • <li> (list item) – element listy, który powinien znajdować się wewnątrz <ul> lub <ol>.

Dzięki zastosowaniu tych znaczników czytniki ekranu mogą poprawnie interpretować i odczytywać zawartość list, co znacząco wpływa na komfort pracy i ułatwia nawigację np. po akademickim podręczniku, użytkownikom z niepełnosprawnościami wzroku.

 Zagnieżdżanie list

W niektórych przypadkach konieczne może być użycie list zagnieżdżonych, w celu przedstawienia podpunktów, np. hierarchiczne podpunkty w podręcznikach. Jeśli są poprawnie oznaczone, czytnik ekranowy sygnalizuje poziomy ich zagnieżdżenia. Aby zachować dostępność, upewnij się, że każda zagnieżdżona lista znajduje się wewnątrz <li> nadrzędnej listy.

Przykładowa poprawna struktura zagnieżdżonej listy:

<ul>
  <li>Główna kategoria
    <ul>
      <li>Podpunkt 1</li>
      <li>Podpunkt 2</li>
    </ul>
  </li>
</ul>

 

Jak tworzyć dostępne listy

Zamieszczamy kilka rad i wskazówek, które – mamy nadzieję – sprawią, że tworzone i edytowane przez Was listy będą skonstruowane prawidłowo, stając się tym samym dostępnymi:

  • Struktura, a nie stylizacja – listy powinny być tworzone jako elementy semantyczne (<ul> i <ol>), a nie ręcznie formatowane punktorami.

  • Upewnij się, że listy są poprawnie otagowane (<ul>, <ol>, <li>) – jeśli w źródłowym pliku występuje jedynie wizualne punktorowanie (np. ręcznie dodane myślniki), konieczna jest konwersja do odpowiednich znaczników HTML.

  • Nie stosuj list do formatowania tekstu – w niektórych plikach wejściowych zdarzają się sytuacje, gdzie listy są używane do symulowania kolumn lub wyrównywania treści. W takich przypadkach konieczna jest poprawa podczas konwersji.

 Testowanie list pod kątem dostępności

Aby upewnić się, że listy są poprawnie odczytywane przez technologie asystujące, warto przeprowadzić następujące testy:

  • Czytnikiem ekranu (np. NVDA lub/i JAWS dla Windows, VoiceOver dla IOS, talk back dla androida). Zwróć uwagę na to, czy listy są odczytywane w sposób zrozumiały i logiczny.

  • Walidatorami dostępności (np. WAVE, axe) – narzędzia te pomogą wykryć potencjalne błędy semantyczne.

  • Testy manualne – pokaż książkę komuś, kto używa na co dzień czytników ekranu, zapytaj, czy lista jest czytelna i intuicyjna dla użytkowników korzystających z różnych urządzeń (czytników książek, komputera, telefonu).

Praktyczne zastosowanie dostępnych list

Oto trzy przykłady dobrze skonstruowanych list, które znacząco poprawiły dostępność treści dla osób niewidomych:

1. Podręczniki i książki edukacyjne

W E-bookach edukacyjnych listy pomagają wszystkim w lepszym zrozumieniu struktury informacji. W przypadku osoby niewidomej, stają się wręcz nieodzowne. Przykładem mogą być podręczniki do nauki programowania, gdzie poprawnie oznaczone listy numerowane (<ol>) wskazują kolejność wykonywania kroków w kodowaniu. Dobrze zaprojektowane listy pomagają czytnikom ekranu poprawnie ogłaszać kolejne etapy instrukcji, zamiast czytać je jako ciągły tekst.

2. Książki kucharskie i poradniki kulinarne

Przepisy kulinarne często zawierają listy składników oraz listy kroków przygotowania potrawy. Dzięki odpowiedniemu użyciu <ul> i <ol>, osoba niewidoma może łatwo przeskakiwać między sekcjami i nawigować po przepisie. Przykładem może być książka kucharska w formacie dostępnego E-booka, gdzie składniki są w jednej liście, a kroki przygotowania w drugiej, co znacznie ułatwia korzystanie z przepisów.

3. Dokumenty prawne i regulaminy

W tego typu tekstach istotna jest hierarchiczna struktura informacji. Dzięki dobrze zagnieżdżonym listom osoba niewidoma może szybko przejść do odpowiednich paragrafów lub punktów regulaminu. Przykładem są regulaminy uczelni czy instytucji, które w wersji cyfrowej zawierają dostępne listy ułatwiające nawigację po kolejnych podpunktach i kategoriach.

Dzięki właściwemu formatowaniu list e-booki i dokumenty stają się bardziej intuicyjne dla użytkowników czytników ekranu, co znacznie poprawia ich komfort korzystania z treści.

 Źródła:

https://www.w3.org/WAI/tutorials/page-structure/content/#lists

https://www.gov.pl/web/dostepnosc-cyfrowa/jak-tworzyc-dostepne-dokumenty-tekstowe-w-edytorze-ms-word

https://docs.uci.pb.edu.pl/dostepnosc/dostepnosc.html

https://epale.ec.europa.eu/pl/blog/jak-tworzyc-dokumenty-dostepne-cyfrowo

https://utilitia.pl/baza-wiedzy/tworzenie-dostepnych-dokumentow-elektronicznych-w-microsoft-word/