提问人：Lime 提问时间：2/13/2021 更新时间：2/13/2021 访问量：358
什么更好的用户体验/可访问性：禁用按钮或具有 .active 状态的链接？[关闭]
What's better UX/accessibility: disabled button or link with .active state? [closed]
问：
我有一个新闻提要页面，有两个显示选项：“所有内容”和“个性化内容”。我需要一些按钮或链接来让用户在这两个选项之间移动，这涉及页面重新加载和 url 参数（即 - ）。/?personalized=true
由于这是页面重新加载，因此似乎很清楚应该将链接用于当前未处于活动状态。（例如 - 如果我在“全部”上，我应该使用链接来访问“个性化”）。
但是，我应该为当前活动状态选项使用什么：<a.active> 或<按钮禁用>？
我目前使用 a 作为活动状态，将普通的旧链接用于另一个状态，两者都设置为链接：<button disabled>
禁用按钮（上面下划线）的好处是不可点击，这在我看来是更好的用户体验，因为单击链接并被重定向到您当前所在的同一页面很烦人。省略 href 或任何其他使链接无法点击的技巧似乎都是糟糕的标准。
但是造型看起来也一样糟糕吗？标准/可访问性对这一切有何看法？buttonlink
答：
1赞
GrahamTheDev
2/13/2021
#1
当页面重新加载时，它被归类为导航（即使它是带有参数的同一页面），因此它应该是一个超链接。
现在至于禁用超链接以及与之相关的问题，为什么不根据您所在的页面更改元素呢？
如果可以，只需将其更改为与禁用按钮具有相同样式的段落，并添加一些视觉上隐藏的文本以显示“当前选择”。
<p>All Content<span class="visually-hidden">(Currently Selected)</span></p>
如果您无法更改元素类型，那么我会说，如果可以的话，让页面重新加载，并且不会影响事情，无论我们采取什么措施来解决问题，都可能不太容易访问。
如果它会影响重新加载页面的内容，并且您无法从超链接更改项目，那么也许您可以使用，然后添加“您已经在此页面上”的可访问通知。e.preventDefault()
最后一个选项是重新设计页面，使其不需要刷新，而是通过 AJAX 加载数据。那里有很多可访问性的考虑因素，但至少这样元素才有意义，并且每个人的体验可能会更好。<button>
粗略地举个例子，当前页面目前是“所有内容”。
上面唯一要补充的是使用 a 让屏幕阅读器用户知道有 2 个项目。<ul>
请注意：我遵循了您的示例，下划线表示活动，非下划线表示非活动。
实际上，您可能希望对此进行调整，以便“当前”指示器位于侧面而不是下方，只是为了避免混淆，因为超链接通常是带下划线的。
一个小问题，但如果设计允许，只是要考虑的事情。
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>
评论