Introduction to Accessibility

What is Web Accessibility?

Web accessibility ensures that websites, tools, and technologies are designed and developed so that people with disabilities can:

• Perceive, understand, navigate, and interact with the web
• Contribute to the web
• Access information and services online
• Use assistive technologies effectively

The term "a11y" is a numeronym where "11" represents the eleven letters between "a" and "y" in the word "accessibility."

Why Accessibility Matters

The Numbers Tell a Story

According to the World Health Organization, over 1 billion people worldwide live with some form of disability. That's about 15% of the world's population. In the digital age, web accessibility directly impacts:

• Visual disabilities: Blindness, low vision, color blindness
• Hearing disabilities: Deafness, hard of hearing
• Motor disabilities: Limited mobility, tremors, paralysis
• Cognitive disabilities: Learning disabilities, memory issues, attention disorders
• Temporary disabilities: Broken arm, eye surgery, environmental factors
• Situational limitations: Bright sunlight, noisy environment, slow internet

It Benefits Everyone

Accessibility features often improve the experience for all users, not just those with disabilities:

• Captions help people watching videos in noisy or quiet environments
• Clear navigation benefits users with cognitive disabilities and those in a hurry
• Good color contrast helps users in bright sunlight
• Keyboard navigation helps power users work more efficiently
• Clear, simple language benefits non-native speakers and everyone else

Legal and Ethical Considerations

Laws and Regulations

Many countries have laws requiring web accessibility:

• USA: Americans with Disabilities Act (ADA), Section 508
• EU: European Accessibility Act, EN 301 549
• UK: Equality Act 2010
• Canada: Accessible Canada Act
• Australia: Disability Discrimination Act

Organizations that fail to provide accessible websites can face lawsuits, fines, and reputational damage.

Ethical Responsibility

Beyond legal requirements, there's a moral imperative. The web was created to be accessible to all, regardless of hardware, software, language, location, or ability. Building accessible websites is about human rights and digital inclusion.

Web Content Accessibility Guidelines (WCAG)

The Web Content Accessibility Guidelines (WCAG) are the international standard for web accessibility, developed by the World Wide Web Consortium (W3C).

WCAG Versions and Levels

The current version is WCAG 2.1 (with 2.2 recently released), which has three conformance levels:

• Level A: Basic accessibility features (minimum level)
• Level AA: Deals with major barriers (recommended target)
• Level AAA: Highest level of accessibility (ideal but not always achievable)

Most organizations aim for WCAG 2.1 Level AA compliance, which is also what most laws require.

The Four Principles of Accessibility (POUR)

WCAG is organized around four core principles. Content must be:

1. Perceivable

Information must be presented in ways users can perceive:

• Provide text alternatives for non-text content (images, videos)
• Provide captions and transcripts for audio and video
• Use sufficient color contrast
• Ensure content can be presented in different ways without losing meaning

<!-- Good: Image has descriptive alt text -->
<img src="sunset.jpg" alt="Orange sunset over mountain peaks">

<!-- Good: Video has captions -->
<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>

<!-- Bad: Missing alt text -->
<img src="chart.jpg">

2. Operable

Interface components must be operable by everyone:

• Make all functionality available from a keyboard
• Give users enough time to read and use content
• Don't use content that causes seizures (no flashing more than 3 times per second)
• Provide ways to help users navigate and find content

<!-- Good: Button is keyboard accessible -->
<button onclick="submitForm()">Submit</button>

<!-- Good: Skip link for keyboard users -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Bad: Only works with mouse -->
<div onclick="submitForm()">Submit</div>

3. Understandable

Information and operation must be understandable:

• Make text readable and understandable
• Make content appear and operate in predictable ways
• Help users avoid and correct mistakes
• Use clear and simple language

<!-- Good: Clear error message -->
<label for="email">Email:</label>
<input type="email" id="email" required>
<span class="error">Please enter a valid email address</span>

<!-- Good: Page language specified -->
<html lang="en">

<!-- Bad: Vague error -->
<span class="error">Invalid input</span>

4. Robust

Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies:

• Use valid HTML
• Ensure compatibility with current and future assistive technologies
• Use semantic HTML elements correctly
• Provide proper ARIA attributes when needed

<!-- Good: Semantic HTML with proper structure -->
<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<main>
  <article>
    <h1>Article Title</h1>
    <p>Content here...</p>
  </article>
</main>

<!-- Bad: Non-semantic divs -->
<div class="nav">
  <div class="link">Home</div>
  <div class="link">About</div>
</div>

Common Accessibility Barriers

Understanding common problems helps you avoid them:

• Missing alt text: Screen readers can't describe images without it
• Poor color contrast: Text becomes unreadable for users with low vision
• Keyboard traps: Users can't navigate away from elements
• Unclear link text: "Click here" doesn't describe the destination
• Auto-playing media: Unexpected audio disrupts screen readers
• Missing form labels: Users don't know what to enter
• Time limits: Users need more time to complete tasks
• Flashing content: Can trigger seizures

Assistive Technologies

Understanding how people use assistive technologies helps you design better:

• Screen readers: Software that reads content aloud (JAWS, NVDA, VoiceOver)
• Screen magnifiers: Enlarge portions of the screen
• Voice recognition: Control computer with voice commands
• Alternative keyboards: Modified keyboards for easier use
• Switch devices: Allow users to navigate with minimal movement
• Captions and transcripts: Text alternatives for audio content

Benefits of Accessible Design

Building accessible websites provides multiple benefits:

Business Benefits

• Reach a larger audience (15% more potential users)
• Improve SEO (search engines prefer accessible sites)
• Reduce legal risk
• Enhance brand reputation
• Increase customer satisfaction

Technical Benefits

• Better code quality and maintainability
• Improved site performance
• More semantic, structured HTML
• Better mobile experience
• Future-proof your website

Getting Started with Accessibility

Here are practical first steps:

1. Use semantic HTML: Choose elements based on meaning, not appearance
2. Add alt text: Describe images for screen reader users
3. Ensure keyboard navigation: All interactive elements should work with keyboard
4. Check color contrast: Use tools to verify text is readable
5. Label form inputs: Every input needs a descriptive label
6. Test with assistive technology: Try using a screen reader
7. Use automated tools: Run accessibility checkers regularly

Developing an Accessibility Mindset

Accessibility isn't just a checklist—it's a way of thinking about web development. Ask yourself:

• Can users perceive all information on this page?
• Can users navigate using only a keyboard?
• Are my instructions clear and easy to follow?
• Will this work with screen readers?
• Did I use the right HTML element for this purpose?
• Is my color contrast sufficient?

Key Takeaways

What's Next?

Now that you understand what accessibility is and why it matters, in the next lesson we'll dive deep into ARIA (Accessible Rich Internet Applications) attributes, which help make dynamic web applications more accessible to assistive technologies.