Frameworks such as WordPress and Drupal are great in giving us ready to use, configurable website plugins and modules. The drawback is that sometimes these plugins lag behind in terms of compliance, which requires manual changes to code. In this example we will look at bringing Revolution Slider into compliance with Americans with Disabilities Act (ADA) requirements for website, specifically for ADA compliance with screen readers.
HMTL structure of Revolution Slider WordPress plugin contains large number of nested tags, which wreaks havoc on screen readers such as VoiceOver or ChromeVox. Additionally, HTML code for elements does not correspond to visual placement of these elements on screen, as in "tp-bullet" navigation elements being referenced in code way below all the slides and so they get read at the very end.
Reworking this code to make it ADA compliant would be painful to say the least, so we went ahead with a different approach. Instead, we marked all slides with aria-hidden="true" and interactive elements with tabindex=“-1”, effectively hiding them from screen readers, either with HTML or JS. Afterwards, slider content is duplicated in HTML and shows up for screen reader with something like:
screen-reader-only-style {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Now we have two sets of HTML markup, one for screen readers and hidden from standard browsing, another for standard browsing and hidden from screen readers. Even though this approach modifies UX for site visitors using Screen Readers, it is a reliable and flexible way to provide text alternative to non-accessible slider content and is similar to WCAG Success Criterion 1.1.1 for Non-text Content and has been verified to work consistently after WordPress plugin updates. Equally importantly, coding hours spent were minimal compared to complex reworking that would potentially be required to make the same plugin code both ADA and non-ADA compliant.
And that is how we made Revolution Slider WordPress plugin ADA compliant for this and many other WordPress projects. So, while by no means advocating to create a completely separate set of ADA-compliant code for the entire web site, sometimes flexibility in approach is the name of the game when dealing with ADA compliance.