WAVE Error: “Missing form label” στο Google reCAPTCHA

Κατά τον έλεγχο προσβασιμότητας με το εργαλείο WAVE, συχνά εμφανίζεται το σφάλμα “Missing form label” σε φόρμες που χρησιμοποιούν Google reCAPTCHA.
Το συγκεκριμένο error υποδηλώνει ότι ένα στοιχείο φόρμας (input / checkbox) δεν έχει συσχετισμένη ετικέτα (label), κάτι που δημιουργεί πρόβλημα για χρήστες που χρησιμοποιούν screen readers ή άλλες υποβοηθητικές τεχνολογίες.

Η απαίτηση του WAVE είναι σημαντική γιατί:

• Βελτιώνει την προσβασιμότητα (WCAG compliance)
• Επιτρέπει σε άτομα με αναπηρίες να κατανοούν σωστά τον σκοπό των πεδίων της φόρμας
• Κάνει τη σελίδα πιο φιλική και σωστά δομημένη σημασιολογικά

Στην περίπτωση του reCAPTCHA, το πρόβλημα δεν οφείλεται σε λάθος υλοποίηση του χρήστη, αλλά στο ότι το widget φορτώνεται δυναμικά χωρίς εμφανές label στο DOM, κάτι που το WAVE καταγράφει ως σφάλμα.

Η λύση

Η λύση που έχει υλοποιηθεί με επιτυχία είναι η προσθήκη ενός JavaScript αρχείου \”custom-scripts.js\” στο child-theme που χρησιμοποιείτε στο WordPress:

jQuery(window).on(\'load\', function () {
let textarea = document.getElementById(\"g-recaptcha-response-100000\");
textarea.setAttribute(\"aria-hidden\", \"true\");
textarea.setAttribute(\"aria-label\", \"do not use\");
textarea.setAttribute(\"aria-readonly\", \"true\");
});

jQuery(window).on(\'load\', function () {
let textarea = document.getElementById(\"g-recaptcha-response-100001\");
textarea.setAttribute(\"aria-hidden\", \"true\");
textarea.setAttribute(\"aria-label\", \"do not use\");
textarea.setAttribute(\"aria-readonly\", \"true\");
});

Στη συνέχεια προσθέστε στο \”functions.php\” τον παρακάτω κώδικά για την ενσωμάτωση αυτού του νέου JavaScript στο footer:

add_action( \'wp_enqueue_scripts\', \'my_custom_script_load\' );
function my_custom_script_load(){
wp_enqueue_script(\'my-custom-script\',get_stylesheet_directory_uri().\'/js/custom-scripts.js\',array(\'jquery\'),false,true);
}

Με αυτή την προσέγγιση, το WAVE error εξαλείφθηκε, χωρίς να επηρεαστεί η λειτουργικότητα ή η ασφάλεια του reCAPTCHA.

Ευχαριστώ την κοινότητα του WordPress για τη συνεχή ανταλλαγή γνώσης και λύσεων που κάνουν το web πιο προσβάσιμο για όλους!