When cursor changes to hand-pointer while hovering over highlighted text no action is identifiable

[mattdricker]

This feedback comes out of Accessibility Web Audit from UC Berkeley.

Current behavior

When moving pointer over highlighted text, the cursor changes to a hand-pointer normally used to indicate a link, but no action is available or announced for user to follow.

Expected behavior

The screen reader user should have a clear idea of what action can be performed as indicated by the changing cursor state.

This is the feedback from the review:

Hovering over the annotation changes the cursor to indicate that it’s a link, but no action was available except for cases where there was the “More” option to show more text.

Adjust markup and/or CSS so that there isn’t a link cursor when the annotation isn’t interactive.

[acelaya]

@mattdricker we have just merged a PR that introduces some changes related to this.

• The annotation cards in the sidebar are now focusable, and part of the keyboard focus sequence.
• They can still be actioned by clicking on them, but now they can also be actioned via Enter and Spacebar as long as they are focused. That makes it more consistent with the hand cursor.
• When they gain focus, screen readers will announce an action.

[acelaya]

As per https://github.com/hypothesis/client/pull/5572, reopening this again.

[acelaya]

Making the whole annotation card focusable and respond to Enter and Space keys introduced new problems (mainly miss-behaviors of having nested focusable elements).

I'm going to suggest that a possible solution is remove the "click" action on the card itself (and therefore, the hand cursor), and instead add an explicit CTA of some sort, which is focusable itself, with the "scroll-to-annotation" action.

Maybe a button/link at the bottom of the card, saying "Scroll to annotated text" or something like that.

[robertknight]

I suggest a variation on this:

Maybe a button/link at the bottom of the card, saying "Scroll to annotated text" or something like that.

1. Don't change the existing click action, as it is useful for the majority of users
2. Add a hidden "Scroll to annotation" link on the annotation card which has the same effect as clicking on the annotation card. This provides an accessible equivalent to (1)

For related patterns, see the hidden "Skip to content" link which is present on many pages.

[acelaya]

Don't change the existing click action, as it is useful for the majority of users

The problem is that the hand cursor on the card is what appears to be not expected, for a component that screen readers don't announce, is not part of the focus sequence and cannot be interacted with the keyboard.

Our first attempt was to add all those missing pieces to get it "in sync", but that introduced other problems.

I'm suggesting this other option, not because it's not useful for sighted users to be able to click on the card, but because it's another way to be "in sync" without loosing the capability entirely.

In fact, lately we have seen people who didn't even know the card is clickable, so perhaps it's not as used as we think (and this is just a blind guess).