4 Actionable Tips on WordPress Accessibility

What is web accessibility exactly? Well, it is certainly more than a catchphrase that will make you sound smart attending WordCamps! As a matter of fact, WordPress sites that don’t comply with the accessibility rules are the perfect target for lawsuits and lower conversion rates.

However, having an accessible WordPress website means much more than avoiding the hands of justice! It’s about providing impeccable UX for everyone that wants to use the web, moreover, respect equality.

The question is, does your WordPress site provide that to its users? Are you sure that the build is functional for everyone? With that being said, let’s make sure that everything on your site is on point with our four steps for a successful WordPress accessibility audit.

The Web Content Accessibility Guidelines

To begin with, you need to refresh your knowledge with the latest WCAG.

Understand what each category guideline is about and how web accessibility guidelines can influence your WordPress site from your code to your content. The most important content accessibility guidelines include:

• Techniques to make your website more scannable and readable
• Correct formatting of images and alt text
• Proper inclusion of videos in your pages and content
• Right site architecture and web navigation

If you manage to get your WordPress site completely compliant with W3’s WCAG, then you’ll be prepared to conquer your target market and much more.

There are 3 levels of WordPress accessibility:

1. A (basic)
2. AA (the global accessibility standard)
3. AAA (for dedicated software)

Most of the EU and countries such as the USA, Brazil, or Canada use the accessibility standard WCAG AA or equal for government websites. Some countries require compliance with these guidelines for commercial websites, and the WordPress accessibility team uses these guidelines to enhance the core.

WCAG also provides techniques for implementing its principles. Each accessibility obstacle has solutions, and you can pick the solution that best suits your WordPress site.

When implementing WCAG techniques, you need to use common sense and choose the one(s) that work well with your site. Through careful reading and understanding of the guidelines, you’ll see exactly where your WordPress site is in terms of accessibility.

1. Markup Validation

Don’t be alarmed if you’re not a programmer! Markup validation nowadays is an easy process with W3C’s Markup Validation tool.

Most Web documents are scripted using markup languages, namely HTML or XHTML. These languages are established by technical specifications, which as a rule contain a machine-readable language. This is called validation, and this is what the Markup Validator does.

When running the validator, there are multiple configurations and settings that can be modified, but in most cases, the default settings are enough.

One option you may want to enable is “Show Source” which will print out the HTML of the page. Thus making it easier for you to discover exactly where the problems have appeared on your pages.

The W3C Validator will also uncover web accessibility issues, for example, imagery that is without alt text or usage of duplicate IDs in the content.

Markup validation ensures that the HTML of web content is correct, and utilized in a compliant way. It is vital that HTML is neat and properly formatted for several important reasons:

• Assistive technologies depend on the HTML to properly interpret content.
• Clean markup is a sign of quality work, and validating HTML should be something developers do consistently.
• Clean markup ensures that barriers are not introduced inadvertently because of broken code.

As the authority in content accessibility, the markup validation tool that W3C provides is the best first step your accessibility audit. Markup validation should be performed early on in the web accessibility audit.

2. Examining the Screen Reader Compatibility

Screen reading technology is the number one technology that people with vision impairment use to search and navigate online. It is a type of software that provides the visually impaired to interact with your WordPress site both on mobile and desktop devices.

A screen reader can perform two main functions:

• It can provide access to the content via voice output, displaying Braille or magnification.
• It can replace mouse and web interactions with a powerful set of keyboard functionalities and touch motions on desktop or mobile devices.

To help visually-impaired to navigate your WordPress site, you must ensure that the site itself perfectly readable when a screen reader accesses it.

Testing the screen reader compatibility is extremely important, especially for elements that cannot be tested or read with any other tool. These elements incorporate flash objects, interactive elements, and additional plugin and documents.

Common screen reading tools include:

• JAWS – used by approximately 65% of blind users.
• Voiceover – free on a Mac or iPhone/iPad.
• NVDA – free for Windows.
• Talkback – free for Android

You should also test your keyboard by using keystrokes. In most cases, the Tab key is used for moving forwards, Shift + Tab for moving backwards, and Enter for clicking a button.

Try these functions out and navigate each of your pages without using the mouse. This will determine the web accessibility of your WordPress site for motion and for the visually impaired person that is unable to use the mouse.

The following links will provide you with additional information on keyboard shortcuts for individual browsers and setups:

• Macintosh: Enabling keyboard navigation in Mac OS X Web browsers
• Firefox Keyboard Shortcuts
• Google Chrome
• Internet Explorer Keyboard Shortcut
• Safari Shortcuts

3. Audit Your Content

Reviewing your content for WordPress accessibility is always beneficial for improving the UX of your site. When auditing your content, you need to pay attention to the following aspects.

• Is the main navigation tabbable?
• Is the off-screen content disabled when you shrink and expand the screen?
• Do you use headings like you are supposed to use them?
• Are your videos captioned and do they have subtitles?
• Do the colors on your site have enough contrast?
• Have you included alt text on all of your images?

Auditing your content for web accessibility standards will help you recognize what works and what doesn’t, and where there’s still room for improvement to make your content as accessible as possible.

To find more web accessibility issues with your WordPress site, perform the following simulations:

• Disable CSS: Open the developer tools section of your browser to disable CSS and carefully examine the reading order to validate that there’s no information hidden through color, shapes, or location.
• Disable Images: Again, use the developer tool on your browser to disable images and then check if all the images have alt text.
• Low Vision Check: Google Chrome has extensions such as SEE, and ChromeLens that can simulate several vision impairments. By using these simulators, you can locate important contrasts between colored text, backgrounds, and surrounding text. Also, you’ll be able to verify that there is no information conveyed through color alone.

4. Conduct User Testing

If there’s a possibility, recruit a group of participants with motion and visual impairments for the purpose of determining what barriers they would face when navigating your WordPress website. Let the participants use screen readers, magnifiers, and other tools and/or technology that could help them use the web.

When you let the users tell you about the problems that they encounter on your site when they navigate with a keyboard or a screen reader, the testing results could inspire big improvements in terms of WordPress accessibility.

Examine if each dropdown menu on your site is accessible to them and if the interactive elements work when needed or not. Ensure that your content headings don’t make navigation tedious for the participants.

There are lots of considerations when it comes to the accessibility of your WordPress site, and you can’t uncover each obstacle without user testing, it’s as simple as that.

Bonus: Actionable Tips for Better WordPress Accessibility

There are plenty of ways to make your WordPress site more accessible for every user. If you understand the users and their needs, after you’ve done your accessibility audit and analysis, you’ll implement everything that you need to make your site usable for everyone, including:

Use Colors with Consideration

There are lots of web users that are not able to recognize color differences, or they don’t see colors as a healthy eye would. This is why it’s important to avoid using only colors to communicate information. If your linked text is blue, you should also underline it so users that can’t perceive color differences recognize that there’s a link in that sentence.

The W3C’s Content Accessibility Guidelines also require you to use proper contrast between colors. To comply with the guidelines at Level AA, the image text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text). To meet the guidelines at the higher Level AAA, the contrast ratio must be at least 7:1 (or 4.5:1 for large text).

There are also free tools that make it easy to check color combinations for WCAG compliance:

• Colour Contrast Analyser
• WebAIM Color Contrast Checker

Use Descriptive Links

The goal of descriptive links is to provide users with the right context of where the link takes them. With a screen reader, users can navigate from link to link and this is why providing links that make sense to them is of vital importance. In most cases, the link text is already in your content, you just need to highlight it. Try to avoid words such as “click here” or “here” because it can be confusing for people that use a screen reader. Dive into the WCAG descriptive link guidelines for more info on this.

Be Careful with Fonts

When it comes to font accessibility, keep in mind:

• Use real text instead of text within graphics
• Use simple, easily-readable fonts
• Have a limited number of fonts
• Make sure that you have enough contrast between the text and the background
• Stay away from small font sizes
• Use relative units for font size
• Limit the use of font alterations such as bold, italics, and ALL CAPITAL LETTERS
• Don’t rely only on the font appearance to convey the meaning of your content
• Don’t use blinking or moving text

Use Accurate Alt Text

It’s not only vital to use alt text for images, but it also must be accurate and as good as your content for regular users. Even if you don’t want to include every detail about the image, it’s important to include the most important information about the image, and avoid imagery that is too decorative and that can’t be depicted properly in the alt text.

Wrapping It Up

To conclude, using the internet for most people is a real breeze, but not everyone can access it without the help of screen readers and voice technology. This is why it’s crucial to ensure the best experience for everyone who visits your WordPress site, through careful auditing that will make the site compliant with the W3C’s and WordPress accessibility guidelines. Equal access for all is the only web access!