Какой тег alt подходит для изображения, если известно, что оно было загружено пользователем?

Question

На нашем сайте есть случай, когда мы показываем список изображений, которые были загружены различными пользователями продукта, который мы продаем. У нас нет никакого контекста относительно того, что изображение имеет кроме продукта, который мы продаем на странице. Вот различные варианты, которые мы обсудили:

1. Пустой alt tag alt="". Программы чтения с экрана ничего бы не читали.
2. Alt tag говорит, что он был загружен пользователем alt="customer uploaded content". Это будет повторять одно и то же для каждого изображения.
3. То же самое, что и (2), но вместо этого для изображения указывается индекс, показывающий количество их alt='${index} customer uploaded content'.
4. Полностью пропустить атрибут alt.

В данном конкретном случае меня меньше волнует SEO, чем доступность. Я не уверен, какова лучшая практика, и если чтение с экрана считывателей повторяющегося контента потенциально может быть плохим.

Answer 1

Я сам пользователь программы чтения с экрана, и я бы проголосовал за № 1 или, возможно, за № 3, в зависимости от ситуации.

Ваш # 4, без альтернативного текста, в любом случае является худшим. Многие программы чтения с экрана выводят изображения без указания имени, указывая имя файла или даже полный URL-адрес. Это всегда совершенно бесполезное раздражение.

Ваш # 2, общий альтернативный текст, такой как «Пользовательский контент», лучше, но если в строке более нескольких изображений, менее опытные пользователи могут подумать, что достигли нижней части страницы, или что программа чтения с экрана и / или веб-сайт глючат. Для более продвинутых пользователей это в любом случае бесполезная информация.

Ваш # 3, общий текст alt с индексами, такими как «Фото 1», «Фото 2», «Фото 3», «Фото 4» и т. Д., Лучше, чем # 2. Поскольку альтернативный текст отличается по своим индексам, вы не можете думать, что достигли конца страницы или что-то глючит. Это все еще не полезная информация.

Однако я думаю, что лучшим из ваших решений является # 1, пустой альтернативный текст. Поскольку изображения в любом случае не предоставляют никакой полезной информации, их лучше полностью пропустить. На практике это то, что мы делаем каждый день, когда такие изображения присутствуют.

В одном случае я бы порекомендовал # 3 вместо # 1: если вы можете выполнить какое-либо действие, нажимая на изображения. В этом случае пустой альтернативный текст будет препятствовать запуску действия пользователем программы чтения с экрана. Ссылки на изображения, кнопки и другие элементы actionnable всегда должны иметь непустой альтернативный текст.

Другой случай, когда # 3 может быть полезен, если я сам являюсь автором контента. В этом случае я могу проверить, правильно ли были загружены и вставлены мои изображения, где я хочу, чтобы они появлялись.

Во всех других случаях я бы выбрал №1 по причинам, изложенным выше.

Конечно, реальным лучшим решением было бы позволить пользователям давать альтернативный текст, пока они редактируют свой контент, и информировать их об этом. Вы можете утверждать, что это описание и что оно поможет им найти свои изображения; очень полезно, если вы предоставляете доступ к месту, где они могут видеть все, что они загрузили на сайт на одной странице, или если вы позволяете им загружать изображения заранее.

Answer 2

Спецификация содержит исчерпывающую информацию об этом , включая раздел Когда текстовая альтернатива недоступна на момент публикации :

В некоторых случаяхизображение включено в опубликованный документ, но автор не может предоставить соответствующую текстовую альтернативу.В таких случаях минимальным требованием является предоставление подписи для изображения с использованием элементов figure и figcaption при следующих условиях

(snip)

В этом примереПользователь загружает фотографию, как часть массовой загрузки множества изображений, на сайт обмена фотографиями.Пользователь не предоставил текстовую альтернативу или подпись к изображению.Инструмент разработки сайта автоматически добавляет заголовок, используя любую полезную информацию для изображения.В данном случае это имя файла и дата, когда была сделана фотография.

<figure>
<img src="clara.jpg">
<figcaption>clara.jpg, taken on 12/11/2010.</figcaption>
</figure>

---

Меня меньше беспокоит SEO в данном конкретном случае, чем доступность.Я не уверен, что лучше всего, и если чтение с экрана считывания повторяющегося контента потенциально может быть плохим.

Позволяет пользователям программы чтения с экрана пропускать раздел.Используйте элементы <section> и <h1> и друзей.Таким образом, когда они получают объявление «Раздел: фотографии клиентов», они могут перейти к следующему заголовку.

Answer 3

при условии, что вы создаете динамическое веб-приложение, вы можете попробовать пробную версию Tobias и вставить динамический контент в тег alt. в противном случае я думаю, что вы должны придерживаться решения 2), так как вы не можете динамизировать контент в html.

Answer 4

Я бы сказал так:

alt="Image of {product}, uploaded by {user}"

В нем указано, какой продукт изображен на картинке и загружен пользователем.