简答
如果 URL 发生变化(导航),则应使用链接,而其他所有内容均应使用按钮。<a href="#"
这不是一个好的做法,但对于 SPA 来说,如果您的链接文本准确且详细,应该没问题。避免平滑滚动或给人们一种关闭它的方法,因为它可能会让人迷失方向。
更长的答案
我给了相当广泛的答案<a> vs <button>在这里的 SPA 中 https://stackoverflow.com/questions/61395925/anchor-or-button-in-react-spa/61441207#61441207,所以我希望这足以回答一般用例在什么场景中使用哪一个。
关于#
由于您事先不知道 URL,因此在 URL 中。如果你开始它会更好#
如果 URL 未知,但更新href
一旦你知道要将人们引导到哪里。
这是由于在我链接的答案 https://stackoverflow.com/questions/61395925/anchor-or-button-in-react-spa/61441207#61441207关于保证,即知道链接会将我带到哪里。
显然,如果您无法做到这一点,请确保链接文本具有很强的描述性,以便我可以确信我会去正确的地方。
在 SPA 内滚动
关于滚动到页面的不同部分,正如您所说,它仍然是一个链接,假设您使用以下内容更新了网址#section-name
. 你应该做这个,但如果您的应用程序路由器无法处理 URL 片段,那么我根本不会更新 URL 并将其更改为按钮。
在此阶段,我将在按钮内使用一些视觉上隐藏的文本来解释它滚动到当前页面上的某个部分。
下面的例子说明了这一点。请使用下面的 CSS 类在视觉上隐藏文本因为它有比 Bootstrap sr-only 类更好的兼容性,如我给出的这个答案中所述 https://stackoverflow.com/questions/62107074/how-to-hide-a-text-and-make-it-accessible-by-screen-reader/62109988#62109988.
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<button><span class="visually-hidden">Go To </span>Section name<span class="visually-hidden"> on this page</span></button>
关于平滑滚动的快速说明
最后我要提醒您注意平滑滚动的使用。如果您使用此功能,请确保有办法将其关闭,因为它可能会分散患有运动障碍或焦虑症的人的注意力或迷失方向。
实现此目的的一种方法是使用 CSS 媒体查询prefers-reduced-motion https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion.
最后的想法
在没有看到每个场景的情况下,很难给出 100% 明确的答案,如果您可以尝试并遵循用于同一页面操作的按钮的标准导航模式、用于导航到同一页面的部分的带有 url 片段的链接以及到其他页面的链接,甚至如果这些是通过 AJAX 处理并且仅部分重新加载。
显然这就是目标,我知道对于某些路由解决方案来说,这并不总是可能的,在这种情况下,请使用您的最佳判断和使用屏幕阅读器进行测试因为屏幕阅读器用户最有可能遭受 SPA 中导航系统结构不良的困扰。
最后一点提示- 如果您确实更改了 SPA 中的页面,请制作<h1>
在下一页上可以通过编程方式聚焦tabindex="-1"
并在页面加载后聚焦。这是一种很好的方法,可以让弱视或无视的用户知道 SPA 中的导航是使用 AJAX 完成的。