Hypertext Markup Language (HTML) in Accessibility

The basic language for the web is Hypertext Markup Language (HTML).

Article Content

The separation of structure and design

An important principle of accessibility is the separation of structure and design. Although HTML contains some elements that can be used to design text and websites, they are now considered undesirable. As far as possible, the structure should be made using HTML and the design should be made using CSS. This also makes code maintenance much easier, makes the pages slimmer and small changes to the design can be implemented more quickly.

Structuring and design are not only carried out in two different languages. They should also be separated in terms of content. In theory, the design instructions can be packed into the HTML file. This actually has an advantage: If you save the website as a single HTML file, you have all the design instructions in the file. So the HTML file on disk looks similar to the web page on the web, but without the images. However, whoever is allowed to maintain the page afterwards will thank you since embedded CSS code increases the effort involved in designing the website and can be a source of incorrect presentation. CSS instructions in HTML tags or in the HTML file should therefore be avoided.

The visually impaired in particular can set their own settings for font, font size or colors via the browser. This is facilitated by the separation of structure and design. If you want to try it out: In Firefox under Extras -> Settings -> Content, click on "Advanced" for fonts and colors. Set a few desired values there and uncheck "Allow pages to use their own fonts".

In the past, HTML tables were also used for design. Otherwise, there were hardly any options for arranging elements on the website. These constructions are now also frowned upon, but can still be found on many current websites and in some themes for Wordpress and other editing systems. Screen reader users in particular are not very grateful for such constructions, because screen readers read out the column, row and content for each cell, which makes sense for data tables, but is simply annoying and superfluous for normal content.

Structuring through headings

HTML has six heading levels <h1> to <h6>. Usually they are only used to structure text. However, it's rare to use all six levels of headings on a single webpage.

In the absence of other solutions, giving headings to the individual areas of the website has become established. Screen reader users have the option of jumping directly to individual areas such as navigation, content and so on. jump directly to individual HTML elements.

There are different philosophies behind which heading levels to choose for the blocks. I think it makes more sense to use headings from higher hierarchies for the text and headings from the lower hierarchies for area navigation. At this time, <h1> used for the main heading in the content area, <h2> and <h3> for the structure within the text. The heading <h6> can, however, be used to mark the areas.

The whole thing is called logical structuring.

This is also known as the heading hierarchy. That is, a more important section of a web page has a higher-order heading than a subsection. Sounds complicated, but it's quite simple. Let's say, like in this article, I choose a Heading 1 as the top heading level for my text. Then the subheadings in this text must not also have a level 1 heading, since the sections of the text are a subordinate element of the text. And here we also have a core contradiction of heading hierarchies. The text may be the most important element of the current page, but logically the text is a subordinate element of the page similar to the navigation, header or footer.

Internal anchors are used so that blind people can jump directly to individual areas of the website. They are links that link areas within a website, like the table of contents of articles on Wikipedia.

Text structuring

As already mentioned, headings are used to structure the text. There are also elements for unordered and numbered lists, quotations or tables.

There are a few ways to make emphasis in text. As already mentioned, design and structuring should be separated. Therefore elements like <i> for italics or <bold> undesirable for bold text. The strong-element is used instead, which is formatted via CSS. Highlighting should not be used for important purposes, it will not be evaluated by blind assistance software. It can also be difficult for the visually impaired to distinguish bold text from regular text, or to read italic text.

Navigation

HTML lists are often used for navigation. The list items and indentations of lists are hidden again via CSS. As mentioned, blind people can search specifically for the navigation.

Semantic Markup

A cornerstone of web accessibility is semantic markup. Semantic in this context means that the HTML tags contain machine-readable information about what they enclose. For example, many people make a list on the Internet by writing a bullet point and maybe adding indentation. HTML offers its own elements for lists, these have the advantage that they can also be read by the screen readers of blind people.

Overall, HTML has few semantic elements such as headings, lists, and citation blocks. HTML was originally intended primarily for structuring text, the design of websites was not intended. Only with HTML5 and WAI ARIA is a stronger semantic structuring of websites possible.

WAI ARIA

The Accessible Rich Internet Applications (ARIA) guidelines supplement the aging HTML with attributes for dynamic elements such as sliders. Attributes that can describe the function of blocks are already being used. A DIV container that is not particularly meaningful semantically can be given the navigation attribute, for example. These landmarks perform the function of the area block headings described above.

If you have already dealt with HTML5 a little, this will seem familiar. In HTML5, the areas of the website should also get meaningful HTML tags such as navigation, content, header and so on. These tags are already deployed, as are the landmarks in ARIA.

Read more