Accessibility: establishing association between annotations and text

[rsimon]

One of the nice things about the SpansRenderer implementation is that it gives us way more performance (and much less complex code) than the tedious & slow markup manipulation we did in RecogitoJS.

On the other hand, this creates an accessibility problem, because there is no direct association between the annotations and the text in the DOM.

We could, of course, add a new renderer (InlineMarkupRenderer?) that follows a similar approach as RecogitoJS. I believe we could even make it way more performant, because we now have good infrastructure in place for lazy rendering (via the SpatialTree that's kept up to date based on DOM Range bounds). But I wonder if there are simpler solutions.

For example, could we place zero-width marker SPANs into the text? This would avoid the need for dealing with complex nested and overlapping annotations. Or would this still be useless for screen readers?

Also CCing @oleksandr-danylchenko, since I suspect you have been facing similar questions?

[oleksandr-danylchenko]

Thanks for opening the issue, @rsimon. Yeah, we've been working on introducing a more accessible approach to associate the highlights with the side notes in our app. However, they are still ideas that haven't been implemented in the scope of the text-annotator-js or the app-specific wrapper 🪄.

---

Today I'm out of the office. But I might share some of the ideas we came tomorrow.