Веб-дизайн


Как писать alt-тексты


 Особого внимания заслужи­вает атрибут alt тега IMG, предназначенный для запи­си текстового эквивалента изображения. Значением этого атрибута может быть строка символов, содержащая любые подстановки (например,  ), но не содержащая дру­гих тегов. (Впрочем, сам тег IMG можно вставить внутрь парного тега логического форматирования — например, HI, — чтобы приписать его alt-тексту соответствующую структурную роль и средства выделения в неграфических броузерах.)

Главный принцип, который нужно при этом иметь в ви­ду, формулируется так: alt-текст должен давать текстовый эквивалент информации, содержащийся в изображении, а не некую метаинформацию о самом этом изображении. С этой точки зрения исключительно неуместно смотрятся

36

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

• Для распорок (стр. 237) и декоративных элементов, не несущих никакой информации, обязательно указывать пустой alt-текст (alt=""). Как ни странно, этот про­стейший случай не является значением по умолчанию, так что автор должен сам позаботиться об обнулении alt-текста во всех вспомогательных изображениях.

• Для маркеров элементов списка пользуйтесь или после­довательными номерами (в текстовых броузерах и осо­бенно при чтении страницы вслух они сильно облегчают восприятие даже тех списков, которые «в графике» луч­ше смотрятся без нумерации), или же тем символом, который обычно используется для этой цели в текстовых списках — звездочкой (*).

• Для  разделителей,  аналогичных  по функции  тегу HR (стр. 203), подходящим alt-текстом будет ряд небук­венных значков — например, "======" или "******".


С другой стороны, такое решение неплохо смотрится только в текстовых броузерах вроде Lynx, тогда как владельцам речевых броузеров, скорее всего, не очень-то понравится слушать монотонное «знак равенства, знак равенства, знак равенства...»

• Для кнопок панелей навигации (стр. 208) и всех прочих изображений-ссылок разумно принять особое правило оформления alt-текстов (например, я рекомендую за­ключать их в квадратные скобки). Это следует делать не только для того, чтобы ссылки легко было найти в текстовом эквиваленте страницы, но и для отделе­ния alt-текстов друг от друга: дело в том, что, если графические вставки идут одна за другой без пробелов, их alt-тексты также не будут ничем разделены, если только пробелы или другие символы-разделители не предусмотрены в них самих.

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

37

броузеры несколько переопределили семантику атрибута alt: начиная с че­твертых версий броузеры Netscape и Microsoft не только показывают alt-текст на месте отсутствующей графики, но и выводят его в виде «всплыва­ющей подсказки» (floating tip), возникающей при поднесении курсора мыши к изображению. С одной стороны, это нововведение заставит визуальных дизайнеров внимательнее относиться к расстановке alt-текстов на своих страницах — не писать туда что попало и не забывать о пустых alt-текстах у вспомогательных изображений. С другой стороны, непосредственное уча­стие alt-текстов в процессе интерактивного исследования страницы заста­вляет дизайнера отказаться от дословного воспроизведения в alt-текстах содержимого графических вставок: сейчас не редкость страницы, в ко­торых, например, alt-тексты дают расширенные пояснения для слишком лаконичных или же вообще лишенных текста кнопок навигации.


Содержание раздела