Web Accessibility Fundamentals

Digital Inclusion Resource Center

Overview Principles Guidelines Implementation Exercises

Accessibility

/əkˌsesəˈbɪləti/
Noun Web Development

Definition: The practice of making websites usable by people of all abilities and disabilities

Origin: From Latin "accessus" meaning "approach" + English "-ibility"

📚 Core Principles

Perceivable

Information must be presentable in ways users can perceive

Text alternatives for non-text content
Captions for multimedia
WCAG 2.1

Operable

Interface components must be operable by all users

Keyboard accessibility
Enough time to read content
User Control

Understandable

Information and operation must be understandable

Readable text content
Predictable navigation
Cognitive

Web accessibility benefits everyone, including people with visual, auditory, motor, and cognitive disabilities, as well as temporary impairments.

🔄 Practical Examples

Accessible Design

Proper heading structure for screen readers

Sufficient color contrast for low vision

Clear form labels for assistive tech

Inaccessible Design

Visual-only headings without HTML markup

Low-contrast text that's hard to read

Unlabeled form fields with placeholder text

🔊 WCAG Guidelines

Level A

Basic Requirements

Essential accessibility

Level AA

Standard Compliance

Recommended for most sites

Key Guidelines:

Common Mistakes

  • Missing alt text for images
  • Poor color contrast ratios
  • Non-descriptive link text

🎯 Implementation Techniques

Semantic HTML

Proper use of HTML elements

Heading hierarchy (h1-h6)
Landmark roles
Foundation

ARIA Attributes

Enhancing accessibility

aria-label for unlabeled elements
role definitions
Advanced

Keyboard Navigation

Ensuring full operability

Logical tab order
Visible focus indicators
Essential

Technical Notes

WCAG: Web Content Accessibility Guidelines
ARIA: Accessible Rich Internet Applications

⚠️ Common Misconceptions

Myth vs Reality:

Accessibility is only for blind users. (False)

Truth: Benefits all users including those with temporary or situational disabilities

Accessibility makes sites ugly. (False)

Truth: Accessible design is often better design for everyone

✍️ Practical Exercises

Code Review

1. Add proper alt text to an image
2. Implement keyboard navigation for a dropdown
3. Ensure sufficient color contrast

1. <img src="logo.png" alt="Company logo">

2. Use tabindex and ARIA attributes

3. Minimum 4.5:1 contrast ratio for normal text

Testing Practice

Test these scenarios:

• Navigate using only keyboard
• View with high contrast mode
• Use screen reader to read content

Error Identification

Identify and fix issues:

1. <div onclick="submitForm()">Submit</div>
2. <img src="chart.png">
3. <span class="heading">Section Title</span>

1. Use <button> for interactive elements

2. Add alt text describing the chart data

3. Use proper heading tag <h2>Section Title</h2>