Javascript for Added Accessibility

Imagine you’ve got a legacy WordPress site built using one of those drag/drop themes. Now complicate it by having a chunk of content created by a non-standard javascript-based slider plugin.

Continue to imagine you have a very, very short window of time to bring it up to WCAG2.0 accessibility standards.1

Child themes aren’t a viable option because of the complexity and the tools that built this mess don’t even pretend to allow you to address most of the concerns.

Enter our good friend javascript.

I can now take our empty section elements and give them aria2 labels as Site Improve demands.

jQuery(document).ready(function() { 
    
     var sections = document.getElementsByTagName('section');//gets all the sections
    
    var labels = ['general-navigation','logo','navigation','row','main slides','purpose','sub navigation','online at vcu section','online at vcu ad', 'connect with vcu', 'connect with vcu header','twitter posts','blog area','blog posts','footer','footer address details'];//these label the section names in order
    
    for (i = 0; i < sections.length; i++){
      sections[i].setAttribute('aria-label', labels[i] );//applies the label names to each section
    }
    
    });

One of the slider plugins was also attaching the same ID in two places. The weird one was on the HTML tag at the top of the document. That threw errors and was weird but it was also applied via javascript after the page finished loading so it was harder to get at. Awkward but apparently functional.

function delayedRemoval() {
  timeoutID = window.setTimeout(removeId, 800);//delays things so the other js finishes then removes it
}

function removeId(){
var zapIt = document.documentElement;//how you get the html tag
var zapped = zapIt.removeAttribute("id");//remove the ID


1 As interpreted by Site Improve . . . and yes it should have been there already but interpretation of WAVE vs Site Improve has some significant differences.

2 I’m pronouncing this like the opera solos but it’s actually stands for Accessible Rich Internet Applications

Comments on this post

No comments.

Leave a Reply

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL