ARIA Essentials

ARIA Essentials: Building Bridges for Everyone 🌉

The Story of the Invisible Helper

Imagine you’re at a big playground. Some kids can see everything clearly, but others have their eyes closed. How do they know where the slide is? Where the swings are? They need a friend to whisper helpful hints!

ARIA is that helpful friend for websites. It whispers to special computer programs (called screen readers) so everyone can use the web—even people who can’t see the screen.

ARIA stands for Accessible Rich Internet Applications. It’s like adding sticky notes to your website that only screen readers can read!

1. ARIA Roles Overview 🎭

What Are Roles?

Think of a school play. Every actor has a role:

• One person is the narrator (they tell the story)
• One person is the hero (they do brave things)
• One person is the helper (they assist others)

ARIA roles work the same way! They tell screen readers: “Hey, this thing on the page is a button!” or “This is a menu!”

Common ARIA Roles

Simple Example

<div role="button">
  Click Me!
</div>

This tells the screen reader: “Even though I look like a plain box, treat me like a button!”

Why Use Roles?

Some website parts are built with <div> and <span> tags. These are like blank boxes—screen readers don’t know what they do! Roles give them meaning.

graph TD
    A["Plain Div Box"] -->|Add role=button| B["Screen Reader Says: Button!"]
    A -->|No role| C["Screen Reader Says: ???"]

2. ARIA Labeling Techniques 🏷️

The Name Tag Problem

Imagine 10 dogs at a dog park with no name tags. How do you call the right one?

Websites have the same problem! Buttons and links need names so screen readers can announce them.

Three Ways to Label

1. aria-label - Write the label directly

<button aria-label="Close menu">
  X
</button>

The button shows “X” but says “Close menu” to screen readers.

2. aria-labelledby - Point to another element

<h2 id="cart-title">Shopping Cart</h2>
<div aria-labelledby="cart-title">
  Your items here...
</div>

The div borrows its name from the heading!

3. aria-describedby - Add extra info

<input
  type="password"
  aria-describedby="pwd-help">
<p id="pwd-help">
  Must be 8 characters long
</p>

The input announces: “Password. Must be 8 characters long.”

When to Use Each?

graph TD
    A["Need a Label?"] --> B{Has visible text nearby?}
    B -->|Yes| C["Use aria-labelledby"]
    B -->|No| D["Use aria-label"]
    A --> E{Need extra help text?}
    E -->|Yes| F["Use aria-describedby"]

3. ARIA States and Properties 🚦

The Traffic Light of the Web

A traffic light shows states:

• 🔴 Red = Stop
• 🟢 Green = Go

ARIA states tell screen readers what’s happening RIGHT NOW!

Common States

Common Properties

Dropdown Menu Example

<button
  aria-expanded="false"
  aria-controls="menu1">
  Menu
</button>
<ul id="menu1" hidden>
  <li>Home</li>
  <li>About</li>
</ul>

When opened:

<button aria-expanded="true">

The screen reader knows: “Menu, expanded” or “Menu, collapsed”!

4. Accessible Forms 📝

Forms Are Like Job Applications

Everyone should be able to fill them out! Here’s how to make forms friendly.

The Three Must-Haves

1. Every input needs a label

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

The for connects to id. They’re best friends!

2. Show errors clearly

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

3. Mark required fields

<input
  type="text"
  aria-required="true">

Complete Form Example

<form>
  <label for="name">
    Name (required)
  </label>
  <input
    id="name"
    type="text"
    aria-required="true">

  <label for="phone">Phone</label>
  <input
    id="phone"
    type="tel"
    aria-describedby="phone-hint">
  <span id="phone-hint">
    Format: 123-456-7890
  </span>

  <button type="submit">
    Send
  </button>
</form>

5. Accessible Tables 📊

Tables Are Like Organized Drawers

Each drawer (cell) has a place. Labels help you find things fast!

The Golden Rules

1. Use proper headers

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Emma</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

2. Add a caption

<table>
  <caption>
    Class Students List
  </caption>
  ...
</table>

3. Complex tables need scope

<th scope="col">Price</th>
<th scope="row">Apple</th>

• scope="col" = header for the column
• scope="row" = header for the row

Screen Reader Experience

Without proper headers:

“Cell: Emma. Cell: 8.”

With proper headers:

“Name: Emma. Age: 8.”

Much clearer!

graph TD
    A["Table Cell"] --> B{Has TH header?}
    B -->|Yes| C["Screen reader says: Name: Emma"]
    B -->|No| D["Screen reader says: Emma ???"]

6. Accessible Images 🖼️

Pictures Worth a Thousand Words?

Not if you can’t see them! We need to describe images.

Three Types of Images

1. Informative Images - Has important info

<img
  src="chart.png"
  alt="Sales grew 50% in January">

Describe what the image means, not what it looks like!

2. Decorative Images - Just for looks

<img
  src="swirl.png"
  alt=""
  role="presentation">

Empty alt + role tells screen readers: “Skip this!”

3. Complex Images - Charts, diagrams

<figure>
  <img
    src="graph.png"
    alt="Quarterly sales chart"
    aria-describedby="graph-desc">
  <figcaption id="graph-desc">
    Q1: $100K, Q2: $150K,
    Q3: $200K, Q4: $250K
  </figcaption>
</figure>

Alt Text Tips

Quick Summary 🎯

The Big Picture 🌟

ARIA is like being a thoughtful friend. When you build a website:

1. Ask yourself: Can someone with closed eyes use this?
2. Add roles: Tell screen readers what things ARE
3. Add labels: Give everything a name
4. Update states: Keep screen readers informed
5. Test it: Use a screen reader yourself!

Remember: ARIA doesn’t add powers—it adds communication. A button without ARIA might work for some people, but with ARIA, it works for everyone.

You’re not just building websites. You’re building bridges so everyone can cross! 🌉