Explore using details/summary elements for image descriptions
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.
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.?)
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.
If it can be discrete
minimally intrusive? (Not like the watermark text we place on a page just like it is a paragraph.)
A toy example is here:
https://spot.pcc.edu/~ajordan/temp/graphics.html
under the first image.
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.
Much discussion about this at the braille workshop at NFB. I think I like:
- A minimalist
@alttext, 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.
Will Haynes, on pretext-support, with a thread titled "Accessibility for Interactives" suggests a description element on interactives.
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.