如果在“标签”内，屏幕阅读器（iOS 中的 VoiceOver）会忽略“alt”答案

【问题标题】：Screen Reader(VoiceOver in iOS) ignores `alt` if inside `label`如果在“标签”内，屏幕阅读器（iOS 中的 VoiceOver）会忽略“alt”
【发布时间】：2018-05-29 13:05:33
【问题描述】：

我有一个带有 2 种语言的单选按钮可供选择。当我在 iPhone 上的 VoiceOver 中测试时，alt 属性值被忽略，VoiceOver 只读取 'image' 而没有 'Deutsch'：

<label for="lang-de">
  <img src="assets/imgs/sprache_deutsch_icon.svg" alt="Deutsch" />
</label>

作为一种解决方法，我尝试对图像使用 aria-hidden 属性并在 label 内绝对定位文本，但是当用户通过双击选择文本时，单选选项没有像用户选择图像时那样被选中：

<label for="lang-en">
  <span class="sr-only">English</span>
  <img src="assets/imgs/sprache_englisch_icon.svg" aria-hidden alt="English" />
 </label>

这是预期的行为，因为 label 文本抑制了 alt 值，还是我在这里做错了什么？

任何建议将不胜感激，谢谢。

【问题讨论】：

标签： accessibility wai-aria voiceover

【解决方案1】：

这是一个有趣的案例。只有当图像是 SVG 时，它才会出现问题。它适用于 PNG 和 JPG。我听到了“交互式”和“bbc”标签，但只是 w3c 徽标的“单选按钮”。

<input id="test1" type="radio" name="a">
<label for="test1">
  <img src="https://pbs.twimg.com/profile_images/378800000443220383/4e56ac181c96ad9997a47de74c1d2c6e_normal.png" alt="interactive">
</label>

<input id="test2" type="radio" name="a">
<label for="test2">
  <img src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" alt="w3c" width="50">
</label>

<input id="test3" type="radio" name="a">
<label for="test3">
  <img src="http://static.bbci.co.uk/wwhp/1.123.289/responsive/img/apple-touch/apple-touch-180.jpg" alt="bbc" width="50">
</label>

您可以尝试一些方法，具体取决于您是否可以访问 SVG。（这些我没试过）

将role="img" 添加到<svg> 标记。这可能会让 VoiceOver 认为它更像是 PNG 或 JPG。

<svg role="img" ...>

在<svg> 中添加一个<title> 元素以及您的替代文字，例如：

<svg ...>
  <title>Deutsch</title>

除了<title>，将aria-labelledby添加到指向标题的<svg>（并在<title>添加一个ID）：

<svg aria-labelledby="foo" ...>
  <title id="foo">Deutsch</title>

使用 SVG 非常棒，因为如果视力不佳的用户必须放大字体，它可以很好地缩放，但我认为最后的手段是将 SVG 转换为 PNG 或 JPG。放大后看起来不会那么好看（除非您将其保存为大图像），但肯定是另一种可能性。

【讨论】：

role="img" 为我工作，非常感谢您的详尽回答
很高兴这个简单的建议奏效了。您可能想在 Internet Explorer 上尝试一下。默认情况下，<svg> 是一个可聚焦的对象（在 IE 上），因此您最终可能会切换到单选按钮小部件，然后切换到 svg。但是，通过指定 role="img"，可能会阻止 svg 成为制表位。如果没有，那么您必须将focusable="false" 添加到<svg>。
感谢另一个有价值的提示。幸运的是，我的应用是 Ionic 应用，这意味着不支持 IE：-P

【解决方案2】：

请记住，SVG 是一种矢量文件格式，可以无限扩展而不会损失质量，但其他格式则不然。

JPG 是一种文件格式，它使用真正的压缩方法而不改变颜色深度。它可以显着减小文件大小，无限变化，但以同样的方式降低质量。通常建议在照片上使用 JPG，因为它具有广泛的色彩配置文件。具有 80% 压缩率的 JPG 可能会有一点视觉质量损失，这是大多数人根本无法识别的。

您也可以将 PNG 24 位用于照片，但文件大小更大。

此外，您还可以将 PNG 8bit 用于徽标或图表等图形。在那里，调色板减少到 256 种优化/选定的颜色。图形的视觉质量损失较低，因为它们已经具有较少的颜色。

无论如何，这仍然是一个需要决定的情况，是的，我是一名设计师。

【讨论】：