Swe*_*lly 6 html accessibility
我有一个下载链接，但我找不到任何良好的可访问解决方案来说明如何处理这种情况。
我遵循一个共同的经验法则：“按钮做事，链接去地方”
我的情况是，我有一个触发文档下载的按钮（同一页面）
我认为这应该是一个具有按钮角色的锚点，因为它明确不会触发重定向或导航：
<a role="button" href="download.docx" download>Download File</a>
但是，强烈建议不要更改元素的本机语义。
我的同事建议这就是解决方案
<a href="download.docx" download>Download File</a>
但是：问题是屏幕阅读器（在我看来）没有提供足够干净的输出。它提到这个元素是一个链接，可能会与重定向混淆。
role="button" 解决方案告诉屏幕阅读器通知用户此链接的作用就像一个按钮，我认为这对于我们的“下载按钮”的特殊情况更具体。
任何清晰度将不胜感激。
超链接是正确且预期的行为。由于您的链接文本包含“下载”一词，因此不会造成混淆，您无需执行任何其他操作。
但是，如果可以的话，您还应该包含一些其他下载信息，例如文档类型和文件大小。
哦，请不要使用该title属性。
目前不鼓励依赖 title 属性，因为许多用户代理不按照本规范的要求以可访问的方式公开该属性（例如，需要诸如鼠标之类的指点设备来导致工具提示出现，这排除了仅使用键盘的用户以及仅限触摸的用户，例如拥有现代手机或平板电脑的任何人）。
来源：HTML 标准
首先，请不要将该title属性添加到您的下载链接中，它对于移动设备上的屏幕阅读器没有用，对于其他人在移动设备上的句号没有用，键盘用户看不到它等等。
相反，您应该（所有链接而不仅仅是这个特定链接）提供额外的信息。
应提供的附加文件信息是：
在下面的示例中，我假设新窗口只是一个示例，当您下载文档时，您不需要添加此信息，因为假设所有操作都在同一个窗口中执行，您只需在打开时添加此信息一个新窗口。
超链接在语义上是正确的，因此不必担心。
你的短语的一个细微变化（我喜欢并且顺便偷了！）应该是“按钮做事，链接指向 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); /* 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 个文档，并且它们的文本是“下载文档”，那么这对于屏幕阅读器用户来说将完全没有用处。
页面上的所有链接都应该有意义，没有任何周围信息支持它们。
| 归档时间： |
|
| 查看次数： |
2047 次 |
| 最近记录： |