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 or elements for everything, semantic elements like , , , and provide clear information about the structure of a webpage. For example: My Website Home About Contact Welcome to My Website This is where I share useful content about web development. © 2025 My Website 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? Improves Accessibility: Screen readers can interpret and navigate the content better when correct HTML elements are used. Enhances SEO: Search engines prioritize well-structured content, improving website rankings. Better Maintainability: Developers can quickly understand and update semantic code. Consistent User Experience: Semantic elements help browsers display content in a structured way. 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 ( to ) Headings provide structure and make it easier for users to navigate a page. They help screen readers identify sections of content quickly. Main Title Subheading Smaller Section Avoid: Skipping heading levels or using headings for styling instead of content structure. 2. Use Descriptive Links () Links should clearly indicate what they lead to. View our products 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. Avoid: Leaving alt empty or using vague descriptions. 4. Use Lists for Grouped Items ( and ) Lists make it easier to scan and navigate related content. Apples Bananas Cherries Avoid: Using or to create lists instead of proper elements. 5. Label Form Elements ( and aria-label) Forms should be accessible for users relying on screen readers. Email Address: If a visual label isn't available, use aria-label: 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. X 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. Avoid: Wrapping everything in a . 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 re

Mar 25, 2025 - 12:33

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

or elements for everything, semantic elements like

, and

provide clear information about the structure of a webpage.

For example:


    My Website


    
         href="#home">Home
         href="#about">About
         href="#contact">Contact
    


    
        Welcome to My Website
        This is where I share useful content about web development.
    


    © 2025 My Website

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?

Improves Accessibility: Screen readers can interpret and navigate the content better when correct HTML elements are used.
Enhances SEO: Search engines prioritize well-structured content, improving website rankings.
Better Maintainability: Developers can quickly understand and update semantic code.
Consistent User Experience: Semantic elements help browsers display content in a structured way.
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 (

)

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

Main Title
Subheading
Smaller Section

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

2. Use Descriptive Links ()

Links should clearly indicate what they lead to.

 href="/products">View our products

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.

 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 (
and
)

Lists make it easier to scan and navigate related content.


    Apples
    Bananas
    Cherries

Avoid: Using

or to create lists instead of proper elements.

5. Label Form Elements ( and `aria-label`)

Forms should be accessible for users relying on screen readers.

 for="email">Email Address:
 type="email" id="email" name="email">

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

 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.

 aria-label="Close menu">X

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.

Avoid: Wrapping everything in a .

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!