HTML

HTML is the foundation of web accessibility. When used properly, semantic HTML provides structure, meaning, and built-in keyboard and screen reader support without needing extra work from developers or assistive technologies.

This page covers how to write accessible HTML using native elements, and why semantic structure is always the best first step in accessible design.

Why Semantic HTML Matters

  • Screen readers can automatically announce the role and structure of native elements like buttons, headings, and lists
  • Keyboard users can naturally tab through interactive elements like links, buttons, and form controls
  • Assistive technologies rely on the semantics of HTML elements to determine how to present and interact with them

Key Principles

Use HTML elements as they were intended, not just for styling.

Use:

  • <button> for actions
  • <a href=""> for hyperlinks
  • <input> and <label> for forms
  • <nav>, <main>, <header>, <footer> for layout

Avoid using <div> or <span> to create interactive features.

html

<!-- Inaccessible --> 

<div onclick="submitForm()">Submit</div>


<!-- Accessible --> 

<button>onclick="submitForm()">Submit</button>

Headings define the hierarchy of a page’s content.

Best Practices:

  • Only one <h1> per page
  • Use nested levels (<h2>, <h3>, etc.) to show structure
  • Don’t skip heading levels (e.g., from <h2> to <h4>)

  • Don’t skip heading levels (e.g., from <h2> to <h4>)

    html

    <h1>Page Title</h1>

    <h2>Section One</h2>

    <h3>Subsection</h3>


 

Use <label> elements to clearly associate text with inputs.

Correct:

html

<label for="email">Email</label>
<input type="email" id="email" name="email">

Incorrect:

html

<input placeholder="Email"> <!-- Placeholder is not a label -->

Use <ul> or <ol> for groups of items, not just for indentation or layout.

html

<ul>

<li>Apples</li>


<li>Oranges</li>


<li>Bananas</li>

</ul>

HTML5 landmark elements define the layout of a page for assistive technologies:

  • <main> – Main content
  • <nav> – Navigation links
  • <header> / <footer> – Page or section headers/footers
  • <aside> – Complementary information
  • <header> / <footer> – Page or section headers/footers
  • <aside> – Complementary information

Example:

html

<body>

  <header><h1>Website Title</h1></header>


 <nav>...</nav>


 <main>...</main>


 <footer>...</footer>


</body>

General Practices

Avoid generic <div>/<span> when native HTML is available.

Don’t skip heading levels and use only one <h1>.

Use visible labels not placeholders, to describe the input’s purpose.

Use list and table elements only for their intended purposes.

Use HTML elements to define sections like navigation, main content, and footers.

Related WCAG 2.1 Success Criteria

Use HTML to programmatically convey structure.

Ensure DOM order matches visual and logical order.

All interactive elements must be operable by keyboard.

Use valid HTML so assistive tech can interpret it correctly.

Use correct native elements to ensure proper roles and names.