时间戳

首页 > 解决方案 > 什么是更好的用户体验/可访问性：禁用按钮或与 .active 状态的链接？

html - 什么是更好的用户体验/可访问性：禁用按钮或与 .active 状态的链接？

问题描述

我有一个带有两个显示选项的新闻提要页面：“所有内容”和“个性化内容”。我需要一些按钮或链接让用户在这两个选项之间移动，这涉及页面重新加载和 url 参数（即 - /?personalized=true）。

由于它是页面重新加载，因此很明显应该将链接用于非当前活动状态。（例如 - 如果我在“全部”上，我应该使用一个链接来访问“个性化”）。

但是我应该为当前活动状态选项使用什么：<a.active>或<button disabled>？

我目前正在<button disabled>为活动状态使用一个，为另一个使用一个普通的旧链接，两者都样式为链接： 在此处输入图像描述

禁用按钮（上面带下划线）的好处是不可点击，这在我看来更好的用户体验，因为单击链接并被重定向到您当前所在的同一页面很烦人。并且省略href或任何其他技巧使链接不可点击似乎都是糟糕的标准。

但是让 abutton看起来像 alink一样糟糕吗？标准/可访问性对这一切有什么看法？

标签： htmlcssaccessibilitystandardsweb-standards

解决方案

由于页面重新加载被归类为导航（即使它是带有参数的同一页面），所以它应该是一个超链接。

现在至于禁用超链接以及与之相关的问题，为什么不根据您所在的页面更改元素呢？

如果您能够将其更改为与禁用按钮具有相同样式的段落，并添加一些视觉上隐藏的文本以显示“当前选定”。

<p>All Content<span class="visually-hidden">(Currently Selected)</span></p>

如果您不能更改元素类型，那么我会说，如果可以的话，让页面重新加载并且它不会影响事情，无论我们为解决这个问题所做的任何事情都可能不太容易访问。

如果它会影响重新加载页面的内容并且您无法从超链接更改项目，那么也许您可以使用e.preventDefault()然后添加“您已经在此页面上”的可访问通知。

您的最终选择是重新设计页面以不需要刷新，而是通过 AJAX 加载数据。那里有很多可访问性考虑因素，但至少<button>这些元素是有意义的，并且每个人的体验可能会更好。

粗略的例子，当前页面目前是“所有内容”。

唯一要添加到上述解释的是使用<ul>让屏幕阅读器用户知道有 2 个项目。

请注意： 我已按照您的示例，下划线表示活动，非下划线表示不活动。

实际上，您可能需要对此进行调整，以使“当前”指示器位于侧面而不是下方，以避免混淆，因为超链接通常是带下划线的链接。

一个小问题，但如果设计允许，只是需要考虑的事情。

li{
    display: inline-block;
    padding: 20px;
}

li p{
   text-decoration: underline;
}
li a{
   text-decoration: none;
}
.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 */
}
<ul>
    <li><p>All Content<span class="visually-hidden">(Currently Selected)</span></p></li>
    <li><a href="/?personalized=true">Personalised Content</a></li>
</ul>

推荐阅读