Question

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

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

作为一种解决方法，我尝试在label内使用aria-hidden属性进行图像和绝对定位的文本，但是当用户通过双击选择文本时，选择的方式不会像用户选择的图像那样选择：< / p>

<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。我听到了＃34;互动＆＃34;和＆＃34; bbc＆＃34;标签，但只是＆＃34;单选按钮＆＃34;用于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>之外，将aria-labelledby添加到指向标题的<svg>（并向<title>添加ID）：

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

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

Answer 2

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

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

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

此外，您可以使用PNG 8bit作为徽标或图表等图形。在那里，调色板减少到256种优化/选择的颜色。图形的视觉质量下降较低，因为它们的颜色较少。

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

如果在`label`

2 个答案: