Redesigned homepage's CoP section img tag: Add alt property and remove the /

[JessicaLucindaCheng]

Overview

On the redesigned homepage's Communities of Practice (CoP) section's images,

• we want to add an alt property so that the images are Web Content Accessibility Guidelines (WCAG) compliant and
• we want to remove the / at the end of the img tag so that img tags are used uniformly across our website

Details

Click here to see a screenshot of the redesigned homepage's Communities of Practice section

Action Items

• Feature Branch: You will be working off a feature branch called feature-homepage-launch. Please follow "Step 1: Create your branch" in How to work off of a feature branch wiki article.
• In VS Code or another IDE on your computer, navigate to _includes/home-page/home-communities.html and change the following from

  <img src="{{ community[1].icon }}" />
  

  to

  <img src="{{ community[1].icon }}" alt="">
  

• Using developer tools in your browser, on the redesigned homepage,
  • Check the alt property shows up for each of the images under the Communities of Practice section. (Note: Sometimes when you have alt="" in the code, it will show up as alt when you view the image using developer tools. This is acceptable.)
  • Check your changes do not break anything on the website in mobile, tablet, and desktop views
• To update your topic branch, please follow "Step 2: Update your branch with upstream changes" in How to work off of a feature branch wiki article.
• The pull request created from this issue should be merged into feature-homepage-launch. Please follow "Step 3: Create a pull request" in How to work off of a feature branch wiki article

Tech Lead or Merge Team

• After the pull request associated with this issue is approved and merged, please make sure this issue is closed. If it is not closed by the automation, leave a new comment stating what pr number fixes this issue and then close this issue as completed.

Resources/Instructions

• How to work off of a feature branch wiki page
• _includes/home-page/home-communities.html on feature-homepage-launch branch
• The img tag does not need the / at the end because we are not using XML or XHTML. See this Stack Overflow answer for more info: https://stackoverflow.com/a/15149657

[github-actions]

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

[vmaineng]

i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
I am available to work on this issue right now.

ii. ETA: (When do you expect this issue to be completed?)
End of tomorrow after developer's meeting.

[vmaineng]

Submitted a PR for this issue.

[vmaineng]

Submitted a new PR to be merged with feature-homepage-launch instead of gh-pages

[MattPereira]

• Pull Request: added alt to image tags #3883 fixed this issue