Советы по использованию атрибута ALT для изображений
Игнорирование дизайнерами атрибута alt приводит к тому, что пользователи текстовых браузеров, программ для чтения информации с экрана и других нетрадиционных устройств и браузеров видят на экране вместо изображений что-то вроде [IMAGE] [IMAGE] [IMAGE] [IMAGE]. Отсутствие в тегах атрибута аlt также будет считаться несоответствием требованиям WM и ошибкой службы проверки кода XHTML. Используйте атрибут аlt для каждого изображения (http://www.w3.org/WAI/GL/WCAG20/checkpoints.html) для описания его предназначения.
Пустой атрибут alt - ваш друг
Для изображений, не имеющих смысловой нагрузки, например прозрачных GIF-отступов (если вы все еше применяете их), используйте alt = ", также известный как null alt. He следует запутывать пользователя, придумывая описания для таких служебных изображений. Используйте пустой атрибут аlt для изображений, имеющих только визуальную (не семантическую) нагрузку.
Используйте атрибуты alt, имеющие смысл для ваших посетителей
Постарайтесь использовать атрибуты alt, понятные посетителям вашего сайта, а не только вам и вашим коллегам. Например, для логотипа, который служит также ссылкой на главную страницу, используйте атрибут alt = "Главная
страница нашей компании", а не alt="our_company__logo rev3 " или alt= "Логотип нашей компании". Для пользователя с ослабленным зрением будет не очень интересно узнать о том, что изображение, которое он не видит, является логотипом. Информация о том, что, щелкнув по нему, он вернется на главную страницу сайта, полезнее.
Постарайтесь не использовать приложения, создающие атрибуты alt вместо вас.
Скорее всего, вы получите бессмысленные атрибуты, созданные из имен файлов.
Иными словами, никогда не заставляйте робота делать работу человека.
Не доверяйте приложениям выполнение работы человека
Не стоит полагать, что с вашими атрибутами аlt все в порядке лишь потому, что ваш сайт прошел проверку Bobbys УШ. или тесты на соответствие требованиям Section 508. Эти тесты может пройти любая страница, все атрибуты alt которой имеют значение "миккимаус" или являются пустыми. Ни одна программа не сможет определить, подходят ли ваши alt к используемым изображениям.
Атрибут alt создан не для контекстных подсказок
Некоторые популярные браузеры ошибочно отображают атрибут аlt как контекстную подсказку, когда пользователь наводит указатель мыши на изображение. Несмотря на то что миллионы пользователей уже привыкли к тому, что alt - это контекстная подсказка, это не очень хорошо по нескольким причинам. Текст аlt предназначен для повышения доступности сайта и не является элементом его «украшения». (Для контекстных подсказок можно использовать атрибут title.) Требования W3C четко указывают на то, что текст атрибута alt должен быть виден, только когда изображения недоступны
Атрибут аlt задает альтернативный текст в тех случаях, когда изображение невозможно отобразить. Пользовательские устройства должны отображать этот текст, если они не поддерживают изображения или некоторые типы изображений либо если в браузере отключена функция загрузки изображений (http://www.w3.org/TR/REC-html4<:)/struct/objects.html#h-13.2)..
Ни один браузер не должен показывать текст alt, описывающий то, что зрячий пользователь и так видит. Но IE/Windows, например, поступает именно так (рис. 14.6), а впервые это было замечено в Netscape для Windows. Конечно, это не является проблемой, если только вы не начнете создавать «творческие» тексты alt, которые не смогут выполнять свою основную функцию - объяснение сути изображений людям, которые не могут их просмотреть.
Не использовать alt для фоновых изображений
Новички в повышении доступности сайта часто спрашивают, следует ли использовать атрибут alt для фоновых изображений. Это логичный и разумный вопрос, на который есть простой ответ - нет. На самом деле даже при желании у вас бы не получилось это сделать. В CSS нет атрибута alt. (Например, нет атрибута alt для фонового изображения в теге <body>.)
Если же фоновое изображение несет важный смысл, который не дублируется основным текстом страницы, например, если весь текст вашей Web-страницы состоит из фразы «Он был честным человеком», а в качестве фонового изображения CSS служит портрет А. Линкольна, можно попробовать включить текст «Президент А. Линкольн» внутрь атрибута title элемента body или table summary, если используются таблицы. Или же можно вставить описание в тег noscript, предположив, что те. кто не может просматривать изображения, используют не поддерживающие JavaScript браузеры.
Зачем нужна DOM-модель
Так как getElementByld является методом объектной модели документа W3C DOM, совместимые браузеры пропустят его из-за применения условного оператора if, не поддерживающие модель DOM браузеры не поймут getElementByld и перейдут к странице, содержимое которой им доступно.
Переадресация JavaScript обнуляет список функции Назад в браузере, и это нехорошо. Но вам необязательно использовать в этой ситуации window, location. Вы можете применить любой удобный вам и вашим пользователям способ.
Преимущества
Нет необходимости создавать, проверять и постоянно обновлять сложный скрипт по определению версии браузера пользователя. Мы не проверяем версии браузеров, мы контролируем совместимость со стандартами W3C. Очень просто, логично и выгодно.
Недостатки
Как уже упоминалось ранее, этот способ не работает для старых версий Opera, которые думают, что понимают DOM. Вместо того чтобы перейти на предлагаемую страницу с простым контентом, эти браузеры сначала используют знакомый метод getElementByld, а затем «подвисают», будучи не в силах обработать открывгдуюся Web-страницу. Как мы можем решить эту проблему? Мы не можем использовать старомодное определение браузера, так как по умолчанию Opera идентифицирует себя как Internet Explorer. Если мы используем альтернативную страницу для пользователей Netscape , мы можем разместить на нашей «стандартной» странице ссылку-приглашение для пользователей старых версий Opera проследовать на эту более простую страницу.
Недостатком этого способа является то, что данная ссылка будет видна абсолютно всем пользователям, что негативно скажется на образе вашего сайта, а вас могут заподозрить в непрофессионализме. Помимо этого, ссылка вроде Пользователи Opera, нажмите здесь, может заставить и пользователей Opera покинуть динамическую страницу, которую их браузер прекрасно поддерживает.
Атрибуты и свойства: DOM и отличия в Internet Explorer
Атрибуты и свойства в модели DOM
Для каждого тега в XML и HTML может быть указано произвольное количество атрибутов. Атрибут представляет из себя пару строк имя/значение и задается в коде документа:
Здесь у тега input три атрибута: id, type и value со значениями textField, text и 5 соответственно. Заметим, что в HTML регистр букв в имени атрибута не имеет значения, в отличие от XML/XHTML.
DOM позволяет читать атрибуты из скриптов с помощью методов hasAttribute() и getAttribute():
var defaultValue = "";
if (inputTag.hasAttribute("value")) // если есть атрибут value
defaultValue = inputTag.getAttribute("value"); // читаем атрибут value
Можно и менять атрибуты, для этого существуют методы setAttribute() и removeAttribute():
inputTag.setAttribute("type", "submit"); // меняем тип поля на submit
В наших примерах мы работает с объектом inputTag, который соответствует тегу input документа. У этого объекта есть ряд свойств, некоторые из которых названы так же, как и атрибуты тега:
inputTag.type = "submit"; // меняем тип поля на submit
Если судить по этому примеру, то атрибут type и свойство type ничем не отличаются. У них всегда одно и то же значение, а результат при изменении атрибута такой же, как и при изменении свойства. Более того, если изменить атрибут, то меняется и свойство:
alert(inputTag.type); // показывает: submit
Можно изменить и свойство, атрибут тоже автоматически изменится. Это связано с тем, что браузер автоматически синхронизирует значения атрибутов и свойств. И все же они не всегда идентичны:
inputTag.setAttribute("type", "abrakadabra"); // присваиваем атрибуту недопустимое значение
alert(inputTag.getAttribute("type")); // показывает: abrakadabra
alert(inputTag.type); // показывает: text
Это хорошо показывает разницу атрибута и свойства: атрибут может быть любой строкой, он лишь показывает, что написано в исходном коде документа. Свойства же отображают текущее состояние тега, они не могут содержать недопустимых значений.
Еще более явной становится разница, если посмотреть на атрибут value и свойство value.
inputTag.setAttribute("value", "10"); // не меняет текст в текстовом поле inputTag.value = 20; // пишет строку 20 в текстовое поле
Здесь атрибут и свойство имеют разные значения: атрибут value определяет начальное значение для текстового поля. Текущее же значение хранится в свойстве value и меняется через него же.
Не всегда у атрибута и связанного с ним по смыслу свойства одинаковые названия. Типичным исключением является атрибут class, которому соответствует свойство className. Часто отличается и тип данных, к примеру значение атрибута onclick (как и в принципе всех атрибутов) строкового типа, а у соответствующего свойства onclick значением является функция.
Реализация атрибутов в Internet Explorer
Разработчики Internet Explorer упростили модель DOM до предела уравняв атрибуты и свойства. В этом браузере следующие две строки абсолютно эквивалентны:
inputTag.setAttribute("abraKadabra", "abcd"); inputTag.abraKadabra = "abcd";
При таком подходе немедленно возникает множество осложнений. Первое связано с тем, что регистр букв в имени свойст играет роль, в то время как в имени атрибутов он игнорируется (как минимум в HTML). В Internet Explorer же следующие две строки вдруг приобретают разное значение:
inputTag.setAttribute("abrakadabra", "abcd1"); inputTag.setAttribute("abraKadabra", "abcd2");
Эти строки устанавливают два разных свойства объекта. Возникает вопрос — что вернет в этой ситуации inputTag.getAttribute("ABRAKADABRA")? Ответ: либо abcd1, либо abcd2. В Internet Explorer getAttribute() ищет первое свойство с именем, которое соответствует запрошенному атрибуту за вычетом регистра букв. Если таких свойст несколько, то невозможно сказать, какое именно он вернет.
Следующее осложнение возникает с атрибутами, название которых не идентично названию свойства:
inputTag.setAttribute("class", "my-class");
Эта строчка корректно изменит класс тега во всех браузерах. Лишь в Internet Explorer она установит свойство class, не имеющее никакого значение — нужное свойство называется className. С этой проблемой сталкиваются настолько часто, что она даже заслужила упоминания в :
When setting the CLASS attribute using this method, set the sName to be "className", which is the corresponding Dynamic HTML (DHTML) property.
Иначе говоря, для изменения класса рекомендуется установить несуществующий атрибут className (менять регистр букв нельзя!). С такой рекомендацией Microsoft сложно согласиться — в кроссбраузерных приложениях придется устанавливать два атрибута, один из которых не имеет никакого смысла. Проще изменить свойство className, это работает одинаково надежно во всех браузерах.
Но на этом проблемы не кончаются. Как уже было сказано, тип атрибутов и свойств не обязательно одинаков. Чаще всего проблемы возникают при установке обработчиков событий:
inputTag.setAttribute("onclick", "alert('clicked')");
После выполнения этого кода в Internet Explorer щелчки на текстовом поле не вызовут никакой реакции. Причина станет ясна, если сравнить значения свойства onclick в Internet Explorer и каком-нибудь другом браузере:
alert(typeof inputTag.onclick); alert(inputTag.onclick);
Это покажет, что Internet Explorer записал в свойство onclick строку, в то время как другие браузеры корректно преобразовали значение атрибута в функцию. А при возникновении события Internet Explorer не находит в свойстве onclick функции, которую можно выполнить. Чтобы присвоить обработчик события в Internet Explorer надо написать:
inputTag.setAttribute("onclick", function() {alert('clicked')});
Стандарт DOM, однако, явно предписывает, что второй параметр метода setAttribute() является строкой. Такой код, опять же, не станет работать ни в одном браузере, корректно реализующем стандарты.
Выводы
К сожалению, Internet Explorer на данный момент все еще является лидером на рынке браузеров. Из-за этого в большинстве веб-приложений приходится поддерживать Internet Explorer, то есть использование атрибутов весьма усложнено. Internet Explorer 7.0, который должен скоро выйти, вряд ли улучшит ситуацию, серьезных улучшений движка до версии 8.0 точно не будет (да и там это еще очень сомнительно). Вытеснение этого браузера из интернета в ближайшее время тоже не ожидается.
Проще всего, конечно, вообще отказаться от использования атрибутов и пользоваться только свойствами. Для большинства приложений этого достаточно, но существуют задачи, где без атрибутов не обойтись (к примеру копирование DOM-дерева с параллельным его изменением). В таких случаях можно выполнять для Internet Explorer другой код, который дает похожий результат (возможно, что не идеальный, но лучше, чем вообще никакого результата):
document.body.setAttribute("class", "attribute-test"); if (document.body.className == "attribute-test") { // Атрибуты работают корректно (не Internet Explorer или будущая исправленная версия) // Работаем с атрибутами } else { // Использовать атрибуты нельзя (Internet Explorer) // Альтернативный код только для Internet Explorer
Добавляем анигиф предзагрузки больших изображений через CSS
Загрузка больших изображений может занимать некоторое время. Полезно давать пользователю знать, что этот процесс происходит. Обычно это достигается с помощью Java - скрипта, который выводит на месте будущей картинки маленький анигиф предзагрузки.
Однако, существует существенно более простой способ достичь того же самого, особенно, если на странице выводится множество больших изображений.
1. Находим иконку предварительной загрузки
Существует много сайтов, позволяющих выбрать и настроить изображения предзагрузки. Например, вот этот. Изображение (размер файла) не должно быть слишком большим. Например, возьмем такое:
2. Пишем CSS-код
Код минимален, создается всего одно просто правило следующего содержания:
Вместо load.gif, естественно, должно быть название вашей иконки предзагрузки.
3. Пишем HTML-код
Чтобы иконку предзагрузки можно было центрировать относительно размеров изображения, поместим изображение в div-контейнер, которому зададим размеры изображения:
Готово.