New Figure extension

[GiovanniSalmeri]

Hello everybody. I have written a new little extension Figure. Its purpose is to add images with captions. Any [image] can be changed into a [figure], without modifying the arguments, and the Alt text will be used as a caption. The formatting of the page will not change (except, obviously, for the height of the figure, which will be greater). Any deviation from this intended behaviour should be considered a bug. Thank you for any comment!

Now the longish explanations:

As regards implementation: the code that I have published is my third attempt. The first was entirely Javascript-based with a manipulation of DOM, the second leveraged onParseContentHtml. Both of them used a class caption added to a [image] shortcut, both of them worked well, but I prefer to avoid client-side Javascript as much as possible, and with onParseContentHtml a regex-based parsing of HTML was used. So in the end I devised an approach which uses onParseContentShortcut and modifies the output of [image]. A little parasitic 😊, but it works. (Obviously it uses regex, but only on a tiny and controlled fragment of HTML).

As regards accessibility: theoretically, alt text and caption are two different things, but in the end I followed what seemed to me the wisest piece of advice. In the end, I think that where a description is relevant, both usability and accessibility are often improved by moving the description from alternative text to caption. Since empty attributes are stripped by Yellow normalisation, I used in img an alternative text with a blank space (which is almost the same thing) and added an aria-hidden attribute. Finally, that an aria role is used instead of the native figure depends on the fact that only in this way it is possible to create inline figures.

[schulle4u]

@GiovanniSalmeri Just out of curiosity, why don't you leave the value for the alt attribute as it is? You are hiding it already from screen readers, and otherwise it shouldn't appear visually. Maybe I missed something from your explanations. 🙂

As a general advice: Aria roles should be omitted where possible, instead use the appropriate HTML elements.

[GiovanniSalmeri]

@schulle4u Thank you for your feedback!

As regards the alt attribute: you are right, there is little reason to modify it. Setting it to a blank space is a leftover of my previous attempt at hiding the image (which unfortunately, from what I have read, does not work perfectly with NVDA, which needs an empty value of alt, or obviously an aria-hidden attribute). But, thinking better of it, there is a little advantage: aria-hidden hides the image from screen readers, but not from textual browsers. So, setting alt to a blank space, also the 0,000001% users of browsers like Elinks are happy 😊

Ar regards Aria roles: in my first attempt I used <figure>, but unfortunately I couldn't mimic perfectly the functionality of [image], because <figure> is a block element, not an inline element like <img>. But actually I could modify the code in order to use Aria roles only when the shortcut [figure] is used as an inline element, I do not know if this would bring a real benefit...

Update:
(Sorry for the noise in this thread! I had several windows open and I wrote in the wrong one 😞)

[markseuffert]

Product development goes through cycles of experimentation and making things useful, trough cycles of adding and removing features, trough cycles of taking building blocks apart and making them fit better together. Tip: Identify what creates value and what doesn't in the long run, then remove unnecessary or unproductive things from your daily work. Sometimes less is better, because it concentrates on the essentials and the products are not burdened with non-essentials. Sometimes there's a range of solutions, because people have different preferences. [1] [2] [3]

[xrat]

+0,000001% ;-)