Accessibility in HTML

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.

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.

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 ]

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!

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.

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" ]

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

Choose the option that lists all and only the correct statements.

1. Using semantic HTML elements like <button> and <nav>
2. Setting tabindex to control focus order
3. Disabling all keyboard events
4. Providing visible focus indicators

Choose the option that lists all and only the correct statements.

1. Use semantic tags to give meaning to content
2. Include descriptive alt text for images
3. Avoid keyboard focus styles to keep UI clean
4. Use ARIA roles and properties where necessary

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.