我的公司正在努力实现 WCAG 合规。我们需要做的一件事是将 aria-label 添加到交互元素中。我的问题是，我是否需要将 aria-label 添加到已经具有可由屏幕阅读器读取的标签的元素。
所以基本上我在这里肯定需要一个“关闭”的 aria-label：
<button>x</button>
但在某些情况下，例如，我有一个占位符，由屏幕阅读器读取。我是否需要添加一个 aria-label 以防万一？ aria-label 将与占位符相同。
【问题讨论】：
@mikkel 对 ARIA 使用的第一条规则有很好的建议。
关于您关于占位符属性的具体问题，依赖占位符作为您的标签会使几个 WCAG 检查点失败。
如果您查看placeholder 的规范，它有一个很大的免责声明，即不 将其用作标签。
警告：将占位符属性用作标签的替代品可能会降低一系列用户的控件的可访问性和可用性，包括老年用户和具有认知、行动能力、精细运动技能或视力障碍的用户。虽然控件标签给出的提示始终显示，但占位符属性中给出的简短提示仅在用户输入值之前显示。此外，占位符文本可能会被误认为是预填充的值，并且通常实现的占位符文本的默认颜色提供了不足的对比度，并且缺少单独的可见标签会减小可用于设置控件焦点的点击区域的大小.
所以，话虽如此，是的，即使您使用占位符属性，您也应该有某种与您的输入字段相关联的可见标签。
【讨论】：
简短的回答，不。 长答案，视情况而定。 但重要的是——咏叹调的第一条规则： 如果您可以使用具有所需语义和行为的原生 HTML 元素或属性，而不是重新利用元素并添加 ARIA 角色、状态或属性以使其可访问，那么就这样做。 如有疑问，请选择原生 HTML。 https://www.w3.org/TR/using-aria/#rule1
如果你有一个可见的标签，那么你应该通过标签元素连接标签文本和输入字段。 如果输入字段没有可见标签，则 aria-label 是一种可以在语义上添加标签的技术。 在您的按钮示例中，您应该使用 aria-label，因为“X”不会向用户提供任何信息。当然，大多数用户都可以猜到“x”的作用，但用户不必猜测。 这里指的是使用辅助技术的用户。
出于法律原因，但主要是为了您的用户，我希望您请专业人员来测试您的网站。
我是一名网络开发人员，但在过去的 10 年里一直致力于网络可访问性。到目前为止，这是我必须学习的最难的 Web 开发领域，而且我仍在学习。 ?
【讨论】：