Review the alt text for Citizen Engagement page images and ensure that they adhere to WCAG

[IsaacDesigns]

Overview

We need to ensure that alt text for images adhere to Web Content Accessibility Guidelines (WCAG). For this issue, we will tackle the images under the Citizen Engagement page.

Details

Developers identified that some alt texts in the Citizen Engagement page should be reviewed 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

• Make a copy of the tab Template [Page Name]- [Status]
• With the copied tab replace [Page Name] with the page you are reviewing and [Status] with "Audit in Progress". Don't forget to remove brackets "[ ]"
• Add a link of the page your working on to the Resources/Instructions section of this issue at the bottom where it says "Google sheet Tab for your page".
• For each image on the Citizen Engagement page identify if the alt text needs to be changed, or not, using the recourses below, and fill out the google sheet. To locate the alt text use the Google Chrome browser, right click "inspect" to view pages code.
• After completing auditing each image change your google sheet tabs [Status] to Audit Complete.
• Review with Design Lead or another member of the team
• Mark spreadsheet tab as QA (e.g., About Page - Audit QA)
• Add note at bottom of issue saying its ready for QA and use the close with comment, so that it goes to the QA column

Product

• Review the work and sign off on it if ready
  • Mark spreadsheet tab as Complete (e.g., About Page - QA Complete)
  • Add Ready for dev leads label
  • Move to New Issue Approval Column

Development

• Create issues for that particular alt text should be created (preferably labelled good first issue) for new developers to fix
• Close this issue

Summary

If images provide more meaning = needs alt text
If images are decorative = null alt text (alt="")

Resources/Instructions

Citizen Engagement page
Alt text decision Tree
Decorative Images and alt text
WCAG section on alt text
FAE rule 4: alt text should be less than 100 characters
Google sheet instructions
Google sheet template
Google sheet Tab for your page

[github-actions]

Hi @IsaacDesigns.

Good job adding the required labels for this issue. The merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to read and interpret labels

[github-actions]

@jenjen26

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 Monday, February 7, 2022 at 11:17 PM PST.}

[jenjen26]

Blockers: None
ETA 2/24/22

[SAUMILDHANKAR]

Issues have been created and are being tracked in #3089, so moving this issue to done column.

[JessicaLucindaCheng]

@SAUMILDHANKAR I see you have commented #2570 (comment) that you already wrote the issue. After you commented with the issue(s) you made, please remove the ready for dev leads label so we don't spend extra time checking issues that already have been followed up by a dev lead.

I will remove the label this time.