WCAG 2.0 Accessibility compliance errors

  • Our website must comply with WCAG 2.0, and this plugin throws three errors:

    “input element has alt attribute:
    Repair: Remove the alt attribute from all input elements except those with a type attribute value of “image”.
    <input type=”submit” id=”uwpqsf_id_btn” value=”Search” alt=”[Submit]” class=”usfbtn ” />

    “input element, type of “text”, missing an associated label.”
    Repair: Add a label element that surrounds the control’s label. Set the for attribute on the label element to the same value as the id attribute of the control. And/or add a title attribute to the input element. And/or create a label element that contains the input element.
    <input id=”uwpqsf_id_key” type=”text” name=”skeyword” class=”uwpqsftext” value=”” />

    “input element, type of “text”, has no text in label.”
    Repair: Add text to the input element’s associated label that describes the purpose or function of the control.
    <input id=”uwpqsf_id_key” type=”text” name=”skeyword” class=”uwpqsftext” value=”” />

    I’m not a programmer, which is why I use plugins, however it seems to address these issues I would need to go in and edit your code, which I am not comfortable doing. Is it possible to fix this, or could you tell me which files these lines are found in and how to change them, then I would feel comfortable making the changes.

    Thank you.

    https://www.ads-software.com/plugins/ultimate-wp-query-search-filter/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author TC.K

    (@wp_dummy)

    You can add this to your theme’s functions.php

    add_filter('uwpqsf_string_search', 'add_wcag_comp', '',6);

function add_wcag_comp($stext, $id,$divid,$defaultclass,$divclass,$options){
$stext ='';

	$stext  = '<div class="'.$defaultclass.' '.$divclass.'"><label for="'.$divid.'_key" class="'.$defaultclass.' '.$divclass.'-keyword">'.$options[0]['strlabel'].'</label>';
		$oldvalue = (isset($_GET['skeyword'])) ? $_GET['skeyword'] : '';
		$stext .= '<input id="'.$divid.'_key" type="text" name="skeyword" class="uwpqsftext" value="'.$oldvalue.'" />';
        $stext .= '</div>';
return $stext;

}
    Thread Starter jseth

    (@jseth)

    Thank you very much for providing a solution. I put the code in the functions.php file and ran the accessibility checker again. All errors were eliminated except one:

    Check 213: input element, type of “text”, has no text in label.
    Repair: Add text to the input element’s associated label that describes the purpose or function of the control.

    Error Line 686, Column 418:
    <input id=”uwpqsf_id_key” type=”text” name=”skeyword” class=”uwpqsftext” value=”” />

    Would you know how to correct that?

    Thank you very much.

    Thread Starter jseth

    (@jseth)

    Also, for the same line, looks like the same complaint, just worded differently:

    Check 188: Label text is empty.
    Repair: Add text to the label element.

    Error Line 686, Column 418:
    <input id=”uwpqsf_id_key” type=”text” name=”skeyword” class=”uwpqsftext” value=”” />

    Plugin Author TC.K

    (@wp_dummy)

    Do you have label entered for displayed in the text field??If not, you should enter one.

    Thread Starter jseth

    (@jseth)

    “Add text to the input element’s associated label” – I’m not really sure where to do that…

    Thread Starter jseth

    (@jseth)

    HA! I went back into our search form’s settings and entered info there, and it seems to have corrected the issue. Thank you again, I really appreciate your time to help us get our site in compliance.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘WCAG 2.0 Accessibility compliance errors’ is closed to new replies.