Understanding Semantic HTML and Accessibility
What is the essence of creating a website for users yet they find it very hard accessing it? What do you think their experience will be at first? How do you think they will rate your web App or mobile app? will they ever visit again?
The above questions and its answers form the importance of this topic “Understanding Semantic HTML and Accessibility”. Understanding how to make use of semantic HTML is paramount for every developer in order to make their web and mobile applications accessible by all users including special people with disabilities.
First, what is ACCESSIBILITY?
According to MDN, “Accessibility is the practice of making your websites usable by as many people as possible.” This is always a special consideration we give to those with disabilities so they too can enjoy our applications without any hindrance whatsoever. It doesn’t take more work to write semantic HTML code as compared to non-semantic(bad) HTML.
Hence, writing proper semantic HTML helps all kinds of users to properly consume content and navigate through your website no matter what medium they are interacting through and also helps the SEO rankings of your page by search engines.
So, I dived into accessibility believing that ‘you’ my beloved reader already have a basic understanding of HTML and what it’s used for. But in case you got here because you’re curious to know about accessibility and have no idea what HTML means, don’t worry, I will explain. HTML stands for Hypertext Markup Language. Think of it as the frame or structure of all websites and web apps, and, when paired with CSS and JavaScript, make up the fundamental technologies of the web as we all know it.
HTML is the standard markup language for creating Web pages. HTML is mainly made up of tags and elements. A tag is simply anything enclosed angular brackets E.g <body> i.e a body tag. Some tags have open and close. Element is everything starting from the opening tag to the closing tag, E.g: <article> Some article text goes here </article>. Other examples of the popular tags in HTML include but not limited to:
- The
<!DOCTYPE html>declaration defines that this document is an HTML5 document. - The
<html>element is the root element of an HTML page - The
<head>element contains meta-information about the HTML page - The
<title>element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) - The
<body>element defines the document's body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. - The
<h1>element defines a large heading - The
<p>element defines a paragraph
Below is the HTML structure code snippet from a sublime text editor. Also, you can visit MDN to learn more about HTM5
Now that we have understood what accessibility is and the basis of HTML5, WHY SEMANTIC?
WHY SEMANTIC HTML?
By Semantic markup, we mean choosing each HTML tag that has meaning based on the way they appear in a web browser. These tags help to indicate clearly what role is played by the content those tags contain. This single act helps in making your websites accessible and also used by search engines to rank your page. Semantics and accessibility are a part of HTML by design, but they are not useful unless they are implemented correctly.
Examples of Semantic HTML tags are: <main>, <body>, <header>, <footer>, <article>, <nav>, <aside> etc are all semantic elements. To screen readers and search engine bots, each element defines the role of the content contained within their tags.
Examples of non-Semantic HTML tags are: <b>, <span>, <div>, <div>, <div>, <div>, <div> etc. Were you surprised why I used div severally? Sorry, that is exactly how most people use it everywhere in there markup and it totally makes no meaning to the web crowlers and also it hinders accessibility for users.
The number one reason why you should use semantic tags is for easy accessibility of your website; when a page is well designed visually, it is easy to identify the various parts of a web page at a glance. Headers, menus, and (hopefully) the main content are all immediately visually apparent.
Also, it is useful for users who are blind or visually impaired and rely on screen readers to verbally describe what is on a page, proper use of HTML5 semantic elements will allow screen readers to more accurately communicate your content by making the visual audible.
It is important to know that using semantic HTML makes a code maintainable and reusable. Semantic markup results in a very clear, standardized code, and that means you’ll save time in the long run. Clear code is more easily maintained. It also means that a different developer could come in and work with the code without confusion since the code is organized in a logical way.
Summary
It is very important that while struggling to learn HTML5, we also learn how to employ semantic markup or while you already know how to write HMTL, you always put semantic HTML first in your design plan.