Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • April 27, 2021 at 3:25 pm #1297017
    NicomIT

    To meet accessibility requirements I need to avoid the use of placeholder values (remove the “Search” placeholder text). Here is the code that is being flagged:

    <input placeholder="Search" value="" name="s" id="s" type="text">

    I have removed the placeholder text using this code from another post and adding it to the functions.php file:

    // custom script
add_action( 'wp_footer', 'ava_custom_script' );
function ava_custom_script() {
?>
<script type="text/javascript">
(function($) {
	$('#s').attr('placeholder', '')
})(jQuery);
</script>
<?php
}

    I left the area for the placeholder text blank. But when I run the accessibility test on the website now, it indicates that a valid label for form fields needs to be provided. This is the code that it references:

    <input placeholder="" value="" name="s" id="s" type="text">

    If someone could help me find where to modify that code and address the form fields label requirement, that would be great. Thanks!

    April 30, 2021 at 4:14 pm #1297596
    Ismael

    Hey NicomIT,

    Thank you for the inquiry.

    It is probably looking for an actual label element with the for attribute. Something like this..

    <label for="s">Search</label>

    This script might help.

    // custom script
// remove placeholder and create label element
add_action( 'wp_footer', 'ava_custom_script_ajax_search_mod' );
function ava_custom_script_ajax_search_mod() {
?>
<script type="text/javascript">
(function($) {
	$("#s").attr("placeholder", "");
        $("<label for='s'>Search</label>").insertBefore("#s");
})(jQuery);
</script>
<?php
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.