Image Missing When Described in Context
Brief Description: When an important image is adequately described in context by surrounding text, using alt="" The presence of a meaningful image is hidden from the AT user. This behavior is inappropriate for a number of reasons. This issue will explain the problem in more detail and suggest some possible solutions.
There are four states that an accessible image can be in:
- Decorative with alt="" and hidden from the AT.
- Adequately described by alt text.
- Image that has details in an an extended description to supplement the alt text.
- Image is adequately described in the surrounding text and no alt text is needed.
In the past, role="presentation" and alt="" would remove the image from the accessibility tree, which is correct behavior for a decorative image. More recently, all images with alt="" assumes that the image is decorative and removes the image from the accessibility tree, which is incorrect for state 4, where the image is described in surrounding text, and still should be available in the accessibility tree.
The current ARIA in HTML Specification for the case when an image has alt="" states:
img with alt="" role=presentation is NOT RECOMMENDED. No role or aria-* attributes except aria-hidden="true"
The current W3C validator will throw an error when an image has the role="presentation". The validator in this case should throw a warning instead of an error, and there is a Github issue 1425 and soon to be pull request to resolve this issue. This should resolve the problem of legacy contenting having both role="presentation" and alt="", but it does not resolve the state 4 where images are adequately described in surrounding text.
The current recommendation assumes all images with alt="" has an implicit role of presentation by default. The image element is removed from the accessibility tree thus resulting in nothing spoken to a Screen Reader /AT user (i.e., they have no idea the image even exists) which for purely decorative images is fine, however we have use cases where this is not the desired behavior.
We will present the use cases which will make it clear that some kind of additional role values need to be identified.
As a blind user, I do not want to be bothered with purely decorative images, and I want to know the location of an image as I encounter text that is describing the image.
As a blind user, I want to navigate to meaningful images. I can use JAWS and NVDA to simply hit g to be taken to a graphic (img). Many times text will say something like refer to figure 18. However, currently I cannot navigate to an image when the alt="" is set.
As a blind user I get confused when I hear a figure caption, but no image is present. I read a figure caption, which many times provides a good description of the image in the figure, but to my surprise, there is no image reported by my screen reader.
As a publisher, in my workflow I want to identify images that are purely decorative and distinguish them from those that are adequately described in surrounding text.
I use vendors and I want to easily check their work to see if the decorative images and those images that are sufficiently described in surrounding text are properly treated. Currently, I have no way to tell the difference.
As a Remediation Developer integrating solutions into browser implementations, I want to use AI to add alt text to images, but I do not want to add alt text to images that are adequately described in surrounding text. Browsers are looking at ways to use AI to improve the accessibility of images on web pages. However, we have no way of knowing if an image is described by surrounding text, or this image is purely decorative. We need to know if the author has intentionally not added alt text or if the image is decorative. We are prepared to add Alt text when the author has neglected to include alt text, but we have no way of knowing the author's intent for sure.
As a third-party auditor, I want to know if the author intended this image to be described or not. Did the author forget to include an alt text description or was there a conscious decision that this image is sufficiently described in the surrounding text, or that this image is truly decorative and should not be describe or the user informed of its existence.
Our group was reluctant to make technical recommendations, but we believe it would help to clarify the problem.
Role="presentation" is used to identify layout tables and possibly other constructs. Recently the recommendation to not use role="presentation" on images was made, and reversing this decision could contribute to confusion.
Two new roles could be defined.
- role="decorative"
- Role="describedInContext"
DescribedInContext or described InSurroundingText seem pretty long, but they are self-documenting.
We also recognize that making the recommendation to include something like, "described in surrounding text." as Alt text would partially solve the problem. However, this approach would require each publisher to build their own workflow solution, which would be prone to error. Also, it is unclear how alt text with a suggested string would be addressed internationally.
We are not married to these terms, and we recognize that there are other possible mechanisms to resolve the problem.