Toolkit page: Make the Guides section cards' SVGs WCAG compliant

[JessicaLucindaCheng]

Overview

We need to edit the guide card SVGs on the Toolkit webpage so that we adhere to the Web Content Accessibility Guidelines (WCAG) and we can achieve our mission of inclusivity.

Action Items

For this issue, we will be adding the alt text property to the guide card images on the Toolkit webpage, which requires the HTML to be refactored.

• Open _includes/guide-card.html in VS Code or your IDE, then change this line of code

  {% include {{ guide.svg }} %}
  

  to

  <img src={{ guide.svg | absolute_url }} alt="">
  

• Move the 2FA.svg file from _includes\svg to the assets\images\guides\2FA directory
• Move the survey-reporting-image.svg file from _includes\svg to the assets\images\guides\survey-reporting directory
• Update the svg field for _guide-pages/2FA.html from

  svg: svg/2FA.svg
  

  to

  svg: /assets/images/guides/2FA/2FA.svg
  

• Update the svg field for _guide-pages/survey-reporting-dashboard-guide.html from

  svg: svg/survey-reporting-image.svg
  

  to

  svg: /assets/images/guides/survey-reporting/survey-reporting-image.svg
  

• Update the svg field from

  svg: svg/default.svg
  

  to

  svg: /assets/images/toolkit-default-card-image.png
  

  for the following files in the _guide-pages directory:
  • creating-kanban-project.html
  • figma-for-opensource-projects.html
  • github-issues.html
  • responsible-use-of-images-on-opensource-projects.html
  • setting-up-1password-on-opensource-project.html
  • showing-civictech-experience-on-linkedin.html
  • updates-team-pages-on-hflasite.html
  • using-kanban-project.html
• Make sure the space between the image and text is there like how it is on the current live Toolkit webpage for mobile, tablet, and desktop views.
  
  
  

  Click here to see the spacing which I have indicated with an arrow when viewing the page in desktop view

  
  
  
  • If the spacing is not there, add the spacing back in; in VS Code or your IDE, edit the SCSS file _sass/components/_toolkit.scss and, if needed, edit the HTML in _includes/guide-card.html, such as the SCSS classes applied to the HTML
    • Make sure to reference the Figma design for the Toolkit page to determine the exact spacing for mobile and desktop views
• Using Docker, make sure changes look good on mobile, tablet, and desktop views using developer tools and that nothing breaks
  • Ignore #3723

Resources/Instructions

• Toolkit webpage
• _includes/guide-card.html
• _includes/svg/2FA.svg file
• _includes/svg/survey-reporting-image.svg file
• Files in the _guide-pages directory:
  • 2FA.html
  • survey-reporting-dashboard-guide.html
  • creating-kanban-project.html
  • figma-for-opensource-projects.html
  • github-issues.html
  • responsible-use-of-images-on-opensource-projects.html
  • setting-up-1password-on-opensource-project.html
  • showing-civictech-experience-on-linkedin.html
  • updates-team-pages-on-hflasite.html
  • using-kanban-project.html
• _sass/components/_toolkit.scss
• Figma designs for the current webpages: You will need to zoom in and find the Toolkit page's designs (in red box) and screenshots.
• Related design issue: Review the alt text for Toolkit page images and ensure that they adhere to WCAG #2567

[github-actions]

Hi @michaelmagen, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[michaelmagen]

Availability: 4 hours
ETA: 11/6/22

[github-actions]

@michaelmagen

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, November 7, 2022 at 11:21 PM PST.}

[michaelmagen]

1. Working through tasks
2. Time, working on finishing the task soon.
3. 4 hours
4. 11/15/22

[michaelmagen]

Blocker: Having trouble with fixing the spacing between the image and text after applying the changes.