自动分配焦点对无障碍性是否有害?

23

如果我有一个表单是页面主要内容的一部分,通过JavaScript在页面加载时将焦点指定到第一个表单字段上,会对无障碍性产生任何负面影响吗?


请参见http://ui.stackexchange.com/questions/2861/drawbacks-of-auto-focusing-on-a-web-pages-text-field-javascript。 - Day
7个回答

37

简短回答是不会让事物无法访问,但可能会导致混淆。下面是更长的答案。您的用户是否知道他们正在访问一个具有表单的页面,并且在填写表单之前是否需要阅读任何描述性文本?我是一个屏幕阅读器用户,当焦点被放在随机字段中时,这可能很烦人。当我的焦点自动放置在Stackoverflow上查看问题时,编辑答案字段中的每个时候都会让我感到恼怒,因为我必须强制我的屏幕阅读器从表单字段导航到页面顶部。


谢谢Jared。这是一个好答案。不过我想在社区中更接近一些共识。我们正在为Drupal 8努力 - https://drupal.org/node/2096347这里还有其他链接:https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/form-attributes.html - Mike Gifford
还值得补充的是:http://webaim.org/blog/future-web-accessibility-html5-input-extensions/因此,使用HTML5的自动对焦功能比使用JavaScript或tabindex更好,因为它可以被用户代理禁用。 但是,在使用之前必须仔细考虑。 - Mike Gifford
如果可以的话,使用HTML5自动对焦属性可能更容易访问。http://webaim.org/blog/future-web-accessibility-html5-input-extensions/ - Mike Gifford

2

如果我们有一个键盘用户(无论是使用屏幕阅读器还是习惯使用键盘的用户),他们期望在第一次按Tab键时导航到页面顶部的链接,那么这可能会有点困扰。对于屏幕阅读器,您还可以考虑添加WAI-ARIA以添加方向,以便用户不会被抛到表单中间。

如果用户更有可能直接在字段中输入内容,那么我认为自动对焦是值得的。但出于上述原因,我不会在每个带有输入字段的页面上使用它。

如果您使用自动对焦,请确保立即在输入元素后面的脚本中或将来使用HTML5自动对焦属性进行设置。不要在window.onload之后才执行它。当您输入时,点击其他位置只会让文档过晚地完成加载,并将焦点窃取到另一个元素上,这很烦人。


0
在页面加载时通过JavaScript将焦点分配给第一个表单字段是否会对可访问性产生负面影响?
我想不出任何负面影响。在字段之间可能会使用户运行的任何辅助软件感到烦恼,但第一个字段几乎不会。我没有盲文和类似客户端的经验。
既然连Google在他们的首页上都这样做了,我认为这不管怎样都不是什么大问题。

1
仅仅因为某人使用屏幕阅读器并不意味着他们不使用JavaScript。页面在浏览器中呈现,包括JavaScript,然后将页面的模型移交给屏幕阅读器。当页面使用JavaScript更新时,这些更新会发送到屏幕阅读器所使用的页面模型中。 - Jared

0
很多网站都会这样做,谷歌是一个很好的例子,唯一的问题是当你在地址栏或浏览器中的搜索输入框中输入内容时,聚焦表单字段的操作往往会从你正在输入的位置抢占焦点。这只是一个小烦恼。

0

引用 MDN autofocus -> accessibility considerations(2022年9月28日检索):

自动聚焦表单控件可能会让使用屏幕阅读技术的视障人士和认知障碍者感到困惑。当赋予一个控件autofocus后,屏幕阅读器将在事先未警告用户的情况下将其“传送”到该表单控件所在位置。

在应用autofocus属性时,请仔细考虑可访问性。自动聚焦控件可能会导致页面在加载时滚动。聚焦还可能导致某些触摸设备上显示动态键盘。虽然屏幕阅读器会宣布获得焦点的表单控件的标签,但屏幕阅读器不会在标签之前宣布任何内容,而在小型设备上的有视力用户同样会忽略先前内容所创建的上下文。

为了举例说明,就目前而言,https://www.google.com 在搜索框上使用了自动对焦功能,而维基百科和亚马逊则没有。如果在页面中键入搜索框是唯一的目的,并且混淆的风险很低,那么考虑使用自动对焦功能是值得的。否则,最好跳过自动对焦。

-3

我不这么认为,片段是HTTP的一个组成部分,它们设置了*html页面的焦点。


再说一遍,什么是“片段”? - Jørn Schou-Rode
fragments = #URL结尾处的文本 - jball

-4

我不这么认为。屏幕阅读器可能甚至不会注意到这一点,因为它不解释页面上的JavaScript。

另一个使用“正常”浏览器的用户将获得光标已经在正确位置的优势,这有助于仅使用键盘进行导航。


10
作为一名屏幕阅读器用户,这并不正确。浏览器运行JavaScript代码后,将页面结构模型返回给屏幕阅读器。这意味着你可能会被直接放置在表单字段中,而无法了解其背景或目的。 - Jared
非常有趣!这只是展示了这个社区的实用性。我已经做网页开发大约12年左右了,我会像Juri一样给出完全相同的答案。我不知道现在屏幕阅读器是以这种方式工作的。不久的将来,我将重新审视无障碍性。您能否检测到屏幕阅读器,并可能将页面的不同、更有用的部分聚焦? - meouw
1
据我所知,在浏览器内部无法检测屏幕阅读器是否在运行。如果您想提供额外的信息来帮助屏幕阅读器用户,请查看http://www.w3.org/TR/2008/WD-wai-aria-20080204/。不确定这是否是最新版本,但这是谷歌宣布已将ARIA支持加入Google Reader时链接的版本。 - Jared
有趣。谢谢@Jared。我之前并不知道这一点。我以为屏幕阅读器只解释HTML而完全忽略JavaScript。 - Juri
我想在这个帖子中添加一个相关的问题:http://ux.stackexchange.com/questions/60026/when-is-it-appropriate-to-add-the-html5-autofocus-attribute-to-a-page@jared,你有关于HTML5 autofocus被屏幕阅读器支持的最新统计数据吗?现在是否可以设置屏幕阅读器忽略此属性?WebAim文章现在有点过时了。 - Mike Gifford

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接