如何标记符合WCAG 2.0的按钮？ [英] How to mark-up a button for WCAG 2.0 Compliance?
问题描述
在争取WCAG 2.0合规性的过程中，我发现了很多有关正确处理按钮的信息，尤其是考虑到按钮可访问和合规性所需的信息。
In striving for WCAG 2.0 Compliance, I'm finding quite a bit of varied information regarding proper treatment of buttons, specifically what is required to consider the button accessible and compliant.
标记< button> 的适当方法是什么？他们需要具有什么属性或组合？
What is the appropriate way to mark-up a <button>? What attributes or combination do they need to have?
我的按钮分为三类：
- 具有描述文字的按钮他们打算采取的行动。 （例如，了解详情以启动包含更多产品信息的模式）
- 按钮上的文字不能说明其操作。 （例如， X或标题为手风琴内容的一部分的文字）
- 按钮没有描述其预期动作或其他动作的文字。 （例如，用于切换轮播的上下文的图标/图像）
例如，在上面的以下3个简单示例中：< a href = http://codepen.io/ga-joe/pen/ggeLeW rel = nofollow noreferrer> http://codepen.io/ga-joe/pen/ggeLeW
For instance, in the following simple example of 3 above: http://codepen.io/ga-joe/pen/ggeLeW
为没有文本的按钮仅添加 aria-label 属性是否可以接受？是否总是需要名称和/或 value ？请发送帮助！谢谢！
Is it acceptable to add only an aria-label attribute for a button with no text? Are name and / or value always required? Please send help! Thank you!
这些似乎是相关的WCAG准则：
These seem to be the relevant WCAG Guidelines:
- https://www.w3.org/TR/WCAG20/#text-equiv-all
- https：/ /www.w3.org/TR/WCAG20/#navigation-mechanisms-refs
- https://www.w3.org/TR/WCAG20/#ensure-compat-rsv
- https://www.w3.org/TR/WCAG20/#text-equiv-all
- https://www.w3.org/TR/WCAG20/#navigation-mechanisms-refs
- https://www.w3.org/TR/WCAG20/#ensure-compat-rsv
推荐答案
这类问题始终取决于上下文。让我在没有背景的情况下进行介绍。
These kinds of questions always depend on context. Let me give it a shot sans context.
-
< button>了解详情< / button>可以做到这一点，只要有人能够理解上下文，他们就会学到更多。通常，按钮之前带有一些描述性文字。但是，如果它只是将某人带到另一个页面而不是触发模式，我将使用链接。
<button>Learn More</button>does the trick as long as contextually someone will understand what they will learn more about. Usually the button is preceded by some descriptive text. However, if it just brings someone to another page as opposed to firing a modal, I would use a link.
< button aria-label = Close&＃215;< / button> 表示关闭按钮（我将字符实体用于×，同样，如果按钮位于模式的顶部（例如），可能与其标题相邻，那么这可能就足够了。
<button aria-label="Close">×</button> for a close button (I am using the character entity for ×, which is more symmetrical than x. Again, if the button is at the top of a modal (for example), perhaps adjacent to its heading, then that is probably adequate.
< button aria-label =图片1> [icon]< / button> 可以用于轮播。如果没有下载字体，字体图标可能会丢失。在Windows高对比度模式（WHCM）中，对于IE11和更低版本的Edge，背景图像将消失。 aria标签不会帮助WHCM用户，最好使用图像（甚至是SVG）及其 alt 属性，这意味着您不需要 aria-label 。
<button aria-label="Image 1">[icon]</button> can work for a carousel. Note that a font icon can be lost if the typeface does not download. A background image will disappear in Windows High Contrast Mode (WHCM) for IE11 and older versions of Edge. The aria-label will not help the WHCM users. Probably best to use an image (even an SVG) and its alt attribute instead, which means then you do not need aria-label.
您不需要名称在贡。
请勿使用 role = button 属性。该角色自动地是< button> 元素的一部分。如果您分配其他角色，则会遇到很大的麻烦。
Do not use a role="button" attribute. That role is automagically part of the <button> element. If you assign another role, then you have a big problem.
绝对不要使用 title 属性。弊大于利。
Definitely do not use a title attribute. That does more harm than good.
这篇关于如何标记符合WCAG 2.0的按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
