Skip to content Skip to sidebar Skip to footer

Buttons And Links Keyboard Triggers

While doing research I came across this statement: Warning: Be careful when marking up links with the button role. Buttons are expected to be triggered using the Space key, whil

Solution 1:

  1. Buttons are form elements.

    If you select a checkbox element, space will toggle the checkbox while enter will submit the form.

    So to be coherent, buttons act the same way. In practice, they accept both enter and space without any difference.

  2. It is not only ok but you have to

    Read inside the Third rule of ARIA:

    For example, if using role=button the element must be able to receive focus and a user must be able to activate the action associated with the element using both the enter (on WIN OS) or return (MAC OS) and the space key.

  3. This is for historical reason, not that it has been defined in any official recommendation, as far as I know

    For instance an old bug from 2000 (https://bugzilla.mozilla.org/show_bug.cgi?id=56495) already stated that space bar was expected to work on buttons. Maybe an inheritance from Windows behavior.

Solution 2:

I am speculating to answer #1, but I believe the keys used to activate buttons versus hyperlinks are holdovers from operating systems. For hyperlinks, think of Windows Help in Windows 95 and its reliance on in-content links, or Hypercard on the Mac prior to that. Also note that Space has scrolled a page in browsers since (IIRC) day one.

To answer number 2, no it is not OK. This is because a space bar triggers a page scroll and many users expect that when focus is on a hyperlink that pressing Space will just scroll the page.

In short, honor the keyboard mappings that are in place since there are users who rely on them and messing with them can have catastrophic consequences for users of assistive tech along with users with disabilities who do not use assistive tech.

Let me re-state what you saw at Mozilla:

A hyperlink can be fired by pressing the enter key. But a true button can be fired by pressing the enter key or the space bar. When a hyperlink has focus and the user presses the space bar, the page will scroll one screenful.

And then let me add this:

I think it’s also worth mentioning that events triggered by a space bar only fire when the key is released, whereas using the Enter key will fire the event as soon as you press the key down (prior to releasing it).

Source: Links, Buttons, Submits, and Divs, Oh Hell.

Post a Comment for "Buttons And Links Keyboard Triggers"