Five Essential Tips To Improve Your Website’s Accessibility

When you design for accessibility, you’re designing for success. But right now, while you’re reading this, your website could be failing badly to reach a valuable and motivated audience of potential buyers. Here’s the rub – if you don’t fix that, you won’t just miss attracting those wonderful people; you just might get fined by the Federal government.

How are you going to get through this? Accessible design.

Before you roll your eyes, let’s be straight here. There continues to be confusion and stigma attached to accessible design, largely because it’s seen by some as yet another annoying accommodation business has to make because “do-gooders” got a law passed to make sure it happens. Well, it’s time to shake off that dinosaur attitude and discover how embracing accessible design is really about embracing business growth and sustainability.

Here’s how accessible design can work for you and why

The average age in Canada is 40 years old, it is also the average for the highest income, and the average age for people with disabilities. According to the World Health Organization (WHO), about 15% of the world’s population lives with some form of disability and that percentage is only to grow as the population increases. That doesn’t even factor in the minor temporary impairments that can happen when someone burns their thumb and can’t type on their screen. That’s a large portion of revenue you could be losing out on just because you’ve neglected to make sure your site was available to everyone and cater to the needs of your profitable clients.

It is best to think of User Accessibility as an extension of User Experience design. Just imagine how people with different disabilities will experience the same content, get familiar with the technology and challenges, and welcome it was a part of the design process. Accessible design is really about customer service. The goal of any business is to meet the needs and expectations of their target audience as quickly as possible. Cutting 15% of your target audience out due to inaccessibility is just a rookie mistake.

What is Accessible Design?

Simply put, accessible design is the practice of making your services/products usable by all people regardless of their physical or mental limitations. For the most part, a design is tailored to reach everyone within that targeted group.

But that’s that catch: you may not be reaching everyone. Especially with a smaller audience, we need to factor in the percentage of loss that could happen by not considering the needs of those with certain disabilities who may not be able to understand your visuals.

So, make your online presence understandable to everyone.

Why you need to apply it

It’s all about staying ahead of the curve when it comes to user experience. The industry is evolving to a point where offline services are moving online. Everything from renting movies to requesting a taxi or ordering groceries can be done with a few clicks on your phone or computer. As this transition continues, the laws and regulations surrounding accessibility are growing tougher. More and more giants (Netflix and Disney for example) are getting slammed with lawsuits for not making their services available to everyone, and with a deadline of 2021 to get your shit together, this will only increase.

Instead of freaking out or dreading the fines and consequences, why not embrace it and use this as a growth opportunity? Technology is shifting to use more non-visual interfaces (Siri for example) and average people are using accessible software more than you would expect. Accessibility is easy to implement and will result in multiple benefits including making the experience your users have with your brand seamless across the board, increasing your reach, and most importantly, give your brand a PR boost.

It is good for your image and it is good for your business to become an inclusive and accessible brand that cares about the people to whom you are catering. It is an investment, yes, but moreover, it is an invitation to grow your business and succeed.

Oh, and Google will reward you for it (or penalize you). Just like they boosted rankings for mobile friendly design, Google will boost rankings for accessible websites. So, if your website isn’t accessible, The Google Gods will know and punish you for it, and it will be extremely difficult to rebuild those rankings. Let’s try and avoid that, okay? Okay.

So, here’s how you can do just that. 

1. Your Relationship with Colour

Colour is a key factor with any design; it can invoke emotion and determines the mood of a piece. When it comes to designing with colour, it is often forgotten that you likely see colour differently from others. Colour blindness effects many people, statistically more men than women, and that colour discrepancy needs to be factored in.

Contrast Ratios
The simplest fix that addresses the most common issue in terms of accessibility is to ensure there is a proper contrast ratio. You can always ensure the ratio is perfect with a colour contrast checker, which is a great way to keep you on track. Just remember: always have sufficient contrast between background and foreground elements. You can also flip your design into greyscale during the process to see how the elements work. It won’t give you a quantified number, but it will give you a good idea if you are on the right track.

Never Depend On Colour
If you depend on colour solely to communicate the important elements of your visual interface, people will often have a difficult time perceiving them as important. So, instead of being bogged down by the fine numbers of contrast ratios, isolate the important components such as primary buttons or even error or success messages, and start using size, placement, boldness, contrast or accompanied icons to create that emphasis. A red button with green text is likely going to get your users get stuck because they can’t understand the call to action.

2. Typography Matters

Not all impairments leave the person completely unable to use the interface. Type needs to be legible. There are three key breakdowns to remember with accessible type: what fonts you use, their size, and the spacing between them. These are the basic fundamentals of any design, but with accessibility, the fundamentals are what make or break it. It’s all about laying the right foundation to build on.

Stick with standard, tried and true, recognizable fonts (Arial, Garamond, etc.). Google fonts work great for online interfaces as they will appear the same across all platforms even if they are not installed on someone’s computer. This bodes well for consistency and ensuring you are guaranteed a shared user experience.

Your users could be missing key information when it’s placed in body copy. Large bodies of text are usually skimmed over quickly or skipped entirely if the read is tedious. So, make sure to only use upper and lowercase for body copy: never use ALL CAPS for large areas of content, and stay away from using condensed or italic fonts (unless for emphasis).

An increase in font size will also help with legibility. Generally speaking, anywhere between 14 – 18 points is legible for body copy, but sizes do vary among different typefaces (e.g. 14 point Bodoni is smaller than Arial of the same size).

The space between the lines and letters (leading and kerning) is just as important as the words themselves. Make sure there is enough space. The larger the font, the larger the leading and kerning.

3. Make It Readable

How do you make images and links understandable for people who can’t see them? Speech-to-text and screen readers, go through websites and speak out all the meta to the user. But, you need to be able to tell them what information an image or link contains, and what it represents.

This is why ALT text is super important. It describes to screen readers what the context is, so they can then explain them. It is read out loud, but also can be displayed in three ways: in a pop-up description as one hovers over the image or object, in a caption within close proximity (under or to the side of the image or object) or in a long description or full explanation (chart or graph data itemized).

What you need to make sure is that your ALT text:

  • Describes the image’s content accurately, and is ALWAYS concise
  • Provides context or semantic meaning for the image’s content
  • Explains the image’s function (a downloadable PDF? a submit button? a link?)
  • Is null or blank (alt=””) for decorative images

4. Primary and Secondary Personas

After determining your target audience don’t forget to create personas of the typical user to access your web presence. A user persona is a fictional, yet realistic, description of the targeted user. A persona is an archetype, not the actual human being, but giving them a personality and description helps give that persona life. The real benefit of a user persona is to identify and define the target and gather a list of the goals and motivations of a person who may be using your application or website. What do you want them to achieve with your site?

It is a standard practice when developing site architecture and auditing designs, but don’t forget to take that extra, gold star step: create secondary personas including those with disabilities. This helps weed out any accessibility errors in the early stages of architecture development as well as in the later stages with user testing prototypes.

5. Measure twice, cut once. Accessibility audits work

If you are like me, you may hear audit and immediately think “boring.” Look, I’m not saying you have to suddenly love audits and testing, but if you make sure it works beforehand, it will avoid problems in the future. It’s just another step in measuring the quality of your product and service offering and if you schedule it in regularly you can save time (and time is money) in cleaning up a mess later.

The types of audits

When testing you should be looking at three basic elements: structure, visual, and code. Structure audits look at the foundation of your interface for any sort of architectural errors. Basically, it ensures that you are laying the base right and that no one will get lost. When you add the limitations of some accessibility software in the mix, getting lost can lead the user to have to either start from scratch or give up and move on to something better. Visual audits check the UI components and ensure that the information is presented effectively from a visual standpoint. Code audits look at the language used to create your platform and ensures that you are using the right tools to be compatible with all software.

When do you use them?

There are three phases to do audits at: exploratory, validation, and assessment. Pretty straight forward. Initial testing is done in the exploratory phase to see what works best for that specific project. Sometimes that evolves from what you think it should be to what it needs to be. Validation testing usually happens throughout the design phase and it ensures that what worked at the beginning of the process is still working throughout. This is usually when the most evolution happens. Adapt to better the results of your tests. Assessment audits look at everything after the fact.

Once its live, quality assurance needs to be maintained. So, make sure that you are up to standards and ensure that you are correcting minor errors before they turn into larger ones.

There are three categories of accessible design (digital, print and environment). Getting your digital act together is one thing, but you really should revisit your physical spaces as well because focusing on this across the board will keep you consistent and reliable. There is a great guide that breaks down the guidelines here for all three categories.

Face it. Accessible design regulations are coming at you fast, whether you like it to or not. Don’t wait for the fines – or falling web performance stats – to start rolling in. Now is the time to fix your website, increase your reach, improve your image and profit from it. Reach out to Blade –  we’ll show you how easy accessible design can be.

Facebooktwittergoogle_plusredditpinterestlinkedinmail
Brand Edge. Keep Your Edge. Subscribe.

Danielle Kenedy

As a Graphic and UX designer at Blade, Danielle Kenedy identifies problems and creates solutions that bring our client’s brands to life in the most accessible and seamless way. Her on-going learning and ambition to excel is best summarized by her favourite Shakespearean quote: "A fool thinks himself to be wise, but a wise man knows himself to be a fool.”

Danielle Kenedy has 2 posts and counting. See all posts by Danielle Kenedy