Building an Inclusive Web

Practical Accessibility (A11y) for Everyone

Why it matters, how we do it, and how everyone benefits.

Presented by: Ithan lara | October 23, 2025

What IS Web Accessibility (A11y)?

  • Designing web content so everyone can use it, including people with disabilities.
  • Enabling people to perceive, understand, navigate, and interact with the web.
  • "Access by everyone regardless of disability is an essential aspect." – Sir Tim Berners-Lee
  • It's about removing barriers in the digital world.

It's Not Just About Disability...

Accessibility benefits people with:

  • Permanent disabilities (visual, auditory, motor, cognitive)
  • Temporary impairments (e.g., broken arm, lost glasses)
  • Situational limitations (e.g., bright sunlight, noisy place, slow internet)
  • Aging users with changing abilities

Essentially, accessibility improves overall usability for ALL users.

Interactive Moment: The Doors

Automatic sliding glass doors, open and easy to pass through.
Automatic Doors
Heavy, closed wooden double doors that need to be pulled open.
Manual Doors

Which door is easier if you're using a wheelchair? Pushing a stroller? Carrying boxes?

The accessible option (automatic) is often the most convenient for everyone.

Think Beyond the Mouse: Keyboard & Screen Readers

Many users navigate *without* a mouse due to preference or necessity (motor impairments, visual impairments).

Keyboard Navigation (Try the "Tab Test"!)

  • Uses Tab / Shift+Tab to move between interactive items (links, buttons, forms).
  • Uses Enter / Space to activate items.
  • Uses Arrow Keys within components (menus, sliders).
  • Relies entirely on clear focus indicators to know "where" they are.
  • Needs a logical source order for predictable movement.

Try navigating a page using only your keyboard!

Screen Readers Add Layers:

  • Reads content aloud (text, labels, alt text).
  • Announces element types and states (e.g., "button, pressed", "link, visited").
  • Uses semantic structure (Headings, Landmarks) for efficient page skimming and navigation (e.g., jump to next heading).
  • Turns a visual interface into an auditory/braille one.

Core Principles: WCAG & POUR

Based on WCAG (Web Content Accessibility Guidelines), aiming for Level AA.

Perceivable

Users can identify content/UI via senses.

Operable

Users can successfully use controls/navigation.

Understandable

Content and interface are clear & consistent.

Robust

Works across browsers, devices, AT.

POUR in Practice: Perceivable & Operable

Perceivable Examples

  • ✅ Meaningful alt text for images
  • ✅ Sufficient Color Contrast (e.g., ≥ 4.5:1 text)
  • ✅ Captions/Transcripts for media

Operable Examples

  • ✅ Full Keyboard Accessibility
  • ✅ Clear, Visible Focus States (:focus-visible)
  • ✅ Consistent Navigation / Reduce Motion
  • ✅ Skip Navigation Links

POUR in Practice: Understandable & Robust

Understandable Examples

  • ✅ Clear, Simple Language; Avoid Jargon
  • ✅ Logical Structure (Headings, Lists)
  • ✅ Predictable Layouts & Interactions
  • ✅ Readable Fonts, Spacing, Text Size

Robust Examples

  • ✅ Use Semantic HTML (<nav>, <button> etc.)
  • ✅ Write Valid Code
  • ✅ Use ARIA only when necessary
  • ✅ Test across browsers & Assistive Tech (AT)

How Can We Check Our Work?

  1. Automated Tools: WAVE extension, Browser DevTools (Lighthouse). Good start, catch ~30-40%.
  2. Manual Checks:
    • Keyboard Test: Navigate EVERYTHING with Tab, Arrows, Enter, Space. Is focus clear?
    • Color Contrast Checks
    • Basic Screen Reader Test (NVDA, VoiceOver, JAWS)
  3. User Testing: Involve people with disabilities - the ultimate test!

Why Bother? Accessibility IS Quality!

  • ✅ Better Usability: Benefits ALL users.
  • 📈 Wider Audience: ~1B people + older users.
  • 🔍 Improved SEO: Overlaps with best practices.
  • 💖 Enhanced Brand: Shows inclusion & ethics.
  • ⚖️ Legal Compliance: Reduces risk. 1
  • 💡 Innovation Driver: Constraints spark creativity.

Helpful Resources & Tools

Continue your learning journey with these tools and guidelines:

For Developers

For Designers

For Content Creators

It Takes a Village: Shared Responsibility

Accessibility is everyone's job:

  • Designers: Contrast, focus, consistency, clarity.
  • Content: Clear language, structure, alt text.
  • Developers: Semantic HTML, keyboard access, testing.
  • Leads/PMs: Prioritize, allocate time, foster learning.
  • Everyone: Be curious, learn basics, advocate!

Small changes have a HUGE impact!

Thank You!

Let's build a web for everyone.

Questions?

Ithan lara

Slide Navigation

You can navigate between slides using:

Use the Escape key to close this guide.