Toolkit page: Make the External Resources section cards' SVGs WCAG compliant

[JessicaLucindaCheng]

Dependencies

• [ ] When we are ready to prioritize the toolkit again
• [x] #3879

Overview

We need to make the Scalable Vector Graphics (SVGs) in the Toolkit webpage's External Resources section Web Content Accessibility Guidelines (WCAG) compliant so that we can achieve our mission of inclusivity.

Action Items

• [ ] Read the wiki article for How to make SVGs and other images WCAG compliant [See 2 in Resources/Instructions section below]
• [ ] Apply what you learned from the wiki article to the SVGs in the External Resources section of the Toolkit webpage by editing pages/toolkit.html file.
  • [ ] All the External Resources images (Figma, GitHub, Zoom) are decorative, so they should have aria-label="" if using ARIA labels or alt="" attribute if using img HTML tags
  • [ ] Make sure the code you implement is dynamic so that it works for SVGs added to the External Resources section in the future

Resources/Instructions

1. Toolkit page's External Resources section
2. Link to wiki article for How to make SVGs and other images WCAG compliant
3. pages/toolkit.html
4. This issue is a result of issue #2567

[JessicaLucindaCheng]

@hackforla/website-merge I need clarification on SVGs within image in this wiki article: https://github.com/hackforla/website/wiki/How-to-use-ARIA-labels-with-SVGs. 1) Why do we need to use aria-labels within an img tag? Can't we just use the alt attribute? 2) According to this wiki article, we need to edit each svg image that needs an aria-label. Could we do something like this: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role instead for the External Resources images on the Toolkit page? So, the aria-label would be added to the div in the following code on pages/toolkit.html

  <div class="toolkit-flex-item-img-container resource-svg-icons">
      {% include {{ item.svg }} %}
  </div>

3) If yes, to 2. Should I add that info/example into the wiki article?

Edit: I'm just going to directly edit the wiki article. See How to make SVGs and other images WCAG compliant wiki page for the edits

[JessicaLucindaCheng]

From Dev/PM meeting, I need to

• [x] Edit the wiki: https://github.com/hackforla/website/wiki/How-to-make-SVGs-and-other-images-WCAG-compliant
• [x] Have Tech Leads and Merge Team review the wiki
• [x] Re-review this issue to make it ready for milestone

[jdingeman]

@JessicaLucindaCheng - gonna put a Draft label on this until the wiki has been edited and you're ready for us to review