Are you making these common accessibility mistakes?

Let’s start with some questions to consider:

• Have you ever been to a restaurant that replaced their hard-copy menus with digital?
• Have you ever used the elevator instead of the stairs?
• Have you noticed public spaces like museums and zoos have optional assistive voice services that read information to guests?

These are all examples of where accessibility plays a role in our everyday lives.

Most of the time we don’t take second thought to these, likely because they’ve been in place for some time already, but often because we can correlate the need for use immediately.

Now, consider these questions:

• Does your website only use font-sizes greater than 16px?
• Did you run your brand colours through a contrast checker before selecting them?
• Do you supply Alt text for your images when you post them on your website or social media?

If you’ve answered “Yes! I sure do!” to all three, then may I suggest we high-five? Although, if you’ve answered “No”, “Nope”, “I don’t know”, or “What does that mean?” to any of those, then may I suggest you keep reading… we can high-five later.

Why web accessibility matters

A neurological disorder, visual impairment, dyslexia, ADHD, or other disability can impact a person’s ability to navigate, comprehend, and interact with your website.

From how your website is technically built, the design options you select, to the content you include, can all affect user accessibility.

Removing barriers to ensure that everyone can access your information, goods, or services creates an inclusive online environment, much like a brick-and-mortar storefront would with the same considerations.

Beyond the more honourable benefits, there are also ethical, legal, and business values to consider. So whether you’re coming into this with equality in mind, or the wider consumer base, accessibility is something that you should be aware of.

Why you shouldn’t rely on overlay accessibility widgets

An overlay widget is a plugin installed on existing websites that provides third-party controls which affect the functional or visual display, layout, and formatting of your website.

These widgets have settings that, for example, change colours used on your website, increase or decrease font size, turn on a focus reading tool, or stop all media from auto-playing.

On the surface, this sounds like a comparatively quick fix to provide solutions for your audience, but these features don’t always work out as well as you may think. Don’t take it from me, there is an entire webpage devoted to convincing you not to do it.

If you’re considering using an overlay widget and doing your research, I’ve outlined my own experience doing the same in ‘Why I chose not to use an overlay accessibility widget’, and included the referring links that I found to be most educational.

How accessibility is governed

The group that develops international Web standards for HTML, CSS, etc. is called The World Wide Web Consortium (W3C). Their Web Accessibility Initiative (WAI) further develops standards and support materials to help “the royal we” understand and implement accessibility best practices.

The Web Content Accessibility Guidelines (WCAG) were created to ensure that web content (and non-web information) are accessible and usable to everyone.

You can find the complete guidelines and other standards related to web accessibility at W3C’s Web Accessibility Initiative website.

Tools and auditors will use these guidelines to audit, score, and report back on recommendations to improve your website.

Common accessibility mistakes that you might be making

I’ve rounded up the most common accessibility mistakes that I see while auditing websites, and explain why I think they occur, and how to fix them:

Colour Contrast

The current colour contrast ratio to pass accessibility standards is 4:5:1 for normal text and 3:1 for large text. This is to ensure that background and foreground colours maintain readability when used together.

Insufficient contrast ratio is the most common accessibility culprit I’ve come across when reviewing websites.

When it usually happens:

1. Choosing colours from a generated palette or inspiration board
2. Working with prebuilt themes that you selected based on the overall design
3. Matching to your logo

In all of these cases it’s likely due to colour contrast checking not being done for the initial source material.

Generated palettes don’t take accessibility into consideration, as they’re meant to be used as design inspiration across multiple mediums and not necessarily in a use-case that requires following accessibility standards. 

Even palettes that are touted for web or graphic design use can fail contrast checking. This can happen when these colours are sourced from images or generators without then having their contrast checked before use.

If you are selecting pre-built WordPress or Squarespace templates, there is a chance that the designer or developer didn’t check color contrast when creating the demo version, or supplying built-in palettes. You shouldn’t assume that because you purchased a license to use an asset from a third-party, it will pass accessibility tests by default.

Logos are exempt from accessibility standards as a functional image, but that doesn’t mean you can continue to use colours that don’t pass contrast ratios in other areas of your website.

How to fix colour contrast:

First, you need to test the colours you want to use and see what contrast ratio they share. Depending on the results, you may learn you can use these colours in some elements but not others, or that you need to switch them out entirely.

You’ll want to enter ‘color contrast checker’ into your search engine and select any online tool that specifies WCAG 2.0 Level AA compliance. While there is also a Level AAA, this isn’t the version that is typically required as the current standard.

Before my last website relaunch, I used Accessible Web’s Color Contrast Checker which determined that my primary brand colour didn’t comply when used with most other colour combinations.

This meant that I had to remove (orange) from a lot of elements on my website and replace it with a colour that did pass contrast conformance. Then, I found an Alternate orange that complied slightly better, freeing me to use this “new” version of orange on what elements I could.

💡 Tip: Before you bin a colour altogether because of contrast scoring, try the same colour family but in different shades, tints, or tones. Try different combinations. If you notice that your desired colours pass for large text and not small text, consider increasing the overall font size on your website, or using it only for headings and not for paragraph text.

Font Selection and Size

When we check for colour contrast, we see that element types are broken down into Small Text, Large Text, and UI Components.

Without having this knowledge, you might select fonts and sizes based on feeling or how your exact character limit of text appears on the page in your particular browser/screen.

You may be drawn to a frilly script font that gives off a feeling of elegance or femininity, or you may want to continue using a funky display font you’ve found in Canva that you’ve used in other marketing or branding efforts.

By manipulating font size for your screen or layout, it may display differently on varied screen sizes, making text difficult to read or reflecting an Alternative layout than what you’ve prepared for.

Similarly, by choosing font styles simply because they look nice without considering their readability, you might be making your headlines completely illegible to a wide audience.

When it usually happens:

1. Relying on font style to align with design aesthetic
2. Changing font-size depending on amount of included copy (characters)

I think this is a really great example of having professional experience versus not. You don’t know what you don’t know, right? So, if you’re only considering design and not function, you’re likely to make this common accessibility mistake.

How to choose accessible fonts and sizes:

In the cases of small text, it means anything 14pt (18.5px) and smaller. Large text refers to 18pt (24px) and up. 

For general accessibility, a minimum font size of 12pt (16px) is recommended on body text. Personally, when I design websites, I use this standard as my smallest font size, and size up from there.

When selecting a font-family for your website, the most accessible-friendly are sans-serif system fonts like Arial, Verdana, or Helvetica. Which… doesn’t necessarily bring music to the ears of designers everywhere…

…but it is why we often see popular web fonts like Inter, Open Sans, or Roboto being used for body text as they are similar to these system fonts, being clean and clear to read.

💡 Tip: There are fonts that have been designed for dyslexia; OpenDyslexic and Dyslexie are worth considering for your audience. These fonts feature bold bottoms (tee-hee) and additional spacing between letters.

I think when leaning towards an accessible-friendly font it’s best to avoid certain styles altogether. I lean away from highly decorative fonts that are difficult to read like script and handwritten styles on the web, and I also stay mindful about testing all-capitalized font families.

It’s always best to research with your own content and design first and see where you need to remediate, as you shouldn’t compromise on accessibility in order to achieve an ideal look. 

For example, if you have a section of text that is long and you would prefer to have it appear the same length as an accompanying column of content, you should not decrease your font size to make your text fit.

1. These containers of text are going to display differently depending on the device and viewport each user is on (think desktop screens vs tablet screens vs mobile screens)
2. The text becomes difficult to read at the smaller text size and may no longer pass accessibility standards

Instead, you should either be making considerations to your site content width, gutters, padding, and more design-based changes that align with the content you have, or, editing and trimming down your content text. Maybe rewritten some of it can be featured ideally in its column, maybe the extra isn’t needed or better off included somewhere else on the page.

Heading Hierarchy

Headings are important in design as they capture the reader’s attention, but there are additional functions that heading elements serve when included on websites.

In accessibility tests, you may see this issue reported on your website: “heading elements are not in a sequentially-descending order”.

When it usually happens:

1. Relying on the style of each heading type to set your font size
2. Built-in heading font sizes are too large or small for your desired design

Again, you don’t know what you don’t know. You might have inherited a visual editor that gives you the option to apply headlines whenever and wherever you like. The size of the H1 heading may feel perfect to use for every heading on the same page, but this is not the way.

How to fix heading hierarchy issues:

First thing is first, let’s agree that you only use one H1 tag per page. And after that, you have to use H2-H6 (at most), in sequential order. Them’s the rules.

So, your page or post title will be your H1 tag. It should be the first content element on the page for the most part, at the very least, it precedes any other heading tags.

When you’re ready to feature a new section of content on the page, you use an H2 tag for your next headline. A subheadline within that same scope of content deserves an H3, and as many as are needed before a new H2 arrives. You get the idea…

So what about when you want to style text in similar headlines without using the official headline tags?

CSS classes can be created that carry the same styles as each of your headings. In fact, a lot of prebuilt themes contain this feature so you may want to see if yours already has it built-in.

In these cases, the developer will create classes with labels: .h1, .h2, .h3, etc. that you guessed it – when applied to an element will assign the same style properties as H1, H2, and H3 tags.

💡 Tip: In HTML you can use <span> tags around selected content to assign a class or ID without affecting its formatting type.

Image Alt Text

Without adding alternative text to the imagery we post online, the content of our graphics are lost to those who have visual impairments or rely on screen readers and other assistive technology.

When it usually happens:

1. You may not know what Alt text is
2. You don’t know how or where to apply Alt text on your web page
3. Not understanding what to include as Alt text content

WHO reported in 2023 that at least 2.2 billion people have a vision impairment, and providing Alt text on the web has become a standard.

How to add Alt text to your images:

Now, this won’t be a magical blanket fix for everyone, because how you add Alt text to your images will depend on how your website is built or what platform it’s hosted on.

If you’re on WordPress:

You can add Alt text to each file in your Media Library by clicking to view the Attachment Details pop-up.

In some theme cases, the theme or plugin you’re using has an option to append Alt text when you’re selecting or adding your image to the page. Check for advanced settings or drop-down options in these elements.

If you’re on Squarespace:

When you add an image element to the page, its settings pop-up window will include a field for Alt text. Also:

• Descriptions appended to Gallery images will automatically become Alt text.
• Editing the metadata of Product images will include a field for Alt text.

• The Site Title acts as the Alt text for the Logo.
• If no Alt text is applied, an image’s filename will become Alt text.

💡 Tip: Don’t upload your images without editing their filenames. If you were to upload an image with a filename of IMG0413.JPG and did not apply an Alt tag when using the image, the Alt tag would be read to users as ‘IMG0413.JPG’. Use keywords that pertain to your image instead.

If you’re using something else:

Alt text isn’t something that anyone should be ignoring at this point, so I am inclined to hope that the platform or framework you’re using has made this configuration available too.

Head on over to the support or documentation area of your provider’s website and search ‘Alt text’ or ‘Alt tags’, or even ‘Alt accessibility’ to see what comes up. Chances are, there is a brief how-to walkthrough or video that will show you where to find this information on your website.

(If you’re still not sure where to find your Alt text fields on your website, send me an email and I’ll try to help find the solution!)

Fix common accessibility mistakes

Revisiting my earlier points, it can feel more obvious what to remediate for accessibility in our day-to-day lives. 

Restaurant owners may opt for a digital menu so that they can edit it more often, or because it saves paper, but there is also an accessibility benefit. Guests can enlarge text on their phones as needed, or use the assistive technology they already have installed to read the menu.

Elevators and ramps are included to make spaces more accessible to those who can’t utilize stairs.

And while governed organizations have to follow accessibility laws and regulations, many others voluntarily implement similar assistive technologies or services to ensure accessibility to all of their customers.

But accessibility doesn’t stop in our day-to-day lives, it spills out into our online lives as well. Our websites need to be accessible to everyone, equally.

Want to learn more about web accessibility?

If you found my article helpful and want to read more, I use the accessibility category to filter all posts with this content. You can also subscribe to my newsletter, where I’ll publish links to any new accessibility articles.

If digging deeper is more your thing, do I have the links for you!:

• Introduction to Web Accessibility by W3C
• Training and Advocating Resources (W3C)
• Easy Checks (Draft) – A First Review of Web Accessibility (W3C)
• Overlay Fact Sheet
• Accessibility documentation by Mozilla
• Core learning modules for accessibility on the web (Mozilla)
• Canadian Standard on Web Accessibility (Government of Canada)
• Introduction to Web Accessibility by WebAIM
• Web Content Accessibility Guide

Thanks so much for taking the time to read this and understanding the importance of getting into the habit of fixing our common accessibility mistakes!

Is… is this where we “high-five”? It sure is.