The text alternative for img elements and elements with [role="img"] must summarize the content and/or purpose of the image.
Images can convey a wide range of content and be used for many different purposes on a web page, from button and icon images that perform simple actions to complex graphics that help people visualize the features and relationships of large data sets.
Markup supports creating both short and long text alternatives. A short text alternative is designed to orient people who cannot see the image to the type of content it contains or its purpose on the page. A long text alternative or long description provides comprehensive details of the features of an image, e.g., the data used to generate a chart or graph, relationships in a flow chart, or a MathML version of a mathematical equation.
Images that function as buttons and perform an action on the page should have a short text alternative that is as succinct as possible (e.g., "Increase text size").
Informative images of photographs need a short text alternative and additionally can often benefit from long descriptions.
Informative images of charts or graphs need both a short text alternative and a long description to describe its purpose and the data used to create it.
If an image that is informative does not have text alternative content, users of assistive technologies will not have access to the information the image conveys.
Use the alt attribute on img elements to provide a text alternative for the image. A rule of thumb is to use what you would say to someone over the phone to describe the image.
The aria-labelledby attribute can be used to provide a text alternative when images can be described using text already associated with the image, such as a visible caption, or for elements with role="img".
The aria-label attribute should only be used to provide a text alternative in the special case when an element has a role="img" attribute.
The title attribute will be used by assistive technologies to provide a text alternative if no other specification technique is found. NOTE: Using the title attribute will also generate a tooltip in some browsers.
Use the attributes alt="", role="presentation" or include the image as a CSS background-image to identify it as being used purely for stylistic or decorative purposes and that it should be ignored by people using assistive technologies.
Find each image on the page and verify that it is only being used decoratively or is redundant with other information on the page.
Information about the element associated with the result.
The information typically includes the tag name, accessible name or other information related to the rule requirements.
"Page" means that the result applied to the page. For example, the rule "One main landmark on the page" is a page level rule.
The element position is based on the DOM order of elements in the page.
The element position maybe useful in helping to locate a specific element on the page evaluated (e.g smaller numbers are typically toward the beginning of a page and larger numbers typically toward the end of a page).
Element position 1 is the first element.
The highest element position is the last element.
Element position values for most rule/page results will not be consecutive since a rule only applies to a sub set of elements found on a page.