CommandHelper

CommandHelper

46.5k Downloads

MethodScript.com Accessibility - Images should have alternative text (alt tag)

LeigerGaming opened this issue ยท 1 comments

commented

If an image is important or relevant to the page content, an alt tag should be provided with a description of what is happening in the image for the benefit of those that cannot see it. For example, the visually impaired using a screen reader.

When the image is not important (e.g. in this case, it's a search icon), an empty alt tag will suffice. Without an empty tag, a screen reader will read out loud the image name, e.g. "search icon dot p n g". Adding an empty alt tag tells a screen reader to ignore it.

There may be other cases, on other pages, that require more fine-tuned fixes. But I don't think there's many images on the website so it should be mostly just this search image that is affected.

<img class="sb-icon-search-normal" src="https://methodscript.com/docs/3.3.4/resources/images/search-icon.png?v=8475693aa4e3368d98bfc4b3872046ce">

All images within a page must be given an alternate text equivalent. Text equivalents for non-text elements communicate the meaning of images to users who cannot perceive the image such as users of screen readers. Proper equivalents provide text which contributes the same level of understanding to the content of the page as the image itself. In instances where the image does not contribute to the understanding of the content and is purely decorative, it needs to be marked in a way to indicate its purely decorative purpose.

References:

commented

Also, images should provide informative alternate text. For example, this is not good! :)

<img alt="Image:CommandHelper_Logo_New.png" src="https://methodscript.com/docs/3.3.4/resources/images/CommandHelper_Logo_New.png" class="maxWidth100Percent">

Those poor, poor screen reader users!

Images that convey meaning must provide informative alternative text. Alternative text that is default, or non-meaningful text, can negatively impact the accessibility of a page. In some cases, alt text could be insufficient while in others it may be inappropriate. The goal of alt text should be to present text which will provide the same level of understanding to those who cannot see the image as it does to those who can. Whenever possible, page developers should ensure alternative text for images including progress bar images is as terse, yet informative as possible.

Images that contain text must also provide alternative text. Placing text in images can create multiple problems, depending upon the application. Even when images contain alt attributes, the alt attribute is often not equivalent. In addition, the text inside an image cannot be resized by users who have manipulated their browser settings or created their own style sheets to display fonts in sizes bigger than the default.