如何将特定元素集中在Chrome中



我正在做可访问性工作和测试选项卡焦点。

是否有一种简单的方法将重点放在Chrome或任何其他浏览器上的特定元素上?例如,页面中间有一个按钮。我如何在不先进之前快速将该元素集中在不浏览所有内容的情况下?

只需在JavaScript中使用焦点方法:

document.getElementById('myButton') .focus();

焦点方法存在于所有自然焦点的元素上(例如按钮,链接,表单元素)或已通过Tabindex属性进行焦点。

对于输入元素,您还可以使用自动对焦属性告诉浏览器一旦加载页面,请立即将其聚焦。

许多网站使用"跳过链接",以绕过冗长的导航菜单并快速访问页面的某些区域。这对于最终用户以及正在测试网页的开发人员很有用。

基本原则是,您将在使用锚元素和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受到更广泛的支持。

  • 开放式Chrome开发人员工具

在控制台内,您可以使用以下内容将任何元素聚焦:

 document.querySelector(selector).focus();
  • 可以右手获得选择器,单击开发人员工具代码内的元素并选择copy / copy selector

这不需要该元素具有id属性,但是您仍然可以使用它。

最新更新