A functional image would generally be used as a button or link and hence in the markup it would be an img tag wrapped by a button tag or the anchor tag.

Since this image is functional, and assuming there is no accompanying text, we would need to provide a text alternative to the assistive technology. We can do this in many ways, but I am trying to understand if there is any difference (or rather, is either of these methods better than the other) in the following ways:

• adding an alt attribute on the image explaining the functionality
• adding an empty alt on image, but adding an aria-label on the parent button or link to explain the functionality

I have seen a lot of tutorials and examples which talk about adding an alt tag on the image, but couldn’t find any which compares these two methods. As per my testing, both work mostly similar with screenreaders.

References: https://www.w3.org/WAI/tutorials/images/functional/

We are gettting a few critial fails on ADA scans as follows for the login page using the [swpm_login_form] shortcode:

<input?type=”checkbox”?id=”swpm-password-toggle-checkbox”?data-state=”password-hidden”>

Explanation:

Provide an accessible name for <code>input</code> elements with the label element whenever an on-screen label is present. The label element’s value is then explicitly associated with the relevant form field using the for and id attributes. Use of the label element provides an added benefit as it increases the target area that users can click to focus the form field. In certain instances, however, it is impractical or ‘undesirable’ to use an explicit label for a form field; this is largely driven by the fact that the value between the opening and closing label tags must, by definition, be a block of displayed text.

When on-screen text is not available or can not programmatically be contained in a label (such as when a field is placed in a data table with a column label and a row label) – authors can use another method to provide an accessible name such as by using the title, aria-label, or aria-labelledby attribute to provide the label. The aria-labelledby attribute must contain one or more IDs of elements that label the form field. The <code>aria-label</code> attribute should only be used when on-screen labels can not be used. Authors should place the string that labels the form field in the aria-label attribute.

Since this is core to your plugin – can you advise how to correct this?

Best,

Michael

Any ideas or suggestions?

Thank you.

I’ve been running ADA compliance scans across our websites using https://wave.webaim.org/ and there are currently 2 missing form label errors with the free version of this plugin (not sure about the paid version). Unfortunately these 2 errors show up on every single blog posts where comments are enabled – totaling over 1300+ errors.

The errors are for the following to lines of code:
<input type="text" name="wantispam_e_email_url_website" class="wantispam-control wantispam-control-e" value="" autocomplete="off">

<input type="text" name="wantispam_q" class="wantispam-control wantispam-control-q" value="7.2.9" autocomplete="off">

The client loves your plugin (as it is literally the only one that has worked for the amount of spam our client sees on a daily basis. We would love to see this issue fixed in a future release if possible.

Thanks!