Update Donate page images' alt text to adhere to WCAG

[JessicaLucindaCheng]

Overview

As a developer, we need to provide clear and descriptive alt text on the Donate web page so that we adhere to the Web Content Accessibility Guidelines (WCAG) and we can achieve our mission of inclusivity. For this issue, we will change the alt texts on the Donate web page to adhere to WCAG.

Action Items

The following alt text changes are for the Donate web page

• Change the image's alt property value within donate.html for the following lines of code only:

  • The following alt text is on the Header-container Header-container--donate area on the web page
    • On line 18, change the alt="donate banner icon" text to alt=""
  • The following alt text is on the Content-section Donate-card-container area on the web page
    • On line 24, change the alt="donate card image" text to alt=""
    • On line 34, change the alt="donation chart" text to alt="Hosting, mailing list services, Zoom accounts, domain names, stickers, t-shirts"
    • On line 45, change the alt="donation form image" text to alt="Gif showing how to select Hack for LA from donation list"
    • Review with product referencing the parent issue Review the alt text for Donate page images and ensure that they adhere to WCAG #2568

• Check that the Donate web page looks the same

• Check that the new alt texts got incorporated after the change by inspecting the web page using developer tools

Resources/Instructions

File and Code links you will need to review this issue

• Link to web page: https://www.hackforla.org/donate/

• Directory to find the source file code once you have it in your IDE: pages/donate.html

• Click on this link to see the source file code: https://github.com/hackforla/website/blob/557ff50b2f426a7c481a22ac5ce5dd72020f6c10/pages/donate.html

• Related design issue: Review the alt text for Donate page images and ensure that they adhere to WCAG #2568

• Link to the tab on Google Sheets: https://docs.google.com/spreadsheets/d/1abMlPOX88zHTV29E4BFxAYwahCxgJN28Mn95cXr8jak/edit#gid=14599403

[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