ARIA Keyboard Shortcuts: What to Know

If your website has custom keyboard shortcuts, you need to tell your users.

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) can greatly improve accessibility, particularly if you’re developing a web application with desktop-like functionality.

As we’ve discussed in other articles, it’s crucial to remember the first rule of ARIA: Wherever possible, use semantic HTML instead — avoid using ARIA unless you absolutely need it. 

There’s one potential exception: In complex web-based applications, the aria-keyshortcuts attribute may be preferable to the HTML accesskey attribute. Here’s why, along with some tips for using the attribute appropriately. 

aria-keyshortcuts is more flexible than the HTML accesskey attribute

Crucially, aria-keyshortcuts enables authors to identify site-specific keyboard shortcuts to assistive technologies (AT). However, unlike the HTML accesskey attribute, aria-keyshortcuts attribute does not modify the functionality of your page. 

Its purpose is simply to identify the existence of keyboard shortcuts for AT users. This makes aria-keyshortcuts more robust than accesskey because it can work more effectively with different browsers and technologies. 

While the HTML accesskey attribute was developed with good intentions, it has significant issues:

• Browsers implement accesskey in very different ways (if they implement it at all). Content that uses accesskey may behave differently when read with a different browser.
• Screen readers may announce accesskey values every time the user focuses on a given element. Repetition can be frustrating for screen reader users.
• An accesskey attribute can conflict with AT shortcuts, operating system shortcuts, and other keystrokes.
• In some cases, accesskey shortcuts can conflict with screen reader shortcuts, preventing the software from functioning as expected.

aria-keyshortcuts is less powerful, and generally, it’s a better option when web content absolutely must have unique keyboard shortcuts.

If you’re thinking about using aria-keyshortcuts, review the best practices from the Mozilla Developer Network, then follow these tips to avoid common mistakes.

Make sure keyboard shortcuts do not conflict with existing shortcuts

You shouldn’t take control away from keyboard users. If your content uses shortcuts that are already well-established, you might be introducing an accessibility issue. 

For example, Ctrl + C is widely used to copy text, images, or other content. Your web application shouldn’t change this functionality; keyboard users will expect to be able to use Ctrl + C for its usual purpose. 

Best practices to keep in mind:

• Before adding a keyboard shortcut, make sure it’s helpful to real-world users. Generally, you should not add shortcuts unless you’re creating an HTML version of an application.
• Avoid single-letter keyboard shortcuts. 
• Review common screen reader shortcuts and avoid using them.
• Double-check your syntax. Modifier keys must be listed first in aria-keyshortcuts key combinations. 

Related: 5 Tips for Using ARIA to Improve Web Accessibility

Inform your users about available keyboard shortcuts

Screen readers will usually announce aria-keyshortcuts, but it’s important to remember that web accessibility isn’t just for people with visual disabilities. Many keyboard users can perceive content visually, and if a website relies solely on the aria-keyshortcuts attribute, those users may have trouble operating the content.

If your site uses unique keyboard shortcuts, you should present that information visually. If possible, write the keyboard instructions directly on the page). If that’s not an option, consider using tooltips or simple CSS (Cascading Style Sheets). 

Related: How CSS Benefits Accessibility 

Remember, if you don’t need custom shortcuts, don’t use them

People expect websites to work the same way, regardless of the technologies they use to browse the internet. While keyboard shortcuts may be helpful in specific circumstances, they can override user preferences — which makes for a poor user experience. 

If you’re using aria-keyshortcuts or any other ARIA markup, we strongly recommend working with an accessibility partner. Testing your content regularly will help you avoid common implementation mistakes, which can help you reach a wider audience.

To learn more best practices, read our Introduction to ARIA for Web Accessibility. If you have specific questions about ARIA, send us a message to connect with an expert.