Portrait of the Artist as a Man
September 12, 1999

- - 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


Previous post
Markdown Tester Overview Philosophy Inline HTML Automatic Escaping for Special Characters Block Elements Paragraphs and Line Breaks Headers Blockquotes Lists
Next post
Neiman Marcus Sexiest Leica in the World This post serves MANY purposes.1. Check out this sexy Leica M9 - Neiman Marcus edition which would look just so good with my awesome bag. Test the