Creating issues to update alt texts on Events page

[SAUMILDHANKAR]

Dependency

• Change alt text for westside location image on events page #3255
• Update HelloGOV Alt Text on Events Page: our-locations-content.html #3281
• Change alt tag for Lucking Parking image on events page to adhere to WCAG #3279
• Update Events page alt text for Not Today image to adhere to WCAG #3280
• Update Alt Text for Westside New Schools Today Image on Events Page #3282
• Change alt tag for VRMS Project image on events page to adhere to WCAG #3286
• Update Events page alt text for HFLA Website image to adhere to WCAG #3300
• Update Events page alt text for Write For ALL image to adhere to WCAG #3308
• Change alt text for Westside Expunge Assist image on events page #3316
• Update Events page alt text for Undebate project image to adhere to WCAG #3307
• Change alt text for Downtown LA 311 Data location image on Events page #3310
• Change alt text for Downtown LA Civic Tech Index location image on Events page. #3314
• Change alt text for LA TDM Calculator on Events page #3309
• Change alt text for Downtown LA VRMS location image on Events page #3312
• Change alt text for Downtown LA Home Unite Us location image on Events page #3315
• Change alt text for Downtown LA Hack For LA Website image on Events page #3313
• Change alt text for Downtown LA Food Oasis location image on events page #3311
• Change alt tag for Public Tree Map Project image on events page to adhere to WCAG #3284
• Update alt text for Engage project image on the Events page to adhere to WCAG #3278
• Update Hack for LA Alt Text on Events Page: our-locations-content.html #3306

Overview

We need to ensure that alt text for images adhere to Web Content Accessibility Guidelines (WCAG). For this epic, we will write issues to change the alt text for the images in the Events page which will then be added to dependency items above.

Details

Designers and PMs identified that some alt texts in the Events 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

• This issue should only be assigned to a lead.
• Lead would guide other developers on creating issues using the following steps (These steps would be recurring for each issue that would be created and this action item should stay unchecked until all the issues have been created):
  • Check the following Google spreadsheet tab to track the issue creation progress (there are 19 issues in total that need to be made)
  • Choose a row for which issue needs to be created and add your name in the Issue writer column. (If multiple team members creating issues simultaneously, let other team members know which row you would be working on, so there are no duplicate issues). See column H to know if an issue has been made already
  • Create a new issue with steps to change the alt text for an image following the sample issue below as well as using How to create issues wiki.
  • Update the issue link in the Google spreadsheet tab
• Add the issue numbers of all the issues that have been created to the dependency section above.
• If all the issues for the spreadsheet tab have been created, add a dependency label and move this issue to ice box column.
• If all the dependency issues are closed, remove the dependency label, move this issue from ice box to In progress column and close this issue.

Resources/Instructions

Events page
Google spreadsheet tab to track issue creation
How to create issues wiki

Sample Issue #3255

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 westside location on Events page.

Details

Designers and PMs identified that some alt texts in the Events 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 _includes/events-page/our-locations-content.html, change line 5 for the alt text:

from

<img class="location-image" src="../assets/images/hack-nights/westside1.png" alt="westside" />

to

<img class="location-image" src="../assets/images/hack-nights/westside1.png" alt="Westside" />

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

Resources/Instructions

• This issue is part of epic Creating issues to update alt texts on Events page #3132
• Events 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: _includes/events-page/our-locations-content.html
• Click on the link below to see the source file code:
  

  website/_includes/events-page/our-locations-content.html

  Line 5 in c88d715

  <img class="location-image" src="../assets/images/hack-nights/westside1.png" alt="westside" />

Information about WCAG

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

[JessicaLucindaCheng]

• I pulled several issues from the Dependency section and closed them as unplanned because changes in Events page: Remove projects from Our Locations section #3027 made those issues' alt text no longer valid since their associated images no longer exist on the page.

[jdingeman]

All dependencies have been checked off. Moved to New Issue Approval and removed Dependency label per

• Change alt text for westside location image on events page #3255

[JessicaLucindaCheng]

Closed this issue per the last action item in this issue.