Semantic HTML Accessibility Audit

Semantic HTML Accessibility Audit

Semantic HTML is the foundation of web accessibility. Using the correct HTML elements communicates structure, meaning, and relationships to assistive technologies without requiring ARIA attributes.

Why Semantics Matter for Accessibility

Screen readers use HTML semantics to:

• Build a document outline from headings
• Provide landmark-based navigation (header, nav, main, footer)
• Announce list items and table cells correctly
• Associate form labels with inputs
• Identify interactive elements (buttons, links)

Heading Hierarchy Audit

Check that headings form a logical outline:

• Only one <h1> per page (the page title)
• Headings do not skip levels (h1 → h3 without h2)
• Headings are used for structure, not for styling
• Every section of content has an appropriate heading

Use the screen reader rotor (VoiceOver) or heading navigation (NVDA) to browse the heading structure.

Landmark Regions Audit

Verify the page uses HTML5 landmark elements:

• <header> or role="banner" for the site header
• <nav> or role="navigation" for navigation menus
• <main> or role="main" for primary content
• <footer> or role="contentinfo" for the site footer
• <aside> or role="complementary" for sidebar content
• <form> or role="form" for significant forms

Lists

• Navigation menus use <ul> or <ol> with <li> items
• Definition lists use <dl>, <dt>, <dd>
• Nested lists are properly nested inside parent <li>

Tables

• Data tables use <table>, <thead>, <tbody>, <th>, <td>
• <th> has scope="col" or scope="row"
• Complex tables use id/headers attributes
• Layout tables are avoided (use CSS instead)

Common Semantic HTML Mistakes

1. <div> or <span> used for interactive elements (use <button> or <a>)
2. Headings used for visual styling only (use CSS classes instead)
3. Lists not marked up as <ul>/<ol> (bulleted paragraphs)
4. Missing <main> element (every page should have one)
5. Multiple <nav> elements without aria-label to distinguish them