Screen Reader (VoiceOver в iOS) игнорирует `alt`, если внутри` label` - PullRequest
Новая
       30

Screen Reader (VoiceOver в iOS) игнорирует `alt`, если внутри` label`

0 голосов
/ 29 мая 2018

У меня есть переключатель с 2 языками для выбора.Когда я тестирую в VoiceOver на iPhone, значение атрибута alt игнорируется, и VoiceOver читает просто 'изображение' без 'Deutsch': 

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

В качестве обходного пути я попытался использовать атрибут скрытого арии для изображения иабсолютно позиционированный текст внутри 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 значение или я здесь что-то не так делаю?

Буду признателен за любые советы, спасибо.

Ответы [ 2 ]

0 голосов
/ 07 июня 2018

Имейте в виду, что SVG - это векторный формат файла, который можно бесконечно масштабировать без потери качества, а другие - нет.

JPG - это формат файла, в котором используется настоящий метод сжатия без изменения цветаглубина.Это может значительно уменьшить размер файла, бесконечно изменчиво, но таким же образом с потерей качества.Обычно JPG рекомендуется на фотографиях, потому что там широкий цветовой профиль.JPG со степенью сжатия 80% может иметь небольшую потерю качества изображения, которое большинство людей вообще не распознает.

Вы также можете использовать PNG 24bit для фотографий, но с большим размером файла.

Кроме того, вы можете использовать PNG 8bit для графики, такой как логотипы или диаграммы.Там цветовая палитра уменьшена до 256 оптимизированных / выбранных цветов.Потеря визуального качества ниже на графике, потому что они уже идут с меньшим количеством цветов.

В любом случае, это решение для решения, и да, я дизайнер.

0 голосов
/ 29 мая 2018

Это интересный случай.Это только кажется проблемой, когда изображение является 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.(Я не пробовал это)

  1. Добавьте role="img" к тегу <svg>.Это может заставить VoiceOver думать, что это больше похоже на PNG или JPG. 
<svg role="img" ...>
Добавьте элемент <title> к <svg> с вашим альтернативным текстом, например: 
<svg ...>
  <title>Deutsch</title>
В дополнение к <title>, добавьте aria-labelledby к <svg>, который указывает на заголовок (и добавьте идентификатор к <title>): 
<svg aria-labelledby="foo" ...>
  <title id="foo">Deutsch</title>
Использование SVG великолепно, потому что оно хорошо масштабируется для пользователей со слабым зрением, если им приходится увеличивать шрифт, но я полагаю, что последним средством будет преобразование SVG в PNG или JPG.Это будет выглядеть не так хорошо, если вы увеличите его (если вы не сохраните его как большое изображение), но это, безусловно, еще одна возможность.
...