document.documentElement.addEventListener('keydown', e => {
  switch(e.key) {
    case "F1":
      document.getElementsByTagName('main')[0].focus();
      break;
  }
})

由于这仅在DOM上起作用，因此您需要将此处理程序绑定到词根，而不是纪录片，或者呈现应用程序的位置。

Web应用程序和`选项卡`

如果您在应用程序中实现了组件的箭头密钥导航，则用户可以通过 tab 来达到地标/组件，并实现它可能很快跳过链接或快捷方式可能不太有趣。

First, make sure that you are using the right HTML elements for your areas, like <main> or <region> or <footer>, and that they carry an accessible name by means of aria-label or aria-labelledby. The ARIA role for an area on a page is landmark:

A landmark is an abstract role for a section of content that is important enough that users will likely want to be able to navigate to the section easily and have it included in a dynamically generated summary of the page. Landmarks allow assistive technologies to navigate and to find content quickly.

ARIA: landmark role on MDN

Use Skip Links

Then, you might consider using Skip Links that allow keyboard users to navigate to these landmarks directly by means of tab. This might also give you an opportunity to communicate the Shortcuts you are providing.

Shortcuts

When providing shortcuts, it’s important to not use shortcuts that are already in use on the user’s platform. These should still work as expected.

Also, 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

One way to implement shortcuts is the native accesskey attribute, but browser and AT support is not great.

Accesskey on WebAIM

Usually, these keys are used for interactive elements, not for landmarks. So if you want to focus a landmark, you will need to make it focusable first:

<main id="main" tabindex="-1">

Then you can bind on the keydown event and focus the corresponding landmark in turn.

document.documentElement.addEventListener('keydown', e => {
  switch(e.key) {
    case "F1":
      document.getElementsByTagName('main')[0].focus();
      break;
  }
})

As this only works on the DOM, you will need to bind this handler either to your root instead of the documentElement, or where you render your application.

Web Applications and `tab`

If you implemented arrow key navigation for components in your application, it might be pretty fast for users to reach a landmark/component by means of tab, and implementing skip links or shortcuts might be less interesting.

回复收藏 0 原文

~没有更多了~