简短回答
超链接是正确和预期的行为。由于您的链接文本包含单词“下载”,因此不会引起混淆,您无需采取其他任何措施。
但是,如果可能的话,您应该包括有关下载的其他信息,例如文档类型和文件大小。
哦,请不要使用 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-label
,aria-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);
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
white-space: nowrap;
}
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份文档,它们的文本是“下载文档”,那么对于屏幕阅读器用户来说,这将是完全没有用处的。
页面上的所有链接都应该在没有任何支持信息的情况下有意义。