WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Space key usage versus enter key for interactive elements


From: Birkir R. Gunnarsson
Date: Jun 22, 2014 6:10AM

spacebar is used -
- to check checkboxes,
- to select items in a dropdown list where multiple selections are
allowed (I generally recommend not using that interface component if
it can be avoided, I recommend a set of checkboxes over that

- to select radiobuttons
- )along with enter key= to activate buttons

enter is used
- to activate links
- (along with spacebar) to activate buttons

I have seen cases where the enter key is coded to check radiobuttons,
but I am not a fan of that interaction pattern, it is definitely not
what I consider to be standard.

Arrow keys are used)
- to move between radiobuttons within a common fieldset
- to cycle between tabs in a tab interface (this must be implemented
via JavaScript)
- to move between choices in dropdown lists

Just remember to assign the appropriate ARIA role to any div or span
that simulates an interactive control (and, of course, to use native
controls whenever possible).

You can put a tabindexö="0" on a heading and support enter and
spacebar keys, but the user will have no idea that he can click on it
unless it is visually mapped as a link or a button and the
corresponding ARIA role (link, button) is also added.

On 6/20/14, Steve Faulkner < <EMAIL REMOVED> > wrote:
> On 20 June 2014 18:57, Nahidi, Jinkuk < <EMAIL REMOVED> > wrote:
>> Without any guidance of keyboard defined interactions, do keyboard users
>> use space key to interact with elements that are interactive?
> depends on the control, the common default keystroke to activate a button
> orcheckbox is the space key, so keyboard users expect a button or checkbox
> to be able to be activated with the space key.
> Screen readers such as JAWS announce a hint to users when a button receives
> focus
> these (old) tests may provide some insight
> http://files.paciellogroup.com/blogmisc/user-input-widgets.html
> --
> Regards
> SteveF
> HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>;
> > > >

Work hard. Have fun. Make history.