Mastering Semantic HTML to Elevate Web Accessibility
#semantichtml #webaccessibility
HTML is a markup language that determines how content appears on a web page.
However, the quality of your HTML plays a significant role in how well it functions and whether it displays content as it should. This is particularly true for semantic HTML.
In this blog, we take a closer look at the function of semantic HTML and how you can use it to better comply with web accessibility guidelines.
Unlike non-semantic HTML, which doesn’t convey meaning, semantic HTML conveys meaning, or the semantics, of the content contained within specific tags.
Semantic HTML can be understood by both developers and browsers. By adding these tags to your web pages, you help define the roles and relative importance of different elements on your pages.
Semantic HTML elements can be linked to both the meaning and presentation of content.
An example of a non-semantic HTML element would be <div> or <span>. Neither of these tags tells you anything about the content within them.
Then there are semantic elements such as <article>, <form>, or <table>, all of which clearly explain what content is present on a page.
At its core, semantic HTML is designed to neaten and simplify your code, making it more accessible to users and search engines. Here are some of the main reasons why it pays to focus on semantic HTML.
Many of your website visitors rely on assistive technology to access and engage with your website. Technology such as screen readers use semantic HTML to understand, process, and relay online content.
A web page that only consists of non-semantic HTML elements won’t be able to explain the specific meaning of different sections on a page or how they relate to each other. This is where semantic HTML elements make a difference.
For example, instead of enclosing your headers and navigation in basic <div> tags, semantic tags such as <header> and <nav> are used. This provides disabled users with more context.
What’s more, a number of semantic tags are linked to keyboard accessibility. So, when a screen reader sees a <button> element, it gives a user the option to click it using the Enter key. The same applies to <table> elements, which gives users the option to browse using the arrow keys on their keyboards.
By implementing the correct semantic HTML elements, you’re one step closer to a compliant and accessible website.
As much as semantic HTML can aid in ADA accessibility compliance, it can also have a positive impact on your SEO efforts.
Semantic markup makes it easier for search engines to crawl, navigate, and understand your website. It shows crawlers exactly what they should index, ensuring time isn’t wasted on repeated page elements.
Developers prefer semantic HTML because it makes code easier to read. With the ability to search for specific HTML elements, developers can carry out updates and improvements more quickly and easily.
Coding a site with semantic HTML right from the start will ensure you can easily work with different developers in the future if you need to.
Semantic HTML tags generally fall into one of two categories:
Tags for structure:
<header> & <footer>: A header tag contains the introductory information of a page or section while the footer would include contact and copyright details.
<nav>: This tag is used for any navigation links and is often nested in the <header> and/or <footer> tag.
<main>: Only one of these tags is used per page and will highlight the body of your copy.
<article>: The article tag could define a blog post or even a self-contained item. <article> tags indicates an element/piece of content that can exist by itself and keep context and meaning, if placed anywhere else.
<section>: Using the <section> tag will help group similar types of content together. The types of content need to be contextually related for the tag to have meaning.
<aside>: If you want to highlight any non-essential content, you can use the <aside> tag.
Tags for text:
<H1 – H6>: Header tags mark the headings of content in order of importance, with <H1> being the most important.
<p>: This tag highlights a standalone paragraph of text.
<a>: Hyperlink HTML tags help developers and search engines identify links within content.
<ol> & <ul>: These tags are used for lists, with <ol> indicating an ordered list (numbered) and <ul> indicating an unordered list (bullet points).
<q>: For any content that has a quote, you would use the blockquote tag.
<em> & <strong>: These tags are used to emphasize important information.
<code>: A code tag will highlight a block of computer code.
Each of these tags tells browsers, developers, and assistive technology more about the content contained within them, provided they are used in the right order and scenarios.
For example, <h1>, <h2>, and <h3> should always be used in the right order. Mistakenly using a header tag instead of a <p> can also reduce the effectiveness of semantic HTML and make your content less accessible to disabled users.
Now that you have a better understanding of semantic HTML, let’s look at some essential best practices.
Through the correct implementation of semantic HTML, you can create a visually appealing site that is accessible to all users and performs well in search results.
Semantic HTML simplifies and improves coding efforts to ensure all on-page elements can be correctly identified and updated with ease. It also provides full access to disabled users who rely on assistive technology to navigate the web.
By following these best practices and familiarizing yourself with the most common semantic HTML tags, you’ll be able to host a website that performs well on all fronts.
A <b> tag is not defined as semantic HTML. It draws attention to a specific word or sentence, however, it doesn’t indicate any importance. If you want to highlight the importance of an element, the <strong> or <em> tag should be used instead. To simply bold text, rather adjust the font weight in your style sheet.