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.
  
  Details

  
  

  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 @JessicaLucindaCheng.

Good job adding the required labels for this issue. The merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels

[JessicaLucindaCheng]

@JessicaLucindaCheng See if you can use this: https://drive.google.com/drive/folders/1Pd07M-1hocCBrISiQ3x136-FivC9NLh1

Edit: It won't make a difference because this is an svg converted from a png. Thus, they are the same size. Also, the spacing issue is caused by original line of code in Liquid template language being {% include {{ guide.svg }} %}, which added the space after the image and before the header/title for each card. For more information on Liquid Template Language and spaces, see this documentation on Whitespace control for Liquid template language.