What is the impact of changing the keypress event so that it interacts a 'level up' than the key would do natively?

Question

A simple example, no code required:

If I press CTRL + F, automatically the browser opens a search bar on the page.

I made sure that by pressing CTRL + F it points to an input within the system.

I intend to put several other controllers, such as changing a tab boostrap with CTRL + TAB, close a modal with ESC. open internal help with F11 among others.

Examples:

To Navigate between tabs using CTRL + SETA

  var change_tab = function () {
        var map = {37: false, 39: false, 17: false};
        $(document).keydown(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = true;
                if (map[37] && map[17]) {
                    var $el = $('.nav.nav-tabs').find('li');
                    $el.each(function () {
                        if ($(this).hasClass('active') === true) {
                            $(this).prev('li').find('a').trigger('click');
                        }
                    });
                }
                if (map[39] && map[17]) {
                    var $el = $('.nav.nav-tabs').find('li');
                    $el.each(function () {
                        if ($(this).hasClass('active') === true) {
                            $(this).next('li').find('a').trigger('click');
                        }
                    });
                }
            }
        }).keyup(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = false;
            }
        });
    }

To maximize a form with CTRL + F11:

var make_full = function () {
        var map = {17: false, 122: false};
        $(document).keydown(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = true;
                if (map[17] && map[122]) {
                    $('.fullscreen').trigger('click');
                }
            }
        }).keyup(function (e) {
            if (e.keyCode in map) {
                map[e.keyCode] = false;
            }
        });
    }

The doubt is simple:

• This type of practice is considered user friendly?

• Is there any problem in replacing native browser shortcut keys with the keys I want to interact with within my system (EX: CTRL + F to open the search)?

• Is there any recommendation or standard (such as PSR-4 for autoload in PHP) on how to use this type of functionality correctly ?

PS: In the case in question the target is an internal system, it is not something to be marketed, I just need that who will use, can do as many things in the shortest possible time, since the focus of the system is precisely to streamline processes, here I have simple examples, but I have shortcuts that fill dates, trigger filters, push notifications, and many other things, some are above native actions.

Answer 1

As a rule, avoid changing the operation of the browser to avoid later incurring accessibility problems. If the audience of your site is restricted and is particularly informed about the shortcuts, less badly, but what if the person is short-sighted and you have replaced the Ctrl++ by something else? Interfering with the operation of browser shortcuts can cause setbacks for those who depend on them.

I believe that the path used by Google in applications like Gmail, with question mark for help overlay and shortcut combinations that do not run over those defined in browsers, is the safest way out overall.

An exception would be in the case of features that replicate the one already implemented by the browser: Ctrl+f to use the application’s internal search, Ctrl+z to undo an interface change etc, as long as it does not preclude its use in standard controls, i.e., keep the Ctrl+z "original" when the user is typing in a form field.

This way, users who spend the whole day in your application will have shortcuts to make life easier without it interfering with your browsing habits in other environments, maintaining the standardization of known combinations. Who doesn’t hate the fact that every existing text editor on the planet has its specific shortcut to redo: Ctrl+y, Ctrl+shift+z, Ctrl+r...

Some references...

• https://medium.com/@sashika/j-k-or-how-to-Choose-Keyboard-shortcuts-for-web-Applications-a7c3b7b408ee
• https://www.sitepoint.com/dont-hijack-my-browser/
• https://kyleschaeffer.com/user-experience/10-things-a-website-should-never-ever-do/

Answer 2

I am trying to help because no one from UX has tried to help so far. In my opinion this is not a good practice. The web software I use does not overwrite browser shortcuts, since when we use browser shortcuts we want to use a feature we already know.

Abs