Когда производители браузеров нарушают стандарты и делают что-то, что не соответствует правилам, это может вызвать проблемы или, по крайней мере, путаницу. Одним из примеров является то, как некоторые браузеры обрабатывают атрибуты alt (часто неправильно называемые тегами alt), например Internet Explorer для Windows, которым пользуется большое количество пользователей.
Альтернативный текст (alt text) не используется в качестве подсказки, точнее, он не предоставляет дополнительную описательную информацию для изображения. Вместо этого атрибут title следует использовать для предоставления дополнительной описательной информации об элементе. Эта информация отображается в виде всплывающей подсказки в большинстве браузеров изображений, хотя производители могут отображать текст атрибута заголовка другими способами.
Многих людей, похоже, смущают эти два свойства (в последнее время этот вопрос появляется в списке рассылки группы веб-стандартов ), поэтому я записал свои мысли о том, как их использовать.
альтернативный атрибут
Для пользовательских агентов (UA), которые не могут отображать изображения, формы или апплеты, атрибут alt используется для указания альтернативного текста. Язык замещающего текста определяется атрибутом lang.
Источник: Как указать альтернативный текст .
Атрибут Alt (обратите внимание на «атрибут», а не на «метку») содержит инструкции по замене, которые необходимы для изображений и активных областей изображений. Его можно использовать только в элементах img, area и input (включая элементы апплета). Для элементов ввода атрибут alt предназначен для замены изображения кнопки отправки. Например: <input type="image" src="image.gif" alt="Submit" />.
Используйте атрибут alt, чтобы предоставить текстовое описание для зрителей, которые не видят изображения в вашем документе. Сюда входят пользователи, использующие браузеры, которые не поддерживают отображение изображений или у которых отображение изображений отключено, пользователи с нарушениями зрения и пользователи, использующие программы чтения с экрана. Альтернативный текст используется для замены изображения, а не для предоставления дополнительного описательного текста.
Тщательно подумайте, прежде чем писать замещающий текст, чтобы убедиться, что он действительно предоставляет информацию людям, которые не видят изображение, и что он имеет смысл в контексте. Для декоративных изображений используйте пустое значение (alt=", без пробелов между кавычками) вместо ненужного замещающего текста, такого как "blue Bullet" или "spacer.gif". Не игнорируйте это. Если вы проигнорируете это, некоторые программы чтения с экрана будут напрямую читать имя файла изображения, а текстовые браузеры, такие как Lynx, будут отображать имя файла изображения, и это будет бесполезно для вашего браузера. .
Альтернативный текст проще всего установить для изображений, содержащих текст. Вообще говоря, текст, содержащийся в изображении, можно использовать в качестве значения атрибута alt.
Что касается длины замещающего текста, посмотрите, что говорит WCAG 2.0 (Руководство по доступности контента веб-сайта 2.0):
Длина значения атрибута Alt должна быть меньше 100 английских символов, иначе пользователь должен убедиться, что текст замены как можно короче.
Я понимаю это как «насколько это возможно и настолько долго, насколько это необходимо».
Даже если вы хотите, чтобы он отображался в виде всплывающей подсказки, не используйте атрибут alt для текстовых элементов. Это не его предполагаемое использование. Насколько мне известно, это работает только в браузере IE для Windows и в древней версии Netscape 4.* (версия для Windows). Ни один браузер Mac не отображает это в виде подсказки.
Неправильное использование атрибута alt приветствуется, когда браузеры отображают замещающий текст в качестве подсказки. Некоторые люди начинают писать бессмысленный замещающий текст, потому что склонны думать о нем как о дополнительной описательной информации, а не о замене, которая не может отобразить изображение. Другие могут не захотеть, чтобы всплывающая подсказка появлялась, и затем полностью игнорировать значение атрибута alt. Эта неправильная практика создает трудности для зрителей, которые не могут видеть изображения.
Для получения дополнительной описательной и несущественной информации используйте атрибут title.
атрибут заголовка
Атрибут title предоставляет рекомендательную информацию для элемента, для которого он установлен.
Источник: атрибут title .
Атрибут title можно использовать во всех тегах, кроме base, basefont, head, html, мета, param, script и title. Но это не обязательно. Возможно, поэтому многие люди не понимают, когда его использовать.
Используйте атрибут title для предоставления несущественной дополнительной информации. Большинство визуальных браузеров отображают текст заголовка в виде всплывающей подсказки при наведении курсора мыши на определенный элемент. Однако производитель должен решить, как отображать текст заголовка. Некоторые браузеры отображают текст заголовка в строке состояния. Например, ранние версии браузера Safari.
Хорошее использование атрибута title — добавление к ссылке описательного текста, особенно если сама ссылка не передает четко цель ссылки. Таким образом, посетители знают, куда их приведут ссылки, и не будут загружать страницу, которая им вообще не интересна. Другое потенциальное применение — предоставление дополнительной описательной информации для изображений, такой как даты или другая несущественная информация.
Значение атрибута title может быть установлено длиннее, чем значение атрибута alt. Однако имейте в виду, что некоторые браузеры обрезают слишком длинный текст (например, всплывающие подсказки и т. д.). Например, основной браузер Mozilla может отображать только первые 60 символов. Это считается ошибкой Mozilla , и вам следует об этом знать.
Подумайте, прежде чем использовать
Мой совет — сохраняйте суть вашего альтернативного текста. В большинстве приложений его следует оставить пустым, alt="" (обратите внимание, что между кавычками нет пробелов). Подумайте об этих изображениях: какую информацию они предоставляют тем, кто их просматривает, какие слова вы должны использовать, чтобы описать их, или какую информацию вы должны предоставить людям, которые не могут видеть изображения? Действительно ли поможет тому, кто не видит изображения, написать альтернативный текст как «Фото: Генеральный директор стоит возле здания, в сером костюме и черном галстуке, смотрит в небо»? Если ты так думаешь, то напиши. Я считаю, что во многих случаях лучше оставить заменяющий текст пустым.
Для атрибута title сложно дать строгие инструкции по использованию. В основном я использую его для ссылок, которые не требуют пояснений, например, когда один и тот же текст ссылки находится на одной и той же странице, но на разных связанных страницах. Иногда для некоторых кнопок или элементов формы предоставляется более описательный текст.
более подробное описание
Если изображение требует более длинного описания, чем ограничения атрибута alt, есть несколько вариантов.
Атрибут longdesc можно использовать для предоставления ссылки на отдельную страницу, содержащую текстовое описание изображения. Это означает ссылку зрителя на другую страницу, что может вызвать затруднения в понимании. Кроме того, поддержка браузерами атрибута longdesc непоследовательна и не очень хороша.
Атрибут longdesc может содержать ссылку на другую часть текущего документа (привязку) вместо ссылки на другую страницу. В сносках «Доступность» Энди Кларк дает хорошее объяснение того, как ее применять.
Ссылки описания (D-ссылки) могут использоваться в качестве дополнения к длинному описанию. Ссылка на описание — это обычная ссылка на страницу, содержащая замещающий текст. Ссылка размещается рядом с изображением и доступна во всех браузерах. Есть много разных мнений по поводу его эффективности, и лично мне это замечание не нравится. WCAG также в своем рабочем проекте HTML Techniques для WCAG 2.0 ссылки на описания «устарели».
Если длинное описание изображения полезно любому зрителю, возможно, вы захотите просто отобразить его в том же документе, а не ссылаться на другие страницы или скрывать его. Так что прочитать может каждый. Это простой, низкотехнологичный подход.