♿ Accessibility Fundamentals

Design websites and apps that everyone can use — including people with disabilities.

🧠 Why Accessibility Matters

Accessibility (often called a11y) ensures that websites work for all users — regardless of ability, device, or situation.

It’s not just about compliance — it’s about inclusive design.
Accessibility makes your app usable by:

• People using screen readers
• Users who rely on keyboards (not a mouse)
• People with color blindness or vision issues

💡 Real-World Example:
When YouTube added better captions and keyboard shortcuts, its watch time increased — proving accessibility improves both usability and engagement.

🔹 1. ARIA Labels and Roles

🧩 What is ARIA?

ARIA (Accessible Rich Internet Applications) helps make dynamic web content readable by assistive technologies like screen readers.

When your app has custom buttons, modals, or menus, ARIA helps describe what they do.

🔹 Common ARIA Attributes

🔸 Example

<button aria-label="Submit form">✔</button>

Screen readers will read: “Submit form” — even if the button only shows an icon.

💡 Real-World Example: Gmail uses ARIA roles in its interface so that users navigating with screen readers can hear “Inbox” or “Compose button” clearly.

⌨️ 2. Keyboard Navigation Patterns

🔹 Why It Matters

Not everyone uses a mouse — many rely on Tab, Enter, and Arrow keys. Accessible apps allow users to move through menus, links, and forms using just the keyboard.

🔸 Best Practices

🔹 Example

<button tabindex="0">Save</button>

tabindex="0" ensures the element is reachable via keyboard navigation.

💡 Real-World Example: LinkedIn allows users to navigate job cards and open applications entirely via keyboard — improving accessibility for visually impaired users.

🔹 Pro Tip

• Always make sure focus outlines are visible.
• Avoid removing outlines with outline: none; unless replaced with a better focus style.

🎨 3. Color Contrast Requirements

🔹 The Concept

Good color contrast ensures that text and icons are readable for users with vision impairments or color blindness.

Contrast is measured by luminance difference between foreground and background colors.

🔹 WCAG (Web Content Accessibility Guidelines)

🔸 Example

body {
  color: #222;
  background-color: #fff;
}

✅ Contrast ratio ≈ 15:1 — passes accessibility checks.

💡 Tip: Use tools like Contrast Checker or Chrome DevTools Lighthouse to test your colors.

💡 Real-World Example: Apple redesigned iOS system apps to increase contrast — improving readability for users in sunlight or with low vision.

🔊 4. Screen Reader Compatibility

🔹 What is a Screen Reader?

A screen reader reads out the text and structure of a webpage. Common screen readers: NVDA, JAWS, and VoiceOver.

To make apps screen-reader friendly:

• Use proper HTML structure (<main>, <nav>, <button>, <label>)
• Add alt text for images
• Use ARIA roles where needed

🔸 Example

<img src="profile.jpg" alt="Profile picture of Rukhya Shaik">

If no alt is provided, the screen reader might just read “image.jpg” — which is meaningless to the user.

💡 Real-World Example: Twitter allows users to add alt descriptions to images — helping visually impaired users understand photos in their timeline.

🔹 Best Practices

🔍 5. SEO Best Practices

🔹 Why SEO and Accessibility Work Together

Good accessibility also improves Search Engine Optimization (SEO) — because search engines rely on structure and metadata just like assistive tech.

🔸 Key Practices

💡 Real-World Example: Wikipedia uses clean, semantic HTML and ARIA roles — making its pages highly accessible and SEO-friendly.

🌍 Real-World Impact

Accessibility isn’t just about compliance — it’s about inclusion.

• A visually impaired person using a screen reader
• A user navigating by keyboard
• Someone reading in bright sunlight All deserve the same smooth experience.

💡 Quote:

“Accessibility is not a feature — it’s a foundation.”

🧾 Summary

💡 Final Thought

Accessible design makes apps usable by everyone — not just a few. It improves user experience, SEO, and brand reputation all at once.

Building accessible apps is not extra work — it’s the right way to build digital experiences. 💙