Semantic HTML and Web Accessibility
In May 2001, an article published by Tim Berners-Lee (the inventor of the World Wide Web), James Hendler, and Ora Lassilain in Scientific America, publicized a new vision for the future of the web — The Semantic Web. An extract from the article reads:
‘The Semantic Web will bring structure to the meaningful content of Web pages, creating an environment where software agents, roaming from page to page can readily carry out sophisticated tasks for users.’
The Semantic Web was envisioned to be achieved through semantics encoded into the source of the web pages. Markups written for the design of web pages should be meaningfully constructed and structurally arranged to ensure readability by not just users of the web alone but also user agents and robots. MDN states that,
A great deal of web content can be made accessible just by making sure the correct HyperText Markup Language elements are used for the correct purpose at all times.
Knowing how to make web pages using HTML, CSS, and JavaScript isn’t enough to make great pages. A properly designed webpage should be easily accessible and usable by all facets of users. The readability and proper rendering of markups by user agents allow for easy accessibility to the contents of the web by the users (users with or without physical disabilities and slow connections). The right HTML tags should be used for the right purposes. This is known as Semantic HTML or HTML Semantics. Semanticism facilitates an understanding of using tags rightfully and how and why tags are utilized the way they are in making pages for the web. Search engines use the clarity derived from HTML semantic tags to ensure that the right pages are delivered for the right queries.
HTML SEMANTICS
The HyperText Markup Language (HTML) is the language of the web. It is fundamentally made up of tags that annotate and structure the contents of a web page. Web pages communicate not only to the user but web browsers as well through tags. As an example, a web browser knows that if a developer uses the <p> tag on a group of words, the developer wants the targeted words to be displayed as a paragraph. This simple example purely describes HTML semantics — using the right HTML tags for the right reasons and contexts. A bad annotation can be seen when a developer decides to use a <div> tag to replace the <header> tag to display content meant for the heading of a page. Such a page will be rendered correctly if properly formatted, however, a problem arises when a visually impaired user tries to access that web page using a screen reader. Screen readers utilize semantic tags from the DOM for their function. In such a case as stated above, a screen reader would not classify the contents of the <div> tag within the header context but rather as just another division of the page. A user in such a case wouldn’t know when the screen reader is reading out a header text.
Over the years, several tags with semantic connotations have been added to preexisting HTML tags to effect more meaning to webpages for better accessibility by diverse users. Prior to the introduction of some of these tags, many contents to be displayed on webpages were usually wrapped in <div> tags what is commonly being referred to as “div soup”. HTML 5 brought about a lot of new elements. Elements such as aside, article, nav, section, main, header, and footer specifically addressed the issue of excessive usage of div tags while adding meaning to markup. What semantic meaning do these tags offer?
<article>— Houses independent and self-contained content.<aside>—Markup content aside from page contents.<footer>—Contains elements for the footer section of a page.<header>—Contains elements for the header section of a page.<main>—Signifies the main content of a page.<nav>—Holds the navigation links of the page.<section>— Defines a section of a page.
Representation of data in tabular form employs the usage of basic elements such as table, th, td, and tr. This usage is proper but incomplete. When creating tables for web pages, tags such as thead, tbody, and tfoot are equally important. More semantic meaning is added to a displayed table as the segmentation caused by using those additional tags clearly defines the header, body, and footer sections of the represented table. In essence, a web browser would know when it encounters a table head, its body, and the footer section.
So many tags in existence today have semantic meaning except a few. The div and span tags are non-semantic. Aspan tag should be used only for styling purposes and the usage of a div tag should only be as a last resort with regards to setting divisions for a webpage i.e it should be used for flow content with no additional semantics. The <b> and <i> tags were originally non-semantic, however, their importance has been redefined by the w3C documentation for HTML 5 for more semantic purposes.
Other semantic tags besides the ones stated above include but not limited to the following:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6><li>,<ol>,<ul><address><details><figcaption><figure><mark><summary><time>
For a complete list of all HTML elements and their usage whether semantic or not, click here.
HTML semantics to a great extent defines how accessible a web page would be. It is the job of every good developer to utilize tags for their meaning. Not all accessibility issues are addressed by tags. A good understanding of web accessibility is therefore required to make great web pages. Documentations that explicitly treat the subject matter have been made available at the end of this article. However, a brief introduction/summary has been provided in the next section. Let’s dive right in!
WEB ACCESSIBILITY FOR ALL
Web accessibility simply means making web pages that can be accessed by every user of the web. The users of the web come from all works of life. They are basically grouped into two categories; people without disabilities and people with physical disabilities. While it is easier for people without disabilities to access the contents of the web, people with disabilities rely on Assistive Technologies (ATs) to use web content. ATs are used by diverse individuals with visual, cognitive, mobility, and auditory impairments. People with slow/poor network connections should also be put into consideration when a website is being developed.
According to W.H.O., the world has about 2.2 billion visually impaired (blind, low vision, and color blindness) individuals and about 466 million individuals with auditory impairments.
Visually impaired users access the web with the aid of screen magnifiers (physical magnifiers or software zoom capabilities) and screen readers (e.g. ChromeVox) while assistive technologies like Assistive Listening Devices (ALDs), Alerting Devices, and Augmentative and Alternative Communication devices (AACs) aid auditory impaired individuals. Textual alternatives also serve as a practical approach to assist such individuals. Most of these assistive technologies like the screen reader, work with the browser environment, and utilize HTML markup for their function. This is one major reason why it is advisable to utilize tags with semantic meaning. Below are seven tips (source) to assist developers to make websites accessible to people with visual and auditory impairments.
- Make text equivalents available for all non-text objects on the page.
- Designs for fonts or layouts should be relative in size (using the %, em, and rem in CSS styling).
- Using the alternative attribute in tags like
imgandinputto give a better description of the element that is being represented. The<figure>and<figcaption>also serve as great tags for representing figures on a webpage. - Use descriptive titles for every page.
- Use valid and standard HTML.
- Providing closed captioning and transcripts for video and audio files on your web pages.
- The use of simple and clear language to help deaf or people with low hearing access the information on your web pages.
Mobility impairments are mostly due to the loss/weakness of limbs and paralysis. Cognitively impaired individuals often have trouble remembering and learning new things, concentrating, or making decisions that affect their everyday life. How do you make your page accessible to such users? Some important tips to remember.
- Using animated graphics can lead to cognitive overload. Try to avoid them.
- Describe the page with plainly written language.
- Advertisements and unnecessary content should be minimized.
- Make forms easy to complete and deliver content in different ways such as by text-to-speech or by video.
- For better keyboard accessibility, structure markup in a reading/navigation order.
- Use
tabindex="0"to ensure that elements likeform,a, andbuttoncan receive keyboard focus. - Enable
outlinefeature on elements in focus using CSS.
It is also important to note that web users with slow network connections or bandwidth usually benefit from development using lean semantic markup.
WHY YOU SHOULD PAY ATTENTION TO SEMANTICS
It pays to add semantic meaning to markup when creating a web page. MDN clearly lists some benefits as displayed below:
- Web pages are easier developed with semantic HTML —On the bright side, it ensures that your code is easily understood. It gives you more functionality, thanks to some special styling already applied to some elements like the
buttonelement. - More responsive on Mobile — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.
- Improves your SEO rating — search engines give more importance to keywords inside headings, links, etc. than keywords included in non-semantic
<div>s, etc., so your documents will be more findable by customers. - It aids the proper maintenance of code and ensures easy adjustments when necessary.
SUMMARY
Personally, a web page can be classified as a great on if it satisfies three criteria;
- Its markup is properly structured and utilizes semantic HTML tags.
- Accessible to all facets of users.
- Beautifully designed with simplicity and less sophisticated colors without clinging adverts distracting users along the way.
