After a few days off work, I bring you a button a11y special!
- Eric Eggert describes the difference between a link and a button:
- A link changes what the URL in the browser points to; either a new page, or a file to download, or a frame to update the source of.
- A button performs an action. Originally only available as an
<input type="submit" />, with the sole purpose of submitting forms, then along came the<button>element which allowed more versatility. It’s great for creating things like calculators, where the end result URL is not an important thing to be able to share.
- Links and buttons have different roles. Assistive technologies announce them as “link” and “button” respectively, and this sets a user expectation as to the behaviour.
- Screen readers have a way of easily presenting all the links in the page; buttons are harder to surface.
- Links can be activated with the return key, whereas buttons can be activated with return or space.
- Context is important. You can style a link to look like a button, and that’s fine, if the button says something like “Read the full story”, which hints that it will take you to another page.
- Eric concludes that the link vs button debate is a grey area. He’s surprisingly unopinionated in the close: “there is no one true way to code or design something”.
As a bonus for today’s article, I read THE BUTTON CHEAT SHEET (buttoncheatsheet.com). It compares different ways of marking up buttons and button-like things. I don’t really see how useful it can be, but it’s worth a quick look through, if only to see how many different ways it can be done.
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.
