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

IT技术 javascript html reactjs hyperlink accessibility
2021-05-11 02:34:33

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

  • 我可能不知道的链接href显示的链接时,所以我使其href="#"event.preventDefault()单击处理程序,在这之后我跑决定在哪里的链接应该导航到的逻辑。
  • 在锚链接的情况下,我需要 javascript 滚动到元素,因为使用 SPA 路由器基于哈希的锚链接可能无法工作,因为锚定元素可能尚不可用,而且我还需要平滑滚动。(在这种情况下,我可能仍然可以指定 href 以保持链接可访问,但使用 javascript 来处理滚动)

对我来说,在语义上它仍然应该是一个链接而不是一个按钮,因为它将用户导航到另一个页面或同一页面上的另一个位置。但是,考虑到可访问性,屏幕阅读器没有足够的信息来了解链接目的地,也无法将其通知给用户。我想那不行吗?

我如何确保用法既是语义又是可访问的?我应该使用按钮吗?或者我应该在带有 aria-label 的链接中添加一些其他信息?或者,可访问性实际上可以与 href="#" 建立链接吗?

1个回答

简答

如果 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% 明确的答案,如果您可以尝试遵循相同页面操作的按钮的标准导航模式,带有用于导航到同一页面部分的链接和其他页面的链接的链接,甚至如果这些是通过 AJAX 处理的并且仅部分重新加载。

显然这是目标,我知道对于某些路由解决方案,这并不总是可行的,在这种情况下,请使用您的最佳判断并使用屏幕阅读器对其进行测试,因为屏幕阅读器用户最有可能在温泉。

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