什么是更好的 UX/可访问性：禁用按钮或具有 .active 状态的链接？

编程问答 2022-05-25

问题描述

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

this other approach。 （例如 - 如果我在“全部”，我应该使用链接进入“个性化”）。

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

我目前使用 <button disabled> 表示活动状态，使用普通旧链接表示另一种状态，两者的样式都为链接： Since it's a page reload,it seems clear that a link should be used for the not-currently active state

禁用按钮（上面有下划线）的优点是不可点击，这在我看来是更好的用户体验，因为点击链接并被重定向到您当前所在的同一页面很烦人。还有

enter image description here

。

但是将 button 样式化为看起来像 link 一样糟糕吗？标准/可访问性对这一切有何看法？

解决方法

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

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

如果您可以将其更改为与禁用按钮具有相同样式的段落，并添加 some visually hidden text 以表示“当前选择”。

<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); /*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>

accessibilityaccessibilityhtmlweb-standards