屏幕 Reader（iOS 中的 VoiceOver）如果在 `label` 内则忽略 `alt`

Question

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

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

作为一种解决方法，我尝试对图像使用 aria-hidden 属性并将文本绝对定位在 label 内，但是当用户 selects 双击单选选项的文本不是 selected 就像用户 selected 图像时所做的那样：

<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 值，还是我在这里做错了什么？

如有任何建议，将不胜感激。

Answer 1

这是一个有趣的案例。当图像是 SVG 时，它似乎只是一个问题。它适用于 PNG 和 JPG。我听到 "interactive" 和 "bbc" 标签，但只有 "radio button" 用于 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" ...>

将 <title> 元素添加到带有替代文本的 <svg>，例如：

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

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

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

使用 SVG 非常好，因为它可以很好地适应低视力用户，如果他们必须放大字体，但我想最后的办法是将您的 SVG 转换为 PNG 或 JPG。当你放大它时它看起来不太好（除非你将它保存为大图像），但它肯定是另一种可能性。

Answer 2

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

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

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

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

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

屏幕 Reader（iOS 中的 VoiceOver）如果在 `label` 内则忽略 `alt`

Screen Reader(VoiceOver in iOS) ignores `alt` if inside `label`

accessibility

wai-aria

voiceover