按钮的表单控件标签必须是唯一的
Form control labels must be unique for buttons
我的页面上有许多标有“购买”的按钮。我怎样才能使它们独一无二？他们没有形式。
谢谢
方法有很多种。希望每个按钮都有一个唯一的 ID，因此页面上的某些内容包含描述用户将要购买的内容的文本。然后就可以使用aria-labelledby属性：
<button id="unique-thing-to-buy-button" aria-labelledby="unique-thing-to-buy-button unique-thing-to-buy">Buy</button>
请注意，ID 是 space 分隔的。这将在屏幕上宣布“购买”和“购买我们正在购买的东西”这个词 reader。
如果没有，您可以创建一个完成同样事情的翻译字符串并使用 aria-label。
<button aria-label="buy unique thing">Buy</button>
理想情况下，您还可以改善视力正常的用户的体验。在 title 属性中放置一个类似的字符串以在悬停时显示是一个好的开始。理想情况下，您会使用一个在焦点上显示相同字符串的小部件来覆盖您的 non-mouse 用户。
此消息基本上意味着您必须在按钮的文本中提供更精确的上下文，因为您至少有两个按钮具有相同的可访问文本，而且它们彼此之间很难区分。
使用屏幕 reader 时，根据您的导航方式，您会直接跳转到给定元素，但会跳过可以为您提供更多上下文的元素。
例如，在你的情况下，如果我从一个按钮导航到另一个按钮，我会从一个“购买”按钮跳到下一个，而不会被告知我要买什么，因为信息是' t 在按钮本身上但在它旁边。
因此，绝对需要 通过扩展按钮的文本来为我提供更多上下文。有问题的文本不需要在屏幕上可见，因为它是一个特定的屏幕 reader 问题。
但是，如果文本也可用作工具提示，其他人也可能会从中受益。
有多种方法可以将所需的上下文添加到您的按钮。
最简单的可能是使用屏幕 reader 特定文本也称为视觉隐藏文本，如下所示：
<button>Buy<span class="sr_only"> basic package for 10$</span></button>
<button>Buy<span class="sr_only"> premium package for 20$</span></button>
<button>Buy<span class="sr_only"> full package for 40$</span></button>
其中 .sr_only 是来自 bootstrap 的特定 class。其他框架也有类似的 CSS classes 做同样的事情。
注意间距，以免单词无用地粘在一起。
您也可以使用 aria-label，像这样：
<button aria-label="Buy basic package for 10$">Buy</button>
<button aria-label="Buy premium package for 20$">Buy</button>
<button aria-label="Buy full package for 40$">Buy</button>
使用 aria-labelledby 也可以在另一个元素中添加扩展文本。
对于 aria-label 和 aria-labelledby，在标签中，注意重复按钮上实际显示的文本，因为可访问标签 完全取代了自然文本 按钮（此处重复“购买”一词）。
最后一点，像我在这里做的那样，简短地提醒一下价格也是一个好习惯。
根据您销售的商品，在购买过程后期（例如结帐前）告知价格可被视为暗模式，对于屏幕 reader 用户来说更是如此，因为他们可能会错过表明对于有视力的人来说是显而易见的。
我的页面上有许多标有“购买”的按钮。我怎样才能使它们独一无二？他们没有形式。 谢谢
方法有很多种。希望每个按钮都有一个唯一的 ID，因此页面上的某些内容包含描述用户将要购买的内容的文本。然后就可以使用aria-labelledby属性：
<button id="unique-thing-to-buy-button" aria-labelledby="unique-thing-to-buy-button unique-thing-to-buy">Buy</button>
请注意，ID 是 space 分隔的。这将在屏幕上宣布“购买”和“购买我们正在购买的东西”这个词 reader。
如果没有，您可以创建一个完成同样事情的翻译字符串并使用 aria-label。
<button aria-label="buy unique thing">Buy</button>
理想情况下，您还可以改善视力正常的用户的体验。在 title 属性中放置一个类似的字符串以在悬停时显示是一个好的开始。理想情况下，您会使用一个在焦点上显示相同字符串的小部件来覆盖您的 non-mouse 用户。
此消息基本上意味着您必须在按钮的文本中提供更精确的上下文，因为您至少有两个按钮具有相同的可访问文本，而且它们彼此之间很难区分。
使用屏幕 reader 时，根据您的导航方式，您会直接跳转到给定元素，但会跳过可以为您提供更多上下文的元素。
例如，在你的情况下，如果我从一个按钮导航到另一个按钮，我会从一个“购买”按钮跳到下一个，而不会被告知我要买什么，因为信息是' t 在按钮本身上但在它旁边。 因此，绝对需要 通过扩展按钮的文本来为我提供更多上下文。有问题的文本不需要在屏幕上可见，因为它是一个特定的屏幕 reader 问题。 但是，如果文本也可用作工具提示，其他人也可能会从中受益。
有多种方法可以将所需的上下文添加到您的按钮。
最简单的可能是使用屏幕 reader 特定文本也称为视觉隐藏文本，如下所示：
<button>Buy<span class="sr_only"> basic package for 10$</span></button>
<button>Buy<span class="sr_only"> premium package for 20$</span></button>
<button>Buy<span class="sr_only"> full package for 40$</span></button>
其中 .sr_only 是来自 bootstrap 的特定 class。其他框架也有类似的 CSS classes 做同样的事情。 注意间距，以免单词无用地粘在一起。
您也可以使用 aria-label，像这样：
<button aria-label="Buy basic package for 10$">Buy</button>
<button aria-label="Buy premium package for 20$">Buy</button>
<button aria-label="Buy full package for 40$">Buy</button>
使用 aria-labelledby 也可以在另一个元素中添加扩展文本。 对于 aria-label 和 aria-labelledby，在标签中，注意重复按钮上实际显示的文本，因为可访问标签 完全取代了自然文本 按钮（此处重复“购买”一词）。
最后一点，像我在这里做的那样，简短地提醒一下价格也是一个好习惯。 根据您销售的商品，在购买过程后期（例如结帐前）告知价格可被视为暗模式，对于屏幕 reader 用户来说更是如此，因为他们可能会错过表明对于有视力的人来说是显而易见的。