Let’s Try Harder With Web Accessibility

Chris Pearce
Feb 24, 2016 · 7 min read
Image for post
Image for post

The Web truly is an empowering platform that enhances and broadens the lives of people with disabilities. It breaks down barriers that exist in the physical world allowing people with disabilities to achieve what they might not have been able to without the Web—complete independence and for many a lifeline.

Someone who is legally blind or someone with a temporary disability—that someone could be you—unable to easily get to the local grocery store, could jump online, purchase their groceries, and have them delivered to their door. This is just one example of how an accessible Web can make a person’s life easier.

To get a better understanding how people with disabilities use the Web you can read some of the stories featured by the W3C’s Web Accessibility Initiative (WAI) or check out these videos.

The benefits of Web accessibility don’t just apply to persons with disabilities, it affects us all—a more accessible Web is a more usable and searchable Web. If your business is online then you’re opening up your product/service to the widest possible audience—everyone wants that, not just business owners.

You might use the keyboard at times when interacting with certain User Interface (UI) patterns. For example, when conducting a Google search you’re most likely navigating through the drop down menu of search results via the up and down arrow keys. And you’re most likely hitting the ESC key to close dialog windows.

You might even get a little—or a lot—frustrated when you encounter UI patterns that don’t support the interactions you expect, in most cases you can reach for the mouse and complete whatever that interaction is—back-up plans like that just aren’t possible for many users of the Web.

The Law

In some countries, like here in Australia, neglecting Web accessibility could land you in court for an unlawful discrimination claim under the Disability Discrimination Act, one such case and settlement happened just last year to one of Australia’s largest grocery supermarkets: Coles.

Title II under the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act, §1194.22 are enforced by The U.S. Department of Justice (DOJ) for state and local government websites and Title III under the ADA will be enforced by the DOJ for all private websites by 2018.

This doesn’t mean that any inaccessible private websites are immune from being taken to court in the U.S.. Peapod—America’s leading Internet grocer—entered into a settlement agreement with the DOJ in 2014, and back in 2008 Target and the National Federation of the Blind (NFB) settled a lawsuit for $6 million.

There have been many more lawsuits and settlements, Karl Groves has compiled this list.

I’d like to think that it isn’t the law that makes us want to build things for the Web in a more accessible way but unfortunately that is usually the motivating factor.

The Right Skills

Most of us have seen this great quote from Sir Tim Berners-Lee, the creator of the Web:

And you will find this in the “Help visitors use your pages” section of Google’s Webmaster Guidelines:

Just as a front end developer can make a UI responsive on all supported browsers and devices and optimise his front end code/assets for better performance, he should also be able to make a UI accessible, not at the end of the project but baked in as part of his everyday work.

Building accessible and progressively enhanced UI’s is just part of the front end development skill set. It is not some obscure skill that in most cases is used in isolation when something negative has happened.

It’s a little crazy to me, that Target, post lawsuit settlement, spent $15,000 per web developer to receive accessibility training from the NFB.

It’s not about being an expert in using assistive technology like a screen reader—although you should be firing one up to at least test that the UI is being sensibly read top to bottom (if you’re using a Mac hit CMD+F5)—and understanding absolutely everything there is to know about all the different types of disabilities. It’s about:

  • Applying the fundamental things, like semantic HTML.
  • Providing text for non-visual users, not just alt attribute text for images but for everything.
  • Knowing how to use ARIA and when not to use it.
  • Caring about other input methods like keyboard and knowing which HTML elements provide keyboard accessibility “out of the box”.
  • Having a good understanding of how to build things in a robust, future proofed way, and choosing the right tool for the job—do you know why a Single Page Application (SPA) built with React or Angular might not be a good idea for a public content website?

And this isn’t just the responsibility of the front end developer, it also applies to people in roles like:

  • UX practitioners
  • Visual Designers
  • Product Managers
  • Back end developers
  • Software Engineers

Designers need to care about things like colour contrast and adequately sized text—why you would consciously make content, the primary thing the user cares about, hard to read, is hard to understand. Respect user-agent styles like keyboard focus rings – they’re styled that way for a reason.

Don’t just design for the minority like OS X users and users with Retina Displays. Building UI’s for accessibility is at it’s core designing for usability.

If you’re running a team of developers or designers don’t be ignorant and dismissive of Web accessibility, again you don’t have to be an expert in the subject but have some awareness—someone in your team shouldn’t have to “sell” or “prove” why it’s important, support people who are advocating it.

Common Arguments Against Web Accessibility

This is 100% true, it is impossible to cater for everyone but if you learn about Web accessibility and apply it to your work it’s going to make all the difference.

This is just ignorance and 100% false, there’s actually no basis for such claims as you can’t possibly know this information. It would be like saying “only people with blue eyes are using our website”.

Most studies find that about one fifth (20%) of the population has some kind of disability.

It doesn’t take long to compile the proof to debunk this, it’s just frustrating and unproductive it needs to be done.

Aside from the moral responsibility and it being the law in some countries, anyone with an online presence wants the widest possible audience and if it comes down to dollars, well… you’ll be making more money.

“When we work on making our devices accessible by the blind, I don’t consider the bloody ROI.” — Why Tim Cook Doesn’t Care About the Bloody ROI

This argument was tried by Target in the 2008 lawsuit mentioned earlier in the article.

Taken from the “National Federation of the Blind v. Target Corp.” wikipedia page:

Target argued that the Americans with Disabilities Act of 1990 was intended to apply exclusively to physical accommodations instead of cyberspace, and that such application of the California acts on accessibility would violate the Commerce Clause of the United States Constitution.

On September 7, 2006, the court ordered that a retailer may be sued if its website is inaccessible to the blind. In the court’s opinion, Judge Marilyn Hall Patel explained that the order of the court was based upon “42 U.S. Code § 12182”, the prohibition of discrimination by public accommodations clause of the Americans with Disabilities Act of 1990, which prohibits discrimination in the “enjoyment of goods, services, facilities or privileges.”

So I guess it’s fair to say this argument doesn’t hold up.

Unfortunately for most businesses this is true.

It takes time and energy and can lead to some uncomfortable or confronting conversations, but if you care about this stuff then you’ll need to start educating the business—it’ll slowly start to sink in, this article is a great one to share around.

Semantic HTML

Writing the most semantic HTML is the most effective and simplest way to improve the accessibility of something on the Web — this is where it all starts.

Every Web developer should already know how to do this. Sadly in today’s Web development world fundamental Web development aspects like this seem to have been forgotten or scarily not even understood. Ian Devlin just posted an excellent article titled On Accessibility and the Lack of Proper HTML about this very thing.

Take that extra bit of time to think about the elements you’re applying—when writing a <div> or <span> think if there is something more semantic to take its place, like <nav> or <time>, for example. Refer to a spec document when you’re unsure, and to learn from.

If your <a> element doesn’t have a valid URL, or fragment identifier, for the href attribute then this should tell you it’s not the element you need and that the <button> element is probably what you want.

Don’t do this:

Do this:

Here are examples of poor HTML semantics along with a better version underneath:

In a follow up article I am going to dive into more of the “how to make the Web a more accessible place”, so stay tuned.

Until then let’s all try harder with Web accessibility.

FED || Dead

A bunch of passionate frontend devs writing & speaking…

Thanks to David Berner, Bård Hovde, and Kate Levin

Chris Pearce

Written by

Accessibility focused UX Engineer. Builder of UI systems. Everton FC fan.

FED || Dead

A bunch of passionate frontend devs writing & speaking about their adventures in frontend land.

Chris Pearce

Written by

Accessibility focused UX Engineer. Builder of UI systems. Everton FC fan.

FED || Dead

A bunch of passionate frontend devs writing & speaking about their adventures in frontend land.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store