‘- - Type: note Tags: html, aria Processed: Yes ’- -
MOC: [[MOC-Accessibility]]
Let buttons be buttons
Stop making <DIVS> or <whatever> into buttons. <BUTTON> and <INPUT role="button"> have specific meaning and interaction expectations. Conventions come from historic use and become built-in expectations in design and development.
Enter accesses links AND buttons. Space access buttons ONLY.
<DIV>s versus <BUTTON>s
When you use <BUTTON>s you get: - Basic styling for free - Focus styling - [[Tab navigation]] - [[Enter interaction]] - [[Space interaction]] - Screen reader handling
When you use <DIV>s, you have to build all of that yourself
History of spacebar
The most common operation with the old computers was seeing the next page. How much old we are talking about? The years which there are no mouses and PageUp, PageDown and arrow keys were the secondary function of keys, moreover the keys were not existing on keyboard…
Spacebar was true biggest button and became the easiest primary method of interaction method for applications and the internet. When the internet was more about hyperlink documents, space to move to the next pages makes the most sense.
Neat point: SHIFT + SPACE reverse scrolls (up) which is obvious but also cool. It’s a [[trivial user action]] that can make generally accessibility better and helps with understanding accessibility needs. It also makes [[visible focus]] that much more of an important thing.
References
- Buttons https://www.w3.org/TR/wai-aria-practices-1.1/#button
- History of space bar: https://www.erturkozturk.com/why-do-web-pages-scroll-down-with-space-bar/