我有一个React SPA，其中有一些链接可以导航到其他页面或同一页面上的其他位置，这些导航是通过编程方式确定的，或者取决于javascript才能到达同一页面上的另一个位置。
href显示的链接时，所以我使其href="#"与event.preventDefault()单击处理程序，在这之后我跑决定在哪里的链接应该导航到的逻辑。对我来说，从语义上讲，它仍应是一个链接，而不是按钮，因为它将用户导航到另一个页面或同一页面上的另一个位置。但是，考虑到可访问性，屏幕阅读器没有足够的信息来理解链接目的地，也无法向用户宣布该链接目的地。我想那还好吗？
如何确保用法是语义上的以及可访问的？我应该改用按钮吗？还是应该在带有aria-label的链接中添加其他信息？还是实际上可以使用href =“＃”链接进行辅助功能？
如果URL更改（导航），则应使用链接来链接其他所有按钮。<a href="#"这不是一个好习惯，但对于SPA，如果您的链接文本准确且详细，则应该可以。避免平滑滚动或使人们将其关闭，因为它可能会迷失方向。
我在这里对SPA中的vs给出了相当广泛的答案<a><button>，因此我希望这足以回答在一般用例的哪种情况下使用哪种方案。
关于#URL中的，因为您事先不知道URL。如果您#以URL未知的方式启动它，那就更好了，但是href一旦知道您要把人路由到哪里，就更新它。
这是出于我链接的关于保证的答案中讨论的原因，即知道链接将带我到何处。
显然，如果您无法执行此操作，则请确保链接文本具有很好的描述性，以便使我确信自己将到达正确的位置。
关于滚动到页面的不同部分，假设您使用来更新url，那么仍然是您所说的链接#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中完成导航的一种好方法。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句