Interactive/Selectable labels and text glyphs

[gudeqing]

Hi, (1) is it possible to make titles or labels or text be clickable to open URLs? (2) is it possible to make titles or labels be searchable by a browser?
Best Regards!

[bryevdv]

Currently for (1) it is possible to use the text glyph to have clickable text. I am fairly sure there is already an open issue for clickable labels but I can't find it just now.

For (2) the short answer is no. Bokeh renders into HTML raster canvases (or HTML canvas). These are ultimately just 2d arrays of color values, and are completely opaque to the DOM. The browser has zero knowledge of what is "inside" a canvas, so nothing rendered into a canvas can be used for search.

However, there's nothing stopping us from adding actual DOM elements alongside the canvas that have searchable content or tags (maybe these are invisible and just exist to provide this searchable metadata). This seems like a reasonable thing but also intersects with other considerations like affording accessibility features for things like screen readers. So before jumping in to some implementation, I'd really want an actual detailed plan/proposal with some input from people that know more about this than I do.

cc @tcmetzger @bokeh/dev

[tcmetzger]

Those are some good points. And yes, the fundamental problem of the HTML canvas being opaque to the DOM ist unfortunately also an issue for accessibility (e.g. w3.org: "HTML5 currently lacks specific mechanisms to add accessibility hooks for content produced using this element. " or mozilla.org: "In general, you should avoid using canvas in an accessible website or app."). I think that for a graphics-heavy library such as Bokeh, it will be difficult to achieve full accessibility. But a few things could probably be improved more easily, as a start.

Accessibility is a complex issue, and I honestly don't know enough about Bokeh's inner workings (and potential history with accessibility issues) to come up with a comprehensive plan. But here are some quick ideas to get the discussion going:

• Provide some alternative content inside <canvas> </canvas> (this could be the "invisible" content @bryevdv mentioned above). This content can include any DOM elements and would optimally contain an automatically generated narrative description of the plot and the respective ARIA-labels (see here for examples). Automatically generating this text can get quite challenging - especially with more complex and dynamic plots. However, providing at least some basic information such as the title or type of plot (line chart, bar chart, map, etc.) would not only benefit accessibility but could also increase search engine visibility.
• Offer the option to download raw data, for example a CSV representation of the plot's DataSource objects (comparable to what Datawrapper does, for example)
• Use ARIA attributes, whenever possible. E.g. role="figure" aria-label="Interactive chart" for the canvas itself.
• Make more control elements keyboard selectable/controllable, for example the individual tools within the toolbar.

In conclusion: I think adding some "invisible" DOM elements with ARIA attributes into the canvas would help with this issue/feature request and benefit accessibility at the same time. I also think that adding this content to the canvas would not get in the way of additional accessibility improvements in the future.