Search code examples
wcag

What Alt text to use on a list of images (of books)


On a page I have a list of books (only the name and the authors), with their coverpage.

What alt-text should I use on those images?

I have seen a large Dutch online webshop which has the name of the product in the product image;

I have seen 'product details' on all items a page on Amazon with lots of products (so they all have the same alt text)

I wonder what would be good to have when someone has a screenreader. Should I just make it blank so it gets ignored? That sounds lazy, but I don't know what good it would be to listen to the screenreader read 30 books and then say at every book either 'this is a cover image' or the title of the book (which it also reads out because it is the start of the book-paragraph, so then it would be read twice)


Solution

  • Given a layout that might look like this:

    +-----------------+
    |                 |  Night Circus
    |                 |  Erin Morgenstern
    |                 |
    |                 |  ISBN
    |                 |  A story of something or other, though
    |                 |  I cannot be sure as the book is too
    |                 |  far away to see clearly.
    |                 |
    |                 |
    |                 |
    +-----------------+
    

    I would use a blank alt attribute. Stating the title / author is just verbose and adds nothing. Now, if your site is also pitching the cover art as a selling point, then I would craft custom alternative text for each image. But I don't think that fits here.

    Redundant alternative text is frustrating for most screen reader users.