Web Accessibility 101

Is your web site accessible to people with disabilities or who use assistive technologies? You need to check out the first video in our web accessibility series and find out. While this series is especially designed for small and medium businesses and non-profits, the rules apply to anyone with a web site or app. Stay tuned for more videos coming soon!

Have questions or need help with your site? Give us a shout and we'll be happy to help

Hey everyone, this is Matt with Fifty Eight. Today I’m going to talk a little bit about web accessibility – what it is and why it’s important to you. This can be a pretty major topic in larger organizations, but I find that many small-to-mid-size organizations aren’t all that familiar with web accessibility. So I’ll get you up to speed, and will be putting out a few additional videos to help you understand how to get your web site and apps compliant.

What is Web Accessibility?

If you’re a business owner, you’re probably familiar with the Americans with Disabilities Act, or ADA. The ADA puts in place sets of rules and guidelines to make sure that our businesses are accessible to everyone. So for a physical business location, that means things like wheelchair ramps, accessible restrooms, and so on.

Web accessibility extends those rules to the online world. In other words, it provides guidelines to help ensure that our online assets – web sites, apps, and so on – are accessible to everyone. Think about how a visually impaired person would use your web page. Or what about someone who has limited motor skills? How would they navigate your site or app and understand what’s on it?

Rules & Compliance

There are a few laws and guidelines that relate online accessibility. The one you’ll probably hear most is Section 508. “Section 508” refers to Section 508 of the Rehabilitation Act of 1973. This is the law that governs accessibility.

Now, you’re probably thinking, “how can a law from 1973 govern web accessibility? The web didn’t even exist in 1973!” That’s true, but like many laws the Rehabilitation Act has been revised over the years.

In fact, the latest revision to Section 508 was in 2017, when it adopted the 17 WCAG 2.0 success criteria. “WCAG” is the Web Content Accessibility Guidelines – they stipulate how your website or app should behave in order to meet Section 508 requirements.

Think of it this way: Section 508 is the WHAT; WCAG is the HOW. Section 508 specifies the rules of online accessibility, and WCAG, or Web Content Accessibility Guidelines, tells us how to achieve them.

That’s kind of a lot, isn’t it? With so many laws, guidelines, and rules, it can be hard to figure out what this actually means to YOU.

Again, this is just an intro, so I’m not going to go into how you actually do these things – we’ll get to that in upcoming videos. But let’s boil this down a little bit so it’s a little clearer.

Accessibility in Action

Let’s take a look at an actual web page. I created this page for the purpose of giving you a quick look at how this works. We’ll review more in-depth in future videos, but this will give you an idea of what I’m talking about.

So now I’m going to switch over to my web browser so we can see what this looks like in real life. I’m using Chrome with the ChromeVox extension. ChromeVox is a pretty good voiceover tool for Chrome and a really great way to see how web sites behave.

This is a quick web page that I built to illustrate how common web page features work. This is a super-simple example, but should give you an idea of how web pages appear to folks who are using assistive technologies.

Naturally, the first thing we get when we begin the page is the heading. Notice that the browser tells me that it’s “heading 1.” It’s a good practice to only have one heading 1 on your page. It’s also best to use headings in order, so heading 2, heading 3, and so on.

Note that I’m not using my mouse – I’m using the keyboard to navigate through the page. This is why it’s important to think about how your web page is laid out so that it makes sense to someone who has to navigate using keys instead of a mouse.

Also, remember that visually impaired people have difficulty seeing the contents of the page, so they are relying on the voice to help guide them as they use the keys to navigate.

Now we get to our image of the volcano. Your images should always include a text description. You can do this by entering a value for the alt attribute – often called the alt tag – when you add an image to your web site. If you’re using WordPress or something similar, you’ll see an option to add an “alt” when you upload the image.

In the case of our image here, our description is “a volcano in Bali erupting at night.”

Now we jump to our next Heading 2. A good way to think of headings is as though they are a bulleted list. You can have one heading 1, some heading 2s under that, heading 3s under heading 2s, and so on.

Contrast is another important topic. Make sure that your text is large enough – 16 pixels is a good starting point for body text – and that it stands out against the background. People with certain visual impairments or color blindness may have difficulty reading text if it doesn’t stand out from the background enough.

And now we get to a link. The browser reads the link to me, and tells me that it’s a link that I’ve already visited. Notice that it stops at the link. That’s because the visitors can take action, and we want to make sure that they have time to do so. Also, visitors can jump directly to links of they so choose.

We’re going to click on this link about tectonic plates.

Notice the sounds that indicate that I’ve gone to a new page.

This “jump to navigation” link is something that you may not have seen before, because it doesn’t normally appear on Wikipedia pages. You’ll notice that there are quite a few navigation links at the top of the page, but we skipped over them when the page loaded.

Can you imagine having to listen to all of the navigation links every time you looked at a Wikipedia page? I don’t know about you, but that doesn’t seem like something I would want to do.

Of course, we want people to be able to access it if they so choose, so Wikipedia provides this “Jump to Navigation” link should the visitor want to access the menus. This is called a “skip link” because it lets the visitor skip between the main content and the navigation.

Let’s go back to our page and see what else is going on. You probably have a good idea of how text works by now, so we’ll skip on down to this next heading, which is a heading 3.

Our last heading here is a heading 3, followed by some text with a link.

I’d like to bring up one final point about links, and that is naming. Oftentimes, we see links that read, “click here” or “more.” But without the right context those names may not be very meaningful.

Imagine that you’re browsing a page blindfolded and you hear a link called “more.” More what? Without the ability to see the page, you might not know! A more meaningful name might be “view more products.”

This is just a quick overview of some of the challenges and considerations

Legal Implications

It makes smart business sense to make all our products available to as many people as possible; after all, a larger audience means more customers. And of course, it’s just the right thing to do; we don’t want to exclude folks from being able to access our websites or apps. But there are also potential legal implications of failing to meet the Section 508 standards.

Many people think that Section 508 applies only to government agencies, but there have been a number of lawsuits filed against private companies for failing to meet accessibility standards.

So as you can see, web accessibility is important for many reasons. It’s a smart business move because it makes your products and services available to a larger audience, and ensures that we’re not excluding people from being able to do the things they want to do. And of course, having accessible online products can help you avoid legal hot water.

And while the terms and concepts can be a little bit overwhelming, it’s not really all the difficult to achieve. In the next video we’ll dive in and take a more in-depth look at an actual web page and how to identify and fix common accessibility problems.

So to wrap it up, web accessibility is simply how we make our web sites and apps usable for folks with disabilities. If you’d like to learn more, I’ve posted a couple of links below.

And if you have questions or need help, feel free to reach out any time. At Fifty Eight, we’re user experience experts and have tons of experience designing and building accessible websites for the State of Texas, Citigroup, Verizon, and more. We can take a look at your web site or app, and help you ensure that you are complaint.

That’s it for today, folks. I hope this has been helpful and look forward to seeing you next time!

References & Tools


WebAIM WCAG 2 Checklist: https://webaim.org/standards/wcag/che...

WCAG 2 Quick Reference: https://www.w3.org/WAI/WCAG21/quickref/

About Matt Rife

Matt has worked on both sides of the tech/design divide. He started his career in IT and worked as a sysadmin and business analyst for more than 10 years before discovering the wonderful world of design. Now he mostly does UX design while dabbling in code and operating systems in his spare time.