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

  • 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)

    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.