Is it necessary to include alt in images

W3c specifies to use alt for all Images in the website for accessibility. How one can set it for image like bullet in javascript menus or background images or blank images (images used to get design开发者_StackOverflow or for general purposes) ?

alt attribute is required for <img> tags if you want your markup to validate. Background images and bullets are just cosmetic, they don't need an alternate representation as they are not part of the content.

You set the alt attribute of the <img ...> tag to make the image accessible to people who are using screen readers. Decorative images (such as backgrounds and bullets) doesn't need a description (it would just be clutter to the visually impaired person using the screen reader), but if you - for instance - got a graph, you should describe the information conveyed in the graph. If you need a lot of text to describe it, then you use the longdesc attribute to link to a separate file that describes the image.

HTML standard

First we go to the img element: https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element

Then we click on the alt attribute and go the the alt attribute of img: https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-alt

The requirements on the alt attribute's value are described in a separate section.

We follow the link to a centralized cross element alt section: https://html.spec.whatwg.org/multipage/images.html#alt

That section is huge, and contains a wall of human readable philosophical guidelines which are arguably interesting depending on your level of pedanticness/fault tolerance, but the last paragraph finally contains what we actually care about: how to pass the validator! https://html.spec.whatwg.org/multipage/images.html#guidance-for-conformance-checkers

4.8.4.4.15 Guidance for conformance checkers

A conformance checker must report the lack of an alt attribute as an error unless one of the conditions listed below applies:

• The img element is in a figure element that satisfies the conditions described above.

• The img element has a title attribute with a value that is not the empty string (also as described above).

• The conformance checker has been configured to assume that the document is an e-mail or document intended for a specific person who is known to be able to view images.

• The img element has a (non-conforming) generator-unable-to-provide-required-alt attribute whose value is the empty string. A conformance checker that is not reporting the lack of an alt attribute as an error must also not report the presence of the empty generator-unable-to-provide-required-alt attribute as an error. (This case does not represent a case where the document is conforming, only that the generator could not determine appropriate alternative text — validators are not required to show an error in this case, because such an error might encourage markup generators to include bogus alternative text purely in an attempt to silence validators. Naturally, conformance checkers may report the lack of an alt attribute as an error even in the presence of the generator-unable-to-provide-required-alt attribute; for example, there could be a user option to report all conformance errors even those that might be the more or less inevitable result of using a markup generator.)

The first point then has a hyperlink that explains the conditions:

In such cases, the alt attribute may be omitted, but one of the following conditions must be met as well:

• The img element is in a figure element that contains a figcaption element that contains content other than inter-element whitespace, and, ignoring the figcaption element and its descendants, the figure element has no flow content descendants other than inter-element whitespace and the img element.

• The title attribute is present and has a non-empty value.

The whole point of alt is to make your site accessible. If the image is important to your site's content (eg. is a link, posted by someone, mentioned in text, etc.) you want everyone to know what it is and that it's there. Bullet points and blank images don't really meet this criteria, so you can just leave them without alts. Bullets in javascript menus are 'supposed' to be done in CSS as well as layout, so if you feel like jumping through several hoops you can still get your code to validate if you think its worth it.

Just describe the image. What is going to make it clear for a person using a screen reader? Say it's a bullet or formatting device, and the the reader can safely ignore it.