我正在做可访问性工作和测试标签焦点。在chrome或其他浏览器上,有没有一种简单的方法可以跳过焦点到特定的元素?例如,页面中间有一个按钮。我如何快速聚焦该元素,而不需要先点击它之前的所有内容?
7cwmlq891#
在JavaScript中使用focus方法:
document.getElementById('myButton') .focus();
focus方法存在于所有自然可聚焦的元素上(如按钮、链接、表单元素),或者通过tabindex属性可聚焦的元素上。对于输入元素,您还可以使用autofocus属性来告诉浏览器在页面加载后立即聚焦它。
wvt8vs2t2#
许多网站使用“跳过链接”来绕过冗长的导航菜单,快速访问页面的某些区域。这对最终用户和测试网页的开发人员都很有用。基本原则是在页面的最开始使用锚元素和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得到了更广泛的支持。
TAB
zbdgwd5y3#
在控制台内,您可以使用以下命令聚焦任何元素:
document.querySelector(selector).focus();
copy / copy selector
这并不要求元素具有id属性,但您仍然可以使用它。
id
3条答案
按热度按时间7cwmlq891#
在JavaScript中使用focus方法:
focus方法存在于所有自然可聚焦的元素上(如按钮、链接、表单元素),或者通过tabindex属性可聚焦的元素上。
对于输入元素,您还可以使用autofocus属性来告诉浏览器在页面加载后立即聚焦它。
wvt8vs2t2#
许多网站使用“跳过链接”来绕过冗长的导航菜单,快速访问页面的某些区域。这对最终用户和测试网页的开发人员都很有用。
基本原则是在页面的最开始使用锚元素和ID(就像任何页面内链接一样)。
例如:
WebAIM在这方面有一个非常好的教程。http://webaim.org/techniques/skipnav/
当你访问他们的网站时,在做任何其他事情之前按下
TAB
键,你会看到一个如何工作的例子。我认为这种方法比使用JavaScript更可靠,因为HTML得到了更广泛的支持。
zbdgwd5y3#
在控制台内,您可以使用以下命令聚焦任何元素:
copy / copy selector
来获得选择器这并不要求元素具有
id
属性,但您仍然可以使用它。