使用 'tab' 键导航时平滑滚动

Smooth Scrolling while navigating with 'tab' key

如何强制浏览器在使用 'tab' 键导航时将页面平滑地滚动到焦点元素?
注意:我已经查过了,但还没有找到解决方案。

平滑滚动是一项浏览器设置(chrome > about:flags,firefox > about:preferences,即 > 工具>选项>高级)。您也许能够以编程方式更改浏览器的设置,但这似乎是浏览器会阻止的安全风险。这是个人设置。有些用户喜欢它,有些则不喜欢。如果你把它强加给不喜欢它的用户,那就不好了。

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

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

如果您的用户有部分视力并且在您的页面上将缩放设置为 300% 怎​​么办?当缩放级别如此之高时,诸如 link 之类的表格项目可能会离开屏幕很多像素,不得不等待它滚动到视图中只会令人沮丧。

此外,对于 WCAG 2.1(我认为适用于 AA 级)指南,您应该避免任何类型的动画,或者让用户可以选择将其关闭,您正在添加大量额外的工作来需要删除设置这直接在您的网站内滚动。这是因为某些认知障碍使动画比简单的跳跃更加刺耳和分散注意力,这也是预期行为 - 改变预期行为也会导致有认知障碍的人迷失方向。

另一件需要考虑的事情是,要实现这一点,您必须截取 Tab 键 - 这是一个糟糕的想法,因为屏幕阅读器在不同的场景中严重依赖此键(在项目列表中使用 Tab 键向下到在某些屏幕阅读器中的下一项,拦截 Tab 键会导致意外行为。)

别担心,残障和健全的用户会感谢您单独使用 Tab 键(因为我讨厌人们放慢我的滚动速度)

如果您确实想这样做,您将拦截 Tab 键的按键并手动循环到下一个可标记元素 - 但请不要这样做!!

您还需要(为了辅助功能和 WCAG 2.1)然后在网站辅助功能设置(如果有的话)中添加一个选项来删除此功能。