HTML Course 11. Web accessibility (a11y) applied to HTML

11. Web Accessibility (a11y) Applied to HTML

Web accessibility ensures that websites, tools, and technologies are designed and developed so that people with disabilities can use them. In HTML, this means choosing the right semantics, landmarks, attributes, and ARIA roles to make content perceivable, operable, understandable, and robust.

1. Semantic HTML Elements

Using semantic tags provides native accessibility benefits. Screen readers and other assistive technologies rely on these elements to understand page structure.

• <header>, <nav>, <main>, <footer> – Landmarks for page regions.
• <article>, <section>, <aside> – Grouping related content.
• <figure> and <figcaption> – Associate images with captions.
• <table> with <th> and scope – Present tabular data accessibly.

Example: Basic Page Structure

  
  <img src='logo.png' alt='ACME Corp Logo'>
  <nav>
    <ul>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  </nav>



  <article>
    <h2>Welcome to Our Site</h2>
    <p>This is a fully accessible site using semantic HTML.</p>
  </article>



  

2. ARIA Roles and Attributes

ARIA (Accessible Rich Internet Applications) attributes extend HTML semantics when native elements are insufficient.

• role – Define an element’s purpose (e.g., role='button').
• aria-label / aria-labelledby – Provide accessible names.
• aria-describedby – Reference supplementary descriptions.
• aria-live – Announce dynamic content changes.
• aria-expanded, aria-hidden – Indicate state of collapsible sections.

Example: Custom Accordion with ARIA

<div role='region' aria-labelledby='faq-heading'>
  <h2 id='faq-heading'>FAQ</h2>

  <button id='q1-btn'
          aria-expanded='false'
          aria-controls='a1'
          role='button'>
    What is ACME?
  </button>
  <div id='a1'
       role='region'
       aria-labelledby='q1-btn'
       hidden>
    ACME is a fictional company that demonstrates best practices.
  </div>

  <!-- Scripts should toggle aria-expanded and hidden attributes -->
</div>
  

3. Keyboard Accessibility

Ensure all interactive elements are reachable and operable with keyboard only:

• Use <button> instead of clickable <div> when possible.
• Manage focus order in logical sequence.
• Use tabindex='0' to include noninteractive elements in tab order when necessary.
• Use tabindex='-1' to programmatically move focus without making element tabbable.
• Provide visible focus indicators (browsers do this by default).

Example: Skip Navigation Link

<a href='#main-content' class='skip-link'>Skip to main content</a>

<nav>
  <!-- navigation items -->
</nav>

<main id='main-content'>
  <h2>Main Section</h2>
  <p>Content begins here.</p>
</main>
  

4. Accessible Forms

Forms must have labels, error handling, and clear instructions:

• <label for='field' > clearly associated with form control.
• aria-required='true' to indicate mandatory fields.
• Error messages linked with aria-describedby.
• Use fieldset and legend for grouping related controls.

Example: Accessible Contact Form

<form action='/submit' method='post'>
  <fieldset>
    <legend>Contact Us</legend>

    <label for='name'>Name:</label>
    <input type='text'
           id='name'
           name='name'
           aria-required='true'>

    <label for='email'>Email:</label>
    <input type='email'
           id='email'
           name='email'
           aria-required='true'
           aria-describedby='emailHelp'>
    <div id='emailHelp'>We’ll never share your email.</div>

    <button type='submit'>Submit</button>
  </fieldset>
</form>
  

5. Images, Media, and Captions

Non-text content must have text alternatives:

• alt for images; empty alt='' for decorative images.
• <video> with <track kind='captions'> for deaf users.
• Provide transcripts for audio-only content.

Example: Video with Captions

<video controls width='600'>
  <source src='promo.mp4' type='video/mp4'>
  <track kind='captions'
         srclang='en'
         label='English captions'
         src='promo_en.vtt'>
  Your browser does not support the video tag.
</video>
  

6. Live Regions for Dynamic Content

Notify assistive technology of updates:

• aria-live='polite' for non-urgent updates.
• aria-live='assertive' for critical messages.
• aria-atomic='true' to announce the entire region on changes.

Example: Polling Update

<div role='status'
     aria-live='polite'
     aria-atomic='true'
     id='stock-status'>
  Current price: $100
</div>

<!-- JS periodically updates #stock-status text content -->
  

7. Color Contrast & Design

Ensure text and interactive elements meet minimum contrast ratios:

• WCAG AA requires 4.5:1 contrast for normal text.
• Use tools like Contrast Checker to verify.
• Avoid conveying information by color alone; use text or patterns too.

8. Testing and Validation

• Use automated tools (e.g., Lighthouse, axe-devtools).
• Test with screen readers (NVDA, VoiceOver).
• Keyboard-only navigation.
• Test forms, dialogs, menus, and focus management in multiple browsers.

By combining semantic HTML, proper ARIA usage, keyboard support, and thoughtful content structure, you can build web pages that are inclusive and accessible to all users.