Your website accessibility checklist
Your website is one of the best tools you have for helping new clients and referral sources find you and gain trust in your service. But it only works if the people you’re trying to learn about you can actually access your content.
What kinds of accessibility barriers might someone face on my website?
This list is in no way inclusive, but it’s a start to help you consider all the various ways someone might interact with your website, and what challenges they could face. For example:
People with visual impairments may be accessing your site using a screen reader, and require specific information to be built into the back end that helps the screen reader translate your website…
People with motor skill impairments may be trying to click a button on your site, and will struggle if the target they need to tap is too small…
People with auditory impairments may be watching a video on your website, and require captions in order to know what is being said…
People with any degree of color blindness may be visiting your site, and can’t see certain areas of text because it doesn’t have enough contrast with the background…
People with cognitive differences may be trying to read your website and could have a hard time processing long sections of text that aren’t visually broken up…
People with neurological impairments or epilepsy might need to leave a website that has quick motion or blinking effects which can’t be turned off…
The list goes on and on. Luckily, there are official laws and guidelines which dictate certain accessibility standards that all website need to make an effort to try to uphold. But official laws aside, the most important focus is to create a website that everyone can use and understand with the fewest barriers possible.
This sounds like a lot. Where do I even begin?
It’s true - this is a lot. And for good reason! Accessibility fundamentals cover a lot of bases in order to serve a lot of people.
If you’re working with a professional to build your website, ideally they will already be aware of these standards and will have built your website accordingly. If you aren’t sure - just ask! (If they don’t know what you’re talking about or aren’t willing to make the necessary changes… it might be time to consider a new provider. ;) )
If you’ve built your own website yourself, it can indeed be daunting to follow all of the guidelines set forth by the W3C. Depending on the platform your website is built on, it’s likely you don’t even have access to all of those pieces. Not to worry - high quality, reputable platforms will have many of these accessibility standards built in as default. However, there are a few things that are relatively easy for anyone to update, so I suggest you start with checking these things:
Check your color contrast
Dark text over a dark background or light text over a light background won’t have enough contrast to be seen by people with color blindness or low-contrast vision. I see this happen a lot with orange text on a white background or white text on an orange button. Yellow, Light/bright green and light blue are also common culprits. The current aesthetic trend of muted neutrals is very beautiful and calming, but also easily falls prey to low color contrast.
For non-techy people, I love this color contrast validator. You simply paste in your website’s URL, and it will tell you if any contrast errors exist. Just keep in mind, if you have a background image behind text, the validator doesn’t see that image. So sometimes it says you have white text on a white background even when that isn’t true.
If you do detect contrast errors, you’ll need to adjust one of the colors lighter or darker until you achieve a color contrast of at least 4.5:1. I love coolors.co for checking and adjusting colors to find proper contrast.
If you’re in doubt and don’t feel like checking all of that, just trust me on this:
If you have an orange or tan button with white text, change the text to black.
If you have yellow text anywhere on a white background (or vice versa) just get rid of the yellow.
Add alt text to your photos
Alt text (short for “alternate” text) is a way to describe what is in a photo. It’s used in several different ways - by search engines to understand the content of your page; by screen readers to describe the image to someone who can’t see it; and displayed as text if and when the image won’t load for any reason.
For our purposes here we are focusing on alt text and its use for screen readers, the but know that well-written alt text will also benefit your SEO and anyone who is perusing your site without the benefit of images (it happens).
So, where do you add it and what should it say?
Where you add it really depends on the platform you’re using. Most modern builders will have a spot for “alt text” which is fairly obvious any time you’re adding or editing a photo. If you are working straight in the html… well… then you probably know enough that you don’t need me to tell you this… but you will just add the attribute alt=”description here” to any <img> tag.
As far as content, your alt tag should simply describe your image in a few words. For example, some alt text for your headshot might be “Rachel Taybor, therapist in Springfield OH”. Or alt text for a photo of a family eating might be “Family with two young children laughing and eating together”. (In that first example, including the location keyword will give you a bit of extra SEO juice but isn’t entirely necessary.)
Visually break up your text
This one is something I talk about all the time, usually outside the context of web accessibility. Because really, it’s just a nicer way to present a lot of text to anyone. For people with reading or cognitive differences, staring down a huge wall of text can be close to impossible. But even for people with no reading disability, we tend to prefer shorter chunks of text when reading online.
Make your text easy to scan by breaking it up with headlines. It also helps to break text into really short paragraphs (usually only two sentences; sometimes three if they are short) and also break it up visually with images.
Reach out for help
Trust me, I completely understand if this all seems very overwhelming. I, too, was overwhelmed when I first started diving into all the implications of web accessibility standards. (And I’ve barely even scratched the surface here.)
But the most important thing to remember here is that well-planned, well-executed websites can be created to be accessible to all people. And, doing your best to ensure your website is available to anyone who it might help is simply the right thing to do.
If you’d like a professional with years of experience analyzing websites for accessibility, don’t hesitate to reach out to me! I’d be happy to look your site over for accessibility fixes and suggestions.
