Why Website Accessibility Is More Important Than Ever (& How to Do it Right)

Websites.

When you think about them, where does your mind immediately travel? To the graphics? The content? Or the incredible functionality?

Chances are, the last thing you are thinking of is how accessible it is -- and I don’t mean how an when I can get it to load on a screen.

Accessibility in this respect is referring to the design of products, devices, services, or environments for individuals with disabilities, particularly vision impairments.

Sight. You don’t think about not having it, because, well, you have it. As creatives (especially as a designer), it’s incredibly easy to get caught up in the visual world and not give the alternative a second thought.

It’s so effortless to put form before function Heck, my entire job is to create stunning visuals. So, what do you do when your user doesn’t have the ability to enjoy them?

As a brand, experience should be your number one concern. With this in mind, you have to focus on the function of your content and how accessible it is in order to provide the best experience possible to individuals of all walks of life.

According to figures released in a 2012 Census, 56.7 million Americans (18.7% of the U.S. population) have some type of disability. Of this, 8.1 million have a vision impairment. When accessing the web, they rely on screen magnifiers, a screen reader, or are unable to distinguish the intended colors on screen.

What’s truly astonishing is 70% of the websites reviewed by Sight and Sound Technology were not compliant with accessibility standards. 8.1 million visually impaired website users, in the United States alone, are only able to truly use 30% of the internet. That’s just, crazy!

In this article I break down why your brand should care about website accessibility, things you can do to make your website more accessible right now, and give you a few examples of brands doing it really well.

Why Should Your Brand Care About Accessibility?

ADA Requirements

First passed in 1990, the Americans with Disabilities Act is a comprehensive civil rights law enacted to protect those with disabilities from discrimination. The law is pretty broad and has certainly been open to its fair share of interpretation, but it affects:

• Government
• Public and private spaces
• Employment
• Building codes
• Transportation
• Telecommunication

The ADA is the reason we have things like building codes for handicap access.

Since the ADA was passed in 1990 (before ye ol’ internet) the term “access barriers” was understood to mean actual, literal barriers (like stairs into a building), but, in 2010 the U.S. Department of Justice (DoJ) issued an Advanced Notice of Proposed Rulemaking announcing that they intended to amend the language to apply to information, specifically websites.

Since then, the DoJ has been clarifying the ADA’s jurisdiction on the web.

While some high profile cases (Target, Southwest Airlines and Expedia) have had mixed results, they have helped bring national awareness to ADA compliance on the web.

TL;DR What you need to know: The ADA is designed to protect the basic human right to information access, including information on the internet.

Creating Good User Experience

With as many times as I’ve told clients “you’re website isn’t about you, it’s about your visitor,” I feel like a broken record, but it could not be a truer statement.

Just like ngt brings a consistent user experience from device to device, browser to browser, adhering to accessibility standards allows all site visitors to interact with your site in the same manner regardless of impairments.

Being aware of these varying experiences is a huge first step and you aren’t going to be able to take this one on overnight.

Do your research and understand where your site has shortcomings in all different instances. Think about not being able to see the screen, how your site sounds when it’s read to you, if you can navigate your site without a mouse, and if the colors actually have enough contrast that elements are distinguishable from each other.

Treat this like a Growth-Driven Design project. Create a wishlist of functionality, execute, and test. You’ll need to iterate these changes throughout the life of your website.

SEO

One of the greatest benefits of being diligent with accessibility standards is search engines reward you for it. ADA compliance and SEO go hand-in-hand, as both of their goals are to improve the functionality, usability of websites, and the user experience.

One of the first things you can tackle to get your site up to speed is making sure every image has an accurate and descriptive alt tag.

Imagine not being able to see your website and instead a screen reader is translating what is on the page. The screen reader will, quite literally, read whatever the alt tag says. Even if someone doesn’t have a vision disability, if your website is having loading issues, the alt tag is what the visitor will see and let them know what your intention was.

So, if you’ve been a lazy marketer and have never changed your alt tags from the default camera image, imagine how infuriating that must be to a blind person!

Now, it’s really easy to get caught up in keyword stuffing alt tags, but be cognizant of the user using an assistive reader. That is of utmost priority.

Aligned with how screen readers interact with your website, title tags, and meta descriptions should not only be used and be descriptive.

Hop to it! Making these manageable changes will not only give your users a better experience, but you’ll likely get a little search engine results boost.

Setting a Standard

We are on the brink of 2018 and there has never been a more powerful time for action-based change.

With each passing day, we are becoming more accepting, more accommodating, and more cognizant of the strides we need to make in order to see lasting change in our communities. So, don’t wait!

It may seem little and it may seem like it will go unnoticed, but stepping up and making some small changes to your website can help set a new standard of accessibility and reflect wonderfully on your brand.

Once you start doing it, your competitors might too, and then maybe some other industries will take notice. We aren’t talking about a nice to have, we’re talking about information access! It’s a big deal.

What Does This Mean for Designers?

So, I get it. This sounds like a lot of rules and, if you’ve done any research on this topic at all, the most compliant websites are butt ugly. Yeah, I said it. They are.

Your research usually leads you to a collection of government websites that couldn’t be more 1997 if they tried.

I’m not telling you to abandon your morals, and seriously, stop scrunching your face.

The biggest change we can make as marketers and designers is simply to be aware of how our designs translate to those with disabilities and aim to optimize it.

Experience it. Go download a screenreader, grab your sleep mask, ditch your mouse, and simply take Google for a spin. Perform a search using just the audible prompts and the keyboard. How far can you get, and how quickly?

Embrace the challenge. There is no law saying that accessible design can’t be beautiful, it’s just harder to achieve. Push the boundaries.

How to Create Accessible Content

Color

While this article has largely focused on those that are totally visually impaired, there is another facet to consider: those who are colorblind.

Color Blindness affects roughly 4.5% of the population and since color plays such an important part in every website, it can’t be ignored.

There are three types of color blindness:

1. total color blindness
2. two-color vision
3. deficient color vision (which has varying degrees of severity).

You can never assume every user is going to see the same thing on screen (or even see at all!). So, you have to make sure your design work with and without color.

Say, whaaa? I know. Easier said than done.

Back in my college days, Graphics I to be exact, it took us the better part of a semester before we were allowed to design in color. Why? Because a design that relies solely on color to be successful is not a successful design. To this day, that’s how I approach every logo I’ve ever created.

I’m not saying you can never use a millennial pink gradient ever again, but you should be very aware of the role contrast plays for users that are unable to distinguish that gradient in the first place. Always have an on-brand, high-contrast pairing readily available.

If your designs still need a little extra boost in the contrast department, pattern and texture can help to establish higher-contrast. As a last resort, you can always go the route of over explanation with a well-placed tooltip, or text in your design.

Yes, great design is transparent, but hey, words speak!

High-contrast pairings aren’t just helpful for those with color blindness, but they help the elderly and anyone quickly glancing at your site.

Testing

So, you’ve done the research, you’ve made changes, you made sure to take everything into consideration.

Now what? Now, you need to test, test, and test some more!

To ensure your site is providing the best possible experience to ALL users, you need to test in three main areas; user testing, compliance testing and against best practices.

Start with yourself.

Earlier I told you to break out the sleep mask and ditch the mouse, if you’re still shaking your head no, head over to YouTube. They have a number of videos detailing what it’s like using screen readers, magnifiers, and other tools that help those with disabilities access the web. Really take note of what works well and what doesn’t make sense to the screen reader and ultimately the user.

This will give you a solid idea of the items you should be adding to your accessibility checklist during your pre-launch QC. Just like with any web-based project, you want to make sure you are thoroughly auditing for errors. Don’t forget to amend your current process to include a step for this accessibility assessment.

You could even go a step further and consider getting some of these tools yourself to test first-hand how people are experiencing what you build.

Official Guidelines

As of the publish date of this article, no official “you must adhere to these policies or face legal action” guidelines have been established for websites. The best authority is W3C and their Web Accessibility Initiative Site. This is currently the most comprehensive resource that exists.

Here you will find tips, tools, information on existing legislation, court cases, presentations, and evaluations all to propel the accessible website movement.

It’s a great resource to have bookmarked and one you should check often as things are still being established and they are constantly changing.

Tools

W3C has done an amazing job providing a comprehensive list of resources related to accessibility on the web and helping designers and developers with adhering to ADA compliance.

You can see the full list of recommended tools here, but here are a few of my favorites to get you started:

Accessibility Color Wheel

It may not be glamorous, but it’ll tell you like it is! Add in the hex value for your foreground and background and the Accessibility Color Wheel will give you a red “x” or a green “check.” Easy peasy.

Accessibility Developer Tools

For those of you who use Google Chrome Developer Tools, this Extension will add a tab to your existing toolbar to perform an accessibility audit.

WAVE

WAVE (Web Accessibility Evaluation Tool) is a Chrome Extension that anyone can use to run a test on how accessible a website is. The tool will generate a report showing errors, alerts and functions that are performing well. If you’re looking for a list of things to tackle, this should be your first stop.

3 Brands Doing Accessibility Well

So, who’s actually doing Accessibility right?

For all the reasons mentioned above, creating a highly accessible website is no easy feat. It takes a lot of time, testing, and know-how to make it work.

The sites listed below don’t skimp on high-quality design in favor of accessibility and they don’t ignore accessibility for pure aesthetics. It’s a delicate balance of both worlds.

Check them out, give them a screen read, and run them through some of the tools in the previous section.

1. PyeongChang 2018 Winter Olympics

 It’s not surprising that The Olympic Committee has paid close attention to creating some of the most accessible content on the web.

In 2000, the website created for the Sydney Summer Games was ruled as discriminating blind users by not making the same information available to them.

WAVE shows the website as only having two errors and a whopping 264 correctly labeled elements. Pyeong Chang get’s the gold for best screen reading prompts!

2. Cambridge Canada

 The City of Cambridge’s website is a fantastic example of how all government websites don’t have to follow the same boring, ugly format.

Here, we have a website with some style, ease of use, and only four errors from WAVE (This is pretty incredible! Consider Buzzfeed, which has 111 WAVE errors on their homepage.).

If you take a glance at the WAVE report you’ll see that the majority of the site’s success comes from having every image on the page clearly identified with an alternative text tag. Alt tags are easy to ignore, but they are worth their weight in gold for user accessibility and SEO!

3. Apple

Yes, Apple is actually king of the world.

All kidding aside, everyone’s favorite high-design brand really nails it in the accessibility department.

As usual, Apple goes with a less is more approach, simplifying the design of the page, and putting a major emphasis on the elements that matter the most, such as the products themselves. This allows the brand to control the experience down to each any every alt and title tag.

Apple’s WAVE report shows a single error. Considering the eCommerce elements included in this site, that’s what you call an incredible, consistent, user experience.

Your Turn

I know, this is overwhelming and likely something you’ve never even taken the time to think of.

Be aware and start somewhere.

Any change you make is a step in the right direction to making your website more user friendly for ALL of your users. And hey, you might even get a little SEO boost out of it!

Set the standard in your industry and keep accessibility top of mind during your next website redesign, or even your next website iteration.