Review the alt text for program-area page images and ensure that they adhere to WCAG

[macho-catt]

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 program area page.

Details

Developers identified that some alt texts in the program areas 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

UI/UX Design

• Refer to this google doc for an itemized list of each alt text for each images under program area
• For each item in the list, identify if the alt text needs to be changed or not.

Development

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

Resources/Instructions

Program Area Page
WCAG section on alt text
FAE rule 4: alt text should be less than 100 characters
Google sheet list

[github-actions]

Hi @macho-catt.

Good job adding the required labels to this issue.

Additional Resources:
Wiki: How to add status labels to issues (WIP. Link will be updated when the wiki is done)
Wiki: How to create issues (WIP. Link will be updated when the wiki is done)

[jenjen26]

Progress: completed 11/19
Blockers: none.
Availability:
ETA: moved to UAT

[jenjen26]

To Discuss for 11/14/21 meeting: Do we think these images provide meaningful information or are they decorative?
Program Area Page

Decorative:

• supplementary to link text to improve its appearance or increase clickable area
• illustrative of adjacent text but not contributing information ("eye-candy"); for formatting
• identified and described by surrounding text (in this case the links to each project act as the surrounding text which would be identified by screen readers)

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

Alt text decision Tree
Decorative Images and alt text

@kristine-eudey @macho-catt

[kristine-eudey]

Hi @jenjen26, we discussed this at the Sunday meeting 10/14. I shared your findings with Bonnie and the team, she would like to review the articles you shared and we will revisit at the 11/17 meeting with UX and Product leads. Since your suggestion is something we could potentially apply site-wide to improve accessibility, a bit more consideration is needed. Will update here after that meeting and let you know how best to proceed. Thanks so much for your work on this!

[ExperimentsInHonesty]

I have not read the articles proceed on your collective judgement and please annotate in the wiki what the decision is, along with the links to the articles, in case other team members want to revisit this in the future

[jenjen26]

The team judgment at 11/18 design meeting was for the images to be considered decorative, therefore null alt text. I have updated the google document to reflect these changes.

[ExperimentsInHonesty]

Not ready for dev lead. Need another going over, adding the images that are missing from the spreadsheet and if a change is needed.

When it is ready, make sure you add this text All the issues are going to be good first or good second and only involve having empty alt text. (i.e., all of the images on the page are decorative).

[7kram]

Page has been QAed and is ready for dev lead to make issues to change alt text out of it

[ExperimentsInHonesty]

On this page https://github.com/hackforla/website/blob/gh-pages/pages/program-areas.html we need to replace all the alts with alt=""

- 24            <img class="page-card-image" src="{{ program_areas[1].image }}" alt="{{ program_areas[1].image_alt }}" />
- 47             <img class="project-card-mini-image" src="{{project.image}}" alt="{{project.image_alt}}" />
- 72 & 79     alt="join us card image"

[MattPereira]

Opted to skip creating an epic issue created since only 4 total good first issues necessary for Program Areas page review

• Program Areas: Update alt text for .page-card-image to adhere to WCAG #3875
• Program Areas: Update alt text for .project-card-mini-image images to adhere to WCAG #3876
• Program Areas: Update alt text for the join us footer desktop image to adhere to WCAG #3877
• Program Areas: Update alt text for join us footer mobile image to adhere to WCAG #3878