ADA compliance for Revolution Slider (and other WordPress plugins)

Feb 12th, 2019 by Max Tokman

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.


ADA compliance for Revolution Slider WordPress plugin


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;


ADA compliance for Revolution Slider WordPress plugin, revised


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.


wordpressSEOADAWeb Developmentweb designDrupalproductionHTML5responsive designcompliancesecurityCSSdesignTestingPhotoshopproduction tipsFlashtechnologiestoolsgoogletypographyGoogle Analyticsmarketingautomationharness-bbeta testingbrowserSSLE-commercethemesweb standardsplug-inQAwebsite buildingapp developmentweb preflightfirefoxJavaScriptquality controlintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsiOSMicrosoftmodulesOpenSSLserver securityIE8Androidtabletsmobile devicesclientcommunicationimage compressionimage size cloudPDFresponsive statebreakpointInternet Explorer 8Windows XP FacebooktechnologyWebOSLong TailInteraction MetricsLinkedInhostsoftwareAdvertisingJSONapp lifespanabletmobile app challengeRGBgammacodecvideo sizeinstant video playback solutionBacklinksweb colorsvideo playbackintegration3rd partyParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Csony playstationnintendo wiiaugmented realityVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingCVE-2014-0224dudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityawardupdatevulnerabilityCKEditorAdobe Edge Reflowprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommercemicrosoft’s project natal

Mar 11th, 2019 by Max Tokman

We start every web site ADA testing project by performing automated tests using industry standard commercial software. This generates a preliminary report specific to WCAG 2.1 / Section 508 compliance level required - A, AA or AAA - which serves as a basis for in depth code review and manual testing with assistive tech...

Jan 12th, 2018 by Max Tokman

Caching is both a blessing and a bane for web sites. Cached files and images allow end user to see a previously visited web site almost instantaneously, and those same cached assets can ruin user's experience by serving outdated code that conflicts with recent programming changes. Besides web pages, there a...