Отсутствие alt-значений в информационных иллюстрациях

Отсутствие антиалиасинга или не соответствие его фону страницы

Штрафной балл: 0.1

 

Разрешение экрана монитора очень низкое — 96 dpi. Графические точки, из которых собирается изображение (пикселы), видны невооружённым глазом и на линиях заметны пиксельные ступеньки — алиасинг.

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

Подробнее об этой погрешности рассказано в лекции 5.

Штрафной балл: 0.1

 

Текст, который является значением атрибута alt(альтернативный текст), часто опускают при кодировании тега IMG, а совершенно напрасно!

Пользователь любит прогулки по Интернет с «потушенными фарами» — отключенной в настройках браузера графикой. Зачем он так делает? Ради экономии своих денег и времени, ведь толстая графика бьёт и по тому, и по другому.

Если атрибут altпроигнорирован, пользователь не увидит никаких сообщений о том, какую роль играет картинка на странице (рис. 7.21).

Рис 7.21. Alt-надпись отсутствует

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

Рис 7.22. Alt-надпись присутствует

Существуют браузеры, которые вообще не поддерживают графики, например, текстовый браузер Lynx. Голосовой браузер pwWebSpeek предназначен для слепых людей. Такие люди не увидят картинки, но хотя бы получат о ней представление, услышав её описание.

Существуют браузеры, использующие тактильный ввод-вывод по азбуке Брайля. Другие пользователи работают с Web по телефону. Так, например, устроена система Web-on-Call Voice Browser. Браузеры, установленные в автомобиле, снабжаются речевыми синтезаторами.

Поисковые Интернет-узлы запускают в сеть свои роботы, для сбора информации. Картинки роботы не видят, а alt-тексты читают с удовольствием.

Неверное (неинформативное) содержание alt-надписи

Штрафной балл: 0.1

 

Понятно, что мало написать какой-то текст в качестве значения атрибута alt. Сообщение нужно тщательно продумать, принимая во внимание, что пользователь будет читать или слышать его, не видя изображения.

Сообщение «Это картинка» совсем не годится для альтернативного текста.

Текст «Фото школьного здания. Четырёхэтажная кирпичная постройка с липовой аллеей.» хорошо подходит для изображения, которое любят размещать на главной странице школьные сайты.

Представьте, что человек не видит картинки, а только слушает альтернативный текст. Слова «Это картинка» вызовут раздражение. Короткое «Школа» — информативнее, а текст с липовой аллеей вызовет ещё и положительную ассоциацию (рис. 7.23):

Рис 7.23. Информативная alt-надпись

Если картинка большая, то и альтернативное сообщение может быть достаточно большим. А вот на маленьких картинках длинные тексты обрезаются (рис. 7.24):

Рис 7.24. Обрезанная alt-надпись

Огорчительно, что некоторые браузеры относятся к altне уважительно.

q IE интерпретирует altидеально. Если картинка не загружена, alt-текст записывается в замещающий прямоугольник и показывается во всплывающем окошке при наезде мышиным курсором.

q NN-3 не рисует прямоугольник, не записывает на экран alt-текст и не выводит его при наезде мышиным курсором.

q NN-4 рисует замещающий прямоугольник, не выводит в него альтернативный текст, но показывает его при наезде мышиным курсором. Текст всегда показывается в одну строку и обрезается краями экрана монитора.

q NN-6 и Mozilla рисуют прямоугольник только на время загрузки картинки. Если картинка не загружена, прямоугольник замещается альтернативным текстом, записанным как обычный абзац. Понять, что на этом месте должно быть изображение, практически невозможно.

Независимо от того, как браузеры интерпретируют альтернативный текст, писать его необходимо. Около 90% пользователей видят alt-текст через Internet Explorer. Этот текст выводится на панель Брайля, озвучивается речевым браузером, и его читают роботы поисковых систем.

Вот еще несколько правил записи альтернативного текста.

q Для пустых картинок-распорок и декоративной графики необходимо указывать alt="". Дело в том, что по стандарту HTML у атрибута altнет определенного значения. Это означает, что браузеры вправе помещать в альтернативный текст всё, что угодно.

q Если заголовок или другой текст на странице выполнен в графике, то альтернативный текст должен в точности его повторять.

q Если картинки используются как маркеры списка, записывайте в altпоследовательную цифровую нумерацию. (Значение «маркер» гораздо хуже.)

q Если картинка используются вместо тега HR, записывайте alt="разделитель". (Представьте, что для имитации разделения записано atl="*************". Речевой браузер будет нудно повторять: «символ звездочка, символ звездочка…»)

q Если графическая кнопка используется для навигации, заключайте alt-значение в квадратные скобки — это один из принятых способов оформления текстовых меню. (Пример: alt="[начало]").

Часто на web-страницах неверно используют атрибут altкак всплывающую подсказку для сообщения пользователю дополнительной информации. Для этой цели больше подходит атрибут title. Если в теге IMGзаписаны оба атрибута, то значение altзаписывается на место картинки, а значения titleвсплывает на экран при наезде мышиным курсором.