ER: Use the SVGs in the src attribute in img tags, and write up details for wiki

[ExperimentsInHonesty]

Emergent Requirement - Problem

We need a new issue for making each of the SVGs on the individual project pages have alt="" Which will require wrapping them in an <img src="...

• update: The issue written to provide accessible text for the svgs Replace inline SVGs with IMG elements in Projects' Resources section #4291 did accomplish that goal but caused an unintended side effect and so another issue will be required to resolve that - see ER: Use the SVGs in the src attribute in img tags, and write up details for wiki #4242 (comment)

Issue you discovered this emergent requirement in

• Individual project pages' Wiki and Overview should not have alt="/" #2626

Date discovered

2023-03-21

Did you have to do something temporarily

• YES
• NO

Who was involved

@ExperimentsInHonesty @JessicaLucindaCheng

What happens if this is not addressed

We don't have alt text for the SVGs which is not WCAG compliant.

Resources

Recommended Action Items

• Make a new issue
• Discuss with team
• Let a Team Lead know

Potential solutions [draft]

[JessicaLucindaCheng]

Here is a wiki page for how to make a SVG WCAG compliant: https://github.com/hackforla/website/wiki/How-to-make-SVGs-and-other-images-WCAG-compliant

[roslynwythe]

• New issue Replace inline SVGs with IMG elements in Projects' Resources section #4291

[ExperimentsInHonesty]

@JessicaLucindaCheng The wiki page doesn't mention which method we prefer. Or when to use either method. Is that something we want to do and does it belong in a decision record referenced by that page?

[roslynwythe]

• update: Replace inline SVGs with IMG elements in Projects' Resources section #4291 did provide a descriptive name for the svgs in the Resource section of the project page, however there was an undesirable side-effect; that is, the <a> elements that wrap the svgs took on an additional name, and as a result, when the screen reader is focused on the link element, it reads a duplicate name, for example: "GitHub GitHub". This is due to the fact that link elements are assigned "accessible names" based on concatenation of the accessible names of their child elements. A child element (<h4>GitHub</h4>) alread exists and so adding the aria-label to the div adds another name.

The two best solution I've found so far is:

• do not wrap the svg in a div with 'aria-label' and role="img"
• wrap the svg in another svg element. The outer svg element should have:
  • attribute role="img"
  • attribute aria-labelledby="titleID"
  • the first child element: <title id="titleID">ANAME</title>
    • where ANAME is the accessible name (ie the "alternative text")

[roslynwythe]

• Issue Improve accessible naming for resource icons in project pages #6655 will implement the solution presented in ER: Use the SVGs in the src attribute in img tags, and write up details for wiki #4242 (comment)
• Issue Update wiki page with another method for making SVGs WCAG compliant #6653 will create a wiki page to document the technique.

[roslynwythe]

Closing