Use empty alt text for Pets component 'hero' image

[rightsaidjames]

From step 7 onwards, the Pet component implements this code inside an <a> or <Link> element:

<div className="image-container">
  <img src={hero} alt={hero} />
  </div>
<div className="info">
  <h1>{name}</h1>
  <h2>{`${animal} — ${breed} — ${location}`}</h2>
</div>

The name prop used for the image alt text is duplicated in the contents of the adjacent H1, so my suggested change is to set the alt text attribute to empty:

<div className="image-container">
  <img src={hero} alt="" />
  </div>
<div className="info">
  <h1>{name}</h1>
  <h2>{`${animal} — ${breed} — ${location}`}</h2>
</div>

This will have the effect of making the image effectively invisible to screen reader users, but the current consensus is that this is desirable behaviour when the alt text would otherwise be duplicating adjacent text. In an ideal world the alt text would accurately describe the contents of the image (e.g. colour, fur type, position, background elements) of each pet, but

The Carousel component has a similar issue with redundant alt text (alt="animal" and alt="animal thumbnail"), but setting the alt text to blank would essentially make the carousel entirely empty to screen reader users, so I don't think this is addressable without reworking the entire component.

References: https://webaim.org/techniques/alttext/#context https://rocketvalidator.com/accessibility-validation/axe/4.7/image-redundant-alt