<span> 元素的替代文本样式为图标以满足可访问性指南
Alternative text for <span> element styled as icon to meet accessibility guidelines
我被要求寻找我们网站中不符合无障碍指南的区域。我目前正在研究我们使用的所有具有语义含义的图标是否都有替代文本，以满足 WCAG 2.1 1.1.1。
在一个地方，我们使用 <span> 元素来表示低、中或高状态。这是一个图标样式 - 只是一个彩色背景和周围的盒子，中间有字母 L。 HTML 是
<span class="icon" title="Low" role="img">L</span>
鉴于标题和内部文本“L”，这是否足以满足准则？如果没有，应该添加什么？
而不是考虑满足准则（我想不出具体的准则，你会“失败”，尽管你知道）只是想什么使网站更容易使用/提供最好的体验。
由于我们看不到周围的项目，因此无法评论“L”在上下文中是否有意义。
因此，最简单的方法是向跨度添加一个 aria-label。这意味着屏幕 reader 实际上会显示为“低”而不是“l”。
<span class="icon" title="Low" role="img" aria-label="low">L</span>
如果此跨度不是段落的一部分，您可能还想在标签中说明哪个项目是“低”。 aria-label="widget one stock is low".
作为 title is not very reliable for screen readers（对使用触摸设备的人来说没用）你也可以考虑为有视力的用户准备一把钥匙，解释 L、M、H 等的含义（或你使用的任何字母），然后你可以去掉 title.
这也将使看不到 title 属性的移动用户（如果网站适合移动设备）受益匪浅。
一次调整
答案被接受后我才意识到我没有涵盖 role="image" 部分。
一旦你有 aria-label 就可能根本不需要它，特别是如果你使用较长形式的标签 aria-label="widget one stock is low" 我建议。
再次取决于您的用例，但我有 80% 的信心说情况就是如此，而没有看到其他任何东西。
这也可能在 运行 自动辅助功能测试时有所帮助，因为它不会抱怨缺少 alt 属性。
所以
<span class="icon" aria-label="widget one stock is low">L</span> 完全有效。
我被要求寻找我们网站中不符合无障碍指南的区域。我目前正在研究我们使用的所有具有语义含义的图标是否都有替代文本，以满足 WCAG 2.1 1.1.1。
在一个地方，我们使用 <span> 元素来表示低、中或高状态。这是一个图标样式 - 只是一个彩色背景和周围的盒子，中间有字母 L。 HTML 是
<span class="icon" title="Low" role="img">L</span>
鉴于标题和内部文本“L”，这是否足以满足准则？如果没有，应该添加什么？
而不是考虑满足准则（我想不出具体的准则，你会“失败”，尽管你知道）只是想什么使网站更容易使用/提供最好的体验。
由于我们看不到周围的项目，因此无法评论“L”在上下文中是否有意义。
因此，最简单的方法是向跨度添加一个 aria-label。这意味着屏幕 reader 实际上会显示为“低”而不是“l”。
<span class="icon" title="Low" role="img" aria-label="low">L</span>
如果此跨度不是段落的一部分，您可能还想在标签中说明哪个项目是“低”。 aria-label="widget one stock is low".
作为 title is not very reliable for screen readers（对使用触摸设备的人来说没用）你也可以考虑为有视力的用户准备一把钥匙，解释 L、M、H 等的含义（或你使用的任何字母），然后你可以去掉 title.
这也将使看不到 title 属性的移动用户（如果网站适合移动设备）受益匪浅。
一次调整
答案被接受后我才意识到我没有涵盖 role="image" 部分。
一旦你有 aria-label 就可能根本不需要它，特别是如果你使用较长形式的标签 aria-label="widget one stock is low" 我建议。
再次取决于您的用例，但我有 80% 的信心说情况就是如此，而没有看到其他任何东西。
这也可能在 运行 自动辅助功能测试时有所帮助，因为它不会抱怨缺少 alt 属性。
所以
<span class="icon" aria-label="widget one stock is low">L</span> 完全有效。