ADA compliance

  • Hello, I am trying to make our site AA ADA compliant. Right now the only error I’m getting is that the SELECT tag does not have a title. I tried added this using JS, so as to not edit the plugin, but the shortcode doesn’t load until after the JS is ran, so it isn’t finding the class. Could you add a title to the next release? Or tell me if there is another way to add this?

Viewing 3 replies - 1 through 3 (of 3 total)

  • We have run into the exact same issue. Last major issue for WCAG 2.0 AA we have on the board. I, too, have tried to add it with JS/jQuery and the timing of the Google API just doesn’t match up with the setTimeout to get it to load properly.

    Please add the label for the SELECT dropdown. It could even be added off screen, we just need it there so that screen readers and other assistive technology can access it.

    Or, as maspegren says, “tell me if there is another way to add this…”

    Thanks!

    Thread Starter maspegren

    (@maspegren)

    Hey, I was able to get a title added through JS. Here’s what I have:

    $(window).on('load', function() {
  //Add title tag to Select Language dropdown
  $('#google_language_translator .goog-te-combo').attr('title', 'Select Language');
});

    The on window load was the key for me. Hope this helps!

    maspegren,

    I can definitely see how that would work for the title attribute, but, WCAG requires a label on any form control.

    However, I used a combination of the “.on(‘load’…” and the code I had and it seems to be working:

    
var label = ('<label for="targetLang" class="offscreen">Search</label>');
$(window).on('load', function() { 
  $('#google_language_translator select.goog-te-combo').attr('id', 'targetLang');
  $('#google_language_translator select.goog-te-combo').before(label);
});

    Thanks for the “.on(‘load’)” idea!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘ADA compliance’ is closed to new replies.