0

Well I was wondering how can I add Keyboard Shortcuts functionality to a HTML button. For example if you wish to bookmark a webpage you have keyboard shortcuts as CTRL+ D for chrome and safari but I wish to put the same functionality in a button so that when user clicks on it ,it bookmarks the page instead of showing an alert message to use CTRL + D like in this code.

so can this be done? I have no idea if it's possible, Even popular Addthis buttons display the same alert thing to use ctrl+d like on this site.

Geniusknight
  • 629
  • 1
  • 7
  • 22
  • http://stackoverflow.com/questions/10033215/add-to-favorites-button – kol Sep 22 '14 at 13:50
  • @kol It's the same code which I have used. – Geniusknight Sep 22 '14 at 13:52
  • So you don't want to add a keyboard shortcut to a button, which would normally mean allowing the user to use some keyboard combination to trigger your button. Rather, you want your button to trigger the browser feature to bookmark the current page. **I hope this is not possible,** because if JavaScript can create bookmarks then webpages can bookmark themselves without me knowing. – nnnnnn Sep 22 '14 at 14:00
  • Yes exactly @nnnnnn ! I am also curious how it will react on a mobile device. Actually the user gets a active bookmark notice, try it on Chrome and on the bookmark button it shows if user wants to bookmark it or not. It doesn't do everything on it's own as browsers won't allow scripts to play with browser integrated functions automatically. – Geniusknight Sep 22 '14 at 14:02
  • The bookmark prompt you describe for Chrome isn't used by all browsers. In any case I'm not sure why you'd want to add a button to bookmark the current page when the browser already has the functionality built in and users who know how to use bookmarks know how to create them. – nnnnnn Sep 22 '14 at 14:06
  • Yeah I know ! That's why the script I provided has Firefox, opera etc as well. – Geniusknight Sep 22 '14 at 14:07
  • Google keeps telling me this is not possible in Chrome. – kol Sep 22 '14 at 14:13
  • @kol oh I see ! Thanks, looks like I have to use the Alert windows after all, if it were possible it would have been a great feature. :) – Geniusknight Sep 22 '14 at 14:15

1 Answers1

0

In HTML, the accesskey attribute allows to define a single letter, and leave handling the modifier keys to the browser and the operating system, to avoid conflicts.

<button aria-label="+ add this" accesskey="a"><span aria-hidden="true">+</span></button>

This is great in theory, but in practice there are some accessibility concerns. The ARIA standard also has a lengthy section on considerations for keyboard shortcuts.

I still would go with this, as it’s the best option we currently have. You wouldn’t want to handle platform conventions in your code.

You can even retrieve the key combination the browser finally assigned by using the accessKeyLabel attribute, but browser support is not great.

button.title += ` [${button.accessKeyLabel || button.accessKey}]`;

If you are using single character shortcuts, you need to provide a mechanism to change these shortcuts, should they interfere with other AT shortcuts:

Understanding Success Criterion 2.1.4: Character Key Shortcuts

Andy
  • 4,783
  • 2
  • 26
  • 51