Captcha output accessibility warnings
-
Hello, I am validating my website with http://wave.webaim.org/ and your captcha html triggers 4 alerts:
Redundant alternative text
What It Means:
The alternative text for an image is the same as nearby or adjacent text.
Why It Matters:
Alternative text that is the same as nearby or adjacent text will be presented multiple times to screen readers or when images are unavailable.
How to Fix It:
Change either the alternative text or the adjacent text to eliminate the redundancy. In most cases, you can give the image empty/null alternative text (alt=””) because the content of the image is already provided in context through text. Linked images may often be combined with the adjacent text into one link, in which case the image may be given null/empty alternative text (alt=””).
The Algorithm… in English:
The alternative text is the same as text that is within 15 characters of the image.Suspicious alternative text
What It Means:
Alternative text is likely insufficient or contains extraneous information.
Why It Matters:
If the alternative text for an image does not provide the same content or information conveyed by the image, that content will not be available to screen reader users and when images are unavailable.
How to Fix It:
Ensure that the alternative text for the image or image input provides a succinct, yet equivalent alternative to the content and function of the image. Screen readers and browser presentation inform the user that the object is an image, so alternative text of “image of…” (and similar) should be avoided. If the image does not convey content or if the content is presented in nearby text (e.g., a caption), null/empty alternative text (alt=””) is appropriate.
The Algorithm… in English:
The alt text value of an image or image button:
begins with “graphic of”, “bullet”, or “image of”,
ends with “image” or “graphic”,
contains only space characters (alt=” “),
is an image file name (e.g. alt=”photo.gif”), or
is one of the following: “image”, “graphic”, “photo”, “photograph”, “drawing”, “painting”, “artwork”, “logo”, “bullet”, “button”, “arrow”, “more”, “spacer”, “blank”, “chart”, “table”, “diagram”, “graph”, or “*”.Device dependent event handler
What It Means:
An event handler is present that may not be accessible.
Why It Matters:
The JavaScript events in use do not appear to be accessible to both mouse and keyboard users. To be fully accessible, critical JavaScript interaction should be device independent.
How to Fix It:
Ensure that critical functionality and content is accessible by using a device independent event handler (which responds to both keyboard and mouse) or by using both a mouse dependent and a keyboard dependent event handler.
The Algorithm… in English:
One of the following are present:
an onmouseover event but not an onfocus event
an onclick event on something other than a link, form control, or element with a tabindex value of 0 ondblclick.Redundant title text
What It Means:
Title attribute text is the same as text or alternative text.
Why It Matters:
The title attribute value is used to provide advisory information. It typically appears when the users hovers the mouse over an element. The advisory information presented should not be identical to or very similar to the element text or alternative text.
How to Fix It:
In most cases the title attribute can be removed, otherwise modify it to provide advisory, but not redundant information. Note that the title text may or may not be read by a screen reader and is typically inaccessible to sighted keyboard users.
The Algorithm… in English:
A title attribute value is identical to element text or image alternative text.Can you fix it?
The topic ‘Captcha output accessibility warnings’ is closed to new replies.