ATAG - Feature - Text alternative (ALT-text)

[DannyLancaster]

Accessibility by default or built-in support for accessible content creation.

An ALT-text means Alternative text, a description of a visual element in text. ALT-texts are important for visually impaired users with screen readers, who can only understand the purpose of the image when it is described in text that the assistive technology can convert into read out wording or braille.

Web interface: the end user view

Code of the end user view

<h1>Photos that changed the world</h1>

<h2>A man on the moon</h2>

<p>
Somewhere in the Sea of Tranquillity, the little depression in which Buzz Aldrin stood on the evening of July 20, 1969, is still there—one of billions of pits and craters and pockmarks on the moon’s ancient surface. But it may not be the astronaut’s most indelible mark.
</p>
<img src="buzz-aldrin-on-moon.jpg" alt="The first photograph of a man on the moon, Buzz Aldrin 1969" width="450" height="400"/>
<img src="dots.jpg" alt=""width="450"height="50"role="presentation"/>

<h2>Michael Jordan</h2>

<p>
It may be the most famous silhouette ever photographed. Shooting Michael Jordan for LIFE in 1984, Jacobus “Co” Rentmeester captured the basketball star soaring through the air for a dunk, legs split like a ballet dancer’s and left arm stretched to the stars.
</p>
<img src="michael-jordan-79.jpg" alt="Michael Jordan for LIFE in 1984 soaring through the air for a dunk, legs split like a ballet dancer’s and left arm stretched to the stars" width="514" height="360"/>
<img src="dots.jpg" alt="" width="514" height="50" role="presentation"/>

Explanation of the code example

1. The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connect ion, or an error in the src attribute, or if the user uses a screen reader.
2. A empty alt attribute will make screen readers ignore the picture.
3. Setting the role attribute to the value presentation will remove the image from the page content structure.

Video documentation

https://youtu.be/c5-CPg2RfYw

Recommendations for implementation

To make sure the implementation of the features is not causing accessibility problems for web authors with disabilities:

• avoid drag-and-drop for choosing template, and/or always have a keyboard alternative;
• always provide one pointer alternative without specific gestures;
• always support keyboard navigation;
• consider keyboard shortcuts;
• do not rely on sensory characteristics as the sole indicator for understanding and operating content;
• do not indicate important information using colour alone;
• make sure there is enough contrast between text objects and its background colour.

[RachBreeze]

As the alt tag is narrative it forms part of the page content and not the image content, this means it should be added to the media picker. An example of how this could look is found in the alt text property description on this discussion https://github.com/umbraco/Umbraco-CMS/discussions/10468