Search code examples
htmlaccessibilitywai-aria

Multiple images of same product, accessibility requirements


For a webpage with multiple images of a single product, such as with different angles. Is there a requirement for alt tags for each image?

Viewing examples on Amazon it seems they only have an alt tag on the first product image, but after which there is no alt tag or aria related tags.

The first example here says that the stars have empty alt tags.

To follow proper standards, is it required to have an empty alt tag after the first image? To completely hide the extra non-helpful(same thing different angle) images using aria-hidden or to just do what Amazon did and only put an alt tag on the first image.

Also, are product images themselves even relevant content? If the product title is already there, wouldn't it be easier to just hide the images completely for screen-readers.


Solution

  • First don't use Amazon for examples of how to do accessibility - their site is not a good example (they try, but they have years of bad practices that are hard for them to work around).

    The answer to this depends on the product being sold.

    For example if it is a mug with a picture of a dog and a cat cuddling then a single image alt tag would probably be the right option and hide the rest of the images from the screen reader.

    However if it was a complex product with different images showing dimensions, specs, features etc. then multiple alt tags may be appropriate.

    The question to ask is 'does this image portray any new information that would influence a decision to buy'.

    If the answer is yes, add an alt tag, if the answer is no, hide it from a screen reader.


    EDIT - To Address the Edit Made To The Question

    From the perspective of pure accessibility and 'rules' - no, Alt descriptions are not needed for images if every single aspect of the image is described elsewhere.

    However, in practice, there should always be at least one Alt tag with a useful description of the product.

    The idea of alt tags is to provide blind users with as much information and as similar an experience as possible as sighted users (I am aware not only blind users use screen readers but for simplicity of explanation bear with me).

    At the same time however, a blind user will also thank you for providing them with the least amount of information possible to give them the same experience as a sighted user.

    A sighted user would see an image first and so should a blind person as it will make sense in the document flow, but adjust your alt description to provide information that is missing from the main description so as to avoid too much duplication of information for screen reader users.

    Also (wandering away from accessibility a bit but still relevant as to why to always have at least one alt tag) don't forget SEO - you want that product image to show up in image search if at all possible, especially in a commercial setting, alt tags still help search engines categorise images.

    The final argument for whether you should have at least one alt tag is what happens for people who disable images to save on bandwidth - you should still have at least one alt tag to describe what the image(s) should be about. (a different type of 'accessibility' but still relevant).

    tl;dr -> yes have at least one alt tag still.