Northwoods

Northwoods Forest

WordPress Accessibility and ADA Compliance

Sydney ShimkoSydney Shimko/Front End Developer
April 11, 20193 min read

Adherence to website accessibility standards can improve usability for everyone, enhance user experience, build brand loyalty and encourage conversions. (See our past blogs for more information on web accessibility guidelines and why they matter to you.) Read on to make your WordPress website accessible and ADA Section 508 compliant.

The WordPress community has worked to make the CMS ADA compliant. A WordPress accessibility team is in place, with Accessibility Coding Standards outlined to ensure that new and updated code for the open source WordPress core conforms with Web Content accessibility Guidelines (WCAG) at level AA. However, if you’re using a third-party theme or any plugins with your WordPress site, it likely fails to meet WCAG web accessibility standards.

Here’s what you can do to improve your WordPress site’s accessibility.

Testing

After you complete development of your site or have put your plugins in place, audit your site for compliance to the WCAG guidelines. See our list of preferred accessibility testing tools.

Working with an existing site

If your goal is to make an existing site more accessible, you have options.

Plugins

Several plugins in the WordPress repository can improve the accessibility of an existing site and theme. These help with adding skip links, ensuring focus states are visible, providing a widget for high-contrast, and enforcing alt attributes on images. No plugin solves all issues, but many WordPress WCAG accessibility plugins help with some of the most common errors.

Update Your Code

For full compliance, you may find you need to modify your theme and visual design.

Starting from scratch

If you’re building a new WordPress site or starting a redesign, make your development team understand that your site must be universally accessible. Your people need to know this requirement before they make any decisions, including those involved in coding practices, themes and plugins. Design for accessibility from the start.

If your team is developing a custom theme, they can refer to the WordPress Theme Handbook section on accessibility requirements and guidelines. The handbook outlines what’s required for a theme to be tagged “accessibility-ready” within the WordPress Theme Repository. While your custom theme may not land in the repository, the handbook provides a good checklist for an accessible foundation for your site. Your team can also reference this pattern library, put together by the WordPress Accessibility Team.

Accessibility-ready theme requirements

  • Keyboard Navigation: The site must be navigable via the keyboard, with no need for mouse interaction.
  • Controls: Appropriate semantic HTML elements are used for site controls, such as <button>, <input>, and <a> elements.
  • Skip Links enable users to bypass navigation and skip directly to content or vice versa.
  • Forms must use appropriate and explicit field labels.
  • Headings: Heading levels and content should follow a hierarchical structure without skipping levels.
  • ARIA Landmark Roles: All content must be wrapped in at least one landmark role.
  • Links in content must be underlined and links in navigational areas must be clearly distinguishable.
  • Repetitive Link Text should be descriptive and meaningful. Avoiding “read more” and “click here.”
  • Contrasts: All background/foreground colors should contrast sufficiently to pass the WCAG guidelines.
  • Images: Themes must include alt attributes and/or the ability for the end user to add alt text.
  • Media must be controllable by the end user. Sound and video must not auto-play.
  • Screen Reader Text: Provide context for elements such as icons.
  • The following are not allowed under the accessibility-ready tag: Positive tab index attributes, inclusion of the access key attribute, opening content in a new tab or window without warning the end user.

In addition to the above requirements, WordPress provides further recommendations for your accessible theme.

Summary

If a theme in the repository is marked “accessibility-ready,” the developers have gone to considerable length to consider accessibility. However, this distinction does not guarantee that your site will be accessible after content entry and customizations. You may need additional coding and content updates to improve your compliance. Start by testing to find the gaps.

If you’re still unsure about testing or remediation for accessibility, Northwoods can help.

Sydney ShimkoSydney Shimko/Front End Developer

Sydney Shimko is a senior member of the Front-End team and Accessibility Practice Lead at Northwoods. She combines the aesthetics of thoughtful design with semantic, responsive code. She strives to provide the best solutions for client projects, negotiating rapid change in the field of Front-End development and ensuring functionality across an ever-growing variety of devices and new technologies.

Connect with Sydney on LinkedIn | Read Sydney Shimko's Blogs

Related Blog Posts

How to Manage Your WordPress Updates

The ironic cliché “What could possibly go wrong?” might well have originated among WordPress webmasters trying to figure out how to update WordPress sites.

Social Media and Accessibility

Website accessibility is important, but making your social media content accessible to all users is also important. Find out how to make sure your content effectively reaches everyone.

Website Accessibility Tools You Can Use

Website accessibility testing uncovers non-compliance issues with your organization’s website accessibility standards. Although there are automated tools available to help with accessibility testing, they cannot replace human judgment.

View All Blog Posts

X

EXPERT INSIGHTS IN YOUR INBOX!

Subscribe to our blog for expert tips, insights and analysis on digital trends, best practices, and more.

Share Your Thoughts

The following required items were not provided or are in the wrong format. Please provide the required responses and submit again:

Name:
  Please enter your name
  Please enter a valid email
Comment: 250 characters left
  Please enter a comment