Accessibility Basics

🚪 Building Doors Everyone Can Open: HTML Accessibility Basics

Imagine you’re building a beautiful house. The walls are painted, the windows sparkle, and it looks amazing. But there’s one problem—you forgot to add a door! Some people can climb through windows, but others can’t. That’s not a very nice house, is it?

Websites work the same way. When we build web pages, we need to make sure everyone can use them—people who can’t see, people who can’t use a mouse, and people who use special tools to browse the web.

This is called Accessibility (often written as “a11y” because there are 11 letters between the “a” and “y”). Let’s learn how to build websites with doors that everyone can open!

🎯 What is Accessibility?

Think of accessibility like building ramps next to stairs. Stairs work great for most people, but what about someone in a wheelchair? A ramp helps everyone—people with wheels, parents with strollers, even you when you’re carrying something heavy!

Web accessibility means: Making websites work for everyone, no matter how they use computers.

Who Needs Accessible Websites?

Fun Fact: Making sites accessible helps EVERYONE. Clear labels, good contrast, and keyboard support make sites better for all users!

📸 Alt Text: Pictures That Talk

When a blind person visits your website, they use a special program called a screen reader. It reads the website out loud to them. But here’s the problem—it can’t describe pictures!

That’s where alt text comes in. It’s like giving your picture a voice!

The Magic of Alt Text

<img
  src="puppy.jpg"
  alt="A golden retriever puppy
       playing with a red ball">

What the screen reader says: “Image: A golden retriever puppy playing with a red ball”

Without alt text, it would just say “Image” or read the confusing filename. Not helpful at all!

Alt Text Best Practices

✅ DO THIS:

• Describe what’s in the picture
• Be short but meaningful
• Mention text shown in images

❌ DON’T DO THIS:

• Say “image of” or “picture of” (screen readers already say that)
• Write super long descriptions
• Leave it empty for important images

When to Use Empty Alt Text

Sometimes images are just decoration—like a fancy border or a colorful squiggle. These don’t need descriptions!

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

The empty alt="" tells screen readers: “Skip this, it’s just decoration!”

graph TD
    A["Is the image important?"] -->|Yes| B["Write helpful alt text"]
    A -->|No| C["Use empty alt="""]
    B --> D["Describe content briefly"]
    C --> E["Screen reader skips it"]

🏃 Skip Links: The Secret Shortcut

Imagine you’re reading a book, but every time you turn the page, you have to read the table of contents again. And again. AND AGAIN. That would be SO annoying!

People who use keyboards to navigate face this problem. Every page, they have to press Tab through the logo, menu, search bar… just to get to the main content.

Skip links are secret shortcuts! They let users jump directly to the good stuff.

How Skip Links Work

<!-- This link appears first -->
<a href="#main-content"
   class="skip-link">
  Skip to main content
</a>

<!-- Navigation goes here -->
<nav>...</nav>

<!-- The main content has an ID -->
<main id="main-content">
  Here's the good stuff!
</main>

Styling Skip Links

Skip links are usually hidden until someone presses Tab:

.skip-link {
  position: absolute;
  top: -40px;
}

.skip-link:focus {
  top: 10px;
}

When a keyboard user presses Tab, the link appears at the top of the page. They can press Enter to jump straight to the content!

⌨️ Keyboard Navigation: No Mouse Needed

Some people can’t use a mouse. Maybe their hands shake, maybe they’re blind, or maybe their mouse just broke! Whatever the reason, every website should work with just a keyboard.

The Three Magic Keys

Making Things Keyboard-Friendly

Buttons and links work automatically!

<button>Click me!</button>
<a href="/page">Go here</a>

These work with keyboard out of the box.

But what about divs?

<!-- ❌ BAD - Can't use with keyboard -->
<div onclick="doSomething()">
  Click me
</div>

<!-- ✅ GOOD - Works with keyboard -->
<button onclick="doSomething()">
  Click me
</button>

Golden Rule: If it looks clickable, make it a <button> or <a>. Don’t fake it with <div>!

🎯 Focus Management and Tabindex

When you press Tab, something gets focus. It’s like a spotlight shining on that element, saying “You’re here now!”

The Focus Ring

That glowing outline around buttons when you Tab to them? That’s the focus ring. It’s SUPER important—it tells keyboard users where they are!

/* ❌ NEVER do this! */
*:focus {
  outline: none;
}

/* ✅ Make focus visible */
button:focus {
  outline: 3px solid blue;
}

Tabindex: Controlling the Tab Order

Sometimes you need to control which order things get focus. That’s what tabindex does!

Three types of tabindex:

Examples

<!-- Make a div focusable -->
<div tabindex="0">
  Now I can receive focus!
</div>

<!-- Focusable by JavaScript only -->
<div tabindex="-1" id="modal">
  Script can focus me
</div>

// Move focus to modal when it opens
document.getElementById('modal')
  .focus();

When to Use tabindex=“-1”

Use it for:

• Modals that should receive focus when opened
• Error messages you want to announce
• Sections users jump to via skip links

graph TD
    A["Element Type?"] -->|Button/Link| B["Already focusable!"]
    A -->|Div/Span| C["Need focus?"]
    C -->|In tab order| D["tabindex="0""]
    C -->|By script only| E["tabindex="-1""]

🔊 Screen Reader Considerations

Screen readers are like having someone read the website to you. But they can only read what’s in the code! Let’s make sure our websites tell a good story.

Semantic HTML: The Secret Language

Screen readers understand certain HTML tags. Use them!

<!-- ✅ Screen reader knows this is nav -->
<nav>
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

<!-- ❌ Screen reader is confused -->
<div class="navigation">
  <div class="menu-item">Home</div>
</div>

Important Semantic Tags

ARIA Labels: Adding Extra Information

Sometimes you need to give screen readers extra hints:

<!-- Button with icon only -->
<button aria-label="Close">
  ✕
</button>

<!-- Describe what will happen -->
<button aria-label="Delete this message">
  🗑️
</button>

Hiding Decorative Elements

Some things shouldn’t be read aloud:

<!-- Hide from screen readers -->
<span aria-hidden="true">★★★</span>
<span>3 out of 5 stars</span>

Live Regions: Announcing Changes

When something on the page changes (like a notification), tell screen readers!

<div aria-live="polite">
  <!-- Content here gets announced -->
  Form saved successfully!
</div>

🌟 Putting It All Together

Here’s a mini webpage using everything we learned:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Accessible Page</title>
</head>
<body>
  <!-- Skip Link -->
  <a href="#main" class="skip-link">
    Skip to content
  </a>

  <!-- Semantic Header -->
  <header>
    <nav aria-label="Main menu">
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content -->
  <main id="main" tabindex="-1">
    <h1>Welcome!</h1>
    <img src="hero.jpg"
         alt="Team working together">
    <button>Get Started</button>
  </main>

  <!-- Announcements -->
  <div aria-live="polite" id="alerts">
  </div>
</body>
</html>

🎉 You Did It!

You just learned how to build websites that welcome EVERYONE:

✅ Alt text gives pictures a voice ✅ Skip links let users jump to content ✅ Keyboard navigation works without a mouse ✅ Focus management shows where you are ✅ Screen readers understand semantic HTML

Building accessible websites isn’t just the right thing to do—it makes your sites better for EVERYONE. Now go build some doors that everyone can open! 🚪✨