Search code examples
htmlaccessibilityalt

What is the appropriate alt tag for an image where we only know that it was uploaded by a user?

On our site we have a case where we show a list of images that have been uploaded by various users of a product we sell. We don't have any context as to what the image is of other than the product we're selling on the page. Here's the various options we've discussed:

  1. Empty alt tag alt="". Screen readers would read nothing.
  2. Alt tag saying it was user uploaded alt="customer uploaded content". This would repeat the same thing for every image.
  3. Same thing as (2) but instead giving an index for the image to show the number of them there are alt='${index} customer uploaded content'.
  4. Omit the alt attribute entirely.

I am less concerned about SEO in this specific case than I am accessibility. I'm not sure what the best practice is and if having screen readers read out repetitive content could potentially be bad.

Solution

  • The specification has exhaustive information about the alt attribute including a section Images whose contents are not known:

    In some unfortunate cases, there might be no alternative text available at all, […] because the page is being generated by a script using user-provided images where the user did not provide suitable or usable alternative text (e.g. photograph sharing sites) […]

    In such cases, the alt attribute may be omitted, but one of the following conditions must be met as well:

    • The img element is in a figure element that contains a figcaption element that contains content other than inter-element whitespace, and, ignoring the figcaption element and its descendants, the figure element has no flow content descendants other than inter-element whitespace and the img element.
    • The title attribute is present and has a non-empty value.

    (snip)

    A photo on a photo-sharing site, if the site received the image with no metadata other than the caption, could be marked up as follows:

    <figure>
  <img src="1100670787_6a7c664aef.jpg">
  <figcaption>Bubbles traveled everywhere with us.</figcaption>
</figure>

    It would be better, however, if a detailed description of the important parts of the image obtained from the user and included on the page.

    I am less concerned about SEO in this specific case than I am accessibility. I'm not sure what the best practice is and if having screen readers read out repetitive content could potentially be bad.

    Make it easy for screen reader users to skip the section. Make use of <section> elements and <h1> and friends. That way when they get the announcement "Section: Customer photos", they can skip to the next heading.

    Best Practice: ATAG

    The best practice would be to acknowledge that your site is an authoring tool, as it allows creating content, and to conform to the Authoring Tool Accessibility Guidelines (ATAG).

    This would mean (among others) that you