Since its release in 2003, WordPress has evolved as a platform primarily for bloggers to the most used content management system for business websites. The breadth of businesses utilizing WordPress for their online engagement spans brands from Barnes and Noble, to Nike and the NBA. As the platform continues to grow its user base year over year, the choices developers make from theme selection to plug-ins can have significant impact on whether the sites published using WordPress meet accessibility guidelines for making websites usable for people with disabilities.
Developers and content creators opting to use WordPress can benefit and avoid potential pitfalls – such as legal action – by considering these elements with significant impact on user accessibility. We will look at content and development components.
Accessible Marketing Checklist
Download Now
Factors for Content Creators
First, on the content side – while brands often have style guides that may drive their design, building accessibility into that creative flow process is important. Choices around images, color palette, text size, and integration of audio and video content all weave into whether your site can be understood by users impacted with either a temporary or permanent disability.
Images and accessibility
Always include alt text unless the image is purely decorative.
- Alt text can be set when inserting images from the Media Library
- Default alt text can be set per image and altered per image instance
Keep extraneous info out of alt text.
- Do not include things like “image/picture/logo of …” as AT will announce its an image.
- Can include the word “logo” for describing logotype, i.e., “Yale Rep Theater logo”)
- Do not describe the image content, but its purpose or the information it is being used to convey in context.
- Keep alt text short but descriptive
Avoid images of text. It should be reserved primarily for logos where consistency in presentation is essential.
Colors
Check the color scheme for text and icons, any interface components, and corresponding backgrounds.
Avoid text over images where possible due to varying contrast ratios based on placement.
- Use semi-opaque or opaque backgrounds for text over images to create a baseline color contrast ratio regardless of image content.
Avoid using only color to identify an interactive element or its state.
Links should have some visible indication (text decoration) other than color differences from plain text.
Text
Considerations when choosing typography for website copy include size, spacing, and complexity of font family, among others. Some helpful guidelines to work by include:
- Choosing sizes larger than 12px on average.
- Define font sizes in relative measures (em, %) so they can be zoomed up to 200%
- Do not choose “fancy” or complex type scripts that are less recognizable or harder to read unless sized large.
- Limit the number of typefaces used across a web page or content section – excessive switching between fonts or styles may create challenges for some users.
In terms of font families, while there is no “best” font and opinions can vary among accessibility professionals, sans-serif is often preferred over serif to delineate letters more clearly. Some studies have shown these fonts may aid users with dyslexia, but this can be subjective and is a topic of much debate within both accessibility and design communities.
Multimedia
Video
- Include captions tracks content when videos include spoken text content
- If possible (unlikely), include an audio description track for onscreen actions and text; adding a transcript can also mitigate.
- A transcript can be added to somewhat mitigate
- Add/Update title attributes for embedded iframe content
- change the default when copying the embed code if not set to video title
- Pasted URL in Gutenberg/classic editors will generally have the correct title attribute
Audio
- For spoken word content (podcasts, etc.) include a transcript or link to text adjacent to the player.
Block Editor (Gutenberg)
Avoid using patterns elements (pre-built group content/layout structures).
- Generated headers and layouts often lack landmarks and other structural markups.
- e. the headers that insert menus lack navigation role markup and can be redundant with the site header structure.
Content Structure
- Use heading elements to denote content structure/section topics
- Use descending heading levels to denote content hierarchy, not font properties like size or boldness.
Factors for Website Developers
Choosing a Theme
- Avoid animations that cannot be stopped/paused by users.
- Choose a theme that has basic accessible markup, such as landmarks and skip links, implemented.
- Update/add aria-labels to landmarks that can be used multiple times per page.
- Do not remove focus state CSS rules.
- Keep navigation elements/menus consistent between pages and site sections.
Plugins
Avoid plugins that do not use semantic elements for interactive controls, where possible. Some examples include:
- Custom forms plugin with fancily styled checkboxes that are background images;
- Custom combo-box widgets (autocomplete list, category tags style, etc.)
Forms
- Use visible text labels for controls. Do not rely on placeholder text to label controls.
- Ensure that label is programmatically associated with the field using a “for” attribute or aria-labeled by attribute.
- Make sure forms have explicit submit buttons and do not submit on selecting a value.
- Seen most often with <select> or checkboxes where selecting will submit a form or filter a list of items on selection.
- Include instructions before the control/control group if submission/updating will happen on choosing/entering values.
Data Visualizations
If using data visualizations, include the data set as tabular data. You can opt for a download link or in-page adjacent to the chart view output.
Include patterns or other non-color category indicators in the chart view of data.
Elements to Avoid
- Avoid non-essential auto-updating content
- This includes carousels which are unlikely to be accessible (either content perceivability or control navigability)
- Avoid all-in-one/automatic accessibility plugins. There is no fully automated fix and most introduce other structural issues.
- Not all sites/themes are one size fits all in a way these plugins can be successful.
- They also may duplicate functionality already present in themes, creating a “cluttered” effect across web pages.
- Most add things like skip links that are usually included in themes or can be easily done in theme editing.
Page Builder Plug-ins
If using page builder plugins (like Advanced Custom Fields, Beaver Builder, or Elementor) build in a quality check of your content output to ensure for correct and native HTML structure. Consider keeping your layouts and design simple to make it easier to update and convey accessibility guidelines.
Test, Test, Test – The User Experience
While several automated accessibility testing tools exist across the web development sphere – it is strongly recommended development teams include manual testing in their process. Preferably developers should attempt to use their products with a screen reader. Doing this will help creators understand the content from a user perspective and what they can do to make it more accessible for the visually impaired.
Another step for developers is to zoom your browser to 200% and check all content is still visible, clear, and operable using a mouse and keyboard.
WordPress has also created an accessibility handbook that can serve as a basis for testing and design practices to put in place.
Acknowledgements: Thanks to Microassist Senior Accessibility Audit Specialist Soheil Varamini for contributions and editorial input to this article.
Subscribe to Accessibility in the News
Stay informed! Get your weekly update on digital accessibility standards, private and public sector trends, litigation, events, and more.