Program Areas: Update alt text for .page-card-image to adhere to WCAG

[MattPereira]

Prerequisite

1. Be a member of Hack for LA. (There are no fees to join.) If you have not joined yet, please follow the steps on our Getting Started page.
2. Please make sure you have read our Hack for LA Contributing Guide before you claim/start working on an issue.

Overview

As a developer, we need to provide clear and descriptive alt text on the Program Areas page so that we adhere to the Web Content Accessibility Guidelines (WCAG) and we can achieve our mission of inclusivity.

Action Items

• Change the image alt property value within pages/program-areas.html:

From:

<img class="page-card-image" src="{{ program_areas[1].image }}" alt="{{ program_areas[1].image_alt }}" />

To:

<img class="page-card-image" src="{{ program_areas[1].image }}" alt="" />

• Ensure that the corresponding Program Areas page stays the same after the change
• Using developer tools to inspect the image, ensure that the new alt text gets incorporated after the change.
  • Note: alt="" in code while show up as alt when using developer tools to inspect the image's alt text property.

Resources/Instructions

• https://www.hackforla.org/program-areas

File and Code links you will need to work on this issue

• Directory to find the page in once you have it in your IDE: pages/program-areas.html
• Click on the filename below to see the source file code:
  

  website/pages/program-areas.html

  Line 24 in 075ce5f

  <img class="page-card-image" src="{{ program_areas[1].image }}" alt="{{ program_areas[1].image_alt }}" />

Background information about the Jekyll framework (optional reading)

• Jekyll Data Files
• Jekyll Front Matter

Information about WCAG and alt text (optional reading)

• WCAG
• Web Accessibility Tutorials: Decorative Images
• WCAG section on alt text
• Alt text decision Tree
• FAE rule 4: alt text should be less than 100 characters

[github-actions]

Hi @mademarc, 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 :)

[github-actions]

@mademarc

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, February 6, 2023 at 11:17 PM PST.}

[mademarc]

i. Availability: feb 10
ii. ETA: 5:30pm

[mademarc]

Provide Update

1. Progress: working on pushing the code & update the repo
2. Blockers: No blockers
3. Availability: Will get inti this matter in 3-5 business days
4. ETA: Should be done by 03/09/2023