Search code examples
htmlhyperlinkaccessibilitykeyboard-eventswai-aria

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, while links are expected to be triggered using the Enter key.

  1. Does anyone know why a different key is used for buttons / links?

  2. Is it ok to trigger using both Space and Enter?

Before reading this I, as a user, would have had no idea when to use Space or Enter.

Had a quick look at Google to see what they do.

  • For links Space scrolls down and Enter triggers
  • For buttons both Space and Enter trigger
Solution

    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.