Logo
Tutorials Articles Code Playground
Sign In Get Started
Module: HTML Semantic Elements

Accessibility basics

HTML Semantic Elements & Accessibility Basics

Why Semantic HTML Matters for Accessibility

Using semantic HTML isn't just about cleaner code; it's crucial for accessibility. Assistive technologies (like screen readers) rely on HTML structure to understand the content and convey it meaningfully to users with disabilities. Non-semantic elements (like excessive <div>s and <span>s) provide no inherent meaning, forcing screen readers to rely on ARIA attributes (which we'll touch on later) or guess the content's purpose. Semantic elements already convey meaning.

Core Semantic Elements

Here's a breakdown of key semantic elements and how they contribute to accessibility:

  • <header>: Represents introductory content for a document or section. Screen readers announce this as the beginning of a section. Often contains headings, logos, and navigation.
    • Accessibility Benefit: Clearly defines the start of a content block.
  • <nav>: Identifies a section of navigation links. Screen readers can quickly identify and allow users to jump to the navigation.
    • Accessibility Benefit: Provides a clear landmark for navigation.
  • <main>: Represents the dominant content of the document. There should only be one <main> element per page. Screen readers use this to identify the primary content.
    • Accessibility Benefit: Identifies the core content, avoiding unnecessary reading of sidebars or headers.
  • <article>: Represents a self-contained composition in a document, page, application, or site. Think blog posts, news articles, forum posts.
    • Accessibility Benefit: Allows screen readers to treat each article as an independent unit.
  • <aside>: Represents content that is tangentially related to the surrounding content. Often used for sidebars, pull quotes, or advertisements.
    • Accessibility Benefit: Indicates content that is secondary and can be skipped if desired.
  • <footer>: Represents a footer for a document or section. Typically contains copyright information, contact details, and links to related documents.
    • Accessibility Benefit: Clearly defines the end of a section or document.
  • <section>: A generic semantic element representing a thematic grouping of content. Use when no other more specific element fits.
    • Accessibility Benefit: Provides structure and grouping, but less specific than <article> or <aside>.
  • <figure> & <figcaption>: Used to encapsulate images, illustrations, diagrams, code listings, etc., along with a caption.
    • Accessibility Benefit: Associates a caption with an image, providing context for screen reader users. Crucial for image accessibility.

Headings: <h1> - <h6>

Headings are fundamental for accessibility. They create a document outline that screen reader users can navigate.

  • Hierarchy is Key: Use headings in a logical order (h1, h2, h3, etc.). Don't skip levels (e.g., don't go from h1 to h3).
  • Only One <h1>: Each page should have one <h1> element representing the main topic.
  • Avoid Styling Headings with CSS to Look Like Other Elements: If you want text to look like a heading, use CSS, but use the appropriate heading tag for semantic meaning.

Lists: <ul>, <ol>, <dl>

Lists provide structure and are easily understood by screen readers.

  • <ul> (Unordered List): For lists where order doesn't matter.
  • <ol> (Ordered List): For lists where order does matter.
  • <dl> (Description List): For defining terms and their descriptions (<dt> - term, <dd> - description).

Accessibility Best Practices Beyond Semantic HTML

  • alt Text for Images: Provide descriptive alt text for all images. This is read by screen readers and displayed if the image fails to load. Empty alt="" for decorative images.
  • Form Labels: Associate form inputs with <label> elements using the for attribute. This makes forms accessible to screen reader users and those using assistive technologies.
  • Keyboard Navigation: Ensure all interactive elements are reachable and operable using the keyboard.
  • Color Contrast: Ensure sufficient color contrast between text and background for users with low vision. Tools like WebAIM's Color Contrast Checker can help.
  • ARIA Attributes (Use Sparingly): Accessible Rich Internet Applications (ARIA) attributes can enhance accessibility, but should be used as a last resort when semantic HTML isn't sufficient. Overuse can actually harm accessibility. Focus on using semantic HTML first. Examples: aria-label, aria-describedby, aria-hidden.
  • Testing with Screen Readers: The best way to ensure accessibility is to test your website with a screen reader (e.g., NVDA, VoiceOver, JAWS).

Resources