I tried preventDefault() but I haven't had success. Is there something that I'm missing?

I would try to disable it globally, if possible (like registering the events on window)

I tried preventDefault() but I haven't had success. Is there something that I'm missing?

I would try to disable it globally, if possible (like registering the events on window)

• javascript
• html
• dom
• accessibility
• wai-aria

• key bination is platform dependent, but i'm talking of html accesskeys – user652649 Commented Mar 26, 2014 at 19:15
• 1 Why not just remove the attributes? – Teemu Commented Mar 26, 2014 at 19:19
• i think that would affect accessibility... is that the only option? – user652649 Commented Mar 26, 2014 at 19:32
• 1 Ehh...? Would it just have the same affect as preventDefault() (assuming preventDefault() would have been working)? Attributes can be removed/returned with JS, you don't have to remove them from the file, if that's your point. – Teemu Commented Mar 26, 2014 at 19:38
• 2 Your solution will indeed affect the accessibility. Because a screen reader would say, for example, "Save button alt+S", but when the user presses alt+S, nothing would happen because of your preventDefault() or whatever. So just remove the accesskey attribute. – André Polykanine Commented Mar 26, 2014 at 20:26

3 Answers 3

There doesn't seem to be a way to stop the event from triggering. The only alternative seems to be to remove the accesskey attributes temporarily while you don't want them to work. That's what jQuery UI has to do for modal dialogs.

Here's the code from that thread:

$("#boxA-dialog").dialog({
    autoOpen: false,
    modal: true,
    height: 400,
    width: 300,
    open: function(event, ui) {
        ak = $('[accesskey]').each(function() {
            $(this).data('ak', $(this).attr('accesskey')).removeAttr('accesskey')
        })
    },
    close: function(event, ui) {
        ak.each(function() {
            $(this).attr('accesskey', $(this).data('ak'))
        })
    }
});

As you can see it's saving the accesskey attributes to jQuery data before removing them:

$(this).data('ak', $(this).attr('accesskey')).removeAttr('accesskey')

and then restoring them from the data:

$(this).attr('accesskey', $(this).data('ak'))

I'd be interested in a solution that actually prevents the event rather than using this workaround.

If I correctly understand your problem, you could try this.

$('[accesskey*=]').focus(function(e) { 
    // disable accesskey functionality 
});
$('[accesskey*=]').blur(function(e) { 
    // reenable accesskey functionality 
});

Using the previous answer, you can use this trick to "remove" all "accesskey" options from the page.

$('[accesskey*=]').attr('accesskey','');

Simply set all accesskey on the page for nothing.