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

[JessicaLucindaCheng]

Dependencies

• When we are ready to prioritize the toolkit again
• Wiki: How to use ARIA labels with SVGs #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 Review the alt text for Toolkit page images and ensure that they adhere to WCAG #2567