时间戳

首页 > 解决方案 > 可访问性：仅使用带有 href="#" 的 javascript 链接

javascript - 可访问性：仅使用带有 href="#" 的 javascript 链接

问题描述

我有一个 react SPA，其中有一些链接可以导航到同一页面上的其他页面或其他位置，这些导航要么以编程方式确定，要么依赖于 javascript 以转到同一页面上的另一个位置。

对我来说，在语义上它仍然应该是一个链接而不是一个按钮，因为它将用户导航到另一个页面或同一页面上的另一个位置。但是，考虑到可访问性，屏幕阅读器没有足够的信息来理解链接目标，也无法向用户宣布它。我想这不好吗？

我如何确保使用是语义的以及可访问的？我应该改用按钮吗？或者我应该在带有 aria-label 的链接中添加一些其他信息？或者，可访问性实际上可以使用 href="#" 链接吗？

标签： javascripthtmlreactjshyperlinkaccessibility

解决方案

简答

如果 URL 发生变化（导航），则应使用链接，否则应使用按钮。<a href="#"这不是一个好的做法，但对于 SPA，如果您的链接文本准确且详细，则应该没问题。避免平滑滚动或给人们一种关闭它的方法，因为它可能会让人迷失方向。

更长的答案

我在这里对 SPA中的vs给出了相当广泛的答案<a><button>，所以我希望这足以回答在一般用例的什么场景中使用哪一个。

关于#由于您事先不知道 URL 而导致的 URL 中的。#如果您以 URL 未知的方式开始它会更好，但是href一旦您知道要将人们路由到哪里就更新它。

这是因为在我链接的关于安心的答案中讨论的原因，即知道链接将带我去哪里。

显然，如果您无法做到这一点，请确保链接文本非常具有描述性，这样我就可以确信我会去正确的地方。

在 SPA 中滚动

关于滚动到页面的不同部分，这仍然是您所说的链接，假设您使用#section-name. 您应该这样做，但如果您的应用程序路由器无法处理 URL 片段，那么我根本不会更新 URL 并将其更改为按钮。

在这个阶段，我会在按钮中使用一些视觉上隐藏的文本来解释它滚动到当前页面上的一个部分。

下面的例子说明了这一点。请使用下面的 CSS 类在视觉上隐藏文本，因为它比 bootstrap sr-only 类具有更好的兼容性，如我给出的这个答案中所述。

.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。

最后的想法

如果没有看到每种情况，很难给出 100% 明确的答案，如果您可以尝试遵循标准的按钮导航模式来执行同一页面操作、带有 url 片段的链接用于导航到同一页面的各个部分以及链接到其他页面，甚至如果这些是通过 AJAX 处理的并且只有部分重新加载。

显然这是目标，我知道对于某些路由解决方案，这并不总是可能的，在这种情况下，请使用您的最佳判断并使用屏幕阅读器对其进行测试，因为屏幕阅读器用户最有可能遭受格式不正确的导航系统的困扰温泉。

最后一个提示- 如果您确实在 SPA 中更改页面，请<h1>在下一页上以编程方式聚焦tabindex="-1"并在页面加载后聚焦。这是让几乎没有远见的用户知道导航在使用 AJAX 的 SPA 中完成的好方法。

推荐阅读