Description
I'm contributing to a draft of a spec called ARIA Annotations. It will be going up for review within the ARIA WG fairly soon. I also wanted to surface it here because implementing it could help a wide range of folks.
The core (if you're familiar with ARIA) leans on the aria-details property and then provides some clarifying roles (which mostly have Web Annotation Data Model analogues) to differentiate annotations from each other (for easier find-ability, potentially adding additional UX affordances, etc).
Here's an example:
<p><mark aria-details="comment-123">The proposal</mark> contains...</p>
...
<div id="comment-123" role="annotation-commentary">This proposal is great!</div>It should be fairly simple for us to make annotations (which have annotation bodies) be expressible this way. There's also a bonus value (for us) when managing interleaving highlights--we can use a single aria-details value across multiple DOM nodes which can help use curate (edit/remove) annotations which cross DOM boundaries as if they were a single whole (see #47 for explanation of that issue).
So, an annotation crossing DOM boundaries might look like this:
<p><mark aria-details="comment-123">The</mark> sort of OK <mark aria-details="comment-123">proposal</mark> contains...</p>
...
<div id="comment-123" role="annotation-commentary">I think it's more than OK! I think the proposal is great!</div>Now, the two <mark> tags could be conceptual (and technically by Apache Annotator) as a single whole. The overhead, though, is that using aria-details requires a DOM element to point at (i.e. the annotation body), so it doesn't cover simple highlighting usage (because those have no annotation body...).
Would love thoughts and ideas for implementing this (noting, though, that we don't yet have an "annotation body" API...). 😃