You planned your website for months. UX/UI, content, brand imagery and messaging has been carefully selected to match your brand values. You’ve checked every SEO box and it has been optimized so it will be just as beautiful to mobile users as it is to those on desktop. Time to publish, right? Back that puppy up…Not yet! Have you considered how your site will be experienced through the perspective of different people? Is it inclusive for many or for all?

Inclusive design, accessibility, and universal design are important for different reasons and have different strengths. Designers should be familiar with all three. The definition of inclusive design that I feel says it with the greatest clarity comes from the Inclusive Design Research Centre at OCAD U in Toronto:

We have defined Inclusive Design as: design that considers the full range of human diversity with respect to ability, language, culture, gender, age and other forms of human difference.

Now we can sometimes get caught up in the semantics and interchangeably use Universal design, Inclusive design, and Accessibility, however there is a key difference among them.

If your website were a door frame, would it be wide enough, tall enough and the simplest for anyone to walk/roll/or climb through? Or would it be a small narrow entryway with flashing neon lights and music blaring as you make your way through? Which one is more universal? Universal design, simply put, is literally a design for everyone. Like a one size fits all sorta thing.

Universal Design is defined as the design of an environment so that it might be accessed and used in the widest possible range of situations without the need for adaptation. While inclusive design in contrast adjusts with your audience.

Here are some things you can do to make your website more inclusive and accessible.

VISUAL ACCESSIBILITY

---

Visual accessibility needs to account for those who residual vision as well as those with colour blindness. 

In order for those with colour blindness to be able to properly navigate your website, use contrasting colours for your backgrounds and fonts to avoid the text getting lost on the page. Thin fonts can also be hard to read. Make sure key text, like call-to-actions, are bold and readable and don’t just rely on colour to distinguish important information from the rest.

Those who are visually impaired use a screen reader to navigate web pages. To make this experience smoother, use proper headings to distinguish between different levels of text and reserve H1 for page titles. Don’t skip between headings simply for the aesthetics, like going from H1 to H3, as it could leave them wondering if they missed some key information. Instead, change the formatting of each heading to suit your design needs and stick to the hierarchy.

When you have links in your body of text, be as descriptive as possible. Instead of, “to learn more, click here”, write, “to learn more about our company, visit the about us page”. 

A screen reader relies on alt-text to decipher images. Make sure all important images have descriptive alt-text. If an image links to something, that needs to be described in the alt-text! For images that are purely visual, instead of leaving the alt-text blank, use alt=””. This will let the screen reader know to skip it.

Having audio recordings on your website can be a great help to those who are visually impaired, but don’t set any recordings or videos to play automatically. Let your site visitors start and stop them themselves so they know ahead of time where the controls are. Pop-ups can cause a similar issue, leaving visually impaired visitors trapped in the pop-up, without the ability to carry on to the rest of the website.

AUDITORY ACCESSIBILITY 

---

Those who are hearing impaired or hard of hearing require some similar accommodations to those who are visually impaired but for different reasons. Their navigation of your website is purely visual, so make sure your content is clear and easy to read. If you have multiple videos on your website, make sure to include closed captioning and a summary of each so they aren’t obligated to play each one in order to find what they are looking for as well as providing detailed descriptions of any audio-only content.

If you are creating video content for your website, include captions (which mean both the spoken words and non-word audio are described on-screen) and take the time to match them up so they run on time with the video. If you’re embedding a video from an outside source, like Youtube, take the time to watch the video with captions on to ensure they’re accurate and appropriate.

Similarly to those who have residual vision, don’t set content to autoplay. Ever accidentally clicked on a website with automatic loud music playing or an embarrassing sound (just when you’re in the middle of a serious meeting?!). Oops!.

Autoplay is looked upon as a no no these days for good reasons:
Over the last few years, all major browsers have taken steps to aggressively block autoplaying videos on webpages. Safari, Chrome, and Firefox all announced policy changes for this. All these browsers will aggressively block videos from autoplaying on webpages or block the web page all together. Each browser has slightly different rules around how it makes this decision. Browsers will not tell you what their exact rules are but the default behaviour is block most autoplay attempts. There are some conditions in which it will work but it can not be fully relied on. Background videos without sound are not included in this as they are silent in nature.

But with the new internet accessibility laws autoplay videos have been more widely affected.

PHYSICAL ACCESSIBILITY

---

When we think of websites, we don’t often consider the physical requirements of using the internet. For those who cannot use a mouse or touchpad, you need to ensure your entire website is keyboard accessible. This means visitors should be able to navigate your website using solely the tab, enter, and/or directional keys. If your website has dynamic content or pop-ups, these could trap a keyboard user in the pop-up or content loop if there isn’t a way for them to navigate and close it.

Pressing tab through an entire webpage to find what you are looking for can be time-consuming at best, and a hindrance at worst. If you have a particularly long page, include anchor links to take visitors straight to important information.

AN INCLUSIVE WEB

---

Accessibility laws surrounding internet access are being continually updated as technology progresses. I see the underlying principles of universal and inclusive design as virtually identical. The difference is simply a matter of perspective. What matters is that designers integrate aspects of inclusion, that they keep them in mind, and that they design outside of their own idealized user (1).

1. The Same, But Different: Breaking Down Accessibility, Universality, and Inclusion in Design