Semantic elements are elements of the HTML language which determine the structure and purpose of website content and digital documents, such as ebooks. Unlike non-semantic elements, used mainly for formatting, the purpose of semantic elements is to convey information about the function and meaning of each section of the document. This means that they help us determine whether a section of the text is a header, a paragraph, a navigation bar, a list or perhaps a quote. Examples of semantic elements:

• header,
• nav,
• article,
• section,
• footer,
• aside,
• main.

Semantic elements were first used in website projects, where a better structuring and indexing by browsers was needed. Thanks to them, content became more and more approachable for SEO algorithms, as well as more accessibility-friendly (e.g. for people who use screen readers).

The Use of Semantic Elements on the Internet

Most semantic elements were introduced in HTML5, which premiered in 2014. Earlier versions of HTML featured mainly structural and style elements (e.g. ‘div’, ‘span’, ‘b’, ‘i’) which did not provide information about the content’s context.

Semantic elements became widely used in website design because they allow a better organisation and hierarchy of information. Structural logic and code’s readability of a website which uses semantic elements make such websites easier to read for search engines (which facilitates website positioning) as well as for screen readers with the help of which blind and visually impaired individuals use the internet.

Thanks to semantic elements, screen readers are able to inform the user about the content and context of websites. For example, ‘nav’ means that a section is a navigation bar, which helps the user understand the website’s structure. ‘Main’ indicates the website’s main content and ‘header’ and ‘footer’ make it easier to identify the beginning and end of the document.

Semantic Elements in Ebooks

Semantic elements are of vital importance in formats used in ebooks, such as ePub, too. Like in the case of websites, they allow screen readers to better organise the content and understand the book’s structure. Semantics makes it possible to navigate ebooks not only by chapters but also by headings, footnotes, lists or quotes.

In ebooks, semantic elements help blind and visually impaired individuals move around the text more easily. For example, it is easy for people who use screen readers to move from one chapter or section of a book to another, provided they are marked with the correct semantic elements. In addition to that, they inform screen readers about specific elements of the text – e.g. a list need to be marked with ‘ul’ (unordered list) and ‘ol’ (ordered list), which allows the screen reader to notify the user about the number of elements present in the list.

ARIA Attributes

ARIA (Accessible Rich Internet Applications) is a set of attributes developed by the W3C consortium to make using online apps easier for people with disabilities, especially those who use assistive technologies (e.g. screen readers). In ebooks ARIA tags may be used to improve the content’s accessibility for visually impaired and blind individuals.

In electronic books, especially in those in the ePub format, ARIA attributes may be used to describe the structure, navigation and other functions of interactive content. A few examples of how they may be used:

Navigation

ARIA makes it possible to add attributes such as role="navigation", which inform screen readers that a given element of the content serves for navigation, which may help the user move around the book quickly.

Describing interactive elements

In books containing buttons, choice fields or forms, ARIA can be used to describe them using the attributes aria-label, aria-labelledby or aria-describedby. For example, a button which redirects the user to the next chapter, visually represented by an arrow pointing right, can have the attribute aria-label="Next Chapter" which helps a person using a screen reader to understand what it serves for.

Roles and navigating the structure of the book

ARIA attributes can also define the roles of each section, e.g. role="main", role="banner", role="contentinfo" which makes it easier for a screen reader to identify elements like chapter headings, footnotes or sections of the main content.

State and dynamic changes

In books which contain interactive elements like quizzes or multiple choice tests, ARIA can be used to inform the screen reader about the state of these elements (e.g. aria-checked="true" when an answer is chosen) or about dynamic changes (e.g. through aria-live which provides live updates about the content’s actualisations).

As adjusting content for a wider range of users was the main reason why ARIA was created, using ARIA in ebooks supports inclusiveness and allows more people to enjoy the content regardless of their level of ability.

The Importance of Semantic Elements for Blind and Visually Impaired Individuals

Semantic elements are of vital importance for people who use screen readers, especially in ebooks. If they are marked correctly, they allow users to find information faster and better understand the document’s structure. Blind individuals are then able to move between sections, browse headings, paragraphs or lists more easily – all of this thanks to semantic elements which indicate key elements of the content.

For blind individuals, semantic tagging of a book’s structure is a bridge to using literature and educational content more easily, which makes ebooks more accessible and more comfortable to use. However, the use of semantic elements is beneficial to all users. They better an ebook’s structure, make it easier for editors to edit and maintain it and have positive influence on positioning in browsers. This is why it is a good idea to devote some time to learning and using semantic elements while creating ebooks or websites.