Semantic HTML: the foundation of web accessibility
Hypertext Markup Language (HTML) is the standard markup language for the web and the backbone of all web content. HTML is usually used together with Cascading Style Sheets (CSS) and scripting languages such as JavaScript (JS) in creating visual and interactive content for the web. Each of these three technologies has a specific role in the creation of web content: HTML’s purpose is to define content, CSS is responsible for styling, and JS is used to add interactive behaviours. Although CSS and JS can impact the accessibility of a web document (negatively or positively depending on how they are used), HTML has the most critical role in ensuring web accessibility. The HTML markup of a web document alone can determine its accessibility. This is why it is important to understand Semantic HTML and how it makes the web more accessible.
What is Semantic HTML?
HTML is made up of both semantic and non-semantic elements. Semantic elements (e.g. <header> and <footer>) communicate the meaning of their enclosed content to both the browser and the developer, while non-semantic HTML elements (e.g. <div> and <span>) say nothing about the meaning of their enclosed content. Semantic HTML is the use of HTML elements for the primary purpose of communicating meaning or information about the content within web documents rather than solely for presentation purposes. For example, when writing semantic HTML the heading tag <h1 should be used indicate the single most important heading in a document, and not just for creating headings with large fonts. Some of the main semantic HTML elements and their descriptions are listed below (see the complete list of HTML elements and their descriptions):
<header>: this element is used to specify the header for a web document or the header for a section of a web document. Headers usually contain a group of introductory content e.g. navigation aids, headings, logos etc.<nav>: this element is used to enclose navigational links within a web document or to other resources.<aside>: this element is used to represent a section of a web document with content that is indirectly related to the document’s main content.<article>: this element is used to represent content that is independent, self-contained and reusable.<section>: this element is used to define a section of standalone content within a web document. Sections can contain content as well as other HTML elements that add meaning to the content.<h1>—<h6>: these elements are used to represent headings of different levels within a web document.<h1>is used to represent the heading at the highest level, while<h6>is used to represent headings at the lowest level.<p>: this element is used to define a paragraph.<button>: this element is used to define a clickable button.<cite>: this element is used to provide a reference to the title of a piece of cited work.<em>: this element is used to stress the emphasis of text within a web document.<footer>: this element is used to provide a footer to its nearest section, or the web document as a whole. Information likely to be found in a footer include information about the author, copyright information and contact information.
Semantic HTML & Web Accessibility
Semantic HTML is considered the foundation of web accessibility. This is because assistive technologies (that aid disabled users to browse the web) depend on the semantic structure and meaning of web pages to convey information to their users. Some specific instances of how semantic HTML improves accessibility for assistive technology users are discussed in the remainder of this section.
Consider, for example, the users of screen readers (an assistive technology that renders text and image content as speech or Braille output) and how they can quickly navigate and have an understanding of the structure of a web document. Screen readers make use of the semantic HTML markup of a web page (ignoring visual styles and layout added using CSS) to understand and communicate the structure of the web page to its users. Therefore, to ensure accessibility, semantic HTML should be used to define a meaningful structure that transcends what is visible through visual CSS styling. Although this may not make much difference to sighted users of the web, visually disabled users of the web rely on this to quickly navigate and understand the structure of web documents. To show the difference in how screen readers view web pages that are structured properly using semantic HTML and ones that are not, consider the image below.
In the properly structured ‘Page A’, the main heading of the page is declared using <h1> which enables screen readers to recognise it as the heading at the highest level, and with the most importance. There are then three headings defined at the next level using <h2>, and the user is able to understand that these are headings for sections within the page. A third level of <h3> headings also exist within sections and serve as headings for subsections. This structure allows users of screen readers to quickly navigate and understand the page, its main heading, its sections and subsections. On the other hand, ‘Page B’ shows a poorly defined web page structure, with all headings defined at the same level. Although CSS can be used to add a visually meaningful layout to sighted web users, visually disabled users will not be able to get a meaningful hierarchical structure of the page from their screen readers.
Various other semantic elements for defining specific parts of web pages are included in HTML. A typical structure of a web page defined using these elements is shown in the image below:
In addition to the provision of meaningful structure, semantic HTML ensures that web browsers apply default accessibility features for certain HTML elements. Take, for example, you have a “Play” button on your site that plays very important audio when clicked. When this button is defined using the semantically accurate <button> Play </button> markup, it gets default accessibility features when displayed by browsers. The button gets a default style that makes it look clickable (this can be overridden with custom styling), it also gets default keyboard accessibility i.e. it can be navigated to using the tab key and activated using enter or return. Therefore when a screen-reader or keyboard user accesses this page, the user will be able to navigate to and activate the button.
It is also possible to define the button as <div> Play </div> and style it to look like a button using CSS, but browsers will not recognise it as a button and it will not receive accessibility features by default. This makes it difficult for assistive input devices to interact with it.
In general, the accessibility of most web content can be achieved just by using Semantic HTML i.e. making use of the right HTML elements for the right purposes at all times.
Semantic HTML Tips
The following are tips associated with writing semantic HTML:
- Separate content from presentation: HTML is meant to be used only for the definition of structure and provision of meaning to the contents of web documents. Therefore the choice of HTML elements to be used in creating web documents should be based solely on their semantic meaning and not their style of presentation. CSS, not HTML, should be used to provide a visual style.
- Use container elements for layout: although visually amazing websites can be created using only
<div>or<span>elements styled with CSS, these elements have no semantic meaning and no default accessibility features. Therefore they should only be used as containers to group other elements for layout purposes. - Do not reinvent the wheel: before using CSS style classes such as ‘nav’, ‘header’, ‘footer ’ on
<div>elements to present specific types of content, ensure that there are not any existing semantic HTML elements that are more suitable for your use case.
Semantic HTML is the foundation of web accessibility, it greatly improves the experience of users that browse the web with assistive technology. In addition to improving accessibility, using semantic HTML has other advantages such as improving the SEO of websites, creating a better mobile experience and improving development experience by making code understandable. Therefore, there is really no reason not to use semantic HTML when creating web content, especially since doing so does not require any extra effort if done consistently.
