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.
1. Using Headers for Their Visual Apperance
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:
- Use HTML subheadings to break your content into more digestible “chunks.”
- Make sure each subheading concisely explains the content. For example, on this page, we’re using subheadings for each WordPress habit that we’re discussing (you’re reading this under the “Using Headers for their Visual Appearance" subheading).
- Use CSS (Cascading Style Sheets) to control the visual appearance of text. This WordPress support page explains how to use custom CSS — you can also find plenty of WordPress extensions to help you control your text’s visual appearance without using the wrong HTML.
Avoid visual-only subheadings. This is when you style text to appear as a subheading without using HTML. Learn more about visual headings.
2. Trusting a Theme to Pick Accessible Colors
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.
3. Creating Lists Without Proper HTML Markup
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:
- <ul> means “unordered list.” This list, for example, is an unordered list.
- <ol> means “ordered lists.” This is a list that needs to appear in a certain order to make sense (for example, a list of steps in a recipe).
- <dl> means “description list.” This isn’t as common as the other types of list, but it groups terms (with the <dt> tag) with their corresponding descriptions (with a <dd> tag).
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
4. Using Default Image Alt Text, Regardless of Context
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."
- That text might be appropriate for the “Campus Tour" page, since it briefly explains the context of the image.
- If the same photo is used on a news release describing the architecture of the building, it might not get the same point across. Better alt text might be: “Gothic architecture of the University Library Building.”
- If the same photo is used in a blog about recently completed renovations, the alt text might read: “the University Library Building prior to re-opening.”
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.
Building Accessible Websites in WordPress: Start Somewhere
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.
