Work With Us
Contact us

Chapter-12

Accessibility and You

Just When You Think You’re Done , A Cat Floats By With Buttered Toast Strapped To Its Back

Summary

Chapter 12 makes the case that accessibility isn’t a separate specialty – it’s an integral part of good design that benefits everyone. Making sites accessible to people with disabilities also makes them better for all users.The chapter emphasizes that accessibility is the right thing to do morally, often legally required, and makes good business sense.

Most accessibility improvements are straightforward if built in from the start. Key focus areas include providing text alternatives for images, ensuring keyboard navigation works, using sufficient color contrast, and testing with screen readers and other assistive technologies.

key Points

Why Accessibility Matters

  • Accessibility is not a special case – it’s fundamental to good design
  • About 15-20% of the population has some form of disability
  • Disabilities can be permanent, temporary, or situational
    “Broken arm, bright sunlight, noisy environment all create accessibility needs”
  • Accessible design benefits everyone, not just users with disabilities
  • It’s often legally required (ADA, Section 508, etc.)

The Four Main Principles (POUR)

  • Web Content Accessibility Guidelines (WCAG) are built on four principles
  • Perceivable: Information must be presentable in ways users can perceive
    “Text alternatives, captions, sufficient contrast”
  • Operable: Interface components must be operable by all users
    “Keyboard accessible, enough time to read, no seizure-inducing flashes”
  • Understandable: Information and operation must be understandable
    “Readable text, predictable behavior, input assistance”
  • Robust: Content must work with current and future technologies
    “Compatible with assistive technologies and different browsers”

What You Can Do: Practical Steps

  • Most accessibility improvements are straightforward if done from the start
  • Add appropriate alt text to images
    “Describe what’s important about the image in context”
  • Use headings correctly to create document structure
    “H1 for main heading, H2 for sections, don’t skip levels”
  • Make all functionality available via keyboard
    “Test by using Tab, Enter, and arrow keys only”
  • Ensure sufficient color contrast
    “At least 4.5:1 ratio for normal text, 3:1 for large text”
  • Don’t rely on color alone to convey information
  • Create descriptive link text
    “Avoid “click here” – use meaningful descriptions”

Alt Text Best Practices

  • Describe the content and function of images
  • Keep it concise but informative
  • Consider the context – what does the user need to know?
    “Product photo: describe the product features”
  • Decorative images should have empty alt text (alt=””)
  • Complex images may need longer descriptions

Keyboard Navigation

  • Many users navigate entirely by keyboard – your site must support this
  • All interactive elements must be reachable via Tab key
  • Focus indicators should be clearly visible
    “Don’t remove the outline without providing an alternative”
  • Tab order should be logical and follow visual flow
  • Dropdown menus and modals must be keyboard accessible
  • Provide keyboard shortcuts for complex interactions

Screen Readers

  • Screen readers convert text and UI elements to speech or braille
  • Use semantic HTML so screen readers understand structure
    “Use proper elements: button, nav, main, article, not just divs”
  • ARIA labels help when semantic HTML isn’t enough
    “But don’t overuse – semantic HTML is usually better”
  • Test with actual screen readers (NVDA, JAWS, VoiceOver)

Forms and Labels

  • Every form input needs a properly associated label
    “Use the label element, not just placeholder text”
  • Group related form fields with fieldset and legend
  • Provide clear error messages and validation feedback
  • Mark required fields clearly (not just with color)
  • Give users enough time to complete forms

Color and Contrast

  • Color blindness affects about 8% of men and 0.5% of women
  • Ensure sufficient contrast between text and background
  • Use tools to check contrast ratios (WebAIM, browser DevTools)
  • Don’t use color as the only way to convey information
    “Add icons, patterns, or text labels in addition to color”
  • Test your design in grayscale to check if it still works

Common Accessibility Mistakes

  • Missing or poor alt text on images
  • Low contrast between text and background
  • Removing focus indicators without replacement
  • Using placeholders instead of labels
  • Creating keyboard traps (user can’t escape with keyboard)
  • Relying only on mouse/touch interactions
  • Auto-playing audio or video
  • Time limits that are too short or can’t be extended

Testing for Accessibility

  • Use automated tools as a starting point (WAVE, axe, Lighthouse)
    “They catch about 30-40% of issues – not everything”
  • Test keyboard navigation throughout the site
  • Use a screen reader to navigate your site
  • Check color contrast with online tools
  • Test with real users who have disabilities when possible
  • Review your site with accessibility checklists (WCAG, Section 508)

Key Takeaways

  • Accessibility is fundamental to good design, not a separate concern
  • Accessible sites benefit everyone, not just users with disabilities
  • Most accessibility improvements are straightforward if built in from the start
  • Follow POUR principles: Perceivable, Operable, Understandable, Robust
  • Essential basics: alt text, keyboard navigation, color contrast, semantic HTML
  • Test with automated tools, keyboard, and screen readers
  • It’s the right thing to do morally, legally, and for business
    “”Accessibility is not a feature – it’s a fundamental part of building for the web””
Previous
Next