All images need to have succinct, accurate, and equivalent Alt Text. This will be read by screen readers and should present the content and function of an image.
Read more about alt text tips and tricks from the W3C (World Wide Web Consortium) WAI (Web Accessibility Initiative).
Important Note:
CivicPlus works toward WCAG 2.0 AA accessibility standards and our websites are highly compliant when they go live. However, ongoing ADA compliance and maintenance is the customer's responsibility.
Who can use this feature?
System Administrator | Owner | Publisher | Author
Alt Text Tips & Guidelines
Alt text should not contain redundant phrases like “image of” or “graphic of”
Alt text for two images cannot be the same.
If there are two photos of a river, for instance, on a page, either distinguish them by saying “River 1” and “River 2” or write more specific alt text such as “East side of the river” and “Close-up of river water”
If an image contains words, add as much of the text from the image as possible to the alt text (100-character limit).
Alt text should not contain file extensions, such as .jpg. It should be easily readable and describe what is happening in the image
See the following explanation for using file extensions in the alt text
Complex Images
Some examples of complex images can include charts, graphs, maps, or images of text.
When text is displayed in an image, that text should be used as the image's alt text.
A link should be provided to an accessible format of the image's information.
To learn more about how alt text can be applied to images of text, review the WCAG (Web Content Accessibility Guidelines) Success Criterion 1.4.5.
Linked Images
If the image functions as a link, the alt text should describe where the image will take the user
For instance, if an image showed a Swoosh and linked to the Nike Website, the appropriate alt text would be “Nike.” A screen reader would identify the link and add “site” or “link,” therefore writing “Nike Website” as alt text would be redundant, and “Nike Logo” would not make sense
If the image links to a document, the alt text should contain the file extension.
For example, if you have a cover image of the annual report, the alt text would be “Annual Report (PDF)”
If the image links to a larger version of itself, the alt text should read with the file extension
For example, an image of a map linking to a larger version of itself should have the alt text “Map of Downtown (JPG)”
Update Alt Text While Inserting an Image
Note:
This process may look different based on how your site was designed.
Navigate to the page you wish to add an image to
Make sure the Live Edit state is toggled ON:
Select the Widgets tab from the Live Edit panel:
Click the Image Widget to drag-and-drop it in the location on the page:
Locate the image to add to the page:
Note:
To easily locate your image, you can Search for its Display Name or ID:
Click the Actions button next to the image:
Select the Modify option:
Add Alt Text to clearly explain what is happening in the image:
Accessibility Compliance: Make the alt text as compliant as you can and keep it consistent with the image’s purpose
Click the Save button in the Content Images pop-up window:
Click the Insert button:
(Optional) Edit the image as desired or create a linked image
Click the Save button:
Add/Update Alt Text for an Existing Inserted Image
Note:
This process may look different based on how your site was designed.
Navigate to the page you wish to add an image to
Make sure the Live Edit state is toggled ON:
Click inside the Editor widget in which the image has been inserted
Click the image to bring up the Image Toolbar:
Click the Alt Text icon:
Use the Alternative Text field to add or update the Alt Text for the image:
Click Update to finish your work:
Click the Done Editing (checkbox) icon to close the Editor Widget
Click Save to save your work:
Additional Resources
Understanding WCAG (Web Content Accessibility Guidelines) | Overview
W3C (World Wide Web Consortium) WAI (Web Accessibility Initiative) Images Tutorial