How to make Web accessibility a priority (instead of an afterthought)

If I’ve learned anything about accessibility over the past few months, it’s that you can’t just sprinkle in some alt-text and call it a day. You need to make foundational changes to your strategies and overall approach in marketing if you want to consistently produce material that’s inclusive of everyone’s needs.

We use the internet to learn about almost everything. People rely on it for employment opportunities, the latest health recommendations, and government announcements. If you unintentionally create a message that people can’t hear, see, or experience, it’s likely that you’re preventing them from accessing crucial information.

old computer monitor glitching out.

From where I stand, we’ve only scratched the surface in terms of the changes that need to be made to web and marketing standards. While I’m happy to see the momentum that’s been building, there’s still a long way we need to go. Below are three examples of how large organizations (universities) are actively making Web accessibility a priority and building it into the foundations of their marketing plans.

McMaster’s brand standards

Brand standards are a set of rules that protect the look and feel of an organization. Many marketers are incredibly passionate about them and rely on them heavily in their work. The bigger the org, the more important they are. Brand standards are what help people understand how to present things in a consistent way.

A great set of brand standards will go beyond the basics to provide clarity to anyone using the brand colours, fonts, and logo(s). They have to be easy enough for everyone at any level to understand and apply to their work.

Including accessibility in brand standards

McMaster University is a leading example of how you can incorporate web accessibility into your brand standards.

They talk openly about how they’re committed to web accessibility throughout many detailed guides and offer a suite of accessibility services to their communities. Below is an example of a simple one-page accessibility guide available for anyone using their brand:

a screen shot of a one page accessibility guide.

Ways to add accessibility into your brand standards

There’s usually a lot of history associated with a brand’s visual identity. That’s because they take a lot of effort and many years to build. People are incredibly protective of them.

Suggesting that your change your brand standards might not be embraced because it could be seen as too risky. However, if you’re failing to meet the needs of your customers you’re taking a different kind of risk.

Some brands have rules that are hard and fast, while others will be somewhat interpretative. Regardless of how flexible your brand standards might be, here are six guidelines to consider adding when updating them:

  • Colours: Not everyone can see colour. Use contrast to assess how brand colours could impact your audience.
  • Fonts: Opt to keep it simple and use font variations sparingly. Accessibility tools, such as screen readers, can’t always read font stylings.
  • Alt-text: Encourage everyone who represents your brand to include alt-text. It helps writers, social media managers, and marketers provide more context to those who can’t experience every part of a page.
  • Captions: Adding captions makes video content more inclusive for anyone who can’t hear it.
  • Brand voice and tone: Include guidelines for writers that encourage them to write marketing in a way that’s easy for all to read.
  • Brand values: By highlighting Web accessibility in your brand values, it makes it clear to everyone that it’s a priority.

Your visual brand’s identity should evolve to meet the needs of the people that you serve. It might not be a popular shift initially, but it’s necessary.

Ryerson’s Quality Assurance tool for web authors

Ryerson University had to face a challenge that many universities struggle with.

Muppet chef throws ingredients into a bowl.
What happens to your website when there are too many cooks in the kitchen?

They had several hundred people editing web pages throughout the institution and needed a way to consistently prioritize accessibility across their entire site. Instead of purchasing a third-party tool, they opted to create something in-house.

In May 2020, they launched a quality assurance tool called Sa11y. It’s designed to visually highlight common usability issues specific to whichever content management system (CMS) you’re using. If you’re familiar with editing sites, I’d say that it’s similar to a WordPress widget.

Sa11y was released as an open-source tool and is currently being used by several Higher Education institutions like Vancouver Island University, Princeton and Queen’s. It doesn’t matter if you’re using Salesforce, WordPress or Drupal, this tool is helpful for any and all web editors.

Automated accessibility testing

As a web editor, one of the best things about using Sa11y is that it gives you visual highlights of common accessibility issues. Errors are flagged with a simple tooltip on how to fix them.

Below is an example of what I see as an editor using Sa11y:

a screen shot of ryerson's sally tool.

It’s pretty obvious at first glance what needs attention. You can also easily turn off the error message if you’re working on something else. Some edits will be small and can be made by the person editing the page, while others might require help from your dev team.

This is a great option if you’re working with a large group and need something streamline that can help you educate and edit on the go.

Benefits of using Ryerson’s in-house tool

While there are many accessibility tools on the market, the top three benefits of using Ryerson’s in-house tool (Sa11y) are:

  • No complex API or integrations
  • Free and open source
  • Easy, intuitive tooltips to explain issues

Still not convinced? You can take it for a test drive.

Havard’s updated web navigation

Many people access a website by only using a keyboard (instead of a mouse or a trackpad). That’s why marketers, designers, and developers should consider both site-wide and page-specific navigation when building or updating a site.

The key is to ensure that people have navigation options.

You should easily be able to skip over anything you find irrelevant or redundant with a few clicks on the keyboard. The overall goal is for users to be able to find what they are looking for in as few clicks as possible.

Rebuilding the homepage

Accessibility was a key consideration for Harvard when they decided it was time to update their homepage. Here’s a quick overview of what they changed and how they made the site’s navigation a priority:

When keyboard and screen-reader users open or close the main menu and submenus, the site is coded to shift the focus programmatically to the most appropriate element. Said differently, it gives the user visual cues to help guide them through the page.

How to really make web accessibility a priority

The most expensive way to update a movie is in the editing room. The same applies to accessibility when building a website or marketing campaign. It’s much cheaper and more effective to account for the needs of Web accessibility while you’re building something instead of afterwards. Creating an inclusive experience requires forethought and intention.

The biggest way to make Web accessibility a priority is to understand how your work is impacting people. Following that, you should evaluate what you can do to better bring accessibility into the fold.

By Christine

Hi, I'm Christine. I'm a public speaker & marketing professional with a specialization in digital strategy. I live and breathe all things content & marketing. In my previous positions, I've done everything from rebranding companies, launching new SaaS products, writing sales copy, and developing long-term SEO & social strategies. I believe that quality communication and measurable results are the key to every digital marketing strategy.