This post contains affiliate links if you make a purchase from one of these links I will make a small commission at no extra cost to you.
One of the best parts of the internet is how it connects people from all over the world. And even with the W3C’s robust documentation of how to code accessible websites, 41% of government websites are not ADA accessible, and the stats are even bleaker for non-government websites.
We have standards for building accessibility ramps, doorway sizes, elevators… But on the web, where building in accessibility features is much easier and less costly, the standards are pitiful.
Why aren’t more website’s accessible:
The main challenge is that most people don’t think about website accessibility. There’s a lack of awareness. Even in local website designer Meetups and conferences, I would say less than half know what website accessibility is, and only a small fraction know how to build an accessible website. Accessiblity best practices aren’t very… accessible.
The other main problem is that there is a lot of tech jargon, which means “Local Business XYZ” isn’t going to have the tools they need to make their website accessible, and if they’re using WordPress or Squarespace, many of the theme/templates developers haven’t taken the time to code in accessibility features. If you’re overwhelmed with the information out there, I highly recommend checking out the Web Accessibility Initiatives “Easy Checks” guidelines.
The good news is, even if you don’t know how to code there are some simple things you can do that make your website’s a much better experience for people with disabilities.
Easy steps you can take to make your website more accessible, even if you can’t code:
Don’t add flashing or blinking content to your website
Thank goodness flashing banners are (mostly) a thing of the past. The 90’s were rough. At best flashing content is obnoxious and distracting, at worse it can give people headaches, dizziness, or worse.
Fun find, the “Arngren” website is still up and running, just in case you want a reminisce about old-school web design: http://www.arngren.net/
If you’ve jumped aboard the GIF train, make sure you’re not using GIFs that are flashing, or repeat too quickly/frequently.
Don’t Use Images of Text
Don’t add important text information to images. Screen readers can’t read the text on the images, the text isn’t scalable, and users can’t change the visual contrast of the text. This is a common problem for restaurant menus, which is especially perplexing because if you add your menu as an image on your website, it’s impossible to read on mobile devices.
Add Alt Text to your Images
What happens if someone can’t see an image, or an image doesn’t load properly? If you add alt tags, you’ll still be able to show what the image is supposed to be. In WordPress, it’s easy to add alt tags to your images. Simply upload your image the same way you normally would > Click the image, and you should see a panel to the right of the image > Type a description of the image where it says alt text.
Be descriptive in your alt text, for example in the screenshot of Mountain Sun’s website above I’ve written: “Mountain Sun’s Website on Mobile, The text is impossible to read because they have used images of text”
You should leave out words and phrases such as “Photo of…” “Icon of…”, screen readers and other accessibility tools will let the user know it is an image, so adding those terms will just make it redundant.
Google has a great breakdown of image use best practices here.
Be thoughtful in your alt text. If an image is purely decorative, such as background images, or decorative photos, set the alt text to “” (empty quotes) this will tell screen readers to skip this content.
Add Captions and Transcripts to Your Videos
If you’re using Facebook or YouTube, it’s easy to add captions to your videos. All of my videos have full captions, and if I’m adding the video to my website, I simply copy and paste the transcripts to my website. YouTube’s automatic subtitle generator is pretty accurate, I usually only have to go in and edit a few words and phrases here-and-there.
Use Headings in a Meaningful Way
If you’re writing a blog post or creating a page on your website, you should use header text to represent the different sections on your website. In order to make sure the content is logical for people using screen readers, make sure that you use headers and sub-headers in a logical order. It should look something like this:
- Heading Level 1 (h1)
- Heading Level 2 (h2)
- Heading Level 3 (h3)
- Heading Level 3 (h3)
- Heading Level 2 (h2)
- Heading Level 3 (h3)
- Heading Level 4 (h4)
- Heading Level 4 (h4)
- Heading Level 3 (h3)
- Heading Level 2 (h2)
- Heading Level 2 (h2)
For example in this post we have:
- H1: Website Accessibility – How you can make your website function for people of all abilities, even if you’re not a coder
- H2: Why aren’t more website’s accessible
- H2: Easy steps you can take to make your website more accessible, even if you can’t code
- H3: Don’t add flashing or blinking content to your website
- H3: Don’t use Images of Text
- H3: Add Alt Text to your Images
- H3: Add Captions and Transcripts to Your Videos
- H3: Use Headings in a Meaningful Way
- H2: Tips and Resources for WordPress Designers
- H3: Accessibility isn’t One-Size Fits All
- H3: Read About User Experiences for People with Disabilities
- Test Your Website for Accessibility
- H2: Further Reading
A few tips and rules:
- You should only use one Heading Level 1 or H1 per page or post
- Don’t skip a heading, for example, don’t put a H4 Heading right after a H2 Heading.
- I like to organize my headers in a way that explains exactly what the reader can expect in each section. If someone had to step away from their computer for an hour, I want them to be able to come back and find where they were.
- Don’t use headers simply for visual design. Make your headers describe the content related to them.
Tips and Resources for WordPress Designers
Accessibility isn’t One-Size Fits All
There’s no single solution that can make a website work for everyone. Some people do better with light text on a dark screen, others do better with a light background and low contrast text. Luckily the “One Click Accessibility” plugin makes it easy for you to cater to a wide range of needs.
Although this plugin can fill the gaps for a wide range of needs, it doesn’t help people with screen readers, or people who need alternative navigation methods. I recommend picking themes that say “Accessibility Ready”.
Explore Theme Forests Accessibility Ready WordPress Themes
Read About User Experiences for People with Disabilities
We all know we should test our websites on different devices, but we don’t usually test our websites for usability by people of different ability levels/needs. Before you start using some of the testing tools recommended by W3C, I recommend reading their collection of Real Stories of Web Users. Just as you would use personas or target audiences to help inform your website design strategy, keep each of these people in mind as you’re creating a website.
Test Your Website for Accessibility
There are a myriad of testing tools available, in-fact the W3C has a list of over 100 tools you can use to check your website. Before you overwhelm yourself, I recommend you go through their easy checklist. It goes through the most critical and easy fixes and breaks them down into easy to understand solutions.
https://www.w3.org/WAI/test-evaluate/preliminary/
Google also has a Chrome Plugin that helps you test your websites for accessibility.
Further Reading
UX Podcast – Accessibility for Designers: https://uxpodcast.com/accessibility-for-designers/
ADA and State Disability Laws: https://www.practicalecommerce.com/ADA-And-State-Disability-Laws
