Using audits to drive change, Mechanics Bank launched with a new CMS and an improved design that follows web best practices. Find out how. 

Accessibility: the Right Thing to Do — Part 1: First Steps

Our world is surrounded by tools designed to promote accessibility. Every time you see a ramp, an automatic door button, a walk-in shower, an elevator, or a sign written in braille, you’re seeing accessibility in action. So why can't your website be made accessible too?

6/28/2021

Authored by

Categorized

  • Accessibility

Our world is surrounded by tools designed to promote accessibility. Every time you see a ramp, an automatic door button, a walk-in shower, an elevator, or a sign written in braille, you’re seeing accessibility in action. And while accessibility needs can be temporary — such as for someone with a broken leg — or tied to a permanent disability, we have built our cities, buildings, and lives around making sure everyone can reach the things they need to reach.

So why can't your website be made accessible too?

The web accessibility landscape.

Web accessibility is the practice of making your website usable by as many people as possible. And when we talk about accessibility, we’re not just focusing on those with disabilities — providing a more accessible site makes it easier to use for everyone. This means both those with permanent conditions, such as a degenerative disease, and also those with temporary disabilities, such as someone with a broken arm or poor vision.

With this in mind, it’s no surprise that there’s a market around measuring and improving accessibility. Because websites are built through a standardized language, it’s easy to make some wide and general assumptions about site accessibility (and its ability to be understood by assistive devices like screen readers or magnification tools) through automated services.

For instance, there’s been a recent spate of tools and subscription services that have popped up to offer a quick fix for accessibility. Many of these work as Javascript components that are quickly installed on a site, providing an interface for adjusting font sizes, contrast, and other items.

While simply subscribing to a tool sounds like an attractive way to provide a quick fix, it’s important to understand that these won’t magically make your site compliant with accessibility standards such as WCAG, often provide dubious benefit to users, and won’t protect from the legal risk if your site is out of compliance. Simply put, there are grey areas that an automated service simply will not catch.

Doing the work: accessibility audits.

What this means is combining the structure within an automated tool with actual in-person review of common accessibility fixes. At Blend, we call this an accessibility audit — a process that makes recommendations and requirements according to the requirements of the Section 508 Amendment to the Rehabilitation Act of 1973, which correspond with WCAG (Web Content Accessibility Guidelines) 2.1 Conformance to a level of AA.

This balance of manual and automated is important. An automated test will uncover common structural issues, and they are invaluable as a starting point for an audit. However, understanding accessibility requires an understanding of context and human syntax — things a browser script or automated test will never fully understand.

For example, WCAG 2.0 AA guidelines recommend that every image on a site includes alternative text, designated by an <alt=””> tag. This tag essentially describes the image for anyone using a screen reader or other assistive device. An automated tool might call out any and all empty or missing <alt=””> tags, and this is where things get complicated: not every image requires an alt tag. A hero image that is meant to be completely decorative? Alternative text in this case would be more distracting to the user. A picture of a person on a bio page? Since the name is close by, assigning a name to the image would create duplicate content.

In both of these cases, simply filling in the alternative text is actually worse for accessibility. Like we said: there are a lot of grey areas.

First steps on site accessibility.

You may be wondering, how do we help and give guidance on making a site more accessible? Here are just a few tools/plugins that we use to help us show areas that can be improved. 

  • WAVE (Web Accessibility Evaluation Tool) - this tool uses icons and indicators to point out issues that can range from too small of text, low contrast all the way to missing alternative text.
  • VoiceOver - a screen reader tool used for Apple devices. This screen reader can read us headings, links and captions without being able to look at the screen.
  • JAWS (Job Access With Speech) or NVDA - similar to VoiceOver but for Windows
  • Screaming Frog - this tool is used to audit and scan a site that can report missing title pages, H1 & H2, and missing alt text.

Now that we got you thinking about your site and how accessible it is, we have a couple of action items that you can take today that will help your site become more accessible.

  • Ensure your images have alternative text. Why? Providing alternative text conveys necessary information at a level that someone who can see the image might get. Try to remember that you are creating an experience that mirrors the visual experience.
  • Check skipped heading levels. Headings provide document structure and facilitate keyboard navigation. These users may be confused or experience difficulty navigating when heading levels are skipped. Have you ever read a book without knowing the name of the book?
  • Ensure your site is accessible by keyboard. The website should be usable without using a mouse. You can easily test this by starting at the top and trying to tab and arrow through your site. 

We take accessibility pretty seriously around here, and there’s more to it than editorial fixes and using tools and plugins but most importantly making changes that are good for your site and users in the long run. Stay tuned for Part 2 about how we are going to address accessibility issues that are broken down to fixing your technology, your content, and your process.

Accessibility Quick Reference for Editors (pdf)

A set of hints and reminder for making the web a better place for humans.

.pdf, 0 B

Resources on accessibility.

We’ve written at length, both here and beyond, on accessibility.

Episode 19: Implement the Design (w/ Ethan Marcotte) Off-site link

Corey and Deane talk about how front-end development has evolved past the early days. Then, Ethan Marcotte, author of Responsive Web Design and Partner at Autogram, joins to discuss front-end development and how the world has impacted how front-end design is treated and approached. We also joke about whether Deane actually “invented” responsive web design. (He didn’t.)

May 16, 2023 | The Web Project Guide Podcast

How Audits Improve Your Site: Accessibility, Performance, and Design Audits

Corey Vilhauer

Much like we maintain our homes from season to season, our websites need periodic audits — to see what has changed and what has not. In this post, we focus on three specific types of audits: accessibility audits, performance audits, and design audits.

April 18, 2023

Episode 12: Write for People and Machines (w/Sarah Winters) Off-site link

Corey and Deane talk briefly about how hard it is to run a conference. Then, Sarah Winters, founder of Content Design London and author of Content Design, joins to discuss the difference between content design and content strategy, writing and designing for accessibility, and the work it takes to turn a big ship toward lasting content change.

October 13, 2022 | The Web Project Guide Podcast

Check out more articles on accessibility.