Back to Overview

Web Accessibility

web accessibility inclusive-design advanced

What is Web Accessibility?

Web accessibility means making websites that everyone can use, no matter how they access the internet. This includes people who:


  • Can’t see and use screen readers
  • Can’t use a mouse and navigate with a keyboard
  • Have trouble reading or understanding content
  • Have difficulty hearing audio content

Simple Analogy

Think of web accessibility like making a building accessible to everyone:


  • Ramps and Elevators: Like having alternative ways to navigate a website (keyboard navigation, screen readers)

  • Clear Signs: Like having clear headings and labels on a website

  • Wide Doorways: Like having text that can be made bigger or content that works on different screen sizes

  • Braille Signs: Like having text descriptions for images

Key Concepts


  • WCAG Guidelines: Standards for making websites accessible

  • Screen Readers: Software that reads website content aloud

  • Keyboard Navigation: Using only a keyboard to use a website

  • Alt Text: Text descriptions for images

  • ARIA: Special attributes that help screen readers understand website content

Example

<!-- Bad: Image without description -->
<img src="dog.jpg">

<!-- Good: Image with description -->
<img src="dog.jpg" alt="A brown dog playing with a red ball in a park">

<!-- Bad: Button without clear purpose -->
<button>Click here</button>

<!-- Good: Button with clear purpose -->
<button aria-label="Submit form">Submit</button>