Accessible Design Tools for a More Inclusive World Wide Web

When we think about accessible design, we often think of physical spaces like wheelchair ramps, elevators, larger bathroom stalls, and reserved parking spaces. Unfortunately, so much of our world is still largely inaccessible for people with disabilities, which leaves many with no choice but to use the internet to access essential services.

But what if the internet isn’t accessible, either?

A Shift Towards Internet Accessibility

1 in 5 Canadians has a disability—that’s 6.2 million people! Accessibility shouldn’t be an afterthought when 20 percent of our population struggles with systematic exclusion. As a brand, if you take the necessary steps to have an accessible website and social media presence, you can better provide your services to a massive community of people who are undeservingly excluded from so many aspects of our everyday lives.

Scrolling through our phones is a mindless task for many of us, but for those with visual impairments, literacy difficulties and other disabilities, it’s a much more complicated process. Luckily, there are many ways we can make our websites and social media pages more accessible and easier to navigate for everybody.

Our graphic design team recently completed training from an incredible organization called Accessibrand, which aims to help businesses understand the ins and outs of web accessibility and how we can improve it. We thought we had a pretty good grasp of online accessibility going into the workshop, but we were blown away by how much we learned and all the areas where we could improve.

Here are some recommendations from our designer Michelle Slobodian on how brands can make their websites easier to navigate for everyone.

Colour Contrast is Everything

Ensuring text and graphics have good colour contrast throughout your website will make it so much easier to read for folks with visual impairments and literacy difficulties. For those of us with 20/20 vision, even we can notice a difference in how much harder it is to read text with poor contrast from its background. Imagine how much harder it is for people with disabilities.

To test your website’s colour contrast, you can use this free web accessibility contrast checker from WebAIM. Enter the HTML colour codes of your text and background, and the software will provide you with a colour contrast ratio. We like to aim for a minimum of 4.5 or higher for text.

Suppose you’re struggling to pick a colour palette for your brand and want to ensure it will have optimal contrast. In that case, this accessible palette builder from Color Safe follows the standards outlined in Web Content Accessibility Guidelines 2.0 (WGAC).

Alt-Text and Image Descriptions

During our training with Accessibrand, our instructor showed us what it’s like to use a screen reader. Michelle was blown away by how challenging it was to follow along as the screen reader scrolled through our website.

We thought we had a super accessible website, but we were shocked at how bad it was! The workshop set things up well, so we could identify the problems and find ways to fix them.

Adding alt-text descriptions to images throughout your website makes it possible for visually impaired users to understand the graphics without actually seeing them. Screen readers will automatically detect the alt-text embedded in the image, even though the text is not visible on your screen.

On social media, adding image descriptions to the body copy of your posts can be very helpful since many platforms don’t have options for embedding alt-text.

Navigation Icons

For those with literacy challenges such as dyslexia, seeing big blocks of text on a website can be overwhelming. Knowing what to click and where to go can be a stressful and time-consuming experience, but it can be so much easier if there are symbols and icons to help guide the way!

Michelle loves using this database of universal icons and symbols from Google. Simply download your icon files, and you can switch them to match your brand colours and fit with the design of your website. Remember, it’s all about that good colour contrast!

Plug-Ins

We’ve been dabbling with some fascinating website plug-ins offering customizable accessibility features. These allow users to change text size, spacing, cursor size, contrast, alignment, and so much more!

Want to test it yourself? We added the UserWay accessibility widget to the imagineNATIVE website. Click the icon in the top left corner to see all the ways you can customize your online experience! Of course, it can be a trial-and-error process, especially if you use a mobile device. Still, it has proven to be incredibly useful for accommodating the needs of the diverse community who accesses this website.

Using Fonts in Responsive Websites

Accessing a website on your laptop will often look much different from how it appears on your iPhone screen. We call these 'responsive websites', and they automatically change alignments and layouts depending on your device.

Responsive websites can pose a challenge from an accessibility standpoint. Some fonts may be easy to read on your laptop but much harder to read on pocket-sized devices. These font-size guidelines for responsive websites can help you make informed decisions about the fonts you use in your designs to prevent any issues with readability.

Unsure if your brand’s website meets WGAC 2.0 accessibility standards? We seriously recommend signing up for a workshop with Accessibrand! They will teach you ways to make your online presence more disability-friendly and easy to navigate. They’ll also cover other important topics, like mindful and respectful representation when using images of people with disabilities in your designs and advertisements. It’s helped us along in our continual journey to create a more welcoming and inclusive culture—here at the UpHouse office, in the digital realm, and out in the world!