ADA compliance for Revolution Slider (and other WordPress plugins)

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.

wordpressSEOweb designWeb DevelopmentHTML5productionresponsive designDrupalADAcompliancesecurityPhotoshopCSSTestingdesigngooglebeta testingquality controltoolsharness-bautomationtypographyGoogle AnalyticsmarketingFlashproduction tipsfontsweb imagesite speedweb preflightthemeswebsite buildingmodulestechnologiesJavaScriptfirefoxbrowserintegrationsMicrosoftAdobe MuseSSLIE8Applemobile websiteapp developmentplug-inAPIQAserver securityweb standardsE-commerceiOSInDesignWordpress pluginsOpenSSLAdvertisingJSONmobile devicestabletsAdobe AirRIAsBacklinksInteraction MetricsLong TailExporting from InDesign to PhotoshopInDesign to Photoshop conversionresponsive buildhorizontal layoutAdobeICANNcustom domain suffixesdevelopmentwireframeaugmented realityweb development awardprogramming awardPhotoshop Layer compsdesign best practicesmobile app challengeapp lifespannon-Flash animationHTML5 animationAdobe EdgeiPad screen templategTLDsweb awardvertical layoutvideo playbackfaildudrevolutionary softwareInDesign to HTMLcommunicationclienthtmlimage sizesoftwareimage compressionweb compatibilitybreakpointresponsive statePDFAdobe Edge ReflowconvertingEdge ReflowParfaitweb design softwareogvcloudawardhostseleniumFoundationBootstrapCKEditor3rd partyAppleScriptecommercetechnologycollaborateupdatevulnerabilityCMSwebsiteiPhoneCSS3Ps. and CSS HatProject Parfaithigh fidelityconceptcodecwebmformatweb developerssidney garberVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunescustom fontsHTML4web-fontsRGBweb colorsrelationship marketingOSSW3Cfragmented technology landscapeAndroidvideo sizegammamp4microsoft’s project natalUDIDvideoCVE-2014-0224integrationLinkedInFacebookWindows XPInternet Explorer 8interactive banner adsbrochurewaresony playstationinstant video playback solutionHeartbeatonline subscriptionWebOSabletCMS for Flashoptimizednintendo wiioutsourcing
Identifying 10 common web site caching issues and their solutions

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

Our ADA web site services cover WCAG 2.1 A, AA, and AAA ADA testing, reporting, and remediation

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