speedscope is 100% inaccessible for blind engineers like me.

[kastwey]

Hello.

I'm working on a project, and I've detected some CPU based performance issues. I finally landed on your application, but unfortunately I can't read anything at all using a screen reader, because you are rendering the data only as an image or similar. It would be great to have some kind of HTML alternative like a table or something.

Also, the app does not use real HTML controls like buttons, links, so the screen reader can't detect them either.

Could you take a look at it please? Right now it's totally impossible for me to use the tool, and that's a real shame.

Thanks in advance!

[bjorn3]

Neither a dev of this project, nor a user of a screen reader, but I believe this kind of problem is commonly solved by having a layer of html elements that a screen reader can interact with, but that is hidden for regular users, right? I think aria-hidden="false" can be used to make display: none; elements visible for screen readers, but I am not sure. ARIA attributes can be used to help guide screen readers on how to interpret the elements. https://w3c.github.io/using-aria/ may be useful I think. Just throwing this information out to help anyone who wants to implement this. (Speedscope renders to a canvas using webgl by the way. I believe this is for performance reasons, so maybe the accessibility html elements should only be created when a user enables it using an html button.)

[kastwey]

Hello!

Exactly, what we could do is to create an alternative with HTML elements. I don't think it would be necessary to hide it, but let the user choose the most appropriate representation.

I'd be surprised if painting an image is less expensive than rendering HTML, but anyway, we could add a couple of tabs, and let the user select the most appropriate one.

There are other reasons why an HTML table would be convenient; for example, to copy a certain value and not have to paste the whole image.

Thanks for replying!

Kind regards,

Juanjo.

[jlfwong]

Hi @kastwey, thanks for the report! I'm not actively working on speedscope at the moment, but should have some time to invest into it in the coming months.

I'm curious to understand a little bit more about what kinds of information you'd like to be able to extract using speedscope, since that would help guide the approach taken here.

For example, flamegraphs are predominately useful in that they visually represent relative weights of things using widths. I'm curious if and how flamegraphs could be useful in a screen reading environment. Does the Chrome developer tools performance tab work well for you, for instance?

There is already a tabular view available in the "sandwich" view which contains some of the information which may be relevant to you. You can access this view by hitting "3" on your keyboard. I'm not sure offhand if the screen-reading experience of that is reasonable (it may currently be quite poor), but I'd be curious to know.

I'd be surprised if painting an image is less expensive than rendering HTML, but anyway, we could add a couple of tabs, and let the user select the most appropriate one. In this case, it's specifically rendering the flamegraph that is expensive. In cases of large profiles, this can sometimes result in needing to drawing tens or hundreds of thousands of rectangles, which is much too slow to do via HTML elements, but is made quite efficient using WebGL.

The issues you pointed around regarding links & buttons should certainly be easier to resolve.

Thanks for taking the time to surface the issue!