Skip to main content

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

Create Alt Text for Images

  • Updated:

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).

 

Who can use this feature?

System Administrator | Owner | Publisher | Author

 

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.

 

Article Navigation

 

Not finding what you are looking for? View additional resources.

 

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)”

 

Go to Article Navigation

 

Add Alt Text to an Image

 

  1. Sign in to your Web Central website using your CivicPlus Single Sign-On account
    Note: This process may look different based on how your site was designed.
  2. Navigate to the page you wish to add an image to
  3. Click the Live Edit is OFF button to enable Live Edit:
    Web Central Live Edit is Off button.
    Note: If Live Edit is enabled, the button will read Live Edit is ON
    When Live Edit is ON, Web Central pages are able to updated.
  4. Select the Widgets tab from the Live Edit panel:
    Once Live Edit is ON, the Live Edit panel expands allowing access to the Widgets tab.
  5. Click the Image Widget to drag and drop it in the location on the page:
    When selected, Widgets can be added easily to the page.
  6. Locate the image to add to the page:
    Note: To easily locate your image, you can Search for its Display Name or ID:
    Web Central image widget search box.
  7. Click the Actions button next to the image:
    An image's Actions button opens a menu of options that can be selected to update the image.
  8. Select the Modify option:
    The Action menu's Modify option allows the user to edit an image as needed.
  9. Add Alt text to clearly explain what is happening in the image:
    In the Content Images pop-up window, the required Alt text field is filled out with the words 'dog in park'.
  10. Click the Save button in the Content Images pop-up window:
    The Modify option's Save button saves all changes made to the image.
  11. Click the Insert button:
    Once the image is updated, the Insert button will add the image to the page.
  12. (Optional) Edit the image as desired or create a linked image
  13. Click the Save button:
    Once the image has been added to the page, the Save button will save the changes made.

 

Go to Article Navigation

 

In-Article Glossary

Review the Municipal Websites Central Glossary for a comprehensive explanation of the acronyms, abbreviations, and company-specific terminology. The terms located in this section are listed alphabetically.

  • ADA: Americans with Disabilities Act
  • Alt: Alternative
  • W3C: World Wide Web Consortium
  • WAI: Web Accessibility Initiative
  • WCAG: Web Content Accessibility Guidelines
  • Web Central: CivicPlus' Municipal Websites Central solution

 

Go to Article Navigation

 

Additional Resources

 

Go to Article Navigation

Was this article helpful?
0 out of 0 found this helpful
Return to top

Feedback About the Article

Let us know what was helpful or not helpful about the article below.

0 comments

Please sign in to leave a comment.