May 20th this year marked the 10th annual Global Accessibility Awareness day. The organization works to raise awareness about digital access and inclusion.
The internet is such a prominent feature of our everyday lives, we need to ensure it can be usable by as many people as possible.
There is a pervasive myth that designing for accessibility is just too hard. Pablo Stanley, CEO/ Cofounder of Accessible Blush Design, is quite clear – it’s not that hard.
“As designers, we have the power and responsibility to make sure that everyone has access to what we create regardless of ability, context, or situation.” - Pablo Stanley
To help dispel this myth, here are 5 simple steps you can do today to make sure your website is accessible by more people.
First let’s unpack the original 4 pillars of accessibility set out by w3, the World Wide Web Consortium.
Content should be
- Perceivable - Can people, see it, hear it (smell it, if Smell-O-Vision makes a comeback)
- Operable - The way we navigate and control the site should be easy and intuitive.
- Understandable - Not only do people need to see/ hear your content it also needs to be information that can be comprehended.
- Robust - Content should be built using robust enough systems that it can be reliably interpreted by a variety of users and assistive technologies.
Great, classics, agree – so how can you ensure these principles are in place on your site?
1. Check that your text is scalable, and has high enough contrast.
There are plenty of plugins you can install to set this up very easily. WPaccessibility.io is a popular one for WordPress. We are actually using it on this site right now, have a play, find the icon in the top left of this page.
But if you are using a different platform, just google your CMS + accessibility plugin and you will find something.
Want to go a bit more low-fi? then you can ensure your text to background contrast ratio is also high enough with a checker like the one from Webaim.
2. Start using Alternative Text for Images
This one seems straight forward, but many people don’t do it correctly. You may already be doing this for SEO reasons, but did you know the Alt Text is also displayed when the images aren’t loaded correctly, as well as being the way for text to speech/ other translation services can communicate to those with visual or certain cognitive disabilities.
The general rule when writing these descriptions is that you need to be presenting the same function and content as the image.
Example Alt Text for this image: A series of neon lights forming a rainbow heart
You can find a simple decision tree for knowing what kind of description you should use here.
3. Create audio descriptions and closed captions for visual content.
If your website has a lot of video, consider adding audio descriptions to the tracks. W3 has a great page outlining the best practices here. You can also begin to add closed caption subtitles to your video content. You can use a service like Rev or do it yourself with a platform like Amara.
4. Set up Aria Landmarks
This one sounds tricky, but if you use a plugin it’s really easy. This is all about making dynamic content accessible, by providing written attributes to elements like widgets, windows, live regions and so on. Honestly, sounds harder than it is, the team again at WPaccessibility include a great Aria Landmark tool.
5. Convert any PDF forms to easy to use online forms.
Who hasn’t viscerally responded to the horror of being asked to fill in a PDF form online. This tip is honestly going to make the web better for everyone. Take your existing PDF forms or documents and recreate them in a service Jotform or Typeform.
Given that the internet should be accessible to as many people as possible, we as digital designers and content creators have a responsibility to ensure the content we make is usable.
Especially now that these tools are readily available and easy to set up, there is no longer a financial or technical barrier to making sure the accessibility of your website is up to scratch.
Header Image by Jiroe on Unsplash
