CODEWITHSUNDEEP
javascripthtmlbrowsercross-browseraccess-keys
Kenneth J
Kenneth J

Reputation: 4896

HTML input attribute "accesskey" browser compatibility

What browsers are implementing the input attribute "accesskey"?
Is the behavior consistent cross browser?
Is it safe to use accesskey as just an extra data attribute (like the "rel" and "rev" are sometimes used on the a tag)?

Also, is there a way to capture the "onaccesskeypress" in JavaScript? Does it just fire an onclick event?

Upvotes: 4

Views: 4014

Answers (3)

Tim Hettler
Tim Hettler

Reputation: 1256

accesskey has pretty spotty implementation. Firefox allows you to use any character as an accesskey value, while Safari seem to only allow numeric characters (for example, on this page).

The next button is mapped to the > accesskey. It works in Firefox (Ctrl>, on a Mac), but not in Safari.

In my opinion, if keyboard navigation is essential to your webpage, using JavaScript is a much better option.

Some resources I used to come to my conclusions: [1], [2]

EDIT: After a bit more experimentation, it appears that Safari honors accesskeys that are alphanumeric characters. The keystroke to execute them is CtrlAlt{ACCESSKEY}. I still think JavaScript is the best way to implement keyboard navigation, but I thought I'd add this information for clarity.

Upvotes: 2

Aaron Digulla
Aaron Digulla

Reputation: 328724

Every major browser supports accesskey (parses it and assigns keyboard shortcuts accordingly).

The problem with this is that the control key is different for every browser. On Internet Explorer, it's Alt + key, Firefox uses Shift + Alt + key, Mac uses Ctrl + key.

Upvotes: 0

Paul Masri-Stone
Paul Masri-Stone

Reputation: 3139

Browser support:

All major browsers support the accesskey attribute. Although there has been some discussion whether this is a good thing for accessibility, it remains part of HTML (as of HTML5).

Consistent behaviour:

Behaviour is only consistent across browsers & platforms in that pressing a particular set of control keys and the defined accesskey key will activate the link.

By definition, every web developer is free to define access keys as they wish, and there isn't an agreed standard for common links, such as 'Jump down to the main content', 'home', 'sitemap' etc., so there's no consistency from website to website. See my suggestions below.

Also the control keys for accessing these keyboard shortcuts differ from browser to browser and platform to platform, and occasionally there have been changes between browser versions too.

The Wikipedia page about access keys provides a list for a wide number of browsers and should provide you with an up-to-date list.

Safe to use accesskey as just an extra data attribute:

I'm not sure what you mean by 'safe'. Here is an example of how to use it:

<a accesskey="9" href="/sitemap.html">Sitemap</a>

Personal suggested access keys:

0 - Home

9 - Sitemap

8 - Accessibility page (listing the keys)

1,2,3... - Main navigation items, top-level only

Upvotes: 3

Related Questions