Kenneth Au
Webdev Beginners

Web Accessibility Is Not Optional

Web accessibility (a11y) is the practice of making websites usable by everyone, including people with visual, auditory, motor, or cognitive disabilities. It’s not a nice-to-have — it’s a fundamental aspect of good engineering.

The Business Case

  • 15-20% of the world’s population has some form of disability. That’s not a niche audience.
  • Accessible websites are better for SEO. Search engines can’t see images either — they rely on the same text alternatives that screen readers use.
  • In many jurisdictions, inaccessible websites are illegal. The ADA, Section 508, and the European Accessibility Act all impose requirements.
  • Accessibility improvements benefit everyone. Captions help users in noisy environments. Keyboard navigation helps power users. Clear contrast helps people in bright sunlight.

The Easy Wins

You don’t need to be an accessibility expert to make a meaningful difference. These changes take minutes and cover a huge portion of common issues:

  1. Add alt text to images. Every <img> should have an alt attribute that describes the image content. Decorative images get alt="".
  2. Use semantic HTML. <button> instead of <div onclick>. <nav> for navigation. <main> for the main content. Screen readers understand these elements.
  3. Ensure sufficient color contrast. Text against its background needs at least a 4.5:1 contrast ratio. Use a contrast checker.
  4. Make everything keyboard accessible. Can you navigate your entire site with just Tab and Enter? If not, some users literally cannot use it.
  5. Label your form inputs. Every <input> should have an associated <label>.

Understanding Screen Readers

Screen readers linearize the page — they read it top to bottom, element by element. They use heading levels (<h1> through <h6>) to let users navigate by section. They announce link text, button labels, and form field names.

This is why semantic HTML matters so much. A <div> with a click handler is invisible to a screen reader. A <button> is announced as a button, is focusable, and responds to keyboard events automatically.

The WCAG Guidelines

The Web Content Accessibility Guidelines (WCAG) are the standard reference. They’re organized around four principles:

  • Perceivable: Content can be perceived by at least one sense
  • Operable: UI components and navigation are operable
  • Understandable: Content and UI are understandable
  • Robust: Content works across current and future technologies

WCAG defines three conformance levels: A (minimum), AA (standard target), AAA (enhanced). Most organizations aim for AA compliance.

Testing Your Site

  • Lighthouse (built into Chrome DevTools): Quick automated audit
  • axe DevTools: Browser extension that catches common issues
  • Keyboard testing: Navigate your site without a mouse
  • Screen reader testing: Use VoiceOver (Mac), NVDA (Windows), or Orca (Linux) to actually experience your site as a screen reader user would
  • Color contrast checkers: Verify all text meets minimum ratios

Automated tools catch about 30% of accessibility issues. Manual testing is essential for the rest.

A Cultural Shift

Accessibility isn’t something you bolt on at the end. It’s something you build in from the start. The easiest way to make your site accessible is to think about it while you write the HTML, not after the design is finalized and the code is shipped. Treat it like performance or security — a core quality attribute, not an afterthought.

Webdev Beginners