Categories
Accessibility Design Websites

The 5 Minute Accessibility Audit

Being great at something takes a lot of dedication and practice. But, you can often be OK at something without too much difficulty.

This article is to help you with the latter part. Knowing just enough to be able to make an educated guess on the accessibility of a site or component/plugin.

Can you use the site with a keyboard?

When using a keyboard, you need to know where you’re at on the page. A focus indicator is a visible outline to show you what element you’re interacting with.

Solid focus ring moving around on Twitter's desktop view sidebar menu.
Focus indicator on Twitter’s Navigation

To test the keyboard interactions:

  1. Load a page
  2. Press the tab key.
  3. Can you see a focus indicator to let you know where you are on the page?
    • If yes, then keep on pressing tab!
    • If no, then it fails. 😥You can be pretty confident that the developers did not consider accessibility when building the site.

Note: Sometimes you use the arrow keys to interact with things as well, like on radio buttons or settings menus.

If you can see the focus when tabbing and then you can’t access something, try the arrow keys to see if the focus moves where you want to go.

Being able to use a keyboard for everything on the site is the biggest, quick indicator that the site has been built with accessibility in mind.

Skip to Content Links

When you navigate with a keyboard, you may see a “Skip to Content” link pop up. This is a good thing, and when you press it, it will move your focus to the main content of the page.

Pressing the "Skip to the content" link on this site to move focus to the top of the Accessibility 101 for Content Creators article.
Skip to Content links are great to avoid tabbing so much before reaching the content.

This is really helpful, as it allows you to skip all the navigation links usually found in the header of a site, and, as the name indicates, skip you to the content.

Zoom, Zoom!

Zooming in several levels to show the text getting better and the content reflowing to fit the space.
Zooming in on The A11Y Project keyboard navigation article.

When you zoom in on a page, the text should get larger and the site should reflow to fit the available space.

On a Mac, you can zoom with ⌘ Command and +. Press ⌘ Command and 0 to reset the zoom.

Most sites built with Responsive Web Design (RWD) in mind should allow for this. RWD is when a site is built to accommodate any screen size and still look good.

Evaluate the Color Contrast

If you see light gray text on a white background (or another difficult-to-read color combination), it’s likely that the people building the site did not consider (or, worse, actively dismissed) accessibility. If it’s hard to read for you, it probably doesn’t have enough color contrast.

Form Inputs Should be Labelled

56% of the 3.4 million form inputs identified were unlabeled.

Jared Smith, WebAIM Million – One Year Update

A label tells you what the field is for. Take these two sign-up forms from WordPress.com and Spotify.

WordPress.com new account form. Each input is labelled clearly: Your email address, Choose a username, Choose a password.
Each field/input is labelled clearly.
Sign-up form using light gray placeholder text for each input. There are no visible labels.
Spotify’s new account form does not have visible labels. A placeholder is not a label, since it disappears after you start typing.

The WordPress.com one is great. Each field is labelled clearly.

The Spotify one seems like it’s labelled. You can see the “Email,” “Confirm email,” etc, but those are actually placeholders. A placeholder isn’t a label for two reasons:

  1. It disappears after you start typing. You might not remember what you were supposed to put there.
  2. A placeholder is supposed to show you an example of what you should put in the field. So, for an email field, an appropriate placeholder would be “example@gmail.com,” not “Email.”
Spotify sign-up form with one of the fields focused with the text "What was this field for again?" There is no label on the input, so there's no way to know.
Do you remember what that field was for? If it had a label, you wouldn’t have needed to remember. 🙂

A label being visible doesn’t mean it’s fully accessible, but there’s a good chance it is. If you want to dive a little deeper, you can learn how to label an input in HTML.

For this quick accessibility audit, check if all fields have a visible label. If they are, awesome. 🙌

Note: One common exception to this is search fields.

A field does not need to have a visible label if the context makes it obvious that it’s a search (like having a big button called “search” next to it).

5 Minute Accessibility Audit Checklist

  • Can you navigate/use it with a keyboard? The focus indicator should always be visible. A Skip to Content link is a bonus.
  • Does the zoom work? Zooming in on the site should increase the size of the text, and the site should still work correctly.
  • Does the text have sufficient color contrast? Everything should be easy to read.
  • Do all form inputs have labels? Not placeholders, but labels. The label should be visible even after entering text. A search field is an exception.

Doing this audit has served me well when I need to quickly evaluate a site, theme or plugin for baseline accessibility. It’s not perfect, but it allows you to make an educated guess on if accessibility was considered or not.

By Jerry Jones

JavaScript Engineer for Automattic, living simply in rural MO.

One reply on “The 5 Minute Accessibility Audit”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s