CSS w projektowaniu dostępnych E-booków – małe decyzje, wielka różnica

Wielokrotnie podkreślamy w naszych artykułach, że dostępność cyfrowych treści to nie tylko kwestia etyki, ale także jakości publikacji. Coraz więcej osób korzysta z E-booków – nie tylko wygodnie, ale też z konkretnych powodów związanych z ich potrzebami. Czytelnicy z dysleksją, osoby niewidome lub słabowidzące, seniorzy – to tylko niektóre grupy, dla których dobrze zaprojektowany E-book może być różnicą między lekturą a rezygnacją. Choć często mówi się o formatach, metadanych i znacznikach, warto pamiętać, że kluczową rolę odgrywa także CSS – czyli arkusze stylów odpowiedzialne za wygląd E-booka.

 Dlaczego CSS ma znaczenie?

CSS (z ang. Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów, to język używany głównie do opisu prezentacji dokumentu napisanego w HTML lub XML. Pełni funkcję wizualnego interfejsu dla elektronicznych książek lub stron internetowych. Umożliwia precyzyjne i globalne stylizowanie oraz zarządzanie wszystkimi elementami wpływającymi na estetykę - krój pisma, kolory, marginesy - bez konieczności zmian w kodzie HTML.

Mogło by się zatem wydawać, że to tylko kwestia „miłego” wyglądu, ale to także te przykładowo wymienione elementy mają bezpośredni wpływ na czytelność i funkcjonalność E-booka.

Dobrze zaprojektowany CSS pozwala na:

• dostosowanie układu do różnych urządzeń i ekranów (tzw. responsywność),

• skalowanie tekstu bez utraty struktury i czytelności,

• zachowanie logicznej struktury treści, nawet w sytuacji zmiany kolejności wyświetlania,

• wsparcie dla preferencji użytkownika, np. trybu nocnego, wysokiego kontrastu czy zmienionej palety barw,

• ukrycie zbędnych lub dekoracyjnych elementów, które mogłyby zakłócić działanie czytników ekranu.

W praktyce oznacza to, że CSS nie tylko upiększa publikację, ale – jeśli jest odpowiednio użyty – może sprawić, że będzie ona dostępna dla znacznie szerszego grona odbiorców.

Elastyczne jednostki i skalowalność treści

Jednym z podstawowych kroków w stronę dostępności jest unikanie jednostek absolutnych, takich jak piksele (px). W ich miejsce warto stosować jednostki względne, takie jak em czy %. Dzięki temu użytkownicy mogą samodzielnie zwiększać lub zmniejszać rozmiar tekstu zgodnie ze swoimi potrzebami – bez rozjeżdżania się układu strony. To istotne zarówno dla osób słabowidzących, jak i wszystkich, którzy po prostu chcą czytać wygodniej na różnych urządzeniach.

Czytelność – nie tylko rozmiar, ale i kompozycja

Oprócz wielkości liter, równie ważne są odstępy między wierszami (line-height), akapitami (margin lub padding), czy długość linii (maksymalna szerokość tekstu). Zbyt długie wiersze męczą wzrok, a zbyt ciasne marginesy czy brak odstępów mogą utrudniać śledzenie tekstu.

Warto również zwrócić uwagę na wybór kroju pisma. Choć czytniki pozwalają często na zmianę czcionki, domyślny wygląd E-booka ma znaczenie – może np. zniechęcić użytkownika do dalszej lektury. Warto wybierać czcionki czytelne i neutralne, a w niektórych przypadkach rozważyć użycie fontów przyjaznych dla osób z dysleksją (jak OpenDyslexic – choć z umiarem, bo nie każdemu taki krój odpowiada).

Dostosowanie do preferencji użytkownika – kolory, kontrasty, tryby nocne

Nowoczesne czytniki, przeglądarki i systemy operacyjne umożliwiają użytkownikom ustawienie preferencji wizualnych, np. ciemnego motywu czy wysokiego kontrastu. CSS daje możliwość dostosowania się do tych ustawień za pomocą tzw. media queries, np.:

css

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

Taki prosty fragment sprawia, że E-book lepiej współgra z trybem nocnym użytkownika, poprawiając komfort i zmniejszając zmęczenie oczu.

 Dekoracje, które przeszkadzają – rola aria-hidden i display: none

W E-bookach często pojawiają się elementy czysto dekoracyjne – ramki, ozdobniki, grafiki tła. Jeśli nie niosą treści, warto ukryć je przed czytnikami ekranu, by nie dezorientować osób korzystających z technologii asystujących. Do tego celu służy np. atrybut aria-hidden="true" albo styl display: none.

Zmiana ułożenia elementów na ekranie za pomocą CSS jest zawsze możliwa, nawet jeżeli kolejność wyświetlania ma się różnić od kolejności w strukturze. Problemem są często programy konwertujące (eksportujące do formatu ePub), które nie tworzą prawidłowej struktury, a jedynie próbują odwzorować układ oryginalnego dokumentu.

Dobrym przykładem są infografiki, gdzie teksty są rozłożone po całym obszarze grafiki, a ich związki wskazują strzałki. Program konwertujący, jeżeli nie ma dodatkowych wskazówek, błędnie ułoży teksty w strukturze wierszami od góry i od prawej do lewej. W dokumencie elektronicznym osoba widząca odczyta relację elementów na podstawie strzałek, ale dla technologii asystujących potrzebna jest prawidłowa kolejność w strukturze. I to nie tylko dla niewidomych. Jeżeli słuchamy książki nie widząc jej np. w samochodzie, to automatyczny lektor do prawidłowego działania wymaga logicznej struktury.

Dlatego tak ważne jest sprawdzenie zgodności z zasadami dostępności, najlepiej przy użyciu czytników ekranu. Kluczowe jest zachowanie właściwej kolejności działań: najpierw należy odtworzyć logiczną strukturę publikacji, a dopiero potem zastosować CSS, który pozwala na różne sposoby jej wizualizacji. To właśnie ogromna zaleta CSS – umożliwia definiowanie wielu scenariuszy wyświetlania, aktywowanych w zależności od parametrów urządzenia (takich jak układ, rozdzielczość czy liczba kolorów) lub preferencji użytkownika.

Na koniec warto powtórzyć, że zaprojektowanie dostępnego E-booka nie oznacza automatycznie rezygnacji z estetyki czy indywidualnego stylu. Przeciwnie – odpowiednie użycie CSS pozwala łączyć atrakcyjny wygląd z funkcjonalnością. Kluczem jest świadomość, że projektujemy nie tylko dla „typowego” czytelnika, ale dla ludzi o bardzo różnych potrzebach, których na całym świecie jest coraz więcej.

Zachęcamy wydawców, by traktowali CSS nie jako „techniczne tło”, ale jako narzędzie budowania prawdziwie inkluzyjnych publikacji. To nie jest kwestia tylko przepisów i regulacji, które kładą coraz silniejszy akcent na projektowanie uniwersalne. To inwestycja, która procentuje – nie tylko poszerzając grono odbiorców, ale też budując reputację odpowiedzialnego i świadomego wydawcy.

Bibliografia

 J. Pl

https://testy.lepszyweb.pl/wcag21

https://www.horizonmarketing.pl/baza-wiedzy/footer-co-to

https://widoczni.com/blog/jak-optymalizowac-kod-html-css/

J. Ang:

https://uit.stanford.edu/blog/impacts-css-accessibility

https://bookcoverzone.com/blog/7-ways-to-make-your-books-more-accessible/

https://clearsightbooks.com/how-to-make-your-book-accessible-for-more-readers/

https://www.linkedin.com/advice/1/how-do-you-use-css-improve-readability-accessibility