How to Make Your WordPress Website ADA Compliant

WordPress Websites and Accessibility

WordPress sites (and many other website platforms) have several accessibility features built-in that many people are not using (in addition to a variety of other third-party accessibility plugins).

Image Alt Text and Description

For example, to make an image accessible it is necessary to add the alt tags when uploading the image. Alt-text is read aloud to your potential clients by screen reader software and it is indexed by search engines. Too often people either do not add any alt text, or they stuff it with keywords that do not apply to the image creating accessibility issues and a poor user experience for those without visual impairments.

In WordPress, when you upload an image, the dialog box has a place to enter your alt text and image description. The alt text is the most important. Make it a few words that describe what is actually in the image. In the example above, this image is the main graphic for a blog post titled “How To Write Great Ad Copy”, which is also the point of the image. I would not put something like “Best website designer in Vancouver WA” as my image alt text. I see this happening often. This is keyword stuffing and it not only hurts the usability of your site, but it also could jeopardize your rankings! 

Video Captions

Captioning all your videos is a huge step in making your website accessible. Did you know that over 80% of all videos watched have the sound muted? Captioning your videos makes them accessible for hearing impaired people, and it also allows people that want the information, but do not want the sound to watch your videos. I have all my website videos captioned.

The best video caption tool I have ever used is called Zubtitle. They use Artificial Intelligence (AI) to listen to your video and create captions. You can edit the captions as well as customize how they are displayed. When you finalize the video, it downloads with the captions on the video. Then you can upload it to YouTube (or any video platform) and embed it on your website.  Another cool thing is that Zubtitle also creates a text file of the captions which I use for my YouTube video description and potentially a blog post.

Text Accessibility

Most modern WordPress themes can set your text sizes sitewide. If you set them as a fixed size, like points (pt) or pixels (px) they do not scale well when a user wants to upsize your font. This makes your website less accessible for low-vision people who often set their computers to display fonts at 150% or greater. Font sizes should be set in EM which makes them relative to a set size or REM which is relative to a root size. For example, if you have your body text set to 16px then 1 em = 16px and .5em = 8px. REM works the same way. By using relative text sizes they will scale well.  It is suggested that the website body font size is at least 16px.

Color Contrast

Contrast is super important for website accessibility, especially between the background and your text. Do not use a white background with light gray text. This makes it very hard to read. Make sure to consider how folks with visual impairments may view your web design.

Worldwide there are approximately 300 million color blind people.  Some color combinations to stay away from on a website are:

•  Red on black – many people cannot see red. When they look at something with red in it, it appears in shades of gray. The redder it is, the blacker it looks. So red text looks black, and purple might look dark gray.
•  Pastels – some people cannot distinguish pastel colors. If you are using pastels, do not use them together or have light text on a pastel graphic.

If you know the hex number of your colors, here is a tool to check your contrast.

Headings

Headings are how web pages are organized. They are helpful for Search Engine Optimization (SEO) and assistive technology uses them to move through the web page. Every web page gets one H1 heading – this is the overall topic of the page and is found at the top only.

Next, there will be an H2 heading which will be a subheading of the H1. Then you can have several H3 headings. They are all subheadings of the H2 heading. You can jump back up to another H2 if necessary. If you do there will be more H3 headings under that. This organization is very similar to the way we learned English outlines in school.

Organizing your content in this way will allow assistive technology users to easily navigate your page.  Here are some best practices rules for headings:

•  Use headings to provide structure to your page!
•  Do not use styles to give the appearance of headings, without using the proper header tag. For example, do not use color, underline, bold or italics, etc. to emphasize text importance.
•  Do not skip heading levels. Proper header levels ascend from H1-H6.
•  Headings should not be used to emphasize the importance of content; instead, use bold text. 

Links

Links should be visually different from the rest of your text. Many people accomplish this with color changes, but that should not be the only way to distinguish a link. Some people will not see the color difference and might skip links in your content as a result. It is universally understood that underlining and bolding means there is a link for that text.

It is confusing to users when text that is NOT linked is underlined. Adhere to the standards and use underlines on links only.

Another thing to consider is the actual link text that is used. This is called anchor text. Be sure it is descriptive enough to allow someone to know why they are clicking the link. Do not use generic text like learn more, click here, etc.