Learning About Accessibility from Google’s Free Web Accessibility Course [Lesson 1]

In an effort to build a better foundation of web accessibility, I’ll be taking Google’s free Web Accessibility course, which is hosted on Udacity.com.

Course: Web Accessibility by Google

The course has 6 lessons in total.

  • Lesson 1 - Accessibility Overview
  • Lesson 2 - Focus
  • Lesson 3 - Semantics Basics
  • Lesson 4 - Navigating Content
  • Lesson 5 - ARIA
  • Lesson 6 - Style

It also has video, text, quizzes, and interactive components.

Below is a summary of what I’ve learned from Lesson 1 - Accessibility Overview.

Lesson 1 - Accessibility Overview

Multi-colored game pieces on a map
Diversity of Users

What is Accessibility?

Accessibility is the practice of making the web accessible for all types of users and assistive devices.

What does A11y mean?

The term A11y is a numeronym. A numeronym is a number-based word. If you look at the word “accessibility”, you can see that there are 11 letters in between the A and Y letters.

A C C E S S I B I L I T Y

This gives us the numeronym a11y. Pretty clever!

Also, from what I’ve seen in articles and on social media, these words can be used interchangeably.

Understanding the Diversity of Web Users

In this section, Victor Tsaran (a program manager at Google who happens to be blind) talks about the diversity of web users and potential constraints they may experience.

Here are some examples of poor accessibility:

  • Desktop-optimized only
  • Confusing design elements
  • Low contrast text to background ratio
  • Component placement (i.e. form fields and form labels being too far apart)
  • Poor keyboard navigation (i.e. lack of landmark HTML elements)

All of the examples above can be easily remedied if we code and design with accessibility in mind, and not just to be fancy.

For color contrast, WebAIM has a free Contrast Checker that can be used to verify if your color choices have an adequate contract ratio.

Different Types of Impairments

Here are some impairments to keep in mind as we build the web for diverse users.

  • Visual impairments (e.g. blindness, color vision impairment)
  • Motor or dexterity impairments (e.g. a broken arm or broken wrist)
  • Auditory impairments (e.g. deaf or partial hearing)
  • Cognitive impairments (e.g. ADHD and dyslexia)

Some devices that are used to assist with these impairments are eye-tracking software, screen readers, braille keyboards, adaptive switches, or voice dictation software.

Quizzes on the Diversity of Users

Lesson 1 has six quizzes on the diversity of users. Each quiz contains only two multiple-choice questions.

The questions relate to what has been taught and aren’t difficult but they do help solidify the information learned! They also helped me think outside the box of who I thought I was coding accessibility for.

Mostly it brought awareness to permanent, temporary, and situational constraints a user may be subject to.

How a Blind Person Uses a Screen Reader

After the quiz portion, Victor walked us through how he uses a screen reader.

He gave us a demonstration of how he accesses and experiences the web with a screen reader.

This was interesting as I’ve never seen someone use a screen reader before!

After his demonstration, we were given a short interactive challenge to use a screen reader to solve a challenge.

Challenge: Using screen reader software called ChromeVox Lite, we needed to navigate a sample web page to find a hidden word using only the screen reader buttons at the bottom of the viewport.

screen reader buttons
Screen Reader Buttons on ChromeVox Lite

To find the hidden word, we needed to navigate to a specified button and click on it, which revealed a dialog box that displays and voices the hidden word.

This interactive challenge instilled a greater sense of empathy for users who need to use a screen reader to navigate the web. Even though it was a simple web page to navigate, it made me think about what I’ve personally built and how challenging it might be to navigate it with a screen reader.

Web Content Accessibility Guidelines (WCAG)

After the immersive challenge, the Web Content Accessibility Guidelines (WCAG) were introduced.

WCAG is a set of guidelines and best practices that have been put together by accessibility experts as an answer for what accessibility means and how it should be implemented.

Fun Fact: Some countries mandate the implementation of these guidelines in their web accessibility legal requirements.

WCAG's Four Core (POUR) Principles

The WCAG has four core principles that make up the acronym POUR.

Perceivable - can users consume content via sight? Sound? Touch?

Operable - can users use UI components and navigate the content?

Understandable - can users understand the interface without being confused?

Robust - can the content be consumed by a variety of users? Does it work with assistive technology?

These guidelines give us a great, quick framework to think about when we build the web for accessibility.

The WebAIM Checklist

The WebAIM Checklist is meant to be a resource to help implement WCAG. It provides a short but high-level summary of what is recommended to implement.

If you browse their website, you’ll see that it’s laid out sort of like a dictionary of accessibility recommendations.

You’ll also find that it is also categorized by POUR sections, which can be helpful for memorizing recommendations as you continue to build new projects and refer to this checklist.

What I Think About Lesson 1 of the Web Accessibility Course

So far I’m enjoying the course and I’ve learned a few things I didn’t know before, like what it was like to use a screen-reader and the different constraints a person might face when navigating the web.

Overall, Lesson 1 has been a great introduction to a11y and I’m excited to learn more!

The Next Lesson

Up Next: Lesson 2 - Focus

Lesson 2 covers three main topics.

Focus on keyboard navigation - build things that can be navigated with a keyboard. Important for users with motor impairments.

Semantics - expressing interface in a robust way that works with a variety of assistive technology.

Styling and visual design- making sure the visual UI is as flexible and useable as possible.

When I’ve completed Lesson 2, I’ll do another write-up and add a link here when it’s published.

Thanks for reading!