Figures aren't accessible in HTML version

[ethindp]

The HTML version has figures for things like instruction encodings, register layouts, etc., but they appear as just graphics and not in an accessible form (e.g. tables). I don't know if this is a wavedrom issue or not. I can look at the layouts by looking at the wavedrom source, but it's not the most desirable/preferable method.

[wmat]

I'm not sure what you mean by accessible form? The wavedroms are rendered as svg images.

[ethindp]

I mean they aren't rendered as, e.g., a table.

[wmat]

Just so I'm clear, are you asking for the wavedrom content to be rendered as HTML tables? If that's what you're after, what benefit would that provide over a svg? Could you provide a specific example from the spec and what you mean by consuming it?

[ethindp]

@wmat The benefit would be that people with screen readers, like myself, would be able to understand the tables. As it currently stands, the figures just say "graphic diagram" when I arrow over them, which provides no helpful information. Looking at the code, the images are being generated as follows:

<div class="imageblock">
<div class="content">
<img src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0nV2F2ZURyb20nIGhlaWdodD0nNTYnIHByZXNlcnZlQXNwZWN0UmF0aW89J3hNaWRZTWlkIG1lZXQnIHZpZXdCb3g9JzAgMCA4MDAgNTYnIHdpZHRoPSc4MDAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGcgZm9udC1mYW1pbHk9J3NhbnMtc2VyaWYnIGZvbnQtc2l6ZT0nMTQnIGZvbnQtd2VpZ2h0PSdub3JtYWwnIHRleHQtYW5jaG9yPSdtaWRkbGUnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDAuNSwwLjUpJz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg0LDIxKSc+PGcgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2Utd2lkdGg9JzEnPjxsaW5lIHgyPSc3MTUnLz48bGluZSB5Mj0nMzEnLz48bGluZSB4Mj0nNzE1JyB5MT0nMzEnIHkyPSczMScvPjxsaW5lIHgxPSc3MTUnIHgyPSc3MTUnIHkyPSczMScvPjxsaW5lIHgxPSc2OTMnIHgyPSc2OTMnIHkyPSczJy8+PGxpbmUgeDE9JzY5MycgeDI9JzY5MycgeTE9JzMxJyB5Mj0nMjgnLz48bGluZSB4MT0nNjcwJyB4Mj0nNjcwJyB5Mj0nMycvPjxsaW5lIHgxPSc2NzAnIHgyPSc2NzAnIHkxPSczMScgeTI9JzI4Jy8+PGxpbmUgeDE9JzY0OCcgeDI9JzY0OCcgeTI9JzMnLz48bGluZSB4MT0nNjQ4JyB4Mj0nNjQ4JyB5MT0nMzEnIHkyPScyOCcvPjxsaW5lIHgxPSc2MjYnIHgyPSc2MjYnIHkyPSczJy8+PGxpbmUgeDE9JzYyNicgeDI9JzYyNicgeTE9JzMxJyB5Mj0nMjgnLz48bGluZSB4MT0nNjAzJyB4Mj0nNjAzJyB5Mj0nMycvPjxsaW5lIHgxPSc2MDMnIHgyPSc2MDMnIHkxPSczMScgeTI9JzI4Jy8+PGxpbmUgeDE9JzU4MScgeDI9JzU4MScgeTI9JzMnLz48bGluZSB4MT0nNTgxJyB4Mj0nNTgxJyB5MT0nMzEnIHkyPScyOCcvPjxsaW5lIHgxPSc1NTknIHgyPSc1NTknIHkyPSczMScvPjxsaW5lIHgxPSc1MzYnIHgyPSc1MzYnIHkyPSczJy8+PGxpbmUgeDE9JzUzNicgeDI9JzUzNicgeTE9JzMxJyB5Mj0nMjgnLz48bGluZSB4MT0nNTE0JyB4Mj0nNTE0JyB5Mj0nMycvPjxsaW5lIHgxPSc1MTQnIHgyPSc1MTQnIHkxPSczMScgeTI9JzI4Jy8+PGxpbmUgeDE9JzQ5MicgeDI9JzQ5MicgeTI9JzMnLz48bGluZSB4MT0nNDkyJyB4Mj0nNDkyJyB5MT0nMzEnIHkyPScyOCcvPjxsaW5lIHgxPSc0NjknIHgyPSc0NjknIHkyPSczJy8+PGxpbmUgeDE9JzQ2OScgeDI9JzQ2OScgeTE9JzMxJyB5Mj0nMjgnLz48bGluZSB4MT0nNDQ3JyB4Mj0nNDQ3JyB5Mj0nMzEnLz48bGluZSB4MT0nNDI1JyB4Mj0nNDI1JyB5Mj0nMycvPjxsaW5lIHgxPSc0MjUnIHgyPSc0MjUnIHkxPSczMScgeTI9JzI4Jy8+PGxpbmUgeDE9JzQwMicgeDI9JzQwMicgeTI9JzMnLz48bGluZSB4MT0nNDAyJyB4Mj0nNDAyJyB5MT0nMzEnIHkyPScyOCcvPjxsaW5lIHgxPSczODAnIHgyPSczODAnIHkyPSczMScvPjxsaW5lIHgxPSczNTgnIHgyPSczNTgnIHkyPSczJy8+PGxpbmUgeDE9JzM1OCcgeDI9JzM1OCcgeTE9JzMxJyB5Mj0nMjgnLz48bGluZSB4MT0nMzM1JyB4Mj0nMzM1JyB5Mj0nMycvPjxsaW5lIHgxPSczMzUnIHgyPSczMzUnIHkxPSczMScgeTI9JzI4Jy8+PGxpbmUgeDE9JzMxMycgeDI9JzMxMycgeTI9JzMnLz48bGluZSB4MT0nMzEzJyB4Mj0nMzEzJyB5MT0nMzEnIHkyPScyOCcvPjxsaW5lIHgxPScyOTAnIHgyPScyOTAnIHkyPSczJy8+PGxpbmUgeDE9JzI5MCcgeDI9JzI5MCcgeTE9JzMxJyB5Mj0nMjgnLz48bGluZSB4MT0nMjY4JyB4Mj0nMjY4JyB5Mj0nMzEnLz48bGluZSB4MT0nMjQ2JyB4Mj0nMjQ2JyB5Mj0nMycvPjxsaW5lIHgxPScyNDYnIHgyPScyNDYnIHkxPSczMScgeTI9JzI4Jy8+PGxpbmUgeDE9JzIyMycgeDI9JzIyMycgeTI9JzMnLz48bGluZSB4MT0nMjIzJyB4Mj0nMjIzJyB5MT0nMzEnIHkyPScyOCcvPjxsaW5lIHgxPScyMDEnIHgyPScyMDEnIHkyPSczJy8+PGxpbmUgeDE9JzIwMScgeDI9JzIwMScgeTE9JzMxJyB5Mj0nMjgnLz48bGluZSB4MT0nMTc5JyB4Mj0nMTc5JyB5Mj0nMycvPjxsaW5lIHgxPScxNzknIHgyPScxNzknIHkxPSczMScgeTI9JzI4Jy8+PGxpbmUgeDE9JzE1NicgeDI9JzE1NicgeTI9JzMxJy8+PGxpbmUgeDE9JzEzNCcgeDI9JzEzNCcgeTI9JzMnLz48bGluZSB4MT0nMTM0JyB4Mj0nMTM0JyB5MT0nMzEnIHkyPScyOCcvPjxsaW5lIHgxPScxMTInIHgyPScxMTInIHkyPSczJy8+PGxpbmUgeDE9JzExMicgeDI9JzExMicgeTE9JzMxJyB5Mj0nMjgnLz48bGluZSB4MT0nODknIHgyPSc4OScgeTI9JzMnLz48bGluZSB4MT0nODknIHgyPSc4OScgeTE9JzMxJyB5Mj0nMjgnLz48bGluZSB4MT0nNjcnIHgyPSc2NycgeTI9JzMnLz48bGluZSB4MT0nNjcnIHgyPSc2NycgeTE9JzMxJyB5Mj0nMjgnLz48bGluZSB4MT0nNDUnIHgyPSc0NScgeTI9JzMnLz48bGluZSB4MT0nNDUnIHgyPSc0NScgeTE9JzMxJyB5Mj0nMjgnLz48bGluZSB4MT0nMjInIHgyPScyMicgeTI9JzMnLz48bGluZSB4MT0nMjInIHgyPScyMicgeTE9JzMxJyB5Mj0nMjgnLz48L2c+PGc+PGc+PHJlY3QgZmllbGQ9J29wY29kZScgaGVpZ2h0PSczMScgc3R5bGU9J2ZpbGwtb3BhY2l0eTowLjEnIHdpZHRoPScxNTYnIHg9JzU1OScvPjxyZWN0IGZpZWxkPSdyZCcgaGVpZ2h0PSczMScgc3R5bGU9J2ZpbGwtb3BhY2l0eTowLjE7ZmlsbDpoc2woMCwxMDAlLDUwJSknIHdpZHRoPScxMTInIHg9JzQ0NycvPjxyZWN0IGZpZWxkPSdmdW5jdDMnIGhlaWdodD0nMzEnIHN0eWxlPSdmaWxsLW9wYWNpdHk6MC4xJyB3aWR0aD0nNjcnIHg9JzM4MCcvPjxyZWN0IGZpZWxkPSdyczEnIGhlaWdodD0nMzEnIHN0eWxlPSdmaWxsLW9wYWNpdHk6MC4xO2ZpbGw6aHNsKDE3MCwxMDAlLDUwJSknIHdpZHRoPScxMTInIHg9JzI2OCcvPjxyZWN0IGZpZWxkPSdyczInIGhlaWdodD0nMzEnIHN0eWxlPSdmaWxsLW9wYWNpdHk6MC4xO2ZpbGw6aHNsKDE3MCwxMDAlLDUwJSknIHdpZHRoPScxMTInIHg9JzE1NicvPjxyZWN0IGZpZWxkPSdmdW5jdDcnIGhlaWdodD0nMzEnIHN0eWxlPSdmaWxsLW9wYWNpdHk6MC4xJyB3aWR0aD0nMTU2Jy8+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDExLC0xMSknPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDY5MyknPjx0ZXh0IHk9JzYnPjA8L3RleHQ+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDU1OSknPjx0ZXh0IHk9JzYnPjY8L3RleHQ+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDUzNiknPjx0ZXh0IHk9JzYnPjc8L3RleHQ+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDQ0NyknPjx0ZXh0IHk9JzYnPjExPC90ZXh0PjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg0MjUpJz48dGV4dCB5PSc2Jz4xMjwvdGV4dD48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMzgwKSc+PHRleHQgeT0nNic+MTQ8L3RleHQ+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDM1OCknPjx0ZXh0IHk9JzYnPjE1PC90ZXh0PjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgyNjgpJz48dGV4dCB5PSc2Jz4xOTwvdGV4dD48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMjQ2KSc+PHRleHQgeT0nNic+MjA8L3RleHQ+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDE1NiknPjx0ZXh0IHk9JzYnPjI0PC90ZXh0PjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgxMzQpJz48dGV4dCB5PSc2Jz4yNTwvdGV4dD48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMCknPjx0ZXh0IHk9JzYnPjMxPC90ZXh0PjwvZz48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMTEsMTUpJz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg2MjYpJz48dGV4dCB5PSc2Jz48dHNwYW4+b3Bjb2RlPC90c3Bhbj48L3RleHQ+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDQ5MiknPjx0ZXh0IHk9JzYnPjx0c3Bhbj5yZDwvdHNwYW4+PC90ZXh0PjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg0MDIpJz48dGV4dCB5PSc2Jz48dHNwYW4+ZnVuY3QzPC90c3Bhbj48L3RleHQ+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDMxMyknPjx0ZXh0IHk9JzYnPjx0c3Bhbj5yczE8L3RzcGFuPjwvdGV4dD48L2c+PGcgdHJhbnNmb3JtPSd0cmFuc2xhdGUoMjAxKSc+PHRleHQgeT0nNic+PHRzcGFuPnJzMjwvdHNwYW4+PC90ZXh0PjwvZz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSg2NyknPjx0ZXh0IHk9JzYnPjx0c3Bhbj5mdW5jdDc8L3RzcGFuPjwvdGV4dD48L2c+PC9nPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDExLDM5KScvPjwvZz48ZyB0ZXh0LWFuY2hvcj0nc3RhcnQnPjxnIHRyYW5zZm9ybT0ndHJhbnNsYXRlKDcxOSwxNiknPjx0ZXh0IHk9JzYnPjx0c3Bhbj5SLVR5cGU8L3RzcGFuPjwvdGV4dD48L2c+PC9nPjwvZz48L2c+PC9zdmc+" alt="Diagram" width="800" height="56">
</div>
</div>

[ethindp]

An alternative would be to include the SVG directly without base64-encoding it and to instead include accessible SVG attributes.

[ethindp]

You can find more info about accessible SVGs here, but in general a table is better and makes interpreting the data much simpler.

[nick-knight]

I think it's a reasonable request.

One way forward may be to request WaveDrom to provide some kind of conversion tool that "renders" WaveDrom textual descriptions in a format that is friendly to screen readers. The drawback of this approach is that it would require an enhancement to WaveDrom, a third-party tool. However, this tool is maintained by a kind-hearted RISC-V community member, @drom. Even if he doesn't have the bandwidth to implement this feature, I suspect he would welcome a PR.

Another way forward may be to write "alt text" for each WaveDrom graphic. The drawback of this approach is it adds redundancy to every graphic, meaning extra work (and chances for errors) whenever changes are made to them.

[ethindp]

@nick-knight SVGs have accessibility things that WaveDrom could implement as well, including ARIA support. The problem is that to use ARIA properly, one must implement the behaviors that an ARIA role communicates, since ARIA itself does not alter behavior. Of course, as the ARIA authoring guide indicates, no ARIA is better than bad ARIA; in other words, it's better if one simply doesn't need ARIA than one needing to implement it. But the authoring guide for properly using ARIA may be of interest: https://www.w3.org/WAI/ARIA/apg/practices/

[ethindp]

Okay, so I have an update on this. To my surprise, AI's image descriptions (at least chatGPT's) are actually quite useful in hacking around this issue. Obviously, this is not an actual fix to the problem, and an actual fix should definitely be worked upon (e.g. maybe implementing the generation of tables instead of diagrams for bitfields/registers/instruction encodings/whatnot). But it's decent at describing the images, even if they lack context (the image description feature is an add-on to my screen reader, and I'm waiting for an update to allow for context-specific descriptions). It's a decent alternative to having to open the wavedrom files alongside the manual. But hopefully we can get a much higher quality accessibility implementation into wavedrom itself.