2

Question

I am trying to comply with the WCAG accessibility rules for alt text attributes. The decision tree at the following link explains when alt text attributes are required and when they are not: Alt text decision tree. I am wondering whether an image of a person in a biography (e.g. in a company's "Our Team" page) must have an alt text attribute for WCAG compliance. I'm uncertain because I wouldn't describe an image of a person as "purely decorative", but I'm not sure if I would say it "contributes meaning" to a page either.

Context

I set up a web page for work using a WordPress plugin (Team Members) which doesn't allow alt text to be added to images of people (because the images are CSS background-images), and am being asked to add alt text to the images before the site can be put online.

Improve this question
1
  • On a side note, alt text is good for SEO as well as accessibility. If your president wants this particular image to be ranked highly when someone searches for their name, you might want to consider a plugin that supports alt text.
    – Izquierdo
    Sep 2, 2020 at 18:28

2 Answers 2

Reset to default
5

Even for someone who can't see it, it can be definitively informative that there is an image that contains the person in question. It is important to keep the text relevant to the context and to why the image is presented there. If the person is fishing, but the image was chosen only because it is the person in question, just give the name and don't mention that he is fishing. If the image only represents that it is about a person and shows an illustration of a person but not the person in question...

enter image description here

...this illustration should have an empty alt attribute or is a valid case for a background image. This article contains a very good explanation of when and how to use the alt attribute with very good examples.

In your case it's a picture of the person mentioned and should have an alt text. But it should be an image element to be able to provide this information in the first place. The element has the semantic meaning that an image is presented, why it is presented can be noted in the alt attribute but also in the surrounding text. If the element is closed in by another element that contains no describing text, the alt attribute should have this text. If the element is in the same element as the describing text, that text is sufficient and the alt attribute should be empty (but not omitted!).

Both are correct:

<div>
    <a href="jdoe.png"><img src="jdoe_small.png" alt="John Doe"></a>
    John Doe
</div>

<div>
    <img src="jdoe.png" alt=""> 
    John Doe
</div>

In your case the background image will not be noticed by people using screen readers. So you are missing the semantic information that an image is present. Solving this means you have to add screen reader only text telling that there is an image and that it contains the person in question. Or you can omit that information, but besides that this is discriminative, it is also completely unnecessary. Why not just replace the background image with the semantic image element? Any other solution is harder to implement and is possibly confusing for the user.

Improve this answer
2
  • The way I read the question, the core issue asked about here is indeed "if you want them to notice it and know what it represents". You just answer "I believe you do", but this claim is not justified in any way. Whether a screenreader will find the element in the OP's concrete implementation is probably a relevant secondary consideration, but it may not at all apply for many users who are interested in the topic of this question.
    – O. R. Mapper
    Sep 2, 2020 at 12:54
  • 1
    @O.R.Mapper I must admit that my answer was more focused on the problem mentioned in the context part of the question. I have edited my answer to cover the whole question/problem.
    – jazZRo
    Sep 2, 2020 at 15:38
0

Alt text is a must for accesibility. Screen readers (they are used for blind people) cannot read the image if it hasnt got an alt text. So, my opinion is to use alt text. Also, try to write something really descriptive. Finally, alt text is used for SEO purposes.

Improve this answer
2
  • But what about an image of a person on a biography page (as asked in the question)? Would you write an alt text there and what would you write?
    – Nash
    Feb 17, 2022 at 12:57
  • Yes i would write it. For example John Doe, CEO
    – Teo Theodoridis
    Feb 18, 2022 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.