Skip to main content

Udacity course on accessibility

Published on February 27, 2019 in Education category

Screenshot from the Udacity course showing Alice Boxhall and Rob Dodson

I’ve mentioned Udacity course in my introduction article about accessibility as one of the first steps I took to better understand the accessibility landscape, tools and problems.

It’s a free 6-lesson course led by Alice Boxhall and Rob Dodson, software engineers from Google about the most common accessibility lessons including focus, semantics, navigation, ARIA and styling. It really serves as an overview of some accessibility areas with additional resources for you to dive in deeper.

Overview

The introductory lesson is all about an overview, what is accessibility, what is WCAG, what disabilities exist and intro to some tools you’ll be working with, most notably screen readers.

The most interesting thing was thinking about the situational accessibility such as staring at the screen in the sun, driving in a bumpy bus or watching a video in a loud environment. All situations where thinking about accessibility can help, and definitely not something that comes to mind first when discussing accessibility.

For people without disabilities, technology makes things easier. For people with disabilities, technology makes things possible.” ~IBM Training Manual 1991

Focus

The second lesson is one of the pillars of accessibility and it’s all about focus. Essentially - making the product keyboard-accessible makes it easier for screen-reader users, advanced users (who are faster with a keyboard than with a mouse) and overall is one the first thing you could do to make your product more accessible.

There is also mention of so-called skip links which are quite ubiquitous, at least as far as on the more popular sites. It’s one of the simplest things you can do to make your content more accessible. Skip link is essentially a hidden button which is shown in upper left corner only when the user presses the Tab key. It enables you to quickly skip to the main content of the page, instead of “tabbing” (going through) all the menus first.

Semantics

Taking care of your HTML semantics ensures that users can quickly navigate around the page and get proper announcements from eg. screen reader about the element type, name, value, and state. Essentially it boils down to how the DOM tree will be converted to accessibility tree.

Form and image labels (alt attribute) are one of the most common things that should be taken care of in terms of semantics.

A common misunderstanding is that screen reader users read every page from top to bottom, which, although can happen, is not that common. HTML5 elements like main, header, nav, footer etc. enable users to quickly jump to the specific area of the page in an instant, without the need to go through all the elements one by one.

Users can also navigate via links, form elements, headings, etc.

WAI-ARIA

ARIA is simply HTML attributes added to specific elements (div, button, a etc.). ARIA essentially modifies the way HTML element from the DOM is converted to the accessibility tree. It does not modify element appearance or its behavior, adds focusability or keyboard event handling - all it does is says that we promise that if we marked something like a checkbox, it will behave like a checkbox.

Although course mentions ARIA labels, roles, relationships, live regions, there is of course so much more to learn about ARIA. There is also one saying that goes

No ARIA is better than bad ARIA. ~WAI-ARIA best practices

as some developers will overuse ARIA elements leading to inconsistent and simply put confusing user experience.

Styling

The last lesson touches upon visual styling including contrast, focus rings, and responsive design.

The most common anti-pattern that A LOT of designers/developers do is remove the focus ring because it doesn’t look as clean - leading to an experience where it’s impossible to know which element is currently focused if “tabbing” through them.

Contrast is also one large topic as the current tendency is to use light-grey text on grey background leading to very low contrast ratios visible only to ones with 20/20 vision.

Conclusion

Udacity course is well-rounded as an introduction to accessibility with a lot of resources to continue exploring after you finish the course. It features coding exercises as well so you can apply the knowledge throughout the course.

I highly recommend it to any developer, designer, product manager and pretty much anyone who creates digital products to get a head-start into accessibility.

p.s. feel free to download the notes I took during the course for easier learning (generated via awesome Dynalist)

Sven Kapuđija profile image
Sven Kapuđija
Author