Blog

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.

Categories:

wordpressSEOweb designDrupalWeb DevelopmentADAHTML5productionresponsive designcompliancesecurityCSSPhotoshopdesignTestingFlashtoolsproduction tipsgoogletypographyGoogle Analyticsmarketingbeta testingautomationharness-bbrowserSSLE-commerceiOSweb standardsplug-infirefoxQAwebsite buildingapp developmentweb preflighttechnologiesJavaScriptthemesintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsquality controlMicrosoftmodulesOpenSSLserver securityIE8Long TailabletWebOSAndroidtabletsmobile devicesclientcommunicationimage size cloudtechnologyPDFresponsive statebreakpointimage compressionInteraction Metricsinstant video playback solutionvideo sizeInternet Explorer 83rd partyAdobe Edge ReflowawardsoftwarehostBacklinksAdvertisingapp lifespanmobile app challengeweb colorsgammacodecvideo playbackJSONRGBWindows XP LinkedInParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Cmicrosoft’s project natalsony playstationnintendo wiiaugmented reality3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingFacebookdudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityupdatevulnerabilityCKEditorCVE-2014-0224integrationprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommerceVideos and animations

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 ar...