Toolkit page: Adding alt="" to guide card images

[JessicaLucindaCheng]

Overview

As a developer, we need to add alt text properties to guide card images 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 class(es) applied to the HTML elements in _includes/guide-card.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
  • [ ] Note: The cards that use toolkit-default-card-image.png will look different than on the live site depending on what view you are using to view it using developer tools. On the live site, the image gets cut off as you view it in smaller and smaller views using developer tools. such as mobile view. However, since we are switching to using toolkit-default-card-image.png, the image is the same but does not get cut off as you view it in smaller and smaller views. (Though, the size of the overall image looks shorter than the one on the live site.) I already spoke to Bonnie about the image looking different and being shorter, and she says it was okay.

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: #2567

[github-actions[bot]]

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.

[JessicaLucindaCheng]

I may need to redo this issue. Instead of putting the SVGs into a img HTML tag, the SVGs should be made WCAG compliant by editing them directly or use JS to do it.

Edit: Never mind. Bonnie said if possible, placing them in img tags is the best solution.

[github-actions[bot]]

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[bot]]

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