hackforla / hackforla/website

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

Open
#3,889 3 comments 0 reactions 0 assignees View on GitHub
Complexity: Medium Dependency Feature: Accessibility HLC: M manual dependency release P-Feature: Toolkit role: front end size: 1pt
Dominant language
JavaScript
Stars
363
Forks
872
Avg merge
2d 21h
Merged PRs (30d)
18

Description

### 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](https://www.hackforla.org/toolkit) page's External Resources section
2. Link to wiki article for [How to make SVGs and other images WCAG compliant](https://github.com/hackforla/website/wiki/How-to-make-SVGs-and-other-images-WCAG-compliant)
3. [pages/toolkit.html](https://github.com/hackforla/website/blob/gh-pages/pages/toolkit.html)
4. This issue is a result of issue #2567

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.