Атрибут alt в <img> "на практике"

[Kray Storm]

Здравствуйте.

Не дает покоя вопрос практической оправданности использования атрибута alt в теге <img>.

Прочитал одну статью, другую... Еще несколько. Никак не пойму.

Что этот атрибут делает и когда используется - понятно. Подпись изображения (а точнее места под него) при недоступном файле или отключенной графике.

НО.

Первое. Кто-то в наше время отключает в браузере графику? Ну, разве что в "аварийных" ситуациях, когда нужно срочно выйти в Инет, а тариф дико дорог или канал неприлично мал (с мобильника в "лесах/горах" с дорогой Инет-услугой в пакете, например). Даже если и так, то, обычно вполне понятно по тексту, где "нужные" изображения. И с этой позиции атрибуты вроде height и width, наверное, более важны, чтобы было видно, где ж эти самые невидимые изображения находятся. Про рекомендацию W3C об использовании alt в <img> знаю, но это ведь именно рекомендация, а не требование.

Второе. Возможно, что есть частные случаи верстки под вывод сайта для людей с нарушениями зрения. Но вряд-ли тут подпись вроде alt="картинка-цветочек" сильно поможет. Да и многие ли на самом деле об этом так заботятся?

Третье. Нашел даже статьи по оптимизации, где говорится что alt + title в <img> - это чуть ли не самая крутая приманка для поисковиков, которые толпой ломанутся на ваш сайт плюсовать рейтинг, только увидев подпись к картинке. Ну, может и так. Я не знаю.

Сколько пользуюсь Инетом, мне ни разу не было интересно, как подписана картинка. Если она есть - я ее вижу, если нет - иду дальше. Если нет и нужна - иду к Гуглу, пользуясь описанием из контекста соответствующей статьи и нахожу за несколько секунд. Всплывающий текст? Есть title. А на деле все нужные подписи делают под изображением (ну, некогда посетителю наводить курсор и ждать этого "всплытия" )

Поэтому просьба к тем, кто уже достаточно долго и успешно верстает:

Объясните мне, пожалуйста раз и навсегда - какое практическое применение этого атрибута alt? Вы тратите время на него или просто пропускаете, высокомерно смеясь над предупреждениями валидаторов?

[npofopr]

Для оптимизации будет не лишним.

А так... Все зависит для кого вы верстаете. Вдруг пользователи вашего сайта, это linux гуру, которые пользуются консольными браузерами. Тогда им я думаю важно будет подписывать.

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

Не ленитесь) Подписывайте) Пользователи оценят.

[Kray Storm]

Спасибо.

Да тут вопрос не о лени совсем. А об оправданности затрат человекосимволов и просто любознательность.

Консольные браузеры? Думаю что у таких гуру есть свои "консольные сайты" с консольным порно и там многое по-другому )

Значит, если говорить о серьезных причинах - то это именно оптимизация? Но тогда вроде как нужно знать "правильные слова", чтобы поисковикам нравилось. А насколько сильно они влияют? Учитывая, что есть keywords-ы и discription-ы в метатегах и логические HTML5-теги для разного контента. А также всякие индексы релевантности на основе ссылок и т.д., что по идее намного важнее какого-то там alt.

Т.е. если не касаться SEO, то ответ в основном, потому что все так делают?

[npofopr]

Ну я не сеошник, это мое сугубо личное мнение :-)

Правильные слова не обязательны, вернее должны фигурировать ключевые слова. Как сейчас учат, нужен "свой, не похожий на другие" (забыл синоним) контент.

Да это просто удобно и правильно так делать. Я часто навожу на картинку, дабы узнать, что это такое, потому как заголовок страницы совсем другой или вовсе отсутствует.

Нас же никто не заставляет у верхнего блока писать класс header, а у нижнего footer. Но пишем, потому как... становится все понятно.

В общем моя мысль ясна вроде)

[Kray Storm]

Благодарю за пояснение. В целом я понял: Хочешь стать хорошим кодером - не пренебрегай мелочами )

[SelenIT]

Поисковики анализируют (пока, в основном) текстовое содержимое. Скринридеры для слепых и т.п. — тоже. Другого текстового содержимого, кроме значения alt (title — постольку-поскольку, это очень уж вспомогательная вещь). И совсем без текстового содержимого поисковик не знает, что с картинкой делать (по какому запросу выдавать ее при поиске по картинкам и т.п.) и вообще чувствует себя вот так:

<img alt="Котёнок с очень растерянным видом" src="http://а-вот-и.нет/картинки.jpg">

...как, впрочем, и пользователь на мобильнике, от которого мог бы ускользнуть смысл предыдущей фразы

но это ведь именно рекомендация, а не требование.

Очень распространенная ошибка (хотя W3C сами виноваты — нейминг у них из рук вон). У W3C «рекомендация» означает примерно то же, что «стандарт» у др. организаций (пруф).

[Kray Storm]

Поисковики анализируют текстовое содержимое. Другого текстового содержимого, кроме значения alt (title — постольку-поскольку, это очень уж вспомогательная вещь). И совсем без текстового содержимого поисковик не знает, что с картинкой делать...

Вот оно что... Ясно.

А что касается тега <figure> с <figcaption> в отношении поисковиков?

Им планируется в будущем заменить alt (вроде как связь изображения и сопроводительного видимого текста - действительно, более логично) или просто дополнить?

Edited October 15, 2012 by Kray Storm

[SelenIT]

Дополнить, разумеется. Figcaption же не обязательно относится к одной картинке, он может быть один на группу картинок, например. Не говоря о том, что не всякая картинка (даже в контенте) — "обособленный потоковый контент, с необязательной подписью, на который ссылаются из основного потока документа как на единое целое, и который можно переместить в другую часть страницы без ущерба для понимания текста", как спецификация определяет figure (напр. мой пример с растерянным котёнком выше — не figure).

[Быколай]

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

Делайте сайты для людей, а не роботов, и будет вам спасибо от людей, а не роботов счастье.

второй ваш вопрос.

alt - атрибут тега img. <figure> с <figcaption> — совсем другая конструкция, появившаяся в html 5. Она удобна во многих случая (конкретней, когда надо вставить изображение с подписью), но она другая. Пример, первый попавшийся:

1. баннер рекламный: очевидно это img. С alt="Рекламный баннер спонсора нашего сайта, ООО Рога и Копыта". Подпись не нужна.

2. Галерея с репродукциями Эрмитажа, очевидно что тут будет

<figure>
    <p><img src="http://www.hermitagemuseum.org/tmplobs/Z407J2BEQA5I$DS86.jpg" alt="полотно И.К. Айвазовского Корабль среди бурного моря" /></p>
    <figcaption>
<i>Корабль среди бурного моря</i><br/>
Айвазовский, Иван Константинович.<br/>
Холст, масло. 62.5х97 см<br/>
Россия. 1887<br/>
Источник поступления в музей:   Обменный музейный фонд Государственного Эрмитажа. 1954 <br/>
</figcaption>
   </figure>

Чувствуете разницу?

[Kray Storm]

Всем спасибо за науку. Вещи вроде простые, но для начинающего не совсем очевидные.

Делайте сайты для людей, а не роботов, и будет вам спасибо от людей, а не роботов.

Фразу - в эпиграф учебников по верстке!