Is alt text required for an image if the information is present elsewhere on the page?

Question

For example, if a page's sole purpose is to describe the contents of an image (e.g a photograph of a document is displayed on the page, and the page displays the contents of the document), is alt text still required? If not, I assume the image should be hidden from the accessibility tree?

Answer 1

Update to answer (original further down under "original answer" heading) - I title this amendment "Oh dear I goofed!"

This question and answer has had a lot of traffic for some reason and I have just learned that I completely misunderstood the OPs question and also my answer could be interpreted in a couple of ways based on that.

For clarity: If the text of a document is contained within the page in an accessible format (i.e. as properly marked up HTML or as a properly tagged accessible PDF download) then it is fine to treat an image of it as decorative.

That is what my answer was appertaining too, an alternative and accessible version of the document text is available so the image of the document can be hidden from assistive tech.

I made a second assumption here, I assumed the OP meant a modern document with no distinguishing features. If these are old documents (as pointed out by @TimHolt in the comments as well as by OP) then the condition of the document, colouration, style etc. is likely to be very relevant to a screen reader user in addition to the document text being transcribed so this information should be within the alt description.

The OPs case - a common problem!

In the OPs case they have a library of old documents that are purely displayed as images of each page. They do not have the budget to transcribe them. As such a lot of what I said below is not relevant in their case (as I said earlier I had assumed an accessible transcript was available).

In the OPs case the "strict" answer is that the page is not accessible, fails WCAG and therefore opens the OPs site up to lawsuits. The pages should be removed from the site.

In reality, I don't think any (well maybe a few zealots) people with disabilities would want them to do this, despite what happened with the University of California at Berkley and what they did in response to a lawsuit.

So what can you do?

1. Provide information to a screen reader user that the current page is inaccessible. Although this may seem counter intuitive, telling a screen reader user that you are aware of a problem and what actions you are hoping to eventually take is important. It doesn't protect you from lawsuits directly but being honest with users will reduce the chances.
2. Make an honest and concerted effort to gain the needed funding to transcribe the documents as a missing alt attribute is the least of your worries!

So for the information something along the lines of:

"This page displays the contents of (Document Name) published on (published date). Unfortunately due to our limited budget we cannot provide a transcription of this document that is usable by assistive technology users. We are pursuing avenues to raise the funding needed to implement this in the future and we apologise profusely that we are unable to provide this service at the moment.

If you are able to display this prominently, great. If you aren't allowed to show it visually then you can use visually hidden text to make it accessible to screen reader users without affecting the visual style of the page.

You also want to add it to your accessibility statement (you do have one right? 😉) explaining that this part of the site is not accessible.

One final thing to note here. If this ever did go to court you would have to prove that transcribing these documents is a financial burden your organisation cannot bear, so you better make sure you have some quotes for transcribing the documents handy and show that they would essentially bankrupt the company if you do not want to get slapped with a big fine and still have to transcribe them. (Yes it is getting that serious now, well in America at least, where I am from (UK) we are still behind the wave on lawsuits but they are coming!)

Can you provide an alternative?

Finally you may want to see if there is an alternative way you can provide the content to people.

It could be that you could use a service that the screen reader user could call and they would read the relevant document (or parts of it) to them. This still excludes Braille users but it is an improvement.

Or you could have a query system for key bits of information in the document.

Or maybe you may not have the budget to transcribe the documents, but you could possibly get the budget to have someone at least summarise the key points in the document.

Some or all of the above solutions would also help you reduce the chance of a lawsuit!

On the flip side, if you are a "for profit" organisation, transcribing the documents could pay for itself as they will get indexed and rank better in Google, driving more traffic to the site.

There is also no reason the transcripts can't be paid content if you really need some way of recouping the costs (not my recommendation but still better than nothing and it does offer you the protection your organisation needs).

Anyway I have gone on long enough, this is a long way from the original question and answer now, but I hope the information is useful to the OP and others. Any questions just ask.

---

Original Answer

If an image is decorative (as is probably the case in your example) alt text is not required but you do still need to set an empty alt attribute.

Note that I say empty (alt="") and not "null" (alt). This is important as otherwise some screen readers will try and read the image src as the alt text, as you can imagine this is not a great experience!

The other thing you should do is add role="presentation" on purely decorative images for completeness and as part of best practices. This also let's you check for accidentally empty alt attributes with the following CSS selector

img:not([alt]),
img[alt=""]:not([role=presentation]) {
    outline: 5px red solid !important;
}

jsfiddle to demonstrate the above CSS selector and how it helps identify missing alt attributes

However be careful with sweeping statements "Is alt text required for an image if the information is present elsewhere on the page?", for an image of a document with the document text it is fine, if you describe an image elsewhere on the page then you do still need alt text.

Although not a complete system this alt text decision tree is useful for deciding whether to include alt text or not.

if in doubt, add alt text is the golden rule though, better to have slight replication than to entirely remove something from a screen reader user's experience.

Final thought

One other thing to consider is people who browse the internet with images switched off to save data etc. Make sure that excluding alt text makes sense for them too.

Answer 2

If a sighted user can view the image and derive any kind of context or detail from it that relates to the text of the page, then you should not treat the image as uninteresting or purely decorative.

If it does have context, then to the vision impaired user of course it's important that there is an image of the described item. After all, you wouldn't have put it on the website if it wasn't of some value to the sighted reader. To deny the sight impaired reader at least a description of it is a potential cause of frustration.

To not give it an alt text is to say to the reader, "It's not important for you really - don't worry about it." And to the reader, this is very well may be a source of frustration. It's not unlike a hard of hearing person getting the frustrating response, "Forget it" or "Never mind" by someone who's asked to repeat something. Do not deny the person relying on the alt text the experience others may have who can see.

As to what the alt text should be, it depends a lot on the appearance of the item being described. If it is something like an original historical document, then you should describe it to the viewer just like you'd describe it to someone verbally. E.g., "An image of the original document, hand written on tattered paper yellowed with age", or "Typewritten pages from diary with tear repaired with clear tape", etc. In the case of a document also fully quoted in the page (per your example), it might help that the alt text also state that the contents of the document are available in the page.

Lastly, irrespective of context, if the image can be clicked on and a higher resolution version be viewed, both the low res/thumbnail version needs alt text, as well as the high res version. The thumbnail should describe the item enough to let the vision impaired reader have as much a reason to be interested in the detailed version as a sighted reader. And of course the detailed version should have a detailed description.

Answer 3

No, decorative images should not display alt text in order to reduce unnecessary information for users using screen readers.

From w3.org:

Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.

In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.

Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page. Images may be decorative when they are:

• Visual styling such as borders, spacers, and corners;
• Supplementary to link text to improve its appearance or increase the clickable area;
• Illustrative of adjacent text but not contributing information (“eye-candy”);
• Identified and described by surrounding text.