Change alt texts for images on citizen engagement page

[SAUMILDHANKAR]

Dependency

• Change alt text for sdg image in 311 data md file #3091
• Change alt text for hero image in citizen engagement html file #3088
• Change alt text for card image in 311 data md file #3090
• Change alt text for sdg image in access the data md file #3093
• Change alt text for card image in access the data md file #3092
• Change alt text for card image in engage md file  #3094
• Change alt text for sdg image in engage md file #3095
• Change alt text for card image in lucky parking md file #3096
• Change alt text for sdg image in lucky parking md file #3097
• Change alt text for card image in open community survey md file #3098
• Change alt text for sdg image in open community survey md file #3099
• Change alt text for CFA logo image in citizen engagement html file #3100
• Change alt text for LA neighborhood councils image in citizen engagement html file #3101
• Change alt text for Palms neighborhood council image in citizen engagement html file #3102
• Change alt text for Echo Park neighborhood council image in citizen engagement html file #3103
• Change alt text for LA county open data image in citizen engagement html file #3104
• Change alt text for voices neighborhood council image in citizen engagement html file #3105
• Change alt text for Mid-city neighborhood council image in citizen engagement html file #3106
• Change alt text for Marvista community council image in citizen engagement html file #3107

Overview

We need to ensure that alt text for images adhere to Web Content Accessibility Guidelines (WCAG). For this epic, we will write the issues to change the alt text for the images on citizen engagement page and the issues will be added as Action Items below.

Details

Designers and PMs identified that some alt texts in the Citizen Engagement page should be changed because they are either inaccurate or too long. Ideally, alt text should be descriptive but short and succinct. According to the WCAG page, an accompanying alt text should be short. Additionally, the Functional Accessibility Evaluator (FAE) recommends for alt text to be no more than 100 characters.

Action Items

• Write issues and add to the Dependency section above.
• Move this issue to the ice box column when the milestone has been added.
• Once all the issues in the dependency are closed, close this issue.

Resources/Instructions

• Google sheet to track issue creation
• Related issue Review the alt text for Citizen Engagement page images and ensure that they adhere to WCAG #2570

Sample issue #3088

Overview

We need to ensure that alt text for images adhere to Web Content Accessibility Guidelines (WCAG). For this issue, we will change the alt text for the hero image on citizen engagement page.

Details

Designers and PMs identified that some alt texts in the Citizen Engagement page should be changed because they are either inaccurate or too long. Ideally, alt text should be descriptive but short and succinct. According to the WCAG page, an accompanying alt text should be short. Additionally, the Functional Accessibility Evaluator (FAE) recommends for alt text to be no more than 100 characters.

Action Items

• For the file pages/citizen-engagement.html, change line 25 for the alt text:

from

alt="Image of people together in community" />

to

alt="" />

• For merge team: Once the pull request associated with this issue is approved and merged, please update and edit epic Change alt texts for images on citizen engagement page #3089 by
  • Checking off the dependency for this issue
  • If all dependencies are checked off, please move issue Change alt texts for images on citizen engagement page #3089 to the New Issue Approval column and remove the Dependency label

Resources/Instructions

• This issue is part of epic Change alt texts for images on citizen engagement page #3089
• Citizen Engagement page
• Alt text decision Tree
• FAE rule 4: alt text should be less than 100 characters

File and code links you will need to work on this issue

• Directory to find the page once you have it in your IDE: pages/citizen-engagement.html
• Click on the link below to see the source file code:
  

  website/pages/citizen-engagement.html

  Line 25 in b834424

  alt="Image of people together in community" />

Information about WCAG

• WCAG
• Web Accessibility Tutorials: Decorative Images
• WCAG section on alt text