对于有视力的用户来说,将焦点放在第一个可操作元素上很好,比如亚马逊网站上的搜索框(尽管他们没有这样做)。但是,有视力的用户可以通过快速浏览整个页面来看到焦点位置(假设你有一个焦点指示器,
2.4.7),相对于页面的其余部分,他们会立刻知道焦点位置之前有导航元素,在焦点位置之后还有更多的内容可以交互。
对于使用放大镜的低视力用户,他们的视口将被移动以包括具有焦点的元素。通常当页面加载时,焦点会转移到DOM中第一个可以接收焦点的元素。这通常是位于左上方的“主页”标志(用于LTR语言)。由于视口在左上角,低视力用户将知道他们可以将视口向右或向下拖动以探索页面的更多内容。但是,如果初始焦点位于页面的中间,那可能会让人迷失方向。用户可能不知道自己在页面上的位置。视口从左上角移动了多远?他们能向上、下、左、右探索多远吗?
对于极低视力、视力障碍或盲人使用屏幕阅读器的用户来说,迷失方向甚至更加剧烈。屏幕阅读软件具有出色的导航工具,因此可以轻松地探索页面的各种元素,前提是使用了语义化的HTML元素,例如<h2>或<table>或<ul>。您可以使用“H”键导航到标题,使用“T”键导航到表格,使用“L”键导航到列表。但是,屏幕阅读器用户也希望初始焦点在左上角。他们当然可以定位自己并弄清楚他们在页面上的位置,但这确实需要一些认知努力,类似于屏幕放大镜用户。
那么,如何为所有这些类型的用户(以及许多其他类型的用户)创造愉快的体验呢?
如一篇答案所述,"
跳转链接"非常方便。在无障碍术语中,这被称为"
越过块"(2.4.1)。它们允许默认焦点位于左上角(或默认焦点所在的任何位置),当您使用
tab时,焦点移动到“跳转链接”,这是一个页面内的链接,可让您跳转到页面的主要部分。这对于仅使用键盘的用户(可能是有视力或视力障碍的用户)、屏幕放大器用户和屏幕阅读器用户非常有用。
但是,如果您真的希望焦点集中在特定元素上,如果该元素是<input>或<button>元素,则可以使用
autofocus
属性。对于其他本地可聚焦元素,例如<a>,您可以使用在加载时运行的JavaScript调用focus()来设置焦点。
页面上的初始焦点不必位于第一个元素,因此将其放在表单上是可以的,只要以减少对有限视力或无法使用鼠标的用户的混淆方式进行即可。
有关
tabindex
的更多信息,请参见"
5.5组件之间的键盘导航(选项卡序列)"。请注意,对于大于0的tabindex值,它说:
"作者强烈建议不要使用这些值。"