Review alt text for WCAG compliance on Events page

[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 Events page.

Details

Developers identified that some alt texts in the Events 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 at the bottom in the Resources/Instructions section of this issue where it says "Google sheet Tab for your page".
• For each image on the 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 of the page change your google sheet tabs [Status] to Audit Complete.
• Review your completed work 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

Resources/Instructions

Events page
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 create issues
• 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/2022

[phuonguvan]

It's ready for QA.

[Providence-o]

The video has a title 'Play talk' in the code . Is a title the equivalent of an alt ?

The title should be 'Coding a better government'

[ExperimentsInHonesty]

• This issue was used to create Creating issues to update alt texts on Events page #3132 and now is done.