Approximately one fifth of people have some sort of disability (source). While not all of these disabilities affect how people access content on the internet, we should be striving to make it as easy as possible for everyone to be access everything we’ve published – whether it’s content about our business or the ability to purchase products from us.
Last week I talked a bit about what accessibility means for websites and why it’s important. This week, I want to share with you five easy ways that you can make some of the content on your website more accessibility friendly.
In this post, I will make references to the Web Content Accessibility Guidelines (WCAG) 2.0, as this is one of the accepted standards to making web content more accessible to all people. In it, there are three levels of acceptance for websites to meet:
- Level A is the most basic of web accessibility features (these are required to be met by companies in Ontario who have 50 or more employees).
- Level AA looks at the biggest and most common barriers for disabled users (these will be required for companies in Ontario with 50 or more employees to meet by the year 2020).
- Level AAA takes care of the most complex accessibility issues.
1. Use High Contrasting Background and Font Colours
There was actually a really good article on the CBC at the beginning of November about how trends in design have made websites more difficult to read, specifically because lightweight fonts and a colour that doesn’t have much contrast from the background colour are being used. The WCAG 2.0 recommends that the ratio of body text to background colours should be at least 4.5:1 (except when text is very large-scale, used as a decorative part of the website, or is part of a logo) to meet level AA. If you’re trying to meet level AAA, they recommend that your contrast is at least 7:1.
This is absolutely something that should be looked at when you’re first working with a designer on your website, as colours can make a huge impact on your website. That said, it’s never too late to adjust this, and it’s typically a pretty easy fix. In fact, a lot of content management systems give you the ability to change it yourself. If not, your web designer should be able to adjust it very quickly through the website’s stylesheet.
One of my favourite tools to help with this is Jonathan Snook‘s Colour Contrast Check. You can easily input the colour of your background and the colour of your text, and it will show you what the contrast ratio is between the two colours.
2. Use Descriptive Alt Text For Images
Using alt text for images has long been recommended for SEO purposes, as it can help you include keywords to help improve your search results. Other people suggest that you use the alt text for images to provide text that could be used on social networks (Pinterest, I’m looking at you).
I would actually recommend that you use the alt text a little bit differently.
When someone is using a screen reader to navigate and view a website, the screen reader will read out the alt text to the user. For people who are blind, this is a great opportunity to give them more inclusion on your website – instead of including your web page’s title page, or keyword stuffed text, use alt text that is more descriptive about what the actual image is. For example, the featured image of this blog post would benefit from an alt tag that says, “desk with glasses, cup of coffee, laptop and plant.”
As a rule of thumb, you want your alt tags to accurately describe the image, be brief and not be redundant.
An exception to this rule is when the image is a decorative image or when the same content that would be used as the alt text is presented with the image (such as a caption), the alt tag should be left blank.
3. Use Descriptive Link Text
There was a period in time where the words “click here” were often used as link text within a paragraph. We’ve thankfully been moving away from that trend.
Instead, you should be using actual descriptive text of what people can expect to find on the page that you’re linking to. For example, if you are linking to a company’s financial statement for a specific year, you could use the text, “2015 Financial Statement for XYZ Company.” This tells the person on your website exactly what they would be navigating to, and is extremely useful for people who need to determine what the differences between links are by text alone (the link address may not always be helpful in this respect).
4. Don’t Use Images For Text
Screen readers can’t read text that is in an image. Unless you’re placing all of the text in the alt tag, this means that anyone who is dependant on the alt text would be completely missing out on what the image is saying. (An obvious exception for this rule would be when the image is a company’s logo.)
In addition, images cannot often be resized clearly so that the text is still sharp and readable if the person viewing your website may have some vision issues where they need text to be enlarged to read it.
5. Skip the Slideshow (or, if you need to use one, allow users to control when the slides change)
Slideshows are often liked by marketers and business owners because it gives a bit of that “wow” factor that they want. They are, however, not often as effective as they would like them to be. Oftentimes, people won’t stay on a webpage long enough to view more than the first couple of slides… and it does also lead to a lot of accessibility challenges.
Slideshows that animate automatically can cause confusion for some users with cognitive disabilities, or for users who have vision problems who need to zoom in on your website. If you do still want to go the route of a slideshow, most slideshows will provide you with the ability to add stop and pause buttons, next and previous buttons, and buttons to skip between the slides. This allows your website user to control how long they need to spend on a slide before moving on to the next one.