如何使用 aria 来标记带有非直观文本标签的按钮
How to use aria to label a button with non-intuitive text tabel
我有一个看起来像这样的按钮：
<button type="button">
Remove
</button>
根据上下文，可以看到的用户将能够分辨出该按钮指的是他们可以删除的特定产品。但是，对于有视力障碍的用户，文本 "Remove" 的信息不足以帮助他们了解要删除的内容。
我知道 aria-label 是，根据 MDN web docs，应该按如下方式使用：
Use it in cases where a text label is not visible on the screen
我也知道 aria-labelledby 应该用于将其他标记与被标记的元素相关联。但是，就我的按钮而言，按钮本身包含标签。恰好标签本身描述性不够
此时，您可能会问我为什么不直接更改按钮文本！碰巧 UX 团队不想更改可见按钮文本，所以我只能在不更改按钮可见部分的情况下尝试找出按钮的可访问性。
无论如何，对于在这种情况下应该做什么，是否有明确的规范？我倾向于使用 aria-label，但我不确定它本身是否符合 ARIA。
提前致谢！
Anyhow, is there a defined spec on what to do in this type of situation? My inclination is to use aria-label, but I'm not positive that is ARIA-compliant per se.
是的，你可以。
将使用 aria-label 属性并将替换内部文本。
文本 Alternative Computation 的规范确实定义了 aria-label 将被优先使用（在步骤 2C 中），而内容只有在不存在时才会被使用（步骤 2F）
是的，您可以使用 aria-label。通常它优先于可见文本或元素内的文本（在大多数情况下 JFW、NVDA、VO 都是如此，除非设置了自定义设置）。
<button aria-label="Remove article XYZ">Remove</button>
与图像的 alt 属性一样，确保 aria-label 足够，即可见文本或元素内的文本很可能不会被读出，它完全被 aria-label 取代。
对于我们此处的示例，单词 "Remove" 必须出现在标签中。
作为 aria-label 的替代方法，您还可以使用 CSS class 使文本仅在屏幕上朗读 readers:
<button>Remove <span class="sr-only">XYZ</span></button>
您会在 bootstrap 等框架中找到相应的 CSS 代码。
在这种情况下，可见文本和屏幕 reader 特定文本都会一个接一个地说出。确保单词没有粘在一起，否则可能会出现发音问题。
我有一个看起来像这样的按钮：
<button type="button">
Remove
</button>
根据上下文，可以看到的用户将能够分辨出该按钮指的是他们可以删除的特定产品。但是，对于有视力障碍的用户，文本 "Remove" 的信息不足以帮助他们了解要删除的内容。
我知道 aria-label 是，根据 MDN web docs，应该按如下方式使用：
Use it in cases where a text label is not visible on the screen
我也知道 aria-labelledby 应该用于将其他标记与被标记的元素相关联。但是，就我的按钮而言，按钮本身包含标签。恰好标签本身描述性不够
此时，您可能会问我为什么不直接更改按钮文本！碰巧 UX 团队不想更改可见按钮文本，所以我只能在不更改按钮可见部分的情况下尝试找出按钮的可访问性。
无论如何，对于在这种情况下应该做什么，是否有明确的规范？我倾向于使用 aria-label，但我不确定它本身是否符合 ARIA。
提前致谢！
Anyhow, is there a defined spec on what to do in this type of situation? My inclination is to use aria-label, but I'm not positive that is ARIA-compliant per se.
是的，你可以。
将使用 aria-label 属性并将替换内部文本。
文本 Alternative Computation 的规范确实定义了 aria-label 将被优先使用（在步骤 2C 中），而内容只有在不存在时才会被使用（步骤 2F）
是的，您可以使用 aria-label。通常它优先于可见文本或元素内的文本（在大多数情况下 JFW、NVDA、VO 都是如此，除非设置了自定义设置）。
<button aria-label="Remove article XYZ">Remove</button>
与图像的 alt 属性一样，确保 aria-label 足够，即可见文本或元素内的文本很可能不会被读出，它完全被 aria-label 取代。 对于我们此处的示例，单词 "Remove" 必须出现在标签中。
作为 aria-label 的替代方法，您还可以使用 CSS class 使文本仅在屏幕上朗读 readers:
<button>Remove <span class="sr-only">XYZ</span></button>
您会在 bootstrap 等框架中找到相应的 CSS 代码。 在这种情况下，可见文本和屏幕 reader 特定文本都会一个接一个地说出。确保单词没有粘在一起，否则可能会出现发音问题。