At this month’s full-day Online WordPress Accessibility Workshop hosted by Knowbility, Robert Jolly shared his experience and knowledge as he discussed the current status of WordPress accessibility and explained the accessibility features built-in to the popular content management system.
In addition, Jolly offered practical advice and tips to content writers, designers, and developers for choosing accessible themes and plugins as well as crafting accessible content and testing sites for accessibility.
Though I’ve been involved with WordPress and accessibility for more than a dozen years, I learned several new things that will help me with my work projects. Here are my notes.
Online WordPress Accessibility Workshop
- WordPress accessibility issues are similar issues we see across all sites. Example: plugins or themes that break keyboard support in menus, incorrectly coded links/buttons.
- Other common WordPress accessibility issues: low color contrast (both text & non-text, think about text overlaid on images), alternative text issues (missing or not descriptive), link text issues (does text make sense out of context?)
- The Web Accessibility Initiative (WAI) at the World Wide Web Consortium (W3C) Perspectives videos are short one- to two-minute videos that show the impact of accessibility and benefits for everyone
- Did you know some people use the browser reader mode to read online content? Here’s how to turn on Reader Mode on your browser and read without distraction
- Gutenberg, the new Block Editor in WordPress, is problematic for people who need accessibility support in the authoring interface. Until most of the accessibility issues are fixed, Gutenberg will remain problematic. You can use the Classic Editor plugin (which retains the previous text editor) for authoring accessible content.
- The Access Monitor plugin runs accessibility tests on your WordPress site, using the Tenon.io web accessibility service. Note: the Access Monitor plugin isn’t compatible with the WordPress Block Editor (Jolly wasn’t able to get it to work during the workshop).
- I shared this resource in the workshop chat: my friend Claire Brotherton wrote an excellent post on choosing an accessible WordPress theme
- One of the biggest accessibility issues with WordPress themes and plugins: no visible focus. Why? Because the WordPress theme/plugin developer removed the focus style.
- There are over 100 accessibility-ready themes in the WordPress repository. Note: premium plugins may be accessible, but there is no third-party organization that review them for accessibility.
- Need to change alternative text for an image used on multiple pages or posts? Edit the alternative text for image on the post or page, avoid changing alternative text of image in WordPress Media Library.
- Do you know about the screen-reader-text CSS class for WordPress? It’s used to visually hide text that is primarily needed for screen readers. users.
- Craft meaningful, unique text for links. Add more context for your “Read more…” links. Joe Dolson’s WP Accessibility plugin makes that straightforward.
- Firefox, Safari, Chrome, and Edge all have inspector tools that allow you to review code, make non-destructive changes, evaluate accessibility, etc.
- Even though you may be using an accessibility-ready WordPress theme, if you add plugins to your site, you may be introducing inaccessible code
- Headings in your HTML are used for structure, not for visual effect
- Wondering how to make an accessible WordPress theme? The WordPress Theme Review team has helpful information on creating an accessibility-ready theme, what’s required, recommendations, and resources.
- Tips for authoring content: Write plain language, front-load important details, use active voice, use familiar language, technical terms can be confusing. If you use technical terms, explain them on first use.
Do you know why we should avoid changing the alt text in the library – this would seem quicker than changing it on individual pages if the image was used multiple times, but I imagine there’s a reason for the advice?
It’s true that the classic editor gets rid of the Gutenberg problem, but this only applies to those of us with self-hosted sites or who have paid hosted plans that allow plugins. Of course there are good reasons for doing both of these things, but anyone just starting out or using a basic hosted plan has nowhere to go and no way of fixing the issue.I really think WordPress could have shown more commitment to accessibility than to enforce this change upon all users before a reasonable work-around was available for all customers.
This was an interesting list and I learned some new things, so thank you for sharing your notes.
Hi Kirsty,
Thank you for your comment. Alternative text for an image depends on context: how the image is being used on a page. The alternative text for an image might be different on one page than when the image is used on another page. If you change the alternative text for the image in the Media Library, it may not apply to the image when it’s used across multiple pages on the website.
Agree with you on the initial release of Gutenberg and its lack of accessibility. It was apparent to many people in the WordPress community months before the release that the release was being pushed out with no consideration for accessibility.
Glad you found my notes useful, Kirsty.