rich-text-editor: Images with missing text descriptions #86
Description
WCAG Level
Level A
Priority
High
Pages/screens/components affected
Description
When images do not have a text description it means anyone who cannot see images properly will not know what the images are for.
The rich text editor allows for the uploading and use of images, however it does not provide any way to add a text alternative for these images.
User impact
If an image does not have an appropriate text description, someone who is blind and uses a screen reader or someone who has images turned off in their browser to save on bandwidth will be completely unaware of the image's purpose. If the image conveys important information like a graph, or is critical to the operation of a control like a link or button, then a missing text description can prevent them from completing vital tasks.
Required solution
In order to allow users of the rich text area to make sure that every image that conveys information or is used to perform an action has an appropriate text description, it must be possible to add a text alternative.
Implementation guidance
Images uploaded via the rich text editor are included as base64 encoded images:
<p><img src="data:image/png;base64,…"></p>The images lack both an alt attribute and a method of adding one. While it is impossible to enforce good text alternatives, it must at least be possible for users to add them.
We recommend changing the image upload process to something similar to the link control. Activating the image control could open a dialog that has an file upload field (or Vaadin upload component) and a text or textarea input for entering a text alternative. To encourage people to enter text, add a checkbox to indicate that an image is decorative, otherwise require that text is entered.
When it is possible to enter a text description it can be added to the <img> element as usual:
<p><img src="data:image/png;base64,…" alt="[text description]"></p>Images explicitly marked as decorative by the user should be output with an empty alt="" attribute.
<p><img src="data:image/png;base64,…" alt=""></p>Test procedure(s)
Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the website for instances of the same issue:
- Ensure that it is possible to provide a text alternative for uploaded images.
- Check that the alternative text provided for an image is included in the image's
altattribute.
Definition of done
Complete all of these tasks before closing this issue or indicating it is ready for retest:
- All issues identified within the test sample have been resolved.
- The rest of the components, their variants, and the documentation website have been tested for the same issue.
- All issues identified throughout the rest of the components/website have been resolved or filed as new issues.
Related standards
More information
- W3C: Image concepts
- W3C: An alt decision tree
- W3C: HTML 5.2 Requirements for providing text to act as an alternative for images
Test data
Test date: March 2021
Website: vaadin.com/components, vaadin.com/docs-beta