Is Your Website a Legal Liability?

It’s not often that news outlets for web development and celebrity gossip cover the same topic, but earlier this month it happened.

The cause?

Beyoncé and her company Parkwood Entertainment have ended up in the crosshairs of a lawsuit citing a lack of Americans With Disabilities Act (ADA) compliance due to a neglect for some basic web accessibility standards.

The ADA outlines a series of guidelines a company operating in America must legally comply with to ensure that disabled citizens are able to have equal access to their services. You’ll often see this in building construction with things like requiring wheelchair ramps.

What does this have to do with Beyoncé, or your website, for that matter?

via GIPHY

Mary Conner, a blind woman, claims that due to a lack of alt text, keyboard navigable main navigation, and almost requiring the use of a mouse to get around, the website has denied her and any other blind user from having equal access.

Does she have a case?

It’s hard to say, as I’m not a lawyer, but after trying to get around Beyoncé’s site with only a keyboard, it feels like the developers went out of their way to make it inaccessible and there is a precedent for it. In other words, an inaccessible website is a potential legal liability.

How to Stop This from Happening to You

Again, this post is in no way legal advice, but below are a few guidelines you can follow that should go a long way to keeping you out of legal trouble and, more importantly, making the web a better place for everyone.

It’s worth noting that there is no official ADA compliance check for websites. That said, there are two documented sets of guidelines we can use to point us in the right direction:

• The ADA Recommendation List for Government Websites (Rules .gov sites must follow).
• W3C’s Web Content Accessibility Guidelines (WCAG).

1. Use Alt Tags.

I’ve talked about this before, but alt text is super important – and not just for SEO. Its true purpose is to facilitate screen readers.

The tl;dr of that post is that absolutely every image needs an alt attribute. If it’s a content image, the value of the alt attribute should be descriptive text explaining what the image is.

If the image is purely for decoration / display purposes, the alt attribute should still be there but with a blank value (this is an explicit instruction to a screen reader to ignore the image).

2. Make Sure Your Menu Can be Used with a Keyboard.

This is could easily be a blog post on its own. The short of it is to make sure you can easily get around your main menu using the tab keys and that you can see what menu item is in focus (keyboard navigation isn’t just for the blind).

The A11y Project has a handy collection of examples that you can use as a starting point when building your navigation. Setting up skip links – links that appear as the absolute first items in the HTML, allowing screen readers to jump straight to the navigation or to the content – will also go a long way (especially if you have a complicated menu).

3. Label Your Forms.

You might like the look of a from with no labels that instead rely on placeholder values as instructions, but these are an accessibility and usability nightmare.

Screen readers won’t read out the placeholders, leaving a whole group of users with no clue what each field is for. Even for sighted users, without a label, they can’t verify they’ve got the form filled out right after entering information.

4. Mind Your Colors and Contrast.

WCAG has clearly defined color contrast requirements so that people with various vision impairments can easily read the content on your site with different tiers.

There are even easy-to-use tools that allow you to plug in your font and background colors to check their contrast. You’ll want to ensure ALL of the text on your website meets at least the AA standard.

Bear in mind that maintaining a minimum level of contrast not only helps those with vision problems, but also those with bad monitors that lack contrast as well.

Wrapping Up

If you’re at all concerned about your website’s accessibility, I suggest you go out and audit it right away. Try to get around with just a keyboard, maybe even install a screen reader and try to get around that way.

It may seem like a daunting task, but if you pick one item at a time and systematically work your way through it you’ll end up with not only a website that will minimize any liabilities, you’ll have made your site better for your users – and done your part to make the web a little better.