pretext icon indicating copy to clipboard operation
pretext copied to clipboard

Explore using details/summary elements for image descriptions

Open Alex-Jordan opened this issue 3 years ago • 8 comments

We could use the HTML details element to initially hide a long description of an image that is revealed upon a click:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

This would allow descriptions to have markup and be longer than alt text is supposed to be. And it would make descriptions equally available to AT-users and non-AT-users.

It might mean #1754 should be closed unmerged, leaving description so that markup inside is OK. We could then use aria-describedby on each image, referencing the summary. Then perhaps alt becomes moot. It could generically reference the details element that is nearby.

Alex-Jordan avatar Jun 23 '22 13:06 Alex-Jordan

Looks promising.

Can you mock up a small page of existing PTX HTML output that has this detail element in it. So we can see how it behaves in practice? (Is there always a visible access method? Can this be hidden from sighted users and fed only to screenreaders? Etc.?)

rbeezer avatar Jun 23 '22 13:06 rbeezer

The summary element is always visible. By default it gets a list item marker (triangle in the examples) but that can change or be removed. You click on the summary and that toggles revealing the full details.

But would we want to hide it from sighted users? A benefit of this would be giving sighted users the same information as non-sighted users. If it can be discrete (which may take some experimenting) then I think I'd be in favor of giving all users access to the description.

Alex-Jordan avatar Jun 23 '22 13:06 Alex-Jordan

If it can be discrete

minimally intrusive? (Not like the watermark text we place on a page just like it is a paragraph.)

rbeezer avatar Jun 23 '22 13:06 rbeezer

A toy example is here:

https://spot.pcc.edu/~ajordan/temp/graphics.html

under the first image.

Alex-Jordan avatar Jun 23 '22 19:06 Alex-Jordan

Can the "circle-I" info icon go on the left of an image, perhaps jutting into the left margin? Well, maybe not if the images are in a sidebyside.

It could, but you see the issues. One is that I think for a sidebyside, it just needs to go underneath. For other images, it might interfere with permalink icons. Also if it's going underneath with sidebyside images, then it would feel inconsistent to do it differently for other kinds of images. A user should think to look in the same place for each image's information.

I'm still waiting on a verdict from PCC disability services staff as to how they feel about my mockup.

Question: if this works, would we want to extend the markup for "description" to include multiple "p"?

Aside: this whole thing (details/summary) has broad browser support, although some things differ from one browser to another. But it's almost a javascript-free way to do born-hidden knowls. If it could be styled well, including animating the open/close, you might not even know the difference.

Alex-Jordan avatar Jun 27 '22 05:06 Alex-Jordan

Much discussion about this at the braille workshop at NFB. I think I like:

  • A minimalist @alt text, as discussed on BlindMath list, such as perhaps an automatic "Figure 5.7, see description" But this is not great for "naked" images, videos, etc. Maybe a plain text override is needed.
  • A longer, formatted description, with multiple "p", math, the works, etc.

Maybe we want to keep the description element for long text (pre-processor could wrap existing in a p?). Then introduce a shortdescription as an alt-text override for anything automatic and defaultish.

I don't feel like I'm making a lot of sense here, so feel free to clarify and amend.

rbeezer avatar Jul 25 '22 20:07 rbeezer

Will Haynes, on pretext-support, with a thread titled "Accessibility for Interactives" suggests a description element on interactives.

rbeezer avatar Oct 12 '22 18:10 rbeezer

And Will Haynes adds:

After digging into this a bit myself I learned that Geogebra already has built-in support for altTex. From https://wiki.geogebra.org/en/Accessibility :

You can have some text attached to the Graphics Views so that it is read by a screen reader. If you make a text object in GeoGebra called altText, altText2, altText3D then it will be attached to Graphics View 1, Graphics View 2, Graphics View 3D respectively.

rbeezer avatar Oct 12 '22 21:10 rbeezer