Web accessibility ensures that people with disabilities can use websites. This includes users with visual, auditory, motor, or cognitive impairments.

Why Accessibility Matters

• Inclusion - Everyone deserves access to information
• Legal requirements - Many countries require accessible websites
• Better UX - Accessibility improvements benefit all users
• SEO - Search engines reward accessible content

Semantic HTML

Using the right HTML elements is the foundation of accessibility.

Headings

Use heading levels (h1-h6) in order:

<h1>Page Title</h1>
  <h2>Section</h2>
    <h3>Subsection</h3>
  <h2>Another Section</h2>

Screen readers use headings to navigate the page.

Strong vs Bold

Use <strong> and <em> instead of <b> and <i>:

<!-- Better - has semantic meaning -->
<strong>Important</strong>
<em>Emphasized</em>

<!-- Less accessible - visual only -->
<b>Bold</b>
<i>Italic</i>

Lists

Proper list markup helps screen readers:

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Screen readers announce “list of 2 items” and allow navigation.

Image Alt Text

Every image needs an alt attribute:

<img src="dog.jpg" alt="Golden retriever playing in a park">

For decorative images, use an empty alt:

<img src="decorative-border.png" alt="">

The role Attribute

When you can’t use semantic HTML, add roles:

<!-- Semantic (preferred) -->
<nav>
  <ul>...</ul>
</nav>

<!-- With role (when nav isn't possible) -->
<div role="navigation">
  <ul>...</ul>
</div>

Common roles: navigation, main, article, button, search

Keyboard Navigation

tabindex

Make elements focusable with the keyboard:

<!-- Add to tab order -->
<div tabindex="0">Clickable content</div>

<!-- Remove from tab order -->
<a href="#" tabindex="-1">Skip this link</a>

Focus Order

Test your site using only the Tab key. Focus should move logically through the page.

ARIA Attributes

ARIA (Accessible Rich Internet Applications) adds extra information for assistive technologies.

aria-label

Provide a label when there’s no visible text:

<button aria-label="Close dialog">×</button>

aria-labelledby

Reference another element as the label:

<h2 id="cart-heading">Shopping Cart</h2>
<div aria-labelledby="cart-heading">
  <!-- Cart contents -->
</div>

aria-describedby

Add additional description:

<button aria-describedby="delete-warning">Delete Account</button>
<p id="delete-warning">This action cannot be undone.</p>

aria-hidden

Hide decorative elements from screen readers:

<span aria-hidden="true">🎉</span> Congratulations!

Forms

Labels

Always associate labels with inputs:

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

Error Messages

Connect errors to inputs:

<input
  type="email"
  id="email"
  aria-invalid="true"
  aria-describedby="email-error"
>
<p id="email-error">Please enter a valid email address.</p>

Tables

Add captions to tables:

<table>
  <caption>Monthly Sales Data</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$10,000</td>
    </tr>
  </tbody>
</table>

Testing Accessibility

1. Keyboard test - Navigate using only Tab, Enter, and arrow keys
2. Screen reader - Try ChromeVox (Chrome extension) or VoiceOver (Mac)
3. Color contrast - Use tools to check contrast ratios
4. Automated tools - Run Lighthouse accessibility audit

Quick Checklist

• All images have alt text
• Headings are in logical order
• Links have descriptive text (not “click here”)
• Form inputs have labels
• Color is not the only way to convey information
• Site is keyboard navigable
• Focus states are visible

Lessons in this unit:

0:	Introduction
1:	How to Use Semantic HTML Container Tags
2:	How to Create Links and Navigation in HTML
3:	How to Use Open Graph Meta Tags
4:	How to Add Favicons to Your Website
5:	▶︎ Introduction to Web Accessibility