Creating Web Accessibility: Semantic Tags

The term "semantic" refers to the meaning or purpose of content, and in the context of HTML, it refers to the use of HTML tags to clearly identify the different parts of a webpage. Using semantic HTML helps to provide a clear and understandable structure to a webpage, making it easier for screen readers and other assistive technologies to interpret and navigate.

In this post we'll only be focusing on the most commonly used HTML tags and best practices

Semantic HTML is further divided into two parts viz;

• Semantic tags for page structure

• Semantic tags for text

Semantic tags for page structure

Before HTML5 pages had a rather static structure where almost everything was wrapped in a div, in a div, inside a div... you get the idea

Image source: https://towardsdatascience.com/how-to-build-a-recommender-system-quickly-without-setting-up-any-infrastructure-674e30194e8c

The introduction of html5 brought about page structuring through assigned tags, this not only structures the page better but also provides hierarchy of content for both machine and user readability. Here are some of the commonly used tags, what they represent and where to use them

• <header>: Defines a header for a section or page. It contains things like; logo, contact info, navigation menu, call to action buttons, social links and breadcrumbs.

• <nav>: Defines a navigation section on a web page.

• <main>: Defines the main content area of a web page.

• <article>: Defines an article or section of content on a web page.

• <section>: Defines a section of a web page.

• <aside>: Defines content that is related to the main content, but not central to it. like a table of content or author infomation by the side.

• <figure>: Defines a self-contained content, such as an image or a video, with an optional caption.

• <figcaption>: Defines a caption for a element.

These are just few of the numerous semantic tags that were introduced with html5, checkout list of of html tags to learn more.

Semantic tags for text

• <h1>-<h6>: Defines six levels of headings, with <h1> being the most important and <h6> being the least important.

• <p>: Defines a paragraph of text.

• <ul> and <ol>: Define unordered and ordered lists, respectively.

• <li>: Defines a list item within a list.

• <blockquote>: Defines a section of quoted text.

The importance of semantic tags to accessibility can not be overemphasized, Technology as we know it is constantly evolving and so are assistive technologies. Writing semantic HTML helps these technologies to properly read your page layout and content to users with certain disabilities. You can read more on how assistive technology reads your website.

Thank you for reading and I hope you go value for your time. Follow me @frontend_jedi to stay updated on this series. Follow me on twitter @excel_bill let's connect and learn together.

Excel - Frontend Jedi👨🏾‍💻

@excel_bill

JavaScript is so dynamic it will always try to make sense of whatever nonsense you write 😂

open thread 👇to understand how the code below works.

#javascript #BlackTechTwitter #100DaysOfCode #programming #TechisHiring #code #developer

19:47 PM - 12 Feb 2023