更好的做法是使用< a>或<角色="按钮>可访问性? [英] What is better practice use <a> or <a role="button"> for accessibility?
问题描述
我有一个下载链接，但我找不到如何处理这种情况的任何简便易用的解决方案.
I have a download link, and I can't find any good accessible solutions for how I should handle this situation.
我遵循一条通用的经验法则:按钮做事，链接去处"
I have a common rule of thumb I'm following: "Buttons Do Things, Links Go Places"
我的情况是我有一个触发文档下载的按钮(同一页面)
我认为这应该是具有按钮作用的锚点，因为它明确不会触发重定向或导航:
I believe that this should be an anchor with a role of a button because its explicitly not triggering a redirect or navigation:
<a role="button" href="download.docx" download>Download File</a>
但是，强烈建议不要更改元素的本机语义.
However, its strongly recommended to not change the native semantics of an element.
我的同事建议这是解决方案
My colleague suggests this would be the solution
<a href="download.docx" download>Download File</a>
但是:问题是屏幕阅读器(我认为)无法提供足够干净的输出.它提到此元素是一个链接，可以将其与重定向混淆.
However: the issue with this is that the Screen reader doesn't (in my opinion) give a clean enough output. It mentions this element is a link, which could be confused with a redirect.
角色=按钮"；解决方案告诉屏幕阅读器通知用户该链接的行为就像一个按钮，我认为这对于我们下载按钮"的特定情况更为具体.
The role="button" solution tells the screen reader to inform the user that this link is acting like a button which I think is more specific for our particular case of the "download button".
任何清晰度都将不胜感激.
Any clarity would be greatly appreciated.
我引用的是: https://css-tricks.com/building-good-download-button/
推荐答案
简短回答
超链接是正确的和预期的行为.当您的链接文本中包含单词"download"时，不会有任何混乱，您无需执行其他任何操作.
Short Answer
A hyperlink is correct and expected behaviour. As your link text contains the word "download" there will be no confusion, you do not need to do anything else.
但是，如果可以的话，您还应该包括其他一些下载信息，例如文档类型和文件大小.
However there are additional pieces of information for downloads that you should include if you are able such as document type and file size.
哦，请请勿使用 title 属性.
当前不鼓励使用标题，因为许多用户代理并未按照本规范的要求以可访问的方式公开该属性(例如，要求使用诸如鼠标之类的指示设备来引起该问题.出现工具提示，其中不包括仅键盘用户和仅触摸用户(例如拥有现代手机或平板电脑的任何人).
Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).
来源: HTML标准
首先，请不要在您的下载链接中添加 title 属性，此属性对移动设备上的屏幕阅读器无用，对其他所有人而言，对移动设备来说是无用的句号，键盘用户看不到它等.
Firstly, please do not add the title attribute to your download link, it is useless for screen readers on mobile, it is useless full stop on mobile for everyone else, keyboard users do not see it etc. etc.
相反，您应该(使用所有链接，而不仅仅是该特定链接)提供额外的信息.
Instead you should (with all links not just this particular link) provide extra information.
应提供的其他文件信息是:
The additional file information that should be provided is:
- 文件类型("Word文档"或"docx")
- 文件大小(以KB为单位)
- 可选-链接的行为方式(如果适用，则为新窗口).
在下面的示例中，我仅以新窗口为例，在下载文档时，您无需添加此信息，因为假定所有操作都在同一窗口中执行，而您只需要在打开新窗口时添加此代码.
超链接在语义上是正确的，因此不必担心.
A hyperlink is correct semantically so don't worry about that.
您的词组(我喜欢并正在窃取！)稍有变化，应为按钮做事，指向URL的链接".不完全是精髓".但更好地帮助您做出决策.如果您可以在URL栏中键入它，那么可以保证它是超链接.
A slight variation to your phrase (which I like and am stealing by the way!) should be "Buttons Do Things, Links point to URLs". Not quite as "pithy" but better for helping you make decisions. If you can type it into the URL bar then it is a hyperlink, guaranteed.
现在进入您的选项...
Now onto your options...
现在，如果您的设计和网站允许的话，建议向所有人(不仅仅是屏幕阅读器用户)提供其他文件信息.
Now if your design and site allows it is recommended to provide the additional file information to everybody not just screen reader users.
以下小提琴显示了您可以执行此操作的一种方式
The following fiddle shows one way you could do this
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>现在，在现实世界中，您能够(或允许)在按钮中显示所有信息的几率很小，但是即使您无法向所有人提供该信息，它对屏幕阅读器用户还是有用的.
Now in the real world the odds of you being able (or allowed) to show all that information in the button is very slim, but it is still useful to screen reader users even if you can't provide it to everybody.
这时，您最好的选择是视觉上隐藏的文字".
At this point your best option is "visually hidden text".
是的， aria-label ， aria-labelledby 等仍可悲地没有得到全面支持，我们的目标是最大程度地提高可用性.
Yup, aria-label, aria-labelledby etc still don't have full support sadly and our aim is maximum usability.
那么好的旧的视觉隐藏文本可以一直使用到IE6，如果您的网站可以追溯到IE6远，那将是一个奇迹(我知道我不会！)
So good old visually hidden text works all the way back to IE6, if your site works that far back it would be a miracle anyway (I know mine don't!)
下面的示例使用我的视觉隐藏文本类，因为它的支持优于 sr-only 和其他屏幕阅读器仅可用于此类，并且在未来几年内会过时(因为已弃用 clip ).
The below example uses my visually hidden text class, as support is better than sr-only and other screen reader only classes and it is futureproofed for the next few years (as clip has been deprecated).
.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>如果您不能使用第一个选项，那么我们可以使用混合方法.
If you can't use the first option then we could fall back to a hybrid approach.
我们使按钮漂亮醒目，但在下面添加文件大小信息等.
We make the button nice and prominent, but underneath add the file size info etc.
为此，我们使用aria- describeby 指向以下段落的ID.
For this we use aria-describedby which points to the ID of the paragraph below.
唯一不利的一面是，一些浏览器/屏幕阅读器组合可能不支持它，但是，生命是折中的，下面的内容是干净的，比按钮本身中的所有信息，您更有可能实现它
THe only down side is a few browser / screen reader combinations may not support it but hey, life is about compromise and the below is clean and you are more likely to be able to implement it than all the information in the button itself.
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>您当前的链接文本可能只是一个示例，但应具有描述性.
Your current link text may just be an example, but it should be descriptive.
如果文档涉及奶酪强度，则应为下载奶酪强度报告".
If the document is about cheese strengths it should be "Download Cheese Strength Report".
如果标题很复杂，那么请再次使用视觉上隐藏的文本为链接指定一个更具描述性的名称.这是因为屏幕阅读器用户并不总是以线性方式导航.他们可能决定循环浏览页面，标题或部分等上的所有链接.
If the title is complex then yet again use visually hidden text to give a more descriptive name to your link. This is because screen reader users do not always navigate in a linear fashion. They may decide to loop through all the links on a page, or headings, or sections etc.
出于这个原因，如果您在一个页面上有3个文档，并且其文本为下载文档"，这对于屏幕阅读器用户完全没有用.
For this reason if you had 3 documents on a page and their text was "Download Document" this would be completely useless to a screen reader user.
页面上的所有链接都应该有意义，没有任何周围的信息来支持它们.
这篇关于更好的做法是使用< a>或<角色="按钮>可访问性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
