Web Accessibility for Newbies

Introductory information and advice on how to think about and approach web accessibility

Karina Chow
Level Up Coding

--

Web Accessibility for Newbies picture
Don’t like reading and would rather watch a presentation? Watch the video adaptation of this article.

In the current world of ubiquitous computing and an industry-wide desire to improve company and product diversity and inclusion, there’s no longer an excuse to not invest in web accessibility. That being said, getting started in web accessibility can be a daunting task. It’s hard to know where to start and what you can do right now to improve your product!

When I was starting, I was very confused and felt like I was constantly Google-ing definitions. Luckily for me, I had a colleague who was very knowledgable and relentlessly answered many of my questions. Now, if you’d allow me to be, I’d like to be your colleague and give you a comprehensive introduction to web accessibility.

If you work in product and would like to champion web accessibility but don’t know where to start, this is the guide for you!

What is web accessibility?

Being accessible means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. We say that it should be P.O.U.R.: Perceivable, Operable, Understandable, and Robust. We’ll get back to what all that means more deeply in a moment!

What is a11y?

There’s eleven letters between the a and the y in the word accessibility, so people started abbreviating it as a11y. It has an added benefit of looking like the word ally, so people sometimes use it as such. Most of the time, I hear people say it aloud as “a-eleven-y”, but at that point you might as well say “accessibility”!

Illustration depicting how there are 11 characters between the a and the y in the word “accessibility”
Source: The A11Y Project

Who defines what is accessible and what isn’t?

The Web Content Accessibility Guidelines (WCAG) is your north star when it comes to measuring how accessible your web products are. The guidelines are created by the World Wide Web Consortium (W3C), the same group that defines all our web standards for interactivity, internationalization, security, mobile computing, and much more. These are the international standards that all our web browsers follow.

If you receive an ADA lawsuit, it will often cite your website not being WCAG compliant as objective evidence of its lack of accessibility.

How do we measure accessibility?

Just like how HIPAA compliance is an ever-changing standard as the healthcare industry and the internet expands, WCAG compliance, too, is always evolving and isn’t confined to a small set-and-forget list of TODOs. A team can’t “solve” accessibility at a company; rather, they must make a commitment to continually address it.

A team can’t “solve” accessibility at a company; rather, they must make a commitment to continually address it.

The newest WCAG standard (as of this writing in 2021) is WCAG 2.1. WCAG is measured with three levels of conformance, from A (lowest), AA, to AAA (highest). To measure your website accessibility, you would measure how compliant it is with any of these WCAG levels.

“WCAG 2.1 AA compliance” means “We need to adhere to the WCAG 2.1 standard, with a double-A compliance”
This is how you would say the compliance level you wish to achieve in a sentence.

For example, for time-based media, here are some examples of the differences between compliance levels:

  • A — “Minimal Compliance” — Captions for pre-recorded video/audio, alternatives provided for pre-recorded video/audio (e.g. transcriptions)
  • AA — “Acceptable Compliance” — Everything in A and captions for live video/audio, additional narrations provided during pre-recorded video
  • AAA — “Optimal Compliance” — Everything in AA and sign language interpretation for video, more detailed narrations provided during and in pauses for pre-recorded video, live transcriptions

When making accessibility goals, it could be wise to define the compliance level you would like to meet so everyone working on the project can work toward the same goal.

If you don’t know which level of compliance to go with, WCAG 2.1 AA compliance is considered acceptable and will cover that vast majority of use cases.

How might people try to interact with my website?

When designing your web product, you probably are always envisioning a person with a keyboard and a mouse. However, different types of disabilities prohibit people from interacting your product in this traditional fashion.

What are the different types of disabilities?

The most commonly thought of disabilities are visual disabilities, but there are many other categories, all of which you should consider when making your product accessible:

  • Visual — Blindness, color blindness, low vision, glaucoma
  • Hearing — Deafness, hard-of-hearing
  • Motor — Limited fine-motor control
  • Cognitive — Difficult focusing, learning disabilities
  • Seizures

With what tools can people access the internet?

Different types of disabilities dictate how you can access and interact with websites. Here’s a list of a few popular ways:

  • Keyboard
    Some folks do not use a mouse and only use the keyboard. This is common amongst people with motor impairments who cannot operate the fine movements a mouse requires.
  • Screen Readers
    Assistive technology that reads what’s on the screen, most commonly used by those with blindness or low vision. Usually operated using only a keyboard.
  • Browser Zoom (ideally support up to 200%)
    People with low vision may use the zoom feature in their browsers to better read text and see imagery.
  • Custom styling
    People with low vision or colorblindness might have their own custom style sheets to adjust styles like font size and color
  • Refreshable braille displays
  • Magnification software
  • Other

How should I consider these while testing my web product?

While you’re evaluating your website for accessibility, there’s a few initial questions you can ask yourself:

  • Can I use the keyboard to do everything a mouse can do?
    This affects both keyboard-only users as well as screenreader users. Users should be able to access every link, open and operate modals, open and close dropdown menus, everything!
  • Is the screen reader giving me all relevant info?
    There’s a lot of information you take for granted if you are able to visually see your product. Screen reader users should be able to operate your website and understand what a picture is depicting, whether a modal is opened or closed, whether a toggle is on or off — all complex states, roles, or non-visual information should be understandable and discoverable.
  • What happens when we set the browser zoom to 200%?
    You’d be surprised how many websites break upon increasing the browser zoom! Users should be able to find everything they need and still navigate your site with 200% browser zoom.
  • Can people read my text?
    There’s a lot of factors that go into reading text, from a font’s weight to text color. As far as low hanging fruit go, WebAIM has a great color contrast checker that makes checking foreground and background checks very easy. Fun exercise: can you use that tool to find out whether this article’s cover photo is readable?

How do I learn how to use a screen reader?

Many people see “accessibility” and immediately equate that to “screen reader usage”. The fact of the matter is, you don’t actually need to learn how to use a screen reader to make your product accessible. The WCAG guidelines are detailed enough that you can simply follow them and use keyboard navigation to test most things. And, as we’ve learned above, there are many ways a user can use your website beyond using a screen reader.

That being said, I personally find it helpful to learn how to use a screen reader because it can help develop empathy in you for what your users that use them go through, and it can help identify poor product flows. The guidelines can teach you how to mark up your HTML correctly and give good advice as to how to design with accessibility in mind, but nothing truly illustrates how confusing your product can be than hearing your content read aloud in a nonsensical order. For that purpose, I like recommended that people at least try learning the basics.

There’s a lot of neat tools online to teach you basic screen reader proficiency. I’d recommend this Codecademy guide on booting up a screen reader for the first time. Depending on which screenreader you use, there’s also guides for each individually. Mac OSX’s VoiceOver has a lot of documentation, and there’s also this nice glossary of commands that’s helpful. JAWS is a very popular one for Windows and also has a nice command cheatsheet.

Once you get a bit of a handle, you can practice your stuff on this fun Screenreader Practice Glitch.

Websites should be P.O.U.R.

Let’s circle all the way back to our initial statement. According to the WCAG, there are 4 Principles of Accessibility that every product should adhere to:

  1. Perceivable — information needs to be available to at least one sense (sight, hearing, touch)
  2. Operable — a user must be able to perform all interface actions (i.e., with a keyboard)
  3. Understandable — a user should understand the language on a page and how to operate it
  4. Robust — different user agents, including assistive technologies, content should be able to access all content

The top goal for accessibility advocates is to achieve all four of these for all the types of disabilities and types of input devices. As mentioned earlier, there are many types of disabilities and more input devices are being invented all the time, so it’s a lifelong mission rather than a singular goal.

I hope you feel a little less daunted by the world of web accessibility. I’d like to thank Jenna Lee, who was that colleague that taught me pretty much everything I know.

Stay tuned for future articles about how to incorporate accessibility work into your product lifecycles as well as more actionable instruction on what to do in your codebases. I wish you the best of luck and thank you for your interest in being an accessibility advocate!

Additional Resources

Want to learn even more? Here’s some great resources:

Did I miss anything you want to know as an accessibility newbie? Let me know in the comments!

--

--

🇨🇳 🇩🇪 Creative technologist based in Brooklyn and SF. Writes about technology × design × art × psychology. Previous eng @Patreon, @Honor, @Microsoft