Support » Plugin: Google Language Translator » WAVE Accessibility Error for Select Language element

WAVE Accessibility Error for Select Language element

  • erbanach

    (@erbanach)


    4 months, 3 weeks ago

    This plugin is causing an accessibility error that I do not know how to fix. If you run the WAVE test on this home page, you will see that there is a missing form label. (Click on No Styles to see the error). It says that the “Select Language” drop down menu does not have a form label. I tried to add this in with simple jQuery, which works on my local machine.

    var selectlanguage = $("select.goog-te-combo");
  $(selectlanguage).attr('name', 'selectlanguage');
  $(selectlanguage).before("<label for='selectlanguage'>Select Language</label>");

    This should add the name attribute to the <select> element and then add a label before the <select> attribute but it is not working. Do you have any guidance on how to fix this accessibility error for this plugin?

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • abrightclearweb

    (@abrightclearweb)

    1 month ago

    Hi erbanach,

    I noticed the same problem. With some hacking around with your code I managed to get it to work and resolve the error. The $ has to be replaced by jQuery to run in no conflict mode.

    Here is my code:

    Create a language.js file and add it to a js folder in your child theme:

    // Add a form label to the Select language combo box and associate it with an ID

// load script after the page has loaded - see https://css-tricks.com/snippets/jquery/run-javascript-only-after-entire-page-has-loaded/
jQuery(window).bind("load", function() {  var selectlanguage = jQuery("select.goog-te-combo"); // select the language combo box
  jQuery(selectlanguage).attr('id', 'selectlanguage'); // add id to the combo box
  jQuery(selectlanguage).before("<label for='selectlanguage'>Select Language</label>"); // add the form label
});

    Add this to your functions.php (if you already have a function to enqueue scripts, you can just add the wp_enqueue_script line to it):

    // Add the jQuery script for the language switcher
function add_custom_script() {
   wp_enqueue_script('custom_script',  get_stylesheet_directory_uri() . '/js/language.js', array( 'jquery' ) );
}  
add_action( 'wp_enqueue_scripts', 'add_custom_script' );

    Of course it would be a lot simpler if the plugin developer added the label and ID in the first place. 🙂

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.

Topic Tags

Views