We have mentioned many times that the availability of digital content matters not only in the context of ethic, it also influences the quality of a publication. More and more people use ebooks – not only for comfort’s sake, but also for reasons related to their needs. Readers with dyslexia, blind and visually impaired individuals, the elderly – these are just some examples of people for whom the choice between reading an ebook and giving it up depends on whether it is well prepared. We have mentioned metadata, formats and markers many times, but you should not forget CSS, i.e. style sheets responsible for an ebook’s appearance.

Why CSS matters?

CSS (Cascading Style Sheets) is a language used mostly for describing documents written in HTML or XML. It serves as a visual interface for electronic books or websites. It enables precise and global font styling and managing all aesthetic aspects – typeface, colours, margins – without changing the HTML code.

It might seem that it is only about “nice” appearance, but these aspects, among others, directly influence an ebook’s readability and functionality.

Well-designed CSS allows you to:

• adjust the layout to different devices and screens (i.e. responsiveness),

• scale the text without losing structure and readability,

• keep a logical content structure, even when changing the order of display,

• support the user’s preferences, e.g. night mode, high contrast or a different colour palette,

• hide unnecessary or decorative elements which could hinder screen readers’ performance.

This means that CSS not only makes a publication more aesthetically pleasing, but also – when used correctly – can make it accessible for a much wider audience.

 Elastic Units and Content Scalability

One of the basic steps towards accessibility is avoiding absolute units like pixels (px). It is better to use relative units, e.g. em or %. This way, users can increase or decrease text size according to their needs, and it does not affect page layout. It is important not only for visually impaired individuals, but also for everyone who wants a greater comfort of reading on different devices.

 Readability – Not Only Size, But Also Composition

Apart from letter size, spaces between lines (line-height), paragraphs (margin or padding) or line length (text maximum width) are important. Too long lines cause eye strain, too narrow margins or no spaces might make it difficult to follow the text.

You should also pay attention to typeface. Although readers usually allow font size changes, an ebooks default appearance matters – it might, for example, cause a reader to abandon the book. It is best to select readable and neutral fonts, and, in some cases, consider using dyslexia-friendly fonts (e.g. OpenDyslexic – but be careful, as not everyone likes this typeface).

Following User Preferences – Colours, Contrasts, Night Modes

Modern readers, browsers and operating systems allow users to set their visual preferences, e.g. dark mode or high contrast. Thanks to CSS, it is possible to follow these settings using media queries, e.g.:

css

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

This simple fragment makes an ebook work better with night mode, increasing comfort and decreasing eye strain.

 Adorments which Are Not a Disturbance – the Role of aria-hidden and display:none

Ebooks often contain purely decorative elements – frames, ornaments, background graphics. If they do not contain any content, they should be hidden from screen readers, so as not to confuse people who use assistive technologies. You can use the aria-hidden=”true” attribute or the display:none style for this.

It is always possible to change the arrangement of elements on screen using CSS, even if the display order should differ from the structural order. Converting programmes (which export to the ePub format) are a common problem if they do not create the right structure and only try to copy the original document’s layout.

Infographics, where text is covers all the space and connections between its elements are pointed by arrows, are a good example. A converting programme, if it does not have additional guidelines, will incorrectly position the text in a top-to-bottom and right-to-left order. In  an electronic document, a sighted person will be able to identify the connections as indicated by arrows, but assistive technologies need the right order in structure. If we are listening to a book without looking at it, e.g. in a car, then the automatic reader needs logical structure to be able to work properly.

This is why testing accordance with accessibility guidelines (preferably using screen readers) is so important. It is crucial to maintain the correct sequence of actions: first copy a publication’s logical structure, then use CSS which makes it possible to change its visualisation. This is a great advantage of CSS – it enables defining many display scenarios activated depending on a device’s parameters (e.g. layout, resolution, number of colours) or a user’s preferences.

Finally, it is worth repeating that designing an accessible ebook does not mean you have to give up aesthetics or individual style. On the contrary – when used correctly, CSS lets you combine attractive appearance and functionality. What matters is to remember that the product you are designing will be used not only by “typical” users, but also by people with very different needs, the number of whom is growing all over the world.

We encourage publishers not to view CSS as “technical background”, but as a tool for building truly inclusive applications. It is not only a matter of rules and regulations, which emphasize universal design. It is an investment you will benefit from – not only by reaching a wider audience, but also by gaining a reputation of a responsible and conscious publisher.

Bibliography

Polish:

https://testy.lepszyweb.pl/wcag21

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

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

 English:

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

The article was created in close collaboration between the Polish Foundation for the Blind and Visually Impaired "Trakt” and Have a Book.

Translated by Aleksandra Kallas