In most conversations about accessibility, the use of semantic HTML is most likely to be the first and most common piece of advice you will receive. Let's understand why!
Semantic HTML
These are elements whose names convey information about their content, and sometimes about the role they have on a page. For example, if I see <nav> in a codebase I understand that to be a container for navigation elements.
Using semantic HTML elements is important for accessibility because of the extra power these elements have: they can provide information about their purpose, and assistive technologies transfer this information to their users.
Here are a couple of examples:
- an <a> tag creates a link that can lead to a new page or a different section on the same page.
- in order to get a quick understanding of a page's content and structure a screen reader user can press the "h" key and navigate through all the headings - created with tags <h1> through <h6> - because headings are used to define the main sections on a given page.
It's not an overstatement to note that using semantic HTML elements (using them correctly, of course!) allows assistive tech users to navigate the web with ease.
Non-Semantic HTML
Non-semantic elements are those that do not convey any particular meaning about their content to browsers or assistive technologies. They are typically containers used for styling purposes or for layout.
The <div> and <span> are examples of non-semantic elements. They tell nothing about their purpose on the page and are generally used to apply CSS styling.
A Few Semantic Examples
<header>
This element typically contains a group of navigation links and introductory content. Assistive technologies use it to identify the main heading and navigation area of a page, allowing users to easily orient themselves on your site.
<nav>
This element contains links to other pages or to parts within the page. When a screen reader encounters this element, it announces to the user that this section of the page is for navigation.
<main>
It refers to the main content of the page, distinct from content like sidebars, navigation links, and footers. Marking your important content with this tag allows user of assistive technologies to skip directly to the main content, bypassing headers and navigation links for a more streamlined browsing experience.
<article>
Use this for independent, self-contained content that could be distributed outside of the webpage, like a forum post, a magazine or newspaper article, or a blog entry. Assistive devices announce when they reach the end of an article, which can be very useful for users consuming a series of articles or posts.
<aside>
Use it to mark content that is tangentially related to the main content on the page. One approach would be to make it a sidebar. Assistive technologies will announce this content as additional information, allowing users to distinguish between primary content and side content.
Important to Remember
These semantic elements play a crucial role in accessibility. For users who rely on screen readers or other assistive devices, they present content in a more meaningful and navigable way.
A semantic element can be the deciding factor in whether or not some users are able to understand and interact with web pages!
Beyond Accessibility: The Wider Benefits of Semantic HTML
Semantic HTML isn't just about making websites more accessible. It also plays a vital role in making your content machine-readable, which has wide-ranging benefits:
SEO Advantages: Search engines love semantics! Semantic HTML helps them understand the structure and content of your website. By tagging your content correctly, you make sure that they can easily parse and index your site, focusing on the content you want them to see.
Maintainability and Scalability: For developers, semantic HTML means easier maintenance and scalability. It's like leaving a breadcrumb trail in your code, making it intuitive to understand, update, and extend.
Future-Proofing: As web standards evolve, having a semantically structured website ensures better compatibility with future browsers and tech. Think of it as an investment in your site's longevity.
Top comments (0)