We’re very big on training our clients thoroughly so they feel confident put their website to work, making updates and changes when they need to and just generally taking advantage of all the great options we provide.

There are lots of things we do at both the code and design levels as web designers, but there are also plenty of things you can do as the proud owner of a website. And as we’ve previously discussed, we want to encourage you to make updates and add content to your website whenever you need to. So we’ve put together this guide to help you keep your website beautiful and accessible while you take advantage of all the great options we’ve built for you.

1. Colour contrast and background images

1. Contrast
2. Type size
3. Alt text
4. Buttons vs links
5. Accessibility overlay plugins

1. Contrast

This is one of the most important parts of visual accessibility for your website, and it’s one of the simplest to check and adjust. We use a tool called ContrastChecker.com, and while it may not look super slick, it’s an invaluable resource, and YOU can use it too. If at some point you want change up a background colour (sticking to you brand palette of course. For instance we often use dark text on a cream background, but occasionally light to use cream type on our brand green to mix it up) use Contrast Checker to make sure you’re selecting a text colour that will show up well on that background.

Before you even start entering your new content or making your change, just enter the hex code for your foreground colour (text) and background colour, and it’ll tell you whether the combo passes web accessibility standards. It’s a great habit to get into.

Thinking about contrast and general readability of text also applies when you’re working with background images. Text on images can be a very effectively element on our site, think the hero section at the top of many homepages. One of the changes you might want to make in the future is swapping out the image in your hero. We’ll usually add a semi-transparent overlay to the hero to allow for proper contrast with text, but you still need to take into account how busy your new photo is, if there are areas of light or dark that make some of your text less legible, and if you need to increase the opacity of the overlay (which you can do right in WordPress, ask us how!) or increase the size of the text. Which leads us to…

2. Type Size

This is connected to the above tip, as you’ll see if you test out Contrast Checker. Not only does it tell you whether the contrast of colours is high enough, it tells you at what size of type the contrast becomes high enough. This means that colour combos that don’t work for body text could still work as an H2 or H3 heading. As with most things, form follows function, but it feels extra important when we’re talking about text, because if contrast is too low to read, the text has zero function at all. I see this very often with things like wedding photographers websites. I get that tan on cream looks elegant, and a tiny font looks classy and understated, but none of it matters if potential clients cannot read what you’re offering.

Font size 16px is considered the standard web equivalent of 12pt printed text, so we don’t go lower than that.

3. Alt text! All the time!

This in another one to develop a strong habit around right from the get-go. Otherwise it’s a pain to go back through your whole media library. Every time you upload a new image, go into your media library and add your alt text right away, before you add it to your page or post. It’s non-negotiable, especially if your images are anything other that purely decorative. No one if going to buy your product if they don’t know what it looks like because their screen reader can’t describe it to them.

Which brings us to an important addendum to Tip #3, which is to focus your alt text on the information that’s most important in the image, rather than purely on painting a picture. For example, I could post a photo and write that it features a stunning redhead wearing a yellow shirt holding a magnificent black cat with big yellow eyes and an adorable collar with polka dots. It paints a picture, sure. But what’s more important than the colour of the hair or the shirt or the cat, is the fact that the cat has claws bared and is attempting to bite the stunning redhead, who is holding on for dear life with an expression of terror on her face. That one actually tells you what’s going on in the photo, instead of not-so-relevant visual details of the photo.

4. Button or Link?

A simple rule to follow is this: buttons are for taking action and links are for navigating somewhere. Anything you’d refer to as a call to action—sign up for our newsletter, download a template, send a contact form—should be a button. Anything whose primary job is to take you somewhere else—the main menu, mention of a previous blog post or link to an external website (both of which we’ve done above) should be a link. In WordPress, when you choose a block like a button or you use the text editor to add a link, is creates code that tags that element on your page. Screen readers read those tags and tell the user what they are, and consistent use of the correct element helps the user understand what’s going to happen when they click something. This is also why it’s important to label your buttons clearly with what they do, and when you’re creating links, highlight relevant text for the screen reader to communicate. Only adding your link to the word “here” at the end of a sentence doesn’t give any useful information.

5. Accessibility overlays

This one is easy — don’t use them! This sounds counter-intuitive, but the reality is that these plugins just mask accessibility issues, and get in the way of assistive technologies. This is one of the areas that we as developers and you as the website owner can work together on. By using proper text units in the code—rems or ems instead of pixels—we’re getting out of the way of the accessibility features built into computer settings that allow users to set their own type size, typeface and zoom factor. By ensuring every new piece of content you add meets colour contrast standards, you don’t need a dark-mode overlay for users to get an accessible reading experience.

Keeping your content and your site accessible is so important to making sure everyone who reads it has a great experience, and with a few new tools and some good habits, you have the power to make it happen. And as always, just drop us a line if you’ve got questions! We’re always happy to chat.