站点导航有二十多个链接,键盘用户每进一个页面都要按二十多次 Tab 才能落到正文,来回几次就不想再用了。乍看像缓存或者权限的锅,追下去往往不是。
<a href='#main' class='skip'>跳到主内容</a> <main id='main' tabindex='-1'>…</main>
追下去是这么回事:页面结构里导航排在正文前面,又没有提供跳过入口,焦点只能按 DOM 顺序一个个往下走,重复内容就这样变成一笔固定开销,每页都要付一次。
「跳过导航链接」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。
能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。
具体做法是,在 body 的最前面放一个直达正文的跳转链接,第一个就是它;链接平时移出视口,获得键盘焦点时再显示出来;给主内容区加上一个 id,并把 tabindex 设成负一,方便聚焦过去。
验收就看一点,打开页面按一次 Tab 就跳出链接,回车之后焦点落到正文的开头。
