Comment by jscholes | Hacker News Reader

Comment by jscholes | Hacker News Reader

Parent Full thread

> For a concrete case, let’s say you have a bar chart in a <figure> with the figcaption “Figure 3: results of Benchmark Q, showing X to be 40% faster than Y.” What alt attribute would you give the <img src=benchmark-results.svg>?

In this case, the bar chart most likely should be accompanied by an accessible textual alternative. For example, a link to a textual version/download of the results, a disclosure button you can hit to view a textual description, a table, whatever. If that is included, the img itself can be marked decorative, because the figure contains an accessible body element as well as the caption. For me, that would most likely be enough to pass my semantic and accessibility requirements.

On the other hand, if you're not going to provide that or feel that the caption already sufficiently describes the data, you could provide a straight visual description of the image for the img's alt. For example, which data is shown on which axis? Not all screen reader users will find that helpful, but there are two things to keep in mind:

1. If a screen reader user moves into the figure with certain keystrokes, the text of the figcaption will be announced as the figure's accessible name or description. So the presence of alt text need not in any way block them from getting to the data.

2. Are you catering for all possible screen-reader-using audiences? Okay, if I'm reading an article about the benchmarks between two databases or something on a blog, it's more personal/for work and I just want the data. But what if I'm in a classroom setting and need to tell my students how to read this chart? If I don't know anything about the layout of the data, I can't do it.

But I’m going to put that link to the full diagram in the figcaption, because I want it to be there for sighted users also. Now what?

A straight visual description of the diagram is probably inappropriate for alt text: too long, too wordy; it’s the longdesc problem again.

I’m not convinced that there is a properly correct solution here.

> But I’m going to put that link to the full diagram in the figcaption, because I want it to be there for sighted users also. Now what?

We're now entering the realm of what represents a caption and what doesn't. Given my earlier point that the figcaption text is mapped as the accessible name or description for screen reader users, interactive elements inside the caption should be avoided because they don't make sense when spoken inside a flattened, plain text string. So to answer the specific question, "now what?" Don't put the link inside the figcaption, put it inside the <figure> as a sibling of the image (or inside a container which is a sibling of the image).

To look at it another way: I might be inclined to say that caption text should make sense when presented with the accompanying image in a non-web context (e.g. a printout). This is why captions are often used for credit lines, attribution info, etc.

> I’m not convinced that there is a properly correct solution here.

Without a more specific use case, it's difficult to make a recommendation. However, I will say one thing that I've found to be universally true: the power of the image description is often underrated. I've had many conversations with designers, developers, content editors et al, where the assertion has been made that there's not much to describe in a particular image. And then as a blind user, I have multiple questions about what it shows, the answers to which can make it into the descriptive text.

This is often a lightbulb moment for many, as they realise that actually, all those details I asked about were subconsciously filled in/processed, and they just didn't think about them. Data is the same.

Reply on news.ycombinator.com