seo Question posted in
Some basic information to get you started with this can be found here.

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

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.

Tags:

4

Answers


  1. 0

    I’d say to put it like this:

    alt="Image of {product}, uploaded by {user}"

    It says what product is in the image, and that is was uploaded by a user.

    Login or Signup to reply.
  2. 0

    assuming that you are building an dynamic web-app you can attept the try of Tobias and insert dynamic content in the alt tag. otherwise i think you have to stick at solution 2) since you cant dynamize content in html.

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
  4. 0

    I’m a screen reader user myself, and I would vote for #1, or maybe #3, depending on the situation.

    Your #4, no alt text, is in any case the worst one. Many screen readers render images without alt by giving the file name or even the full URL. It is always a totally useless annoyance.

    Your #2, a generic alt text like “User uploaded content” is better, but if there are more than a few images in a row, less experienced users may think that they have reached the bottom of the page, or that the screen reader and/or the website are buggy.
    For more advanced users, it’s anyway no useful information.

    Your #3, a generic alt text with indices like “Photo 1”, “Photo 2”, “Photo 3”, “Photo 4”, etc. is better than #2. Since the alt text differs by their indices, you can’t think that you have reached the end of the page or that something is buggy.
    It’s still no useful information.

    However, I think that the best of your solutions is #1, an empty alt text.
    Since the images provide anyway no useful information, they are better entirely skipped. In practice, that’s what we do everyday when such such images are present.

    There is one case where I would recommand #3 instead of #1 though: if you can do some action by clicking on the images.
    IN this case, the empty alt text would prevent a screen reader user from launching the action. Image links, buttons and other actionnable elements must always have a non-empty alt text.

    Another case when #3 might be useful is if I’m myself the author of the content. IN that case I might want to check if my images have correctly been uploaded and inserted where I want them to appear.

    IN all other cases, I would go for #1, for the reasons explained above.

    Of course, the real best solution would be to allow users to give an alt text while they edit their content, and educate them about it.
    You may argue that it’s a description and that it would help them finding back their images; very useful if you give access to a place where they can see all what they have uploaded on the site in a single page, or if you allow them to upload images in advance.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search