[fkyoureadthedoc]

It's just a cool CSS demo. I don't know why contrarian comments with little actual substance and mostly baseless speculation are so well accepted here.

> The mark-up is much more human-readable and could be used as source to drive an even-more accessible alternative.

Any examples of this _actually happening_, does the tooling exist?

Well rather than just saying that I'll actually check. Looking at Mermaid, the only thing I can find with regard to accessibility is what Mermaid does by default. No other first or third party tooling.

I just tested that with VoiceOver on their accessibility documentation page, and it does not work well on the page. I can get labels but not the title/description. Pulled some of the charts to their own page, and you get title / description of the chart (if the person who did the mermaid markup decided to add the special accessibility fields), then you can arrow through some of the text internals of the chart, but you get no semantic information.

Quite easily replicable in OPs solution if you're so inclined, and you could even take it further, although it would be a lot of manual effort.

[the_other]

Sorry… I didn’t mean to imply that PlantUML or Mermaid had any accessibikity support out of the box. I’ve not tested it and wouldn’t expect it to do that.

My point was more that the raw Marmaid “code” is more likely to communicate the content of a flow chart to some users with certain access needs than a diagram made of divs. In the same way that raw HTML, or HTML rendered with no stylesheet is (should be) more accessible than a document with accordions and carousels.

I accept there probably isn’t tooling to turn Mermaid into a more accessible diagram yet. But there could be. If instead you transmit the diagram as HTML with CSS hacks, you’re losing all the semantic data through the informality of the solution.

I left my contrarian comment because fancy demos have a habit of turning into justification for further “clever” but flawed work. A naive user might see the flow chart example as “good” andnpropose they use the hack in their own project. The solution prevents certain groups of people from accessing the data.

Saying it another way: hacks shouldn’t be used to endorse a new technology.