Twenty Fourteen (and Thirteen): Gallery Captions are Not Touch-Accessible and Behave Inconsistently

[celloexpressions]

Displaying captions only on hover is a nice way to de-cutter galleries and works great with traditional mouse (and even keyboard-only) navigation. But it really doesn't work with touch.

I decided it could be overlooked in Twenty Thirteen, but now that we're using the same format for Fourteen, I think we should fix it.

There are two issues: discoverability and actual use. It turns out that if you tap in the space where the caption will appear (like on hover) in Chrome and the text is selected but doesn't become visible in IE10 (both on Win8), and if you tap the other part of the image (or an image with no caption) the link will be activated. The displaying on conditional tap (by placement) behavior is inconsistent and can't be relied upon because some images won't have captions.

I think the best solution is to either always display the first line of the caption (overlayed, as they always are) when touch is enabled (can be dected with a line of JS) and then expand the caption to 50% height on tap of that while linking when the visible part of the image is tapped. Other possible solutions are a global toggle right before the gallery ("show all captions"), per-image toggles, always doing the one-line-to-50% thing (just with touch vs. hover). Open to any other possible solutions as well. I don't like the idea of expanding the caption of the first tap and linking on the second (which I figure might come up), because not all images have captions and it may not be clear that a 2nd tap will take you to the image (ie, that it's linked at all, if it is).

Once we fix Fourteen, we can decide whether it's worth fixing in Thirteen as well, depending on how involved the solution is.

[lancewillett]

I think for both Twenty Thirteen and Twenty Fourteen having the captions be "mouse-hover" only is an OK tradeoff. As an author I'd rather people open up the single image detail (to view it larger) and read the caption there.

The hover caption is really a bonus view -- not an essential view or the only way to view the caption text.

[celloexpressions]

Replying to lancewillett:

As an author I'd rather people open up the single image detail (to view it larger) and read the caption there.

If users want to look at most of the images larger to see the comments (or if the comments form a narrative, for example), the incredible slowness of loading each single view page sequentially (clicking throuhg) becomes a huge issue on the desktop and especially on mobile. So that does push more importance to the index views. I agree with you, though, if it were even half as fast as the experinece is on .com, requiring viewing the single view to see the caption would be best.

We do also need to address the buggy/inconsistent behavior in IE with touch even if we decide to keep the captions hidden from touch, though.

[lancewillett]

Discussed today in IRC today (​log), celloexpressions is going to split out the IE bug into a new ticket. After that, we can close this one as wontfix.

[celloexpressions]

See #25890 for the buggy behavior. With that ticket, we'll make adjustments so that the behavior is consistent but never displays captions for touch users, which will also further emphasize the links to the attachment pages for mouse users.