辅助功能：使用 javascript 仅链接 href="#"
Accessibility: Using javascript only links with href="#"
我有一个 React SPA，其中有一些 link 导航到其他页面或同一页面上的其他位置，这些导航要么以编程方式决定，要么依赖于 javascript转到同一页面上的另一个位置。
- 当显示 link 时，我可能不知道 link
href，所以我在点击处理程序中使用 href="#" 和 event.preventDefault() 渲染它，之后我 运行 决定 link 应该导航到哪里的逻辑。
- 如果是锚 links，我需要 javascript 滚动到该元素，因为对于 SPA 路由器，基于哈希的锚 links 可能无法正常工作，因为锚定元素可能尚不可用，我也需要平滑滚动。 （在这种情况下，我可能仍然可以指定 href，它使 link 可访问，但使用 javascript 来处理滚动）
对我来说，在语义上它仍然应该是一个 link 而不是一个按钮，因为它将用户导航到另一个页面或同一页面上的另一个位置。但是，考虑到可访问性，屏幕 reader 没有足够的信息来理解 link 目的地，因此无法向用户宣布。我想这样不行吗？
如何确保使用是语义化的且可访问的？
我应该改用按钮吗？
或者我应该用 aria-label 向 link 添加一些其他信息吗？
还是让 link 带有 href="#" 的可访问性真的可以吗？
简答
如果 URL 更改（导航）其他一切都应使用按钮，则应使用链接。 <a href="#" 不是一个好的做法，但对于 SPA，如果您的 link 文本准确且详细，应该没问题。避免平滑滚动或给人们一种关闭它的方法，因为它可能会让人迷失方向。
更长的答案
我给出了一个 ，所以我希望这足以回答一般用例在什么场景下使用哪个。
关于 URL 中的 # 因为你事先不知道 URL。如果 # 如果 URL 是未知的，那么如果你开始它会更好，但是一旦你知道你要去哪里路由人们然后更新 href。
这是出于 中讨论的有关保证的原因，即知道 link 会带我去哪里。
显然，如果您无法做到这一点，请确保 link 文本具有很好的描述性，这样我就可以确信我去对了地方。
在 SPA 内滚动
关于滚动到页面的不同部分仍然是您所说的 link，假设您将 url 更新为 #section-name。 你应该这样做，但如果你的应用程序路由器无法处理 URL 片段，那么我根本不会更新 URL 并将其更改为按钮。
在这个阶段，我会在按钮中使用一些视觉上隐藏的文本来解释它会滚动到当前页面的某个部分。
下面的例子说明了这一点。 请使用下面的 CSS class 视觉隐藏文本 因为它有 .
.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% 明确的答案，如果您可以尝试并遵循标准的按钮导航模式进行相同的页面操作，links 和 url 片段导航到同一页面的部分和 link 到其他页面，即使这些是通过 AJAX 处理的并且只是部分重新加载。
显然这是目标，我知道对于某些路由解决方案，这并不总是可能的，在这种情况下，请使用您的最佳判断并使用屏幕进行测试reader as screen reader 用户最有可能遭受 SPA 中结构不佳的导航系统的困扰。
最后一个提示 - 如果您确实在 SPA 中更改页面，请使用 tabindex="-1" 以编程方式使下一页上的 <h1> 可聚焦，并将其聚焦一旦页面加载。这是让几乎没有视力的用户知道使用 AJAX.
在 SPA 中完成导航的好方法
我有一个 React SPA，其中有一些 link 导航到其他页面或同一页面上的其他位置，这些导航要么以编程方式决定，要么依赖于 javascript转到同一页面上的另一个位置。
- 当显示 link 时，我可能不知道 link
href，所以我在点击处理程序中使用href="#"和event.preventDefault()渲染它，之后我 运行 决定 link 应该导航到哪里的逻辑。 - 如果是锚 links，我需要 javascript 滚动到该元素，因为对于 SPA 路由器，基于哈希的锚 links 可能无法正常工作，因为锚定元素可能尚不可用，我也需要平滑滚动。 （在这种情况下，我可能仍然可以指定 href，它使 link 可访问，但使用 javascript 来处理滚动）
对我来说，在语义上它仍然应该是一个 link 而不是一个按钮，因为它将用户导航到另一个页面或同一页面上的另一个位置。但是，考虑到可访问性，屏幕 reader 没有足够的信息来理解 link 目的地，因此无法向用户宣布。我想这样不行吗？
如何确保使用是语义化的且可访问的？ 我应该改用按钮吗？ 或者我应该用 aria-label 向 link 添加一些其他信息吗？ 还是让 link 带有 href="#" 的可访问性真的可以吗？
简答
如果 URL 更改（导航）其他一切都应使用按钮，则应使用链接。 <a href="#" 不是一个好的做法，但对于 SPA，如果您的 link 文本准确且详细，应该没问题。避免平滑滚动或给人们一种关闭它的方法，因为它可能会让人迷失方向。
更长的答案
我给出了一个
关于 URL 中的 # 因为你事先不知道 URL。如果 # 如果 URL 是未知的，那么如果你开始它会更好，但是一旦你知道你要去哪里路由人们然后更新 href。
这是出于
显然，如果您无法做到这一点，请确保 link 文本具有很好的描述性，这样我就可以确信我去对了地方。
在 SPA 内滚动
关于滚动到页面的不同部分仍然是您所说的 link，假设您将 url 更新为 #section-name。 你应该这样做，但如果你的应用程序路由器无法处理 URL 片段，那么我根本不会更新 URL 并将其更改为按钮。
在这个阶段，我会在按钮中使用一些视觉上隐藏的文本来解释它会滚动到当前页面的某个部分。
下面的例子说明了这一点。 请使用下面的 CSS class 视觉隐藏文本 因为它有
.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% 明确的答案，如果您可以尝试并遵循标准的按钮导航模式进行相同的页面操作，links 和 url 片段导航到同一页面的部分和 link 到其他页面，即使这些是通过 AJAX 处理的并且只是部分重新加载。
显然这是目标，我知道对于某些路由解决方案，这并不总是可能的，在这种情况下，请使用您的最佳判断并使用屏幕进行测试reader as screen reader 用户最有可能遭受 SPA 中结构不佳的导航系统的困扰。
最后一个提示 - 如果您确实在 SPA 中更改页面，请使用 tabindex="-1" 以编程方式使下一页上的 <h1> 可聚焦，并将其聚焦一旦页面加载。这是让几乎没有视力的用户知道使用 AJAX.