WordPress is the most popular content management system (CMS), used to power approximately 44% of all websites on the internet. While it’s fairly easy to use, it’s quite powerful — and, when used properly, it can create very accessible content.
Unfortunately, no CMS is perfectly accessible right out of the box. We’ve written about some of the best practices for creating WordPress sites that work for people with disabilities (including those that use assistive technologies to browse the web). Today, we’re drilling down on four common practices that make sites less accessible — and how you can fix them.
WordPress’s Block Editor (or Gutenberg) page builder lets creators quickly choose different types of content (“blocks") and assemble them in a visually pleasing way. The problem? The Block Editor interface is largely based on visual appearance — as is the case with most page builders — but it applies semantic HTML with every design choice.
Semantic HTML sends structural information about each element on a page, which helps web browsers and assistive technologies (AT) present those elements to the user. For example, if you create a list with HTML, web browsers will see the HTML markup that says “list,” and they can show a list to the user — and if the user changes their default typeface, the list will still be presented in a way that makes sense.
This is particularly important for AT users. Semantic HTML is essential if you’re using a screen reader, eye tracking system, or any other device that relies on that structural markup to show content to the end user.
Here’s where we get to the big issue with WordPress’s Block Editor: Many users see subheadings (H2, H3, and so on) as a simple way to control the appearance of text. But subheadings also organize content — they tell users something important about the text on the page, which helps people scan the content to find what they need.
To fix this issue, you simply need to follow a few best practices:
Avoid visual-only subheadings. This is when you style text to appear as a subheading without using HTML. Learn more about visual headings.
Low-contrast text is the most common digital accessibility barrier. It’s remarkably easy to fix: Use a tool like AudioEye’s Color Contrast Checker to test content against the Web Content Accessibility Guidelines (WCAG), the international standards for online accessibility.
Don’t assume that your WordPress theme follows those guidelines by default! Even if you picked an accessibility-friendly theme, you’re probably using some of your own images for the background; you may have changed the font color slightly, or you may have changed some colors to match your brand. Those little changes can certainly impact your audience.
Remember, poor color contrast affects all users. It can make text unreadable for people with low vision and color vision deficiencies, but it also creates issues for people who browse your website with bright ambient lighting — so get into the habit of checking your color-pairs before you publish.
As with subheadings, some WordPress users create lists manually instead of using the appropriate HTML elements. They might type an asterisk or a number at the beginning of a line to create the appearance of a list item, but this doesn’t send the signal “this is a list!” to web browsers or assistive technologies.
Proper HTML lists convey this information the right way:
A screen reader encountering a correctly marked-up list will announce it as a list and indicate the number of items, allowing the user to navigate efficiently. A manually created "list" is just read as a series of unrelated text lines, so it doesn’t have the same structure.
The fix is straightforward within the WordPress Block Editor: When you want to create a list, simply add a List block. WordPress will automatically apply the correct <ul> or <ol> and <li> tags. Make sure you use the right type of list for the content — only use ordered lists if the items need to appear in order.
Learn more: Tips for Making HTML Lists Accessible
WordPress’s Image Gallery allows authors to save default alternative text (alt text) for each uploaded image, which can be a time saver in certain circumstances. For example, if you’re operating an eStore, you might want to use the same alt text for a product image every time it appears on your site.
Just remember: Alt text is about content and context. The purpose of alt text is to provide a textual alternative for users who cannot see the image (such as screen reader users or users with images turned off). An effective description depends heavily on why the image is being used on that specific page.
For example, imagine that a university website uses a photo of its library building. The default alt text saved in WordPress might be "University Library Building."
Writing alt text should only take a few seconds, and it’s helpful for search engine optimization (SEO). Learn more about the best practices of writing alt text.
Digital accessibility doesn’t happen automatically — but it’s not an overwhelming burden, either. You can start building better habits today by understanding the basics of accessible design. Every change makes a difference, both in terms of digital compliance and (more importantly) in the experience you’re providing to your website’s visitors.
The Bureau of Internet Accessibility is here to help. Get started by downloading our free eBook: Developing the Accessibility Mindset. To see how your site stacks up against digital accessibility standards, get started with a free automated scan from AudioEye.