Написание эффективного ALT-текста для изображений на сайтах Туркменистана

Простой вставки ALT-текста недостаточно для обеспечения доступности изображений — текст также должен быть эффективно написан. Узнайте, как этого добиться…

Любой, кто что-либо знает о веб-доступности, знает, что изображениям нужен альтернативный или ALT-текст, назначенный им. Это связано с тем, что программы чтения с экрана не могут понимать изображения, а скорее читают вслух присвоенный им альтернативный текст. В Internet Explorer мы можем увидеть этот ALT-текст, просто наведя указатель мыши на изображение и взглянув на появившуюся желтую подсказку. Другие браузеры (правильно) этого не делают. HTML для вставки текста ALT:

Но разве не может быть навыка написания ALT-текста для изображений? Вы просто вставляете туда описание, и все готово, верно? Ну типа. Конечно, это не ракетостроение, но есть несколько рекомендаций, которым вы должны следовать…

Изображения разделителей и отсутствующий текст ALT

Изображениям-разделителям всегда следует назначать нулевой текст ALT или alt=»» . Таким образом, большинство скринридеров полностью проигнорируют изображение и даже не объявят о его наличии. Изображения-разделители — это невидимые изображения, которые используются на большинстве веб-сайтов. Их цель, как следует из названия, — освободить место на странице. Иногда невозможно создать нужный вам визуальный дисплей, поэтому вы можете вставить изображение (указав его высоту и ширину) и вуаля, у вас есть дополнительное пространство, которое вам нужно.

Не все используют этот нулевой текст ALT для изображений-разделителей. Некоторые веб-сайты придерживаются alt=»spacer image». Представьте, как это может раздражать пользователя программы чтения с экрана, особенно если у вас их десять подряд. Программа чтения с экрана произнесла бы «Image, spacer image» десять раз подряд (программы чтения с экрана обычно произносят слово «Image» перед чтением его ALT-текста) — теперь это бесполезно!

Другие веб-разработчики просто не используют атрибут ALT для изображений-разделителей (и, возможно, других изображений). В этом случае большинство программ для чтения с экрана будут считывать имя файла, которое может быть «newsite/images/onepixelspacer.gif». Программа чтения с экрана объявит это изображение как «Изображение, косая черта изображений новостного сайта с косой чертой в один пиксель в виде точки gif». Представьте, как бы это звучало, если бы их было десять подряд!

Пули и значки

С маркерами и значками следует обращаться почти так же, как с изображениями-разделителями, поэтому им следует назначать нулевой альтернативный текст или alt=»». Подумайте о списке пунктов с причудливым маркером, предшествующим каждому пункту. Если текст ALT «Пуля» назначен каждому изображению, то «Изображение, маркер» будет прочитано вслух программами чтения с экрана перед каждым элементом списка, что увеличит время работы со списком.

Иконкам, обычно используемым для дополнения ссылок, также следует присваивать alt=»». Многие веб-сайты, размещающие значок рядом с текстом ссылки, используют текст ссылки в качестве ALT-текста значка. Программа чтения с экрана сначала объявит этот ALT-текст, а затем текст ссылки, а затем дважды произнесет ссылку, что, очевидно, не обязательно.

(В идеале маркеры и значки должны вызываться как фоновые изображения через документ CSS — это полностью удалит их из документа HTML и, следовательно, устранит необходимость в каком-либо описании ALT.)

Декоративные изображения

Декоративным изображениям также следует присвоить нулевой альтернативный текст или alt=»». Если изображение просто приятно для глаз, то пользователю программы чтения с экрана не нужно даже знать, что оно есть, а информирование о его присутствии просто увеличивает шумовое загрязнение.

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

Создаём Сайты в Туркменистане Деловые сайты-визитки в Ашхабаде для предпринимателей и компаний

Навигация и текст, встроенный в изображения

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

То же самое относится к любому другому тексту, встроенному в изображение. Текст ALT должен просто дословно повторять текст, содержащийся в этом изображении.

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

Логотип компании

Веб-сайты, как правило, различаются тем, как они применяют текст ALT к логотипам.

Одни говорят: «Название компании», другие — «Логотип названия компании», а третьи описывают функцию изображения (обычно это ссылка на домашнюю страницу), «Вернуться на главную». Помните, текст ALT всегда должен описывать содержимое изображения, поэтому первый пример, alt=»Название компании», вероятно, будет лучшим. Если логотип является ссылкой на домашнюю страницу, то об этом можно эффективно сообщить через тег title.

Заключение

Написать эффективный ALT-текст не так уж сложно. Если это декоративное изображение

Вы приходите к нам с задачей, а мы даем вам решение.