Semantic HTML and Accessibility

Semantic HTML and Accessibility and why we all should care.

What is HTML?

For non-developers (and developers who did not know before now),
HTML is short for HyperText Markup Language which is basically a standard and globally recognized language that tells a web browser what to and how to display documents to our web pages. It does this with the use of tags and elements written like these; <div>,<p>, <header> etc. (Hopefully we are on the same page now).

Semantic HTML

Semantic is simply a meaningful HTML, a markup that conveys meaning and not just to the web browsers running our HTML codes but also convey some meaning to an extent to an average human (both developers and non-developers).

Having a semantic HTML is simply having a markup that explains or gives meaning to what it does.

According to Jennifer Kyrnin :

An important principle in web design is the idea of using HTML elements to indicate what they actually are, rather than how they may appear in the browser by default. This is known as using semantic HTML.

HTML provides a wide range of tags and elements (HTML4 and HTML5 provides a wide range of semantic HTML tags/elements). This wide range of elements to choose from sometimes make it a tough decision choosing which tag to use especially as some tags could produce similar results as some others on a web page. For example, the <div>, <section> and <article> elements are just containers for other HTML elements and they display similar results on a web page but the only difference between them is in their meaning (Semantics). While you are reading this article, even if you are not a developer and surely you are not a web browser, you could still get some meaning from the words section and article as these are normal words we come across in the English language. But <div> on the other hand does not hold much meaning to it, the web browsers understand what it means but an average human might not and even if then do, it does not exactly attempt to describe the contents it contains. This is why the use off Semantic HTML is generally encouraged.

On the other side, the browsers can read, understand and render any HTML tag correctly even when semantic HTML is not applied. There are no functionality problems associated with not using semantic HTML (I am yet to discover one), but the issue of using Semantic HTML arises when we properly consider general accessibility especially in human context.

Accessibility

When we talk about accessibility in web design, the goal is usually to consider easy access for a broad range of audience.

According to FreeCodeCamp :

“Accessibility” generally means having web content and a user interface that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility, or cognitive disabilities.

Semantic HTML is a great way to achieve Accessibility. Hence, even people with visual impairments can have access to your web content even if they can’t read the screen properly, they do this through screen reader software . These screen readers depend mostly on the HTML elements in other to help with page navigation.

So it is important that the right HTML elements/tags are used for the right contents and placed in the right place to allow easy access to a broader audience.

Why we all should care

Since HTML makes up a huge part of the World Wide Web which is where most of our interactions occur, I believe it is quite a big deal how well rendered and accessible our HTML is rendered to our audience, especially, since we cannot tell who might be viewing our web pages on the other side.

I believe every content, website or app we put out there was created with consideration of how it affects man/human and if that is true, then a deliberate selection of HTML tags/elements for our website should be considered so as to provide as wider range of audience access to our web contents.

Some examples

Here are some Semantic HTML tags/elements and uses;

The <main> tag can be used to separate main content from other distractions on a web page.

The <section> tag can be used (instead of the <div> tag) to hold contents and divide the page into meaningful sections on a web page. It has meaning on its own, just like with a newspaper, we can browse through sections. Screen readers can also interpret this tag as intended for visually impaired clients as well.

The <nav> tag is short for navigation, this could be used to hold navigation links for different sections or parts of a website.

The <img> tag is used to render images to a web page, an average person might be able to understand this but it is generally encouraged to include an alt attribute which the <img>tag. This attribute provides more meaning to the image as it contains a short description of what the image is about and displays when the image fails to load.

The <code> tag tells the browser that contents within it are code blocks and so they will be rendered as plain texts. An average human or screen reader can still interpret this correctly as well.

Some other Semantic HTML tags/elements include;
<p></p> = paragraph,
<li></li> = list,
<header></header> = header,
<article></article> = article,
<blockquotes></blockquotes> = quotes, etc.

Resources

1. Why Use Semantic HTML?
2. Applied Accessibility
3. 7 Alternatives to the <div> HTML Tag

Semantic HTML and Accessibility was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.