可访问性:仅使用javascript链接并带有href =“#" [英] Accessibility: Using javascript only links with href="#"

问题描述

我有一个React SPA，其中有一些链接可以导航到其他页面或同一页面上的其他位置.这些导航是通过编程方式确定的，或者取决于javascript才能到达同一页面上的其他位置.

I have a react SPA in which I have some links which navigate to other pages or other locations on the same page, These navigations are either decided programmatically or are dependent on javascript to go to another location on the same page.

• 当显示链接时，我可能不知道链接 href ，所以我用 href =#" 和 event.preventDefault()，然后运行逻辑来确定链接应导航到的位置.
• 在锚定链接的情况下，我需要用JavaScript滚动到该元素，因为使用SPA路由器，基于散列的锚定链接可能无法工作，因为该锚定元素可能尚不可用，并且我还需要平滑滚动.(在这种情况下，我可能仍然可以指定href，它可以保持链接的可访问性，但可以使用javascript处理滚动)

• I might not know the link href when the link is displayed, so I render it with href="#" and event.preventDefault() in the click handler, after which I run the logic to decide where the link should navigate to.
• In case of anchor links, I need javascript to scroll to the element, because with SPA routers hash based anchor links might not work as the anchored element might not be available yet, and also i need smooth scroll. (In this case, I can probably still specify the href, which keeps the link accessible, but use javascript to handle the scrolling)

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

To me, semantically it still should be a link and not a button as it navigates the user to another page or another location on the same page. But, thinking about accessibility, the screen reader doesn't have enough information to understand the link destination and can't announce it to the user. I suppose that is not alright ?

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

How do I make sure that the usage is semantic as well as accessible? Should I be using a button instead? Or should I be adding some other information to the link with aria-label ? Or is it actually ok for accessibility to have links with href="#" ?

推荐答案

简短回答

如果URL更改(导航)的其他所有内容都应使用链接，则应使用按钮.< a href =#" 不是一个好习惯，但是对于SPA，如果您的链接文本准确且详细，则应该可以.避免平滑滚动或使人们将其关闭，因为它可能会迷失方向.

Short Answer

Links should be used if the URL changes (navigation) for everything else a button should be used. <a href="#" is not a good practice but for a SPA it should be OK if your link text is accurate and detailed. Avoid smooth scroll or give people a way to switch it off as it can be disorientating.

我给了关于< a>的广泛答案; 与中的< button> ，所以我希望这足以回答在一般情况下的哪种情况下使用哪种方案.

I gave quite an extensive answer on <a> vs <button> in SPAs here, so I hope that is sufficient to answer which one to use in what scenario for general use cases.

关于URL中的#，因为您事先不知道该URL.如果URL未知，将其以#开头会更好，但是一旦知道您要将人路由到何处，然后更新 href .

With regards to the # in the URL due to you not knowing the URL before hand. It would be much better if you start it as # if the URL is unknown but then update the href once you know where you are going to route people.

这是出于我已链接关于保证，即知道链接将带我到何处.

This is for the reasons discussed in the answer I linked regarding reassurance, i.e. knowing where a link will take me.

很明显，如果您不能执行此操作，请确保链接文本具有很好的描述性，以便使我确信我将转到正确的位置.

Obviously if you are not able to do this then make sure the link text is very descriptive so that I can be confident I am going to the right place.

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

With regards to the scrolling to different parts of the page that would still be a link as you say, assuming that you update the url with #section-name. You should do this, but if your application router cannot handle URL fragments then I would not update the URL at all and change this to a button.

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

At this stage I would use some visually hidden text within the button to explain that this scrolls to a section on the current page.

以下示例对此进行了说明.请使用下面的CSS类以可视方式隐藏文本，因为它具有

The example below illustrates this. Please use the CSS class below to visually hide text as it has better compatibility than bootstrap sr-only class as explained in this answer I gave.

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

最后，我会提醒您使用平滑滚动.如果使用此功能，请确保有一种方法可以将其关闭，因为它可能会使运动障碍或焦虑症的人分心或迷失方向.

Finally I would caution you on the use of smooth scrolling. If you use this make sure there is a way to switch it off as it may be distracting or disorientating for people with either motion disorders or anxiety disorders.

执行此操作的一种方法是使用CSS媒体查询 喜欢降低动作 .

One way you can do this is to use the CSS media query prefers-reduced-motion.

如果看不到每种情况，很难给出100％的明确答案，如果您可以尝试遵循相同页面操作的按钮的标准导航模式，带有url片段的链接以导航至同一页面的各个部分以及指向其他页面的链接页面，即使这些页面是通过AJAX处理的，也只有部分重新加载.

Without seeing each scenario it is hard to give a 100% definitive answer, if you can try and follow standard navigation patterns of buttons for same page actions, links with url fragments for navigating to sections of the same page and links to other pages, even if these are handled via AJAX and only partial reloads.

显然，这是目标，我知道，使用某些路由解决方案并不总是可能的，在这种情况下，请使用最佳判断并使用屏幕阅读器进行测试，因为屏幕阅读器用户最有可能会遭受SPA中导航系统的不良影响.

Obviously that is the aim, I am aware that with some routing solutions this is not always possible in which case use your best judgement and test it with a screen reader as screen reader users are most likely to suffer from a poorly formed navigation system in a SPA.

最后一个提示-如果您要在SPA中更改页面，请使用 tabindex ="将下一页上的< h1> 设置为可编程聚焦.-1" 并关注页面加载后的情况.这是一种让几乎没有视力的用户知道使用AJAX在SPA中完成导航的好方法.

One last tip - if you do change page in a SPA, make the <h1> on the next page programatically focusable with tabindex="-1" and focus that once the page loads. It is a great way to let users with little to no vision know that navigation is complete in a SPA using AJAX.

这篇关于可访问性:仅使用javascript链接并带有href =“#"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！