Ramonda

role-that-fights-the-tag

This fails the run. Where it is wrong about your code, // ramonda-check-ignore <reason> on the line says so, and the reason is printed on every run.

Reported when a role says the element behaves in a way the tag does not — a link as a button, or a button as a link.

The element keeps its behaviour and the role changes only what is ANNOUNCED about it, so a role that disagrees cannot bring the behaviour with it.

A link announced as a button: a button activates on Space as well as Enter, and a reader told "button" will press Space — which on a link is the browser's scroll shortcut, so the page jumps and nothing happens. It also leaves the list of LINKS a screen reader offers, which is how somebody surveys what a page connects to.

A button announced as a link: the reader now expects a destination — a URL in the status bar, a middle click that opens a tab, "copy link address". None of those exist, and none fail loudly.

The answer is never the role. If it should be a button, use a <button>; if it should go somewhere, use an <a href>. Both arrive announced correctly, focusable, and with the right keys already working.

An <a> with no href is not a link at all and is not this — that is link-without-a-destination, and building a button out of an anchor is a different conversation.

Next