使用“ Tab”键导航时平滑滚动

Question

如何在使用“ Tab”键导航时，强制浏览器将页面平滑滚动到焦点元素？
先谢谢了。
注意：我已经看过了，但是还没有找到解决方案。

Answer 1

因为这被标记为可访问性，所以简单的答案就不是。

您可能不喜欢页面跳动，但您必须考虑更改滚动行为的相反副作用。

如果部分用户被视并且将页面上的缩放比例设置为300％，该怎么办。当缩放级别如此之高时，诸如链接之类的易选项可能会在屏幕外许多像素处，不得不等待它滚动到视图中才会令人沮丧。

此外，对于WCAG 2.1（我认为适用于AA级）准则，您应该避免使用任何形式的动画，或者可以选择关闭动画，您还需要进行一些设置才能删除此滚动，从而增加了很多额外的工作直接在您的网站内。这是因为某些认知障碍使动画比简单的跳跃更震撼和分散注意力，这也是预期的行为-更改预期的行为也会导致具有认知障碍的人迷失方向。

要考虑的另一件事是，您必须拦截Tab键-这是一个糟糕的主意，因为屏幕阅读器在不同情况下严重依赖于此键（在项目列表中分页显示下一个项目）在某些屏幕阅读器中，拦截Tab键会导致异常行为。）

不用担心，残疾且身体健全的用户将感谢您让Tab键保持良好的状态（因为我讨厌人们降低滚动速度）

如果您确实想执行此操作，则可以拦截Tab键的按键操作并手动循环到下一个Tabbable元素-但请不要这样做！

对于可访问性和WCAG 2.1，您还必须添加一个选项以在站点可访问性设置（如果有）中删除此功能。

Answer 2

平滑滚动是浏览器设置（chrome> about：flags，firefox> about：preferences，即> tools> options> advanced）。您可能可以通过编程方式更改浏览器的设置，但这似乎会阻止浏览器的安全风险。这是个人设置。有些用户喜欢它，有些则不喜欢。如果将它强加给不喜欢它的用户，那将不是很好。