CODEWITHSUNDEEP
htmlaccessibilityslideshowsemantic-markupalt-attribute
VictorC
VictorC

Reputation: 326

What valid alt attribute should be for each image in a slideshow?

In a website directory, every business has a slideshow with several images. If I don't know what kind of picture is in each case, what should be the best way to handle the alt attribute for each image/link?

Example (edited)

<ul class="slideshow">
   <li>
     <a href="img1_full.jpg" ><img src="img1_thumb" alt=""></a>
   </li>
   <li>
     <a href="img2_full.jpg" ><img src="img1_thumb" alt=""></a>
   </li>
</ul>

Upvotes: 0

Views: 113

Answers (2)

unor
unor

Reputation: 96717

The a element can’t have an alt attribute.

Assuming that you use img:

  • If the images in the slideshow are only decoration, you have to use empty alt values.

  • If the link goes to a page (instead of the image), the alt value has to describe the purpose of the link, not the image. So for example, if a slide shows a product image and is linked to the product page, the alt value could be the product name.

  • If the link goes to the image (e.g., in a higher resolution) or if the slide is not linked, the alt value has to describe the image.

Exception: If you automatically generate the markup and have no way of adding a suitable alt value, you can use the attribute generator-unable-to-provide-required-alt (with an empty value) instead of alt. It’s non-conforming, but validators may ignore the error, and it’s in any case better than providing an unsuitable alt value.

Upvotes: 0

user7691151
user7691151

Reputation:

alt="Slideshow image 1 of Business X", etc.

Since you do not know what the images are, this would be a valid option. It tells someone who is using a screen reader, or for whatever reason cannot see the image (it doesn't load), that the image is part of a slideshow. It also tells which image it is and what business it relates to.

For extra credit, you could use an API such as the Cloud Vision API that can analyze the content of an image and return a short phrase that describes it.

Upvotes: 2

Related Questions