我正在做无障碍工作和测试选项卡焦点。如何将特定元素集中到Chrome中?
是否有一种简单的方法可以将焦点跳至Chrome或其他浏览器上的特定元素?例如,页面中间有一个按钮。我怎样才能快速关注这个元素,而不是在第一个之前先标记所有内容?
我正在做无障碍工作和测试选项卡焦点。如何将特定元素集中到Chrome中?
是否有一种简单的方法可以将焦点跳至Chrome或其他浏览器上的特定元素?例如,页面中间有一个按钮。我怎样才能快速关注这个元素,而不是在第一个之前先标记所有内容?
只需使用JavaScript中的聚焦方法:
js document.getElementById('myButton') .focus();
存在对自然可聚焦的所有元素(例如按钮,链接,表格元素)的聚焦的方法,或已经作出可聚焦与tabindex属性。
对于输入元素,还可以使用autofocus属性告诉浏览器在页面加载后立即关注它。
除了测试目的以外,绝对不要这样做。或者,不要为一般用户部署此功能。 – aardrian
许多网站使用“跳过链接”来绕过冗长的导航菜单并快速访问页面的某些区域。这对最终用户以及正在测试网页的开发人员非常有用。
基本原理是,您将在页面的最开始处使用锚点元素和ID(就像任何页内链接一样)具有不可见链接。
例如:
<body>
<a href="#maincontent">Skip to main content</a>
...
<main id="maincontent">
<h1>Heading</h1>
<p>This is the first paragraph</p>
WebAIM对此有一个很好的教程。 http://webaim.org/techniques/skipnav/
当您访问他们的网站时,在执行其他任何操作之前,请先按TAB
键,您将看到一个如何工作的例子。
我认为这个方法比使用JavaScript更可靠,因为HTML被广泛支持。
里面的控制台,您可以使用集中的任何元素如下:
document.querySelector(selector).focus();
copy/copy selector
这并不要求该元素具有id
属性,但您仍然可以使用它。
您的问题有些模棱两可:是关于您作为用户或测试人员如何快速到达网页的特定部分,或者您作为开发人员如何确保用户/测试人员能够快速到达特定部分页面?此外,该按钮是否有一个ID,它是一种形式的一部分,或者确实存在于它自己? –