HTML is a markup language, designed for modeling the logical structure of information. Following web standards, especially in terms of creating structured, markup makes a document inherently more accessible.
What is Structural Markup?
Structure is the information components within an HTML document. For instance: headings, lists and paragraphs.
HTML provides some elements that are strictly "structural" - meaning that they are used to define the structure for a web page, in semantic terms. Structural markup encodes information about an element's role. There are paragraph containers, heading containers, a variety of list containers, containers for creation and organization of tables. There are inline containers that indicate that text should be emphasized and strongly emphasized. This part is <em>phasized", "this part is an <address>", "this is a <li>st item".
There are also containers that have no semantics such as containers that create divisions or that are purely presentational. In almost all cases when organizing and structuring a page we want to use the semantic instead of purely presentational markup; when we have a list of items, we will want to use an HTML list structure; when we want a heading, we do not just make text larger, instead we use a heading element.
Why is Structural Markup Important?
Structural markup is programmatically determinable and programmatic determinability aids accessibility. This is important because software can use structure to perform functions for the user and provide better access to page content. For example, software that reads web pages, such as voicing browsers and screen reader software, can audibly differentiate headings from other text so that the information structure of the page is communicated to non-visual users. In addition, software can provide optional views such as heading lists, which display a list of headings; or heading reading mode, which reads only headings, giving non-visual users a means to quickly skim a document.
For instance certain Assistive Technology (AT) helps users find and jump to the information that they need more quickly by using keyboard shortcuts for headings, tables, lists etcetera.
Many people are used to looking at web pages, concentrating only on their appearance. For screen reader users and users of other browsing technologies, such as text-only browsers and certain AT for literacy, the semantics of HTML are crucial. For example, a screen reader does not understand a large bold line of text as a heading. However, if the text is marked up as a heading, wrapping the text in a heading element then has meaning with semantics that user agents such as screen readers can pass on to users.
When content is properly marked up in HTML, its semantic structure and relationships are in the markup itself. That is, they can be programmatically determined. Because this information is in the code, as it were, supporting technologies can programmatically retrieve it and present it to users in different ways. The information can be "transformed...into different sensory formats (e.g., visual, auditory) or styles of presentation needed by individual users.
Research indicates not only are headings the key means for screen user to find information on longer content but also the heading levels themselves really matter to users navigating longer documents.
Example Screen Reader Keyboard Commands Enabling Functionality
One of the most common strategies screen reader users utilize for quick inter-page navigation is to:
- Query the list of headings on a page
- "Jump-to" the appropriate heading
- Begin reading from that point forward
JAWS (Job Access for Windows and Speech) is a popular screen reader program created by Freedom Scientific that allows people with disabilities to gain access to information on their computers. It utilizes structural markup to enable keyboard commands that provide users functionality. The following are some commands used for headings:
| Function | Keyboard Command |
|---|---|
| List Headings | INSERT+F6 |
| Next Heading | H |
| Prior Heading | SHIFT+H |
| First Heading | INSERT+ALT+HOME |
| Last Heading | INSERT+ALT+END |
| Next Heading at Level | 1 through 6 |
| Prior Heading at Level | SHIFT+1 through 6 |
| First Heading at Level | INSERT+ALT+CTRL+1 through 6 |
| Last Heading at Level | INSERT+ALT+CTRL+SHIFT+1 through 6 |
These commands do not work if the markup has been used inappropriately, or not used when required. If you do not mark up headings with actual heading elements, the screen reader or other user agent, cannot know which text is supposed to be heading text and cannot help its user navigate through it. Instead, the user is denied this functionality must to listen through all the text being read, hoping that it will get to what they are interested in.
Importance of Headings Demonstration
In the following video Rob Dodson demonstrates the importance of headings for accessibility.
