AWS and WCAG 2.0 compatibility errors

  • petrospapathomas

    (@petrospapathomas)


    4 years, 3 months ago

    I try to make my site (https://blumare.gr) full WCAG 2.0 compatible.
    For that reason i use WAVE Web Accessibility Evaluation Tool (wave.webaim.org) to discover all possible errors.
    At the moment the evaluation process, when done for example in my home page but the same is for all other pages as well, shows me 2 main errors which direct to advanced woo search plugin.
    Both errors are identical and are the following:

    2xMultiple form labels
    – Meaning: A form control has more than one label associated with it.
    In other words: Two or more <label>s are associated to a single <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea>.)

    -The errors refer to:
    aws-search-form .aws-search-field

    -Related Code Part for both errors:
    <input type=”search” name=”s” id=”621943ce763b6″ value=”” class=”aws-search-field” placeholder=”Αναζήτηση” autocomplete=”off”>`
    (my Note: “Αναζήτηση” means Search in Greek)

    For your info, in my site i have the latest update of advanced-woo-search plugin as well as for wordpress/woocommerce.

    Hope you could provide me a solution for the above mentioned errors.

    Thanks in advance

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

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author ILLID

    (@mihail-barinov)

    4 years, 3 months ago

    Hi,

    Not sure that this will help but please try to use following code snippet:

    add_filter( 'aws_searchbox_markup', 'my_aws_searchbox_markup' );
function my_aws_searchbox_markup( $markup ) {
    $pattern = '/<label[\S\s]*?<\/label>/i';
    $markup = preg_replace( $pattern, '', $markup );
    return $markup;
}

    You need to add it somewhere outside the plugins folder. For example, inside functions.php file of your theme or use some plugin for adding code snippets.

    Regards

    Thread Starter petrospapathomas

    (@petrospapathomas)

    4 years, 3 months ago

    I tried the code snippet in my functions.php file but didn’t make any difference at all.

    Any other advice?

    Plugin Author ILLID

    (@mihail-barinov)

    4 years, 3 months ago

    I don’t see that this code snippet is working on your site.

    I see you are using caching plugins. Please make sure that the cache is cleared for all of them.

    Regards

    Thread Starter petrospapathomas

    (@petrospapathomas)

    4 years, 3 months ago

    I ‘ve added the snippet…cleared the cache…tested it…didn’t work and then i removed it. That’s why you cannot see it any more.

    In any case i ‘ve added it again…cleared the cache as well…

    I think you can also see it now

    Plugin Author ILLID

    (@mihail-barinov)

    4 years, 3 months ago

    So I see that the label tag is fully removed for your search form.
    So do you still see the same error message? Can you please write here what exactly it is saying?

    Thread Starter petrospapathomas

    (@petrospapathomas)

    4 years, 3 months ago

    Checked again in https://wave.webaim.org/.

    Actually, i haven’t noticed that, while in the beginning the error was “2x Mulptiple form labels”, now the error is the following:

    “2X Missing form label”

    The error(s) refers to the following code part:
    <form class=”aws-search-form aws-show-clear” action=”https://blumare.gr/&#8221; method=”get” role=”search”>
    <div class=”aws-wrapper”>
    <input type=”search” name=”s” id=”6220c9bd3c86a” value=”” class=”aws-search-field” placeholder=”Αναζήτηση” autocomplete=”off”>

    Follows full error description provided by wave.webaim.org:
    -Why It Matters
    If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls.

    -What To Do
    If a text label for a form control is visible, use the <label> element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls.

    -The Algorithm… in English
    An <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea> does not have a properly associated label. A properly associated label is:
    > <label> element with a for attribute value that is equal to the id of a unique form control
    > <label> element that surrounds the form control, does not surround any other form controls, and does not reference another element with its for attribute
    > non-empty title attribute, or
    > non-empty aria-labelledby attribute`

    For your convenience if you want you can check in wave.webaim.org my specific page https://blumare.gr/main-shop where you can also find the above error(s) and the descriptions behind them.

    Plugin Author ILLID

    (@mihail-barinov)

    4 years, 3 months ago

    Looks like I understand the issue now.
    So please remove previously added code and instead use this one:

    add_filter( 'aws_searchbox_markup', 'my_aws_searchbox_markup' );
function my_aws_searchbox_markup( $markup ) {
    $markup = preg_replace( '/<label[\S\s]*?<\/label>/i', '', $markup );
    $markup = preg_replace( '/<input type="search"[\S\s]*?\/>/i', '<label>${0}</label>', $markup );
    return $markup;
}
    Thread Starter petrospapathomas

    (@petrospapathomas)

    4 years, 3 months ago

    I’ve added the new snippet…cleared all cache…checked again in wave.webaim.org.

    Now the error(s) changed as follows:

    2 X Empty form label

    The error(s) refers to the following code part:
    <form class=”aws-search-form aws-show-clear” action=”https://blumare.gr/” method=”get” role=”search”>
    <div class=”aws-wrapper”>
    <label>
    <input type=”search” name=”s” id=”6226141a988ef” value=”” class=”aws-search-field” placeholder=”Αναζήτηση” autocomplete=”off”>
    </label>

    Follows full error description provided by wave.webaim.org:
    -What it means
    A form label is present, but does not contain any content.

    -Why It Matters
    A <label> element that is associated to a form control but does not contain text will not present any information about the form control to the user.

    -What To Do
    Ensure that the form label contains text that describes the function of the associated form control. Labels are not required for image, submit, reset, button, or hidden form controls. If a label is not necessary visually, a descriptive title attribute may be added to the form control.

    -The Algorithm… in English
    A form label is present and associated with an existing form control (using for/id or surrounds the form control), but does not contain any text or images with alternative text.

    For your convenience if you want you can check in wave.webaim.org my specific page https://blumare.gr/ where you can also find the above error(s) and the descriptions behind them.

    Plugin Author ILLID

    (@mihail-barinov)

    4 years, 3 months ago

    Ok, I see some progress here.
    Try to use this another updated version of the code snippet:

    add_filter( 'aws_searchbox_markup', 'my_aws_searchbox_markup' );
function my_aws_searchbox_markup( $markup ) {
    $markup = preg_replace( '/<label[\S\s]*?<\/label>/i', '', $markup );
    $markup = preg_replace( '/<input type="search"[\S\s]*?\/>/i', '<label><span style="
    text-indent: -9999px;
    display: block;
    font-size: 0;
    line-height: 0;
">Search</span>${0}</label>', $markup );
    return $markup;
}
    Thread Starter petrospapathomas

    (@petrospapathomas)

    4 years, 3 months ago

    Great…seems the above error(s) dissapeared!!!

    Now, the only think left regarding aws and wcag compatibility in my site is what i found in the specific page https://blumare.gr/main-shop where i get the following error(s):

    4 X Empty link

    The erros(s) refers to the following code part:

    <a href="#" class="search-overlay-close">
<span></span>
</a>

    Follows full error description provided by wave.webaim.org:
    -What it means
    A link contains no text.

    -Why It Matters
    If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users.

    -What To Do
    Remove the empty link or provide text within the link that describes the functionality and/or target of that link.

    -The Algorithm… in English
    An anchor element has an href attribute, but contains no text (or only spaces) and no images with alternative text.

    Thread Starter petrospapathomas

    (@petrospapathomas)

    4 years, 3 months ago

    Code part for the above error(s):

    <a href="#" class="search-overlay-close">
<span></span>
</a>
    Thread Starter petrospapathomas

    (@petrospapathomas)

    4 years, 3 months ago

    In the above <a href> statements should be added a text part that should be read only by screen readers. That means an aria-hidden="true" statement should be inserted in these statements as well as a <span class="sr-only"></span> statement. Hope this is enough.
    Could you please direct me where and/or how to add the above changes?
    Thanks is advance

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘AWS and WCAG 2.0 compatibility errors’ is closed to new replies.