Semantic Elements and ARIA Roles

Semantic HTML elements such as <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> provide context about the structure of a page. These elements improve screen reader navigation and aid search engines in understanding content hierarchy.

In cases where native HTML semantics are not sufficient, ARIA (Accessible Rich Internet Applications) roles can be used to describe the purpose of dynamic content or complex UI components. ARIA roles should be used sparingly and only when necessary to avoid overcomplicating the codebase.

Example: Semantic Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example Page</title>
</head>
<body>
  <header>
    <h1>Main Page Title</h1>
    <nav aria-label="Main Navigation">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Article Title</h2>
      <p>This is the content of the article.</p>
    </article>
  </main>

  <aside>
    <h3>Related Topics</h3>
    <ul>
      <li><a href="#topic1">Topic One</a></li>
      <li><a href="#topic2">Topic Two</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2025 Your Company</p>
  </footer>
</body>
</html>

Proper Heading Structure

Headings (<h1> through <h6>) define the document outline and are essential for accessibility. A correct heading hierarchy ensures that screen readers and search engines can understand the content flow.

Best practices:

  • Use only one <h1> per page, typically for the main title.
  • Maintain a logical hierarchy (e.g., <h2> for sections, <h3> for subsections).
  • Avoid skipping heading levels (e.g., going from <h1> to <h3>).

Example: Correct Heading Hierarchy

<h1>Main Title</h1>
<h2>Section 1</h2>
  <h3>Subsection 1.1</h3>
  <h3>Subsection 1.2</h3>
<h2>Section 2</h2>
  <h3>Subsection 2.1</h3>
    <h4>Subsubsection 2.1.1</h4>

Accessible Forms

Forms are a core part of web applications and must be accessible to all users. Proper labeling, grouping, and validation are essential.

Use <label for="id"> to associate labels with form controls. The required attribute and aria-describedby help provide context and validation feedback.

Example: Accessible Form

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required aria-describedby="usernameHelp">
  <span id="usernameHelp" class="help-text">Enter a valid username (4-16 characters).</span>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required aria-describedby="passwordHelp">
  <span id="passwordHelp" class="help-text">Minimum 8 characters, one uppercase, one lowercase, and a number.</span>

  <button type="submit">Login</button>
</form>

Comparison: Semantic vs Non-Semantic Elements

Use CaseSemantic ElementNon-Semantic AlternativeNotes
Navigation menu<nav><div class="nav">Improves screen reader navigation
Document header<header><div class="header">Helps define page structure
Document footer<footer><div class="footer">Useful for contact or copyright info
Section of content<section><div class="section">Better for grouping related content
Standalone content block<article><div class="article">Useful for blogs, forum posts

Best Practices for Semantic HTML

  • Avoid using <div> and <span> for layout unless necessary. Prefer semantic elements for better structure.
  • Use lang and dir attributes to define language and text direction for accessibility and internationalization.
  • Provide meaningful alt text for all images to assist screen readers.
  • Use role and aria-* attributes judiciously and in accordance with the ARIA specification.
  • Validate your HTML using tools like W3C Validator to catch syntax and structure issues.

Learn more with useful resources