A Beginner's Guide to Web Accessibility (WCAG)

Published on: by Dr. Talib

Web accessibility (often abbreviated as a11y) is the practice of designing and developing websites so that people with disabilities can use them. It's about making the web available to everyone, regardless of their physical or cognitive ability. The internationally recognized standard for this is the Web Content Accessibility Guidelines (WCAG). While the full guidelines are extensive, this guide will focus on a few high-impact changes you can make today.

1. Provide Alternative Text for Images

The Issue: People who are visually impaired use screen readers, software that reads the content of a webpage aloud. If an image doesn't have an `alt` attribute, the screen reader has nothing to announce, and the user misses out on that information.

The Fix: Always include a descriptive `alt` attribute on your `` tags. If an image is purely decorative and adds no real information, you should still include an alt attribute, but leave it empty (alt=""). This tells the screen reader to safely ignore it.

Accessible Image Example:

<!-- Good: Describes the image's content -->
<img src="/logo.png" alt="HTML Viewer Company Logo">

<!-- Good: The image is just for decoration, so we tell screen readers to skip it -->
<img src="/decorative-swoosh.svg" alt="">

2. Use Semantic HTML for Structure

The Issue: Using only `

` tags for your layout creates a "flat" document. A screen reader user can't easily tell where the main content begins, where the navigation is, or where the footer is located.

The Fix: Use semantic HTML5 elements to define the structure of your page. This creates "landmarks" that assistive technologies can use for navigation.

A Semantically Structured Page:

<header>
  <!-- Main site header and logo -->
</header>
<nav>
  <!-- Primary site navigation links -->
</nav>
<main>
  <!-- The main, unique content of the page goes here -->
  <article>
    <h1>Article Title</h1>
  </article>
</main>
<footer>
  <!-- Copyright info, contact links, etc. -->
</footer>

Using these tags allows a screen reader user to say "jump to main content" or "list all navigation links," making your site infinitely easier to use.

3. Ensure Sufficient Color Contrast

The Issue: Users with low vision or color blindness may have difficulty reading text if it doesn't have enough contrast with its background.

The Fix: According to WCAG AA standards, the contrast ratio between text and its background should be at least **4.5:1** for normal text and **3:1** for large text.

What to do:

  • Avoid light grey text on a white background.
  • Use an online color contrast checker tool to test your color combinations.
  • When in doubt, make your text darker or your background lighter.

Try it Yourself: Use the HTML Viewer and a browser extension for checking color contrast. Test different text and background colors to see which combinations pass and fail the accessibility test.

4. Always Use Labels for Form Inputs

The Issue: Just like images need alt text, form inputs need labels. Without a `<label>` programmatically linked to an `<input>`, a screen reader cannot tell the user what information the field is asking for.

The Fix: Always use the `for` attribute on a label and match it to the `id` of the corresponding input.

<label for="email_address">Email Address:</label>
<input type="email" id="email_address" name="email">

Accessibility is Not an Extra Feature

Building accessible websites is a core responsibility of every web developer. It's not just about compliance; it's about empathy and ensuring that the information and services we build are open to everyone. By incorporating these simple practices into your workflow, you can make a massive difference in the usability of your websites for people with disabilities.