Accessibility and semantics– HTML Course

Accessibility and Semantics

Accessibility (a11y) and semantics are essential for websites to be usable by all people, including those with disabilities. They contribute to a fair, clear, and inclusive experience.

What does “semantics” mean in HTML?

• Using appropriate HTML elements for the content they represent
• Examples:
  • <article> – for standalone articles
  • <section> – for thematic sections
  • <nav> – for navigation menus
  • <header>, <footer> – for page header and footer
• Semantics help screen readers and search engines understand the page structure

Accessibility Principles

• Perceivable – content must be perceivable by all users
• Operable – interactions must be possible via keyboard, mouse, etc.
• Understandable – information and interface must be clear
• Robust – content must work with various assistive technologies

Recommended Practices

• Use alt for images: <img src="..." alt="Description">
• Ensure sufficient contrast between text and background
• Use aria-label, aria-hidden when needed
• Test with keyboard: can you navigate without a mouse?
• Avoid using color alone to convey information

Examples of Proper Semantics

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<article>
  <h2>Article Title</h2>
  <p>Article content...</p>
</article>

Useful Resources

• MDN – Accessibility
• W3C Web Accessibility Initiative
• WAVE – Accessibility Evaluation Tool

Congratulations! This introductory course ends here. In the next course, you will learn about the CSS styling language. Good luck and happy learning!