Some Examples for Exploring Clickability

Question: What screen readers report “clickable” on things, even if the click handler does nothing/may only be being used as a listener to delegate events from sub-elements?

The only screen reader that, out of the box, with default settings, reports “clickable” on elements with a click listener attached is NVDA. The reporting of “clickable” can be turned off: Preferences > Settings > Document Formatting, under Elements, uncheck the Clickable checkbox.

screenshot of NVDA document formatting preference showing clickable checkbox unchecked

Note: Just because something is focusable, does not mean focusing it with the keyboard will allow you to click it with the keyboard. To make a non-natively clickable element clickable via keyboard, it is necessary to listen to keyboard events (spacebar and/or Enter). Only simple inline onclick listeners are used below. So announcement of click events won't appear in the console. If a screen reader is enabled, however, Enter and spacebar will fire a click on a focused element.

Table with a couple of cells and click listener on table

header 1 header 2 header 3
cell 1 cell 2, is tab focusable cell 3
cell 4 cell 5 cell 6

Nested divs with click listeners

Outer div with listener
Inner div with listener. Should bubble.
Inner inner div. Focusable. Shouldn't bubble.

Paragraphs with a click listener

I have a listener attached to me

I also have a listener attached to me and am tab focusable

A link, which should announce role (with clickability assumed/not announced)

go to Microsoft website