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!
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!
