Character Key Shortcuts

Modern websites provide custom keyboard shortcuts to perform specific actions. These are provided to enhance the user experience of a website.

Sample keyboard shortcut to switch between light and dark mode — Figure 1 Example of character key shortcut to change the page to dark mode.

These shortcuts are usually single key presses using letters, punctuation, numbers or symbol characters. Single key press shortcuts can prove frustrating for users who operate their devices using speech input as these shortcuts can get activated while giving speech commands. It can also interfere with the shortcuts available for assistive technology such as screen readers.

NOTE:

New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.

Either one of the below mechanisms CAN be implemented if keyboard shortcut is implemented using only letter, punctuation, numbers or symbol characters.
- A mechanism CAN be provided to turn off the shortcuts.
- The shortcuts CAN be remapped using one or more keys like SHIFT, ALT, CTRL as per the user’s wish.
- The keyboard shortcut CAN be active only when that component has focus.
Best practice is NOT to use single characters key shortcut. Instead, use modifier keys such as SHIFT, ALT, CTRL or combination of keys to implement key shortcuts.
Ensure that custom shortcuts are NOT used in assistive technologies, browsers, and operating systems. As this might interfere with the shortcuts present for the website or application.
- Custom keyboard shortcuts conflict with standard software or operating system shortcuts or other assistive technology. e.g. Ctrl+N, Ctrl+O, Ctrl+S, Ctrl+P, Ctrl+W, Ctrl+C, Ctrl+Z, Ctrl+Z, Ctrl+F are already in use. Ctrl+T opens a new browser tab.
- Keyboard key combinations required by screen reader users are blocked by an application, limiting the ability of a user to navigate, read, or otherwise interact with content.
- Review lists of existing keyboard shortcuts.
  Please note that the user can change the NVDA/VoiceOver modifier key, so you will not necessarily be able to prevent overlap of shortcuts for all users. The modifier key is generally the Caps Lock or Insert key.

<p>Press 'Ctrl+Alt+K' to toggle the dark mode.</p>
<div>
    <span id="mode">Toggle Dark Mode </span>
    <button type="button" id="toggle2" role="switch" aria-labelledby="mode" aria-checked="false">
        <span>on</span><span>off</span>
    </button>
</div>
<div>
    <input type="checkbox" id="disable">
    <label for="disable">Disable key shortcut</label>
</div>

:root {
    --brightest: #fff;
    --bright: #757580;
    --positive: #003057;
}

/* Light Mode Styles */
body {
    background-color: var(--brightest);
    color: #000;
    transition: background-color 0.3s, color 0.3s;
}

/* Dark Mode Styles */
body.dark-mode {
    background-color: #000;
    color: var(--brightest);
}

[role="switch"] {
    padding: 0 .25rem;
    width: auto;
    height: 1.5rem;
    border: 0;
    border-radius: 1rem;
    background-color: var(--bright);
    cursor: pointer;
}

[role="switch"][aria-checked="true"] {
    background-color: var(--positive);
}

[role="switch"] span {
    color: var(--brightest);
    padding: 0.1rem;
    pointer-events: none;
    border-radius: 2rem;
}

[role="switch"][aria-checked="false"] :last-child {
    padding-left: .2em;
}

[role="switch"][aria-checked="false"] :last-child,
[role="switch"][aria-checked="true"] :first-child {
    background: var(--brightest);
}

label {
    font-size: 18px;
}
div {
    margin: 1rem;
}

const toggleDarkMode = document.getElementById('toggle2');
const body = document.body;
const disableShortcutCheckbox = document.getElementById('disable');

let isDarkModeEnabled = false;

function toggleDarkModeTheme(e) {
    isDarkModeEnabled = !isDarkModeEnabled;
    body.classList.toggle('dark-mode', isDarkModeEnabled);
    let el = e.target;
    let state = el.getAttribute('aria-checked');
    let isState = (state === 'true');
    toggleDarkMode.setAttribute('aria-checked', isDarkModeEnabled ? 'true' : 'false');
}

function handleCustomShortcut(event) {
    if (!disableShortcutCheckbox.checked && event.ctrlKey && event.altKey && event.key === 'k') {
        toggleDarkModeTheme(event);
    }
}

document.addEventListener('keydown', handleCustomShortcut);

toggleDarkMode.addEventListener('change', function () {
    toggleDarkModeTheme();
});

const togglebtn2 = document.querySelector('button#toggle2');
togglebtn2.addEventListener('click', (e) => {
    toggleDarkModeTheme(e);
});

Press 'Ctrl+Alt+K' to toggle the dark mode.

Toggle Dark Mode

Disable key shortcut

Character Key Shortcuts

Implementation

Why is it important?

Working Example