Skip to Content
Main Content

Hiker Looking Out Over Mountains

3 Minute Read | April 11, 2019

WordPress Accessibility and ADA Compliance

Adherence to website accessibility standards can improve usability for everyone, enhance user experience, build brand loyalty and encourage conversions. 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.

Authored By

Sydney Shimko

Sydney Shimko

Front End Development Practice Lead

hand-drawn owl

Get Expert Tips

3618211/Blog/WordPress-Accessibility-and-ADA-Compliance3
<p>Adherence to website accessibility standards can improve usability for everyone, enhance user experience, build brand loyalty and encourage conversions. Read on to make your WordPress website accessible and ADA Section 508 compliant.</p> <p>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&rsquo;re using a third-party theme or any plugins with your WordPress site, it likely fails to meet WCAG web accessibility standards.</p> <p>Here&rsquo;s what you can do to improve your WordPress site&rsquo;s accessibility.</p> <h2>Testing</h2> <p>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 <a href="/Blog/Website-Accessibility-Tools-You-Can-Use" linktype="8" target="_self">preferred accessibility testing tools.</a></p> <h2>Working with an Existing Site</h2> <p>If your goal is to make an existing site more accessible, you have options.</p> <h3>Plugins</h3> <p>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.</p> <h3>Update Your Code</h3> <p>For full compliance, you may find you need to modify your theme and visual design.</p> <h2>Starting from Scratch</h2> <p>If you&rsquo;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.</p> <p>If your team is developing a custom theme, they can refer to the <a href="https://developer.wordpress.org/themes/functionality/accessibility/" linktype="3" target="_blank">WordPress Theme Handbook</a> section on accessibility requirements and guidelines. The handbook outlines what&rsquo;s required for a theme to be tagged &ldquo;accessibility-ready&rdquo; 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 <a href="https://make.wordpress.org/accessibility/tag/theme-pattern-library/" linktype="3" target="_blank">pattern library</a>, put together by the WordPress Accessibility Team.</p> <hr /> <h3><br /> <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="215" src="https://www.youtube.com/embed/oLvReplQBSY?rel=0" title="I'm Doing a Website Redesign - How Costly Will it Be to Make My Site Accessible?" width="360"></iframe></h3> <hr /> <h3>Accessibility-Ready Theme Requirements</h3> <ul> <li><strong>Keyboard Navigation:</strong> The site must be navigable via the keyboard, with no need for mouse interaction.</li> <li><strong>Controls:</strong> Appropriate semantic HTML elements are used for site controls, such as &lt;button&gt;, &lt;input&gt;, and &lt;a&gt; elements.</li> <li><strong>Skip Links</strong> enable users to bypass navigation and skip directly to content or vice versa.</li> <li><strong>Forms</strong> must use appropriate and explicit field labels.</li> <li><strong>Headings:</strong> Heading levels and content should follow a hierarchical structure without skipping levels.</li> <li><strong>ARIA Landmark Roles:</strong> All content must be wrapped in at least one landmark role.</li> <li><strong>Links in content</strong> must be underlined and <strong>links in navigational</strong> areas must be clearly distinguishable.</li> <li><strong>Repetitive Link Text</strong> should be descriptive and meaningful. Avoiding &ldquo;read more&rdquo; and &ldquo;click here.&rdquo;</li> <li><strong>Contrasts</strong>: All background/foreground colors should contrast sufficiently to pass the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" linktype="3" target="_blank">WCAG guidelines</a>.</li> <li><strong>Images:</strong> Themes must include alt attributes and/or the ability for the end user to add alt text.</li> <li><strong>Media</strong> must be controllable by the end user. Sound and video must not auto-play.</li> <li><strong>Screen Reader Text:</strong> Provide context for elements such as icons.</li> <li>The following are <strong>not allowed</strong> 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.</li> </ul> <p>In addition to the above requirements, WordPress provides further recommendations for your accessible theme.</p> <h2>Summary</h2> <p>If a theme in the repository is marked &ldquo;accessibility-ready,&rdquo; 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.</p> <p><em>If you&rsquo;re still unsure about testing or remediation for accessibility, <a href="/OffNav/Contact-Us" linktype="2" target="_self">Northwoods can help</a>.</em></p>
/Northwoods-2020/Hero-Images/Hiker-Looking-Out-Over-Mountains.pngHiker Looking Out Over MountainsSydney Shimko/Northwoods-2020/People/Sydney-Shimko.jpgThe author in front of a log cabin wall with soft, warm lighting<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script><script>hbspt.forms.create({ region: "na1", portalId: "23630176", formId: "40c5bbae-05a2-42ea-94dd-1662181fd56e" });</script>WordPress Accessibility and ADA Compliance2019-04-11T00:00:00/Northwoods-2019/Blogs/Accessibility.jpg?MediumAdherence to website accessibility standards can improve usability for everyone, enhance user experience, build brand loyalty and encourage conversions. Read on to make your WordPress website accessible and ADA Section 508 compliant.362219/People/Sydney-ShimkoSydneyShimkoFront End Development Practice Lead<p>Sydney is a skilled UX developer who seamlessly blends the aesthetics of thoughtful design with responsive, semantic code. With a passion for delivering top-notch solutions, she negotiates constant change in the field of front end development and ensures functionality across an ever-growing variety of devices and screen sizes. Sydney is also Northwoods&rsquo; go-to web accessibility expert, and she strives to deliver creative, efficient solutions that improve usability for everyone. When not crafting exceptional websites, Sydney is an avid mountain biker, road cyclist, and coffee enthusiast and serves as co-head coach to the Shorewood Mountain Bike Team.&nbsp;</p>Sydney Shimko/Northwoods-2020/People/Sydney-Shimko.jpgSydney ShimkoAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesPackage Type - NWS Data ModulesPersonID - NWS Data ModulesSydney ShimkoProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data ModulesTeamAll StaffDesignersDevelopersAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesAccessibilityWordPressPackage Type - NWS Data ModulesPersonID - NWS Data ModulesSydney ShimkoProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesNWS DigitalSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data Modules02024-03-15T14:29:45.88000