Issue
- In order to comply with WCAG accessibility guidelines, we would like to add alt-text to the images that are uploaded in the Documents & Media gallery. How can we do that?
Environment
-
DXP 7.0+
Resolution
If you try to create a new structure with the Image element, the element's Image Description field provides the alt-text.
-
Go to Site→Content & Data→Web Content→Structures tab→add (+ sign)
-
Under Fields, drag an Image element onto the gray area - it will have to fields, Image and Image description
-
Save the structure
-
Create a new web content article with it
-
Click on the Select button and upload an image
-
Write the description of the image into the Image Description field, I entered altTextTest
-
Enter a title for the web content→Publish
-
Click on Go to site→drag the new web content onto the page
-
Right-click on the image→Inspect (using Chrome)
-
Assert that you can see alt="altTextTest"
Note: the steps may be different if you are using CKEditor.
If you have a large database with numerous images, you may want to automate this process. There is an older third-party article that could be helpful, please see Adding an alt-text to an image in Liferay 6.1. Please note this is a best-effort customization not maintained by Liferay, additional assistance is provided by our Global Services team.
Additional Information