Even though CSS makes it possible to modify list appearance in many ways, you should bear in mind that this should not affect a list’s accessibility.

At Have a Book, we often work on the conversion of educational and academic books, which tend to contain lists. Marking them correctly at typesetting stage is key to creating well-structured ebooks, accessible for screen readers and assistive technologies.

Correctly formatted lists not only increase accessibility and makes content easier to assimilate, but also make reading more comfortable for all users.

List Semantics in Ebooks

In order to create accessible lists you should use semantic HTML tags:

• <ul> (unordered list) – used to group items without any set hierarchy such as enumerating attributes or categories. Screen readers recognise them as ”bulleted list, X items”.
• <ol> (ordered list) – used when the order of items matters, e.g. in step-by-step guides. Screen readers recognise them as “numbered list, X items” and inform the user of the correct order.
• <li> (list item) – an item which should be inside <ul> or <ol>.

Using these markers enables screen readers to correctly interpret and read lists, which makes working and navigating ebooks much easier for visually impaired individuals.

Nesting Lists

In some cases it might be necessary to use nesting lists to present subpoints, e.g. hierarchical subpoints in textbooks. If they are marked correctly, screen readers signal their nesting levels. In order to keep a list accessible make sure that every nested list is inside <li> of the overriding structure.

An example of a correctly formulated nested list:

<ul>

<li>Main category

<ul>

<li>Subpoint 1</li>

<li>Subpoint 2</li>

</ul>

</li>

</ul>

How to Create Accessible Lists

Below, you will find some tips. We hope that they will help you construct lists correctly, therefore making them accessible:

• Structure, not stylization – lists should be created as semantic elements (<ul> and <ol>), not manually inserting bullets.
• Make sure that lists are tagged correctly (<ul>, <ol>, <li>) – if in the source file bullets have been inserted manually, it is necessary to convert them to corresponding HTML markers.
• Do not use lists for text formatting – in some source files lists are used to simulate columns or to align text. This needs to be corrected during conversion.

Testing List Accessibility

In order to make sure lists will be read correctly by assistive technologies, it is advisable to test them in the following ways:

• With a screen reader (e.g. NVDA and/or JAWS - Windows, VoiceOver - IOS, talk back - android). Lists need to be read in a comprehensible and logical way.
• With accessibility validators (e.g. WAVE, axe) – they will help you detect any semantic mistakes.
• Manually – show your book to someone who uses screen readers on a daily basis and ask if the list is readable and intuitive for people who use different devices (ebook readers, computers, phones).

Accessible Lists in Practice

Three examples of well-constructed lists which made content much more accessible for blind individuals:

1. Textbooks and Educational Books

In educational ebooks, lists are used to outline the structure of information. They are indispensible for blind people. For instance, in programming books correctly marked numbered lists (<ol>) show the order of steps of coding. Well-designed lists will help screen readers to announce stages in the correct order instead of reading them all as a single text.

2. Cookbooks and Culinary Guides

Culinary recipes often contain lists of ingredients and stages of meal preparation. If <ul> and <ol> are used correctly, it will be easy for a blind person to move between sections and navigate the recipe. For example: in an electronic cookbook one lists contains ingredients and another one step-by-step instructions, which makes recipes much easier to use.

3. Legal Documents and Rules and Regulations

Inthis case hierarchical structure of information is of vital importance. Correctly nested lists enable a blind individual to quickly access chosen paragraphs. For example, digital versions of the rules and regulations of a university or institution should contain accessible lists which facilitate navigating subpoints and categories.

Correctly formatted lists make ebooks and documents more intuitive for screen reader users, which makes them much more comfortable to use.

Sources:

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/