A spectrum of colorful accessibility icons over the words Website Accessibility

Website Accessibility – How you can make your website function for people of all abilities, even if you’re not a coder

Making your website accessible to people with disabilities should be a high priority. Take the time to make these changes to your website to make the world a little more inclusive.

Katie Davidson

A UX designer with roots in digital marketing.

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. I have to admit that although I try to follow as many of the guidelines as possible, I sometimes struggle with some of the more nuanced aspects of web accessibility, but I do make sure that my clients’ websites follow the Web Accessibility Initiatives “Easy Checks” guidelines, and I provide them with video tutorials so they can add content on their own that is 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.

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/Screenshot of the Arngren website

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. Screenreaders 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 menu’s, which is especially perplexing because if you add your menu as an image on your website, it’s impossible to read on mobile devices.

Mountain Sun's Website on Mobile, The text is impossible to read because they have used images of text.

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 “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.

via GIPHY How to add alt text to images in WordPress

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.

YouTube's Subtitle and CC panel

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 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 explain 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.

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

Seventy Percent of Websites Are Breaking the Law on Accessibility – Here’s How and Why That Needs to Change: https://www.huffingtonpost.co.uk/damiano-la-rocca/website-accessibility_b_9931304.html

UX Planet – A Primer to Web Accessibility for Designers: https://uxplanet.org/a-primer-to-web-accessibility-for-designers-2c548448c612

Improving Accessibility of your WordPress Website: https://elementor.com/blog/wordpress-accessibility/

The Ultimate Guide to Accessibility on WordPress: https://premium.wpmudev.org/blog/making-wordpress-accessible/

More to explorer

How to pick the right hosting for your wordpress website image
Articles
Katie Davidson

How to pick the right hosting for your WordPress website

If you’re just getting started with WordPress, or if you’re looking for the right website hosting for your business right now – I’ve got the guide for you. This no-nonsense guide will tell you who the best website hosting options are, and who to avoid (you might be surprised!).

Read More »

Leave a Reply

Close Menu
Skip to content