Semantic HTML and Accessibility Best Practices: How to Write Accessible and Semantic Code

When building a website, it's important to ensure that everyone, including people with disabilities, can access and navigate it easily. One way to achieve this is by using semantic HTML—writing code that clearly describes the meaning of its content. In this blog, we will explore what semantic HTML is, how it works, and best practices for making websites accessible and user-friendly.

What is Semantic HTML?

Semantic HTML refers to using HTML elements according to their intended meaning. Instead of using generic <div> or <span> elements for everything, semantic elements like <header>, <nav>, <article>, and <footer> provide clear information about the structure of a webpage.

For example:

<header>
    <h1>My Website</h1>
</header>
<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>
<main>
    <article>
        <h2>Welcome to My Website</h2>
        <p>This is where I share useful content about web development.</p>
    </article>
</main>
<footer>
    <p>&copy; 2025 My Website</p>
</footer>

Here, each element serves a meaningful purpose, making it easier for users and screen readers to understand the structure of the webpage.

Why is Semantic HTML Important?

1. Improves Accessibility: Screen readers can interpret and navigate the content better when correct HTML elements are used.
2. Enhances SEO: Search engines prioritize well-structured content, improving website rankings.
3. Better Maintainability: Developers can quickly understand and update semantic code.
4. Consistent User Experience: Semantic elements help browsers display content in a structured way.
5. Faster Development: Using the right elements reduces the need for extra CSS and JavaScript to structure content.

Understanding Web Accessibility

Accessibility ensures that all users, including those with disabilities, can use a website effectively. Disabilities may include visual impairments, motor disabilities, cognitive disabilities, and hearing impairments. By following accessibility best practices, you create an inclusive web experience for all users.

Web accessibility is guided by the Web Content Accessibility Guidelines (WCAG), which emphasize:

• Perceivable: Content should be available to all senses (sight, hearing, touch).

• Operable: Users should be able to navigate using keyboards and other assistive technologies.

• Understandable: The website should be readable and predictable.

• Robust: The website should work across different browsers, devices, and assistive technologies.

Best Practices for Writing Accessible and Semantic HTML

1. Use Proper Headings (<h1> to <h6>)

Headings provide structure and make it easier for users to navigate a page. They help screen readers identify sections of content quickly.

<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Smaller Section</h3>

Avoid: Skipping heading levels or using headings for styling instead of content structure.

2. Use Descriptive Links (<a>)

Links should clearly indicate what they lead to.

<a href="/products">View our products</a>

Avoid: Generic text like "Click here" or "Read more" without context.

3. Provide Alternative Text for Images (alt Attribute)

Alternative text helps visually impaired users understand images.

<img src="dog.jpg" alt="A golden retriever playing in the park">

Avoid: Leaving alt empty or using vague descriptions.

4. Use Lists for Grouped Items (<ul> and <ol>)

Lists make it easier to scan and navigate related content.

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
</ul>

Avoid: Using <div> or <span> to create lists instead of proper elements.

5. Label Form Elements (<label> and aria-label)

Forms should be accessible for users relying on screen readers.

<label for="email">Email Address:</label>
<input type="email" id="email" name="email">

If a visual label isn't available, use aria-label:

<input type="text" aria-label="Search" placeholder="Search">

Avoid: Using only placeholders as labels.

6. Ensure Proper Color Contrast

Text should be easily readable with sufficient contrast. A contrast ratio of at least 4.5:1 is recommended.
Use tools like WebAIM Contrast Checker to verify contrast levels.

7. Use ARIA Attributes for Additional Accessibility

ARIA (Accessible Rich Internet Applications) attributes provide extra accessibility where needed.

<button aria-label="Close menu">X</button>

Avoid: Overusing ARIA when semantic HTML elements are sufficient.

8. Make Interactive Elements Keyboard Accessible

Ensure users can navigate using the keyboard (Tab key) and interact with elements properly.
Avoid: Using non-focusable elements for interactive content without adding tabindex.

9. Use Landmarks for Better Navigation

Landmark elements help assistive technologies understand webpage structure.

<header></header>
<nav></nav>
<main></main>
<footer></footer>

Avoid: Wrapping everything in a <div>.

10. Test for Accessibility

Use tools like:

• Lighthouse (Chrome DevTools)– Audits accessibility.

• axe Accessibility Checker– Identifies accessibility issues.

• Screen Readers (NVDA, JAWS, VoiceOver) – Simulates how visually impaired users navigate.

Final Thoughts

Writing semantic HTML and following accessibility best practices ensures that your website is usable by everyone, including people with disabilities. By structuring content properly, adding meaningful labels, and ensuring readability, you create a better experience for all users.

Implementing these best practices will not only improve accessibility but also enhance SEO, usability, and the overall quality of your web application. Making the web accessible benefits everyone, and it is a responsibility we should all take seriously.

Start applying these principles today to build a more inclusive and effective web experience!