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

时间:2017-08-30 21:15:15

标签: google-chrome google-chrome-devtools accessibility

我正在进行辅助功能工作和测试选项卡焦点。

是否有一种简单的方法可以将焦点跳到chrome或任何其他浏览器上的特定元素?例如,页面中间有一个按钮。如何在不首先覆盖所有内容的情况下快速聚焦该元素?

3 个答案:

答案 0 :(得分:2)

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

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

焦点方法存在于所有可自然聚焦的元素上(如按钮,链接,表单元素),或者已经使用tabindex属性可聚焦。

对于输入元素,您还可以使用autofocus属性告诉浏览器在加载页面后立即对其进行聚焦。

答案 1 :(得分:1)

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

基本原则是,您将在页面的开头使用锚元素和ID(就像任何页内链接一样)。

例如:

from django.contrib import admin
from .models import Post,Comment
# Register your models here.

class PostAdmin(admin.ModelAdmin):
    list_display = ('user', 'created_at', 'message', 'message_html', 'total_votes')

admin.site.register(Post, PostAdmin)
admin.site.register(Comment)    

WebAIM有一个非常好的教程。 http://webaim.org/techniques/skipnav/

当您访问他们的网站时,请先按<body> <a href="#maincontent">Skip to main content</a> ... <main id="maincontent"> <h1>Heading</h1> <p>This is the first paragraph</p> 键,然后再做其他任何事情,您将看到一个如何运作的示例。

我认为这种方法比使用JavaScript更可靠,因为HTML得到了更广泛的支持。

答案 2 :(得分:1)

  • 打开Chrome开发工具

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

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

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