Comparison
ARIA rolevsSemantic HTML
ARIA role
you added `role="button"` to a div and it still did nothing on the space bar.
An attribute declaring what an element is, so assistive technology announces it correctly. It changes only the announcement: no keyboard behaviour, no focusability, no default action comes with it. That gap is why the first rule of ARIA is not to use it — a role on a div is a promise to implement everything the native element would have done.
Full entry →Semantic HTML
you replaced the div with a button and got keyboard support, focus and the right announcement for free.
Using the element that already means the thing — button, nav, label, table, dialog — rather than a div with handlers attached. Native elements carry behaviour, keyboard handling, focus management and an accessible role that you would otherwise have to reimplement exactly. Almost every accessibility problem found in an audit is a native element that was rebuilt from divs and got most of the way there.
Full entry →