Semantic HTML elements are used

HTML built entirely from <div> and <span> elements has no machine-readable meaning. Screen readers cannot distinguish navigation from content from footers — everything is an undifferentiated block. Semantic elements like <nav>, <main>, <header>, and <footer> expose ARIA landmark roles automatically, letting screen reader users jump directly to the content region they need. WCAG 2.2 SC 1.3.1 (Info and Relationships) and SC 4.1.2 (Name, Role, Value) both require structure to be programmatically determinable. Search engines also use semantic structure to understand page organization, affecting how content is indexed and ranked.

Replace structural <div> wrappers with their semantic equivalents. At minimum, every page should use these four elements:

<header>
  <nav>...</nav>
</header>

<main>
  <section>
    <article>...</article>
  </section>
</main>

<footer>...</footer>

In React/Next.js components, swap container <div> elements for <main>, <section>, or <article> based on the content's role. Use <section> when the content could appear in a table of contents. Use <article> for self-contained content (blog posts, product cards, comments). Do not nest <main> — there should be exactly one per page.

• ID: site-health-check.accessibility-mobile.semantic-html

• Severity: info

• What to look for: Enumerate all semantic HTML5 elements present in the document from this list of 6: <nav>, <main>, <header>, <footer>, <section>, <article>. Count how many distinct element types from this list appear at least once. Record which specific elements were found.

• Pass criteria: The page uses at least 2 distinct semantic element types from the list of 6 above. Report which elements were found: "Found 3 semantic elements: nav, main, footer."

• Fail criteria: Fewer than 2 distinct semantic element types from the list are found — the page likely relies on generic <div> and <span> elements for layout.

• Skip (N/A) when: The HTML body is less than 500 bytes (too small to reasonably expect semantic structure — may be a redirect page or error page).

• Error when: SPA detected.

• Detail on fail: "No semantic HTML elements found — page is built entirely with <div> elements"

• Remediation: Semantic elements give meaning to page structure, helping screen readers and search engines understand content regions. Replace generic divs with semantic equivalents:

  <!-- Instead of <div class="nav"> -->
  <nav>...</nav>
  
  <!-- Instead of <div class="main-content"> -->
  <main>...</main>
  
  <!-- Minimum recommended structure -->
  <header>...</header>
  <nav>...</nav>
  <main>...</main>
  <footer>...</footer>
  

  In React/Next.js components, replace <div> wrapper elements with <main>, <section>, or <article> where the content has semantic meaning.