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

Question

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

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

Спасибо, Джек

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

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

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

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

Я надеюсь, что это поможет в некотором роде!