Accessibility: user_green.png Image needs an empty alt attribute
GENERAL
TESTING
GENERAL
TESTING
Description
The icon used for the a#presenceToggle link does not have an alt attribute. All images must have an alt attribute, otherwise adaptive technologies (like screen-reading software) will find another value to read. In this case, it will read the src attribute which is"/library/image/silk/user_green.png" and rather unpleasant to listen to.
Basic Rules of thumb to apply here: 1) Always supply an alt attribute to any img element. 2) If the image is merely decorative or the description would be redundant, use an empty alt attribute (alt="") 3) If the image is meaningful, supply a concise description of the image
In this case, the image is redundant to the additional hidden text provided in the link.
Suggestion:
Change: <a id="presenceToggle" href="#"><img style="vertical-align: middle;" src="/library/image/silk/user_green.png"><span class="skip">Toggle users present panel</span></a> to this: <a id="presenceToggle" href="#"><img style="vertical-align: middle;" src="/library/image/silk/user_green.png" alt=""><span class="skip">Toggle users present panel</span></a> by adding alt="" to the img element.
The icon used for the a#presenceToggle link does not have an alt attribute. All images must have an alt attribute, otherwise adaptive technologies (like screen-reading software) will find another value to read. In this case, it will read the src attribute which is"/library/image/silk/user_green.png" and rather unpleasant to listen to.
Basic Rules of thumb to apply here:
1) Always supply an alt attribute to any img element.
2) If the image is merely decorative or the description would be redundant, use an empty alt attribute (alt="")
3) If the image is meaningful, supply a concise description of the image
In this case, the image is redundant to the additional hidden text provided in the link.
Suggestion:
Change:
<a id="presenceToggle" href="#"><img style="vertical-align: middle;" src="/library/image/silk/user_green.png"><span class="skip">Toggle users present panel</span></a>
to this:
<a id="presenceToggle" href="#"><img style="vertical-align: middle;" src="/library/image/silk/user_green.png" alt=""><span class="skip">Toggle users present panel</span></a>
by adding alt="" to the img element.
For more on selecting the correct alt attribute value, see:
http://www.w3.org/TR/html-alt-techniques/