Change alt text for card image in 311 data md file

[SAUMILDHANKAR]

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 311 data project card 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 _projects/311-data.md, change line 72 for the alt text:

from

card-image-alt: 311 project card

to

card-image-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: _projects/311-data.md
• Click on the link below to see the source file code:
  

  website/_projects/311-data.md

  Line 72 in f2ce898

  card-image-alt: 311 project card

Information about WCAG

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

[github-actions]

@mchavezm

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, June 7, 2022 at 12:21 AM PST.}

[mchavezm]

Progress: I'm starting this issue today.
Blockers: none so far
Availability: 5 hours
ETA: Assuming no issues, should be done by Tue June 13, 2022.
Pictures: n/a