39

As a developer one aspect that I feel that tends to get overlooked is accessibility. I'm guilty of leaving it as an afterthought in my own applications, but after having recently attended a session on accessibility in Android, and learning that an old acquaintance of mine is suffering from sight degeneration, I thought I'd make more of an effort in 2019 to improve accessibility in my applications and documentation.

Which brings me to Stack Overflow. All too often when I edit a post containing an image, inline or not, the vast majority of the time this image is either accompanied by an empty description or the boilerplate "enter image description here". This would more than likely be useless for anyone who would need to rely on the image's alt text for accessibility purpose.

I've started to make a conscious effort to describe the content of any images in any post I've edit, however I'm not sure if I'm going along the right track. For example from a recent post I've edited, for this image:

Description: Screenshot of video player app. Top segment shows a computer-generated image of a stream running a meadow. Bottom segment shows a seekbar consisting of various screen caps from the playing video

I edited the markup to be as such:

[![Description: Screenshot of video player app. Top segment shows a computer-generated image of a stream running a meadow. Bottom segment shows a seekbar consisting of various screen caps from the playing video][1]][1]

Am I going about this in the correct manner? Am I being a bit too detailed with my descriptions? Is there anyone with a speciality in accessibility who would be able to advise on this matter?

5
  • 15
    This generally boils down to how long should an image alt attribute be, which is answered here on Webmasters.SE. While that answer might be a bit dated, I think it's valid. Also, please don't use Description: at the start of the alternative text, because a screen reader might do the same, leading to it reading Image: Description: Description: <your description>. You don't need to specify that.
    – Erik A
    Dec 18, 2018 at 13:48
  • 6
    Personally I would of just gone with "screenshot of a video player" but I think this is a good thing that you are doing and (personally) don't think adding extra details is going to do any harm. For those that need this, may appreciate the extra details
    – Scriptable
    Dec 18, 2018 at 15:58
  • 2
    I'm inclined to think that the appropriate alt text for an image is contextual. What is the image meant to convey to sighted people? The alt text may well not be able to capture that in its entirety, but it can and should at least point in that direction. Of course, that works both ways: image descriptions should avoid details that are irrelevant to the purpose of the image, as it is being used in context. Dec 18, 2018 at 16:42
  • 4
    The site does not have a great default for this. Ideally the uploader dialog would come with a text field for the alt text.
    – jscs
    Dec 18, 2018 at 17:46
  • 1
    Related on MSE: Can we get rid of the default text "enter image description here"? and posts linked from it.
    – jscs
    Dec 19, 2018 at 19:03

2 Answers 2

17

Let me say first that I commend you for devoting attention to this issue in your work.

I am not an accessibility expert myself, but there are multiple sources around the web for guidelines about accessibility in general and image alt text in particular. One of the ones with more authority is the W3C's Web-Content Accessibility Guidelines. The most recent version is WCAG 2.1, released earlier this year. Its very first point is

Information and user interface components must be presentable to users in ways they can perceive.

The first sub-point is about providing text alternatives, and its primary provision is

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose,

with some exceptions and caveats that you should read and consider (emphasis added).

That nicely summarizes the thrust of my earlier comment, about the choice of alt text being contextual. It needs to be driven by context in order to serve the equivalent purpose of the image. For example, if I post an image of Mickey Mouse as Steamboat Willie, the context determines whether the purpose is to convey the idea of "Mickey Mouse" or "Steamboat Willie" or "cartoon mouse" or "mouse" or ....

But that does not mean that more is better. Extraneous detail in alt text makes it less effective. The point is not to convey as much information about the image as possible; rather, it is to serve as a stand-in for the image.


Aside: frequent SO users will perhaps appreciate these conformance criteria especially well:

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text

, with some caveats (emphasis added), and

Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.


As for your particular example, you should appreciate at this point that we can't critique your alt text very much without at least inferring some context. But there are a few things I can say:

  1. Comments and another answer instruct you to avoid leading the text with "Description" because of the possible behavior of screen readers, but there is a more fundamental reason to avoid it: that tag does not contribute to the purpose the image serves. Alternative means alternative. You're trying to provide a substitute for the image, not information about the image.

  2. Your "Top segment shows" and "Bottom segment shows" wording falls in about the same area. You are describing the image, but the description probably does not serve as a good substitute for the image. It should focus on details relevant to the image's purpose.

The purpose served by this image in your particular case is unclear, so I can't recommend specific alternative text for it, but something along the lines of "Screenshot of Video Player, highlighting the main playback area" might be suitable.

Am I going about this in the correct manner? Am I being a bit too detailed with my descriptions?

I think you have framed the problem incorrectly. To recap, the point is not to provide a description of the image, but rather to provide a substitute for the image. That may well involve elements of description, but if you are guided by the principle of providing alternative text that serves the same purpose as the image, then I think questions about how much detail and which details to include will largely go away.

3
  • Thank you, a very comprehensive answer. The reason I posted this question in the first place is because I wanted to help improve things, but had little idea of how to go about it or the mindset to take, be it just in the context of Stack Overflow or the wider web. So in short, only provide the information that I deem is relevant to the context of the question/answer? Dec 18, 2018 at 19:10
  • 2
    @MichaelDodd, you'll be unsurprised that I prefer my own wording -- the second sentence of the last paragraph in particular -- but I don't disagree with your summary. Dec 18, 2018 at 19:19
  • 1
    It might be worth making that sentence stand out a bit more. It's a good insight that's easy to gloss over.
    – jscs
    Dec 19, 2018 at 3:41
10

Answer with credits to Erik von Asmuth.

Length

This generally boils down to how long should an image alt attribute be, which is answered here on Webmasters.SE. While that answer might be a bit dated, I think it's valid.

[...] most advise for the benefit of sight impaired users to keep it under 125 characters - see this and this.

Content

Please don't use Description: at the start of the alternative text, because a screen reader might do the same, leading to it reading

Image: Description: Description: <your description>

So you don't need to specify that.

2
  • 8
    "One picture is worth a thousand words" -- yet we need to replace it with 125 characters. Makes sense! Dec 18, 2018 at 19:18
  • 1
    @CrisLuengo: Indeed an image may be worth a thousand words, but at any given point we're likely to be interested in only about 20-30 of them.
    – AkselA
    Dec 19, 2018 at 22:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .