Изображение для метки формы

Question

Я очень заинтересован в изучении доступности форм и доступности в целом.

Разрешено ли использовать изображение в качестве метки, если на изображении также есть тег alt, представляющий метку? Это было бы хорошо? Если нет, то какой подход лучше? У меня есть небольшая форма, чтобы клиенты могли вводить свои ссылки на социальные сайты, которые они используют, и я хотел бы использовать логотип социального сайта, а не текст (ярлык).

Спасибо, Jack

Answer 1

Я думаю, что было бы лучше использовать класс CSS:

<div class="social">
  <label for="social1" class="s1">Social 1</label>
  <input type="text id="social1" name="social1" />

  <label for="social2" class="s2">Social 2</label>
  <input type="text id="social2" name="social2" />
</div>

Так что вы можете применить фон следующим образом:

.social {
  display: block;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
}
.social .s1{
  background-image: url("social1.gif");
}
.social .s2{
  background-image: url("social2.gif");
}

---

Я бы не стал удалять текст с ярлыков. Таким образом, пользователи смогут выбрать этот текст, но при этом выглядеть как изображение (с соответствующим фоном).

Но если вы действительно хотите придерживаться только изображений, то вы можете использовать этот подход:

<div class="social">
  <label for="social1" class="s1">
    <img alt="Social 1" src="img/social1.gif" />
  </label>
  <input type="text id="social1" name="social1" />

  <label for="social2" class="s2">
    <img alt="Social 2" src="img/social2.gif" />
  </label>
  <input type="text id="social2" name="social2" />
</div>

и, отвечая на ваш вопрос, я думаю, что можно иметь изображения с альтернативным текстом.

Answer 2

Отказ от ответственности: я не эксперт по юзабилити

Я думаю, это будет зависеть от нескольких факторов.

• Все ли ссылки на сайты известных брендов / логотипов? Люди поймут, что это не какое-то случайное искусство?
• Есть ли какой-то контекст, который указывал, что он кликабелен? Например, это в таблице, где в одном из заголовков таблицы указано «Ссылка»? Подсвечивается ли он при наведении на него мышью?
• Есть ли причина, по которой типичные текстовые ссылки выглядели бы особенно некрасиво или неразличимо?
• Существуют ли сайты с похожей функциональностью, которые делают то же самое?

Надеюсь, это поможет каким-то образом!