158 - Semantic HTML (Javascript)

Web Accessibility (A11y) – Semantic HTML

Creating accessible websites is crucial to ensure that everyone, including individuals with disabilities, can access and interact with web content. One of the foundational principles of web accessibility is the use of semantic HTML. In this guide, we’ll explore the significance of semantic HTML and how it contributes to web accessibility.

The Role of Semantic HTML

Semantic HTML refers to using HTML elements to convey the correct meaning and structure of web content. When web developers use the appropriate HTML tags and attributes, it helps both web browsers and assistive technologies, such as screen readers, understand the content and present it in a meaningful way. Here’s why semantic HTML is essential:

Accessibility: It ensures that web content is perceivable and understandable by individuals with disabilities.
Search Engine Optimization (SEO): Search engines use semantic HTML to better understand and rank web pages.
Consistency: It leads to a consistent and predictable user experience for all visitors.

Examples of Semantic HTML Elements

Let’s explore some common examples of semantic HTML elements and how they enhance web accessibility:

1. Headings: Use <h1> to <h6> elements to structure your content hierarchically. Screen readers use headings to navigate and understand the content’s organization.

Example of Headings


<h1>Main Heading</h1>
  <h2>Subheading 1</h2>
  <h2>Subheading 2</h2>
    <h3>Sub-subheading</h3>
  <h2>Subheading 3</h2>

2. Lists: Use <ul> (unordered list) and <ol> (ordered list) for lists, and <li> for list items. Screen readers announce lists and their items as such, improving navigation.

Example of Lists


<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

3. Links: Use <a> for hyperlinks and include descriptive text in the anchor’s title attribute to provide context.

Example of Links


<a href="https://example.com" title="Visit Example.com">Visit Example.com</a>

4. Form Elements: Use semantic form elements such as <input>, <label>, and <button> with proper attributes to create accessible forms. Labels should be associated with form controls using the for attribute and id attribute.

Example of Semantic Form


<label for="username">Username:</label>
<input type="text" id="username" name="username">
<button type="submit">Submit</button>

Role of ARIA in Enhancing Semantics

The Accessible Rich Internet Applications (ARIA) suite provides additional attributes to enhance semantics, especially for dynamic web content. ARIA landmarks, roles, and properties help define and clarify the roles of elements on a page.

1. Landmarks: Use landmarks like role="banner" for the site header, role="navigation" for navigation menus, and role="main" for the main content area. This provides structure for screen reader users.

Example of ARIA Landmarks


<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>

2. Roles: ARIA roles define the type and purpose of elements. For example, you can use role="button" to indicate an element’s functionality as a button.

Example of ARIA Roles


<div role="button" tabindex="0">Click me</div>

Testing and Validating Semantic HTML

It’s essential to test and validate your HTML for semantic correctness. Online tools, browser developer tools, and screen readers can help you verify that your web content is structured and labeled correctly for accessibility.

Conclusion

Using semantic HTML is a fundamental step toward creating a more accessible web. By structuring your content with meaningful elements and attributes, you ensure that all users, regardless of their abilities, can access and interact with your website effectively.

158 – Semantic HTML (Javascript)