使用 <a> 还是 <a role="button"> 对于提高可访问性哪个更好?

4
我有一个下载链接,但是我找不到任何好的可访问解决方案来处理这种情况。
我有一个常规的经验法则: “按钮触发事件,链接导航跳转”。
我的情景是,我有一个按钮可以触发文档下载(在同一页中)。
我认为这应该是一个具有按钮角色的锚点,因为它明确地没有触发重定向或导航。
<a role="button" href="download.docx" download>Download File</a>

然而,强烈建议不要改变元素的本来语义。

我的同事建议这将是解决方案。

<a href="download.docx" download>Download File</a>

然而:这种方法的问题在于屏幕阅读器没有(在我看来)提供足够干净的输出。它会提到这个元素是一个链接,这可能会被误解为重定向。
role="button"的解决方案告诉屏幕阅读器通知用户,这个链接像一个按钮,我认为对于我们特定的“下载按钮”的情况更具体。
非常感谢任何澄清。
我参考了:https://css-tricks.com/building-good-download-button/
2个回答

5

简短回答

超链接是正确和预期的行为。由于您的链接文本包含单词“下载”,因此不会引起混淆,您无需采取其他任何措施。

但是,如果可能的话,您应该包括有关下载的其他信息,例如文档类型和文件大小。

哦,请不要使用 title 属性

目前不建议依赖title属性,因为许多用户代理程序无法按照规范要求以可访问的方式公开该属性(例如,需要指向设备(如鼠标)来导致工具提示出现,这将排除仅使用键盘或仅触摸屏的用户,如具有现代电话或平板电脑的任何人)。

来源:HTML 规范

详细回答

首先,请不要在下载链接中添加 title 属性,在移动屏幕阅读器上它是无用的,在移动设备上对所有其他人也是无用的,键盘用户也看不到它等等。

相反,您应该(对于所有链接而不仅仅是特定的链接)提供额外的信息。

应提供的附加文件信息包括:

  • 文件类型(“Word文档”或“docx”)
  • 文件大小(以KB为单位)
  • 可选 - 链接的行为方式(如果适用,则在新窗口中打开)。

在下面的示例中,我假设新窗口只是一个示例,因为您正在下载文档,所以无需添加此信息,因为假定所有操作都在同一个窗口中执行,只有在打开新窗口时才需要添加此信息。

快速提示:“按钮执行动作,链接指向地址”

超链接在语义上是正确的,所以不用担心。

对于您的短语稍微变化一下(我喜欢并且借用了这个短语!),应为“按钮执行动作,链接指向URL”。虽然不太简洁,但更有助于您做出决策。如果您可以在 URL 地址栏中输入它,那么它就是一个超链接,确保。

现在让我们进入您的选项...

“按钮”中提供完整的信息

如果您的设计和网站允许,建议向每个人提供附加的文件信息,而不仅仅是屏幕阅读器用户。

以下演示了可以这样做的一种方法:

a{
   display: block;
   height: 50px;
   width: 450px;
   font-size: 22px;
   padding: 10px;
   background-color: #333;
   border: 2px solid #666;
   border-radius: 4px;
   color: #fff;
   text-decoration: none;
   font-weight: bold;
   text-align: center;
}
a span{
    font-size: 16px;
    font-weight: normal;
    color: #ccc;
}
<a href="document.docx" download>Download Document<br/><span>Microsoft Word (docx), 246KB (Opens in New Window)</span></a>

一种更现实的做法

在现实世界中,你能够(或被允许)在按钮中显示所有信息的可能性非常渺茫,但即使你不能向每个人提供它,对于屏幕阅读器用户来说仍然很有用。

此时,您最好的选择是"可视隐藏文本"。

是的,aria-labelaria-labelledby等仍然不完全支持,遗憾地我们的目标是最大化可用性。

所以旧的可视隐藏文本适用于IE6及以后的版本,如果您的网站可以在那么久远的浏览器上使用,那将是一个奇迹(我知道我的网站不行!)

下面的示例使用了我的可视隐藏文本类,因为支持比sr-only和其他屏幕阅读器专用类更好,并且对未来几年都有保障(因为clip已被弃用)。

.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 */
}
 a{
       display: block;
       height: 28px;
       width: 450px;
       font-size: 22px;
       padding: 10px;
       background-color: #333;
       border: 2px solid #666;
       border-radius: 4px;
       color: #fff;
       text-decoration: none;
       font-weight: bold;
       text-align: center;
    }
<a href="document.docx" download>Download Document<span class="visually-hidden">Microsoft Word (docx), 246KB (Opens in New Window)</span></a>

aria-describedby - 一种混合方法

如果不能使用第一种选项,则可以采用混合方法。

我们使按钮很明显,但在下面添加文件大小等信息。

为此,我们使用aria-describedby指向下面段落的ID。

唯一不足的是有些浏览器/屏幕阅读器组合可能不支持它,但嘿,生活就是要做出妥协,而且下面的代码很干净,您更有可能将其实现到按钮本身的所有信息中。

    a{
       display: block;
       height: 28px;
       width: 450px;
       font-size: 22px;
       padding: 10px;
       background-color: #333;
       border: 2px solid #666;
       border-radius: 4px;
       color: #fff;
       text-decoration: none;
       font-weight: bold;
       text-align: center;
    }
    p{
        margin-top: 10px;
        font-size: 16px;
        font-weight: normal;
        color: #444;
    }
    <a href="document.docx" download aria-describedby="doc-info">Download Document</a>
    <p id="doc-info">Microsoft Word (docx), 246KB (Opens in New Window)</p>

我的链接文本应该是什么?

你当前的链接文本可能只是一个示例,但它应该是有描述性的。

如果文档是关于奶酪强度的,则应为“下载奶酪强度报告”。

如果标题过于复杂,则再次使用视觉隐藏文本,以便给您的链接命名更具描述性。这是因为屏幕阅读器用户不总是按线性方式导航。他们可能决定循环浏览页面上的所有链接、标题、部分等。

出于这个原因,如果您在页面上有3份文档,它们的文本是“下载文档”,那么对于屏幕阅读器用户来说,这将是完全没有用处的。

页面上的所有链接都应该在没有任何支持信息的情况下有意义。


3

更新

根据W3C的建议,title可能会伤害/困惑屏幕阅读器,所以提高可访问性最好的方法是制作与内容相关且描述清晰的锚文本

有关更多信息,请参见此处


旧方案(不要使用)

您始终可以使用title属性(带有与文本不同的副本),例如:

<a href="download.docx" download title="Click here to download the file">Download File</a>

下面是一个比较:

SS

更多信息请查看此处


有点儿……我喜欢“title”属性,我会添加它,但屏幕阅读器仍然会说“链接,下载”,而如果使用角色,它会显示“下载按钮”,这样更符合其实际功能。或者这不是必要的吗? - Sweet Chilly Philly
1
我会说这是不必要的,因为它将通过a11y测试。 - dippas
1
@SweetChillyPhilly 我已经更新了答案并添加了更多信息。 - dippas
非常感谢,非常有帮助。我已经更新了内部文档以反映需要使用 aria-label 来描述操作,然后还包括“title”,但这比 aria-label 的优先级要低。 - Sweet Chilly Philly
2
+1 意味着我赞同你更新回答以反映不再推荐使用“title”属性。双端队列链接是我不知何故没有遇到过的,所以谢谢你! - GrahamTheDevRel

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接