Accessibility in HTML - alt Text, ARIA Roles, Semantic Tags, Keyboard Support

Accessibility in HTML: Build for Everyone

Accessibility is more than just good practice — it’s a commitment to making the web usable for everyone, including people with disabilities. Whether your users rely on a screen reader, keyboard, or high-contrast settings, HTML has the tools to support them.

1. alt Text for Images

The alt attribute provides a textual alternative for images. Screen readers use this to describe the image aloud.

<img src="apple.jpg" alt="Red apple on a wooden table">

[ Screen reader: "Red apple on a wooden table" ]

Best Practices:

• Use descriptive, meaningful alt text.
• Use alt="" for decorative images.
• Avoid phrases like “image of…” — screen readers already announce that.

2. Semantic HTML Tags

HTML5 introduced semantic tags that help assistive technologies understand the page structure without extra attributes.

<header>Welcome to Cherry Times</header>
<nav><a href="#news">News</a></nav>
<main>
  <article>
    <h2>Cherry Picking Season</h2>
    <p>Learn how to pick the ripest cherries.</p>
  </article>
</main>
<footer>Contact us: banana@fruitmail.com</footer>

[ Screen reader identifies clear landmarks: header, nav, main, footer ]

3. ARIA Roles (Accessible Rich Internet Applications)

Use ARIA only when semantic HTML doesn’t offer a clear alternative. Roles provide screen readers with the purpose of elements.

<div role="button" tabindex="0" onclick="sayHello()">
  Say Hello 🍌
</div>

Explanation:

• role="button" tells the screen reader this is a button.
• tabindex="0" makes the div focusable via keyboard.

But remember: prefer <button> over ARIA when possible — native elements are best!

4. Keyboard Navigation

Not all users use a mouse. Accessible websites must be navigable via the Tab key, Enter, and Arrow keys.

Example: Focusable Card

<div tabindex="0" onclick="alert('You selected Banana!')" style="border: 1px solid #ccc; padding: 10px;">
  Item: Banana 🍌
</div>

[ User presses Tab → focuses div → presses Enter to activate ]

Tips:

• Use tabindex="0" to make custom elements keyboard-focusable.
• Avoid tabindex values other than 0 unless necessary.
• Use logical tab order — don't confuse users by jumping around.

5. Screen Reader Considerations

Screen readers process HTML in a linear flow — so it’s crucial to:

• Use proper heading hierarchy (<h1> to <h6>)
• Provide labels for inputs
• Include skip links for quick navigation
• Use <label for="id"> or wrap <input> in <label>

Example: Accessible Input

<label for="fruit">Favorite Fruit:</label>
<input type="text" id="fruit" name="fruit" placeholder="e.g. apple">

[ Screen reader reads: "Favorite Fruit: edit text" ]

Summary

Accessibility in HTML isn’t an afterthought — it’s an integral part of great design. Today you learned how to:

• Describe images with alt text
• Use semantic elements for clarity and structure
• Apply ARIA roles when needed
• Enable full keyboard navigation
• Design with screen readers in mind

What’s Next?

Coming up: We’ll go hands-on with building an accessible, semantic HTML layout that works seamlessly for keyboard users, screen readers, and everyone in between.