WebAIM - Web Accessibility In Mind

E-mail List Archives

accessible higlights and annotations

for

From: deborah.kaplan
Date: Dec 9, 2015 8:00AM

More and more websites are enabling text highlighting as a mode of interaction -- and for sighted people who can use a mouse, well-designed text highlighting can be a high-quality addition to the user experience, enabling a kind of interaction which is different from the usual comment thread at the bottom of the document. (To be fair, even for sighted people who can use mice, I'm not convinced the design elements of social highlighting and commenting have been quite worked out, as yet, but it's getting there.

Medium.com highlights allow interactions through responses as linked posts. My own employer's safaribooksonline.com allows highlights to include annotations. Other sites allow common threads to happen the a highlight annotations.

I've not yet seen a good interface for allowing non-mouse users to create highlights at all. My own highlights at Safari Books <https://www.safaribooksonline.com/u/00100000007vfb6AAA/> were incredibly difficult to make without a mouse, and I would love to add accessibility to the functionality. But I've not seen a good use pattern for this, nor can I think of one. In a webapp such as Google Docs, it's reasonable to make highlights via keyboard because highlighting text is an easy thing to do in that interface. But in a standard webpage, I can't think of a good user pattern for creating highlights.

In browsers which have caret browsing, the user can select text with the keyboard. Downsides to this include the fact that many users don't know caret browsing exists, and in fact in Chrome I believe it still requires an extension. None of the existing highlight systems I looked at online works properly with caret text selection, although that could presumably be fixed in the JavaScript. I'm not sure it would have a good cost:benefit trade-off, given caret browsing's other complications.

Are there good non-mouse UIs for selecting arbitrary boxes of text on a webpage besides caret browsing? I'm not even thinking of existing JavaScript library. Just, and the use pattern, are there good ways to approach this? It would be awesome to create something accessible, but I just can't think of what that would be.

Working with existing highlights is a little bit easier. It's true that most of these sites that have highlights don't do a great job of announcing them to screen readers, and giving either screen reader, magnification, or keyboard users good tools to access any associated annotations or highlight tools. But that's easier to address; that's inaccessible JavaScript, rather than an inaccessible user interaction.

Thoughts would be most welcome!

Deborah Kaplan