Альтернативный текст для изображений

Наиболее доступным форматом любого контента в вебе является простой текст. Простой текст невероятно податлив, он может быть изменен практически любым способом, чтобы быть доступным при любых расстройствах. Пользователи без проблем со зрением могут просто читать текст, для слабовидящих пользователей текст будет зачитан, а если у пользователя проблемы со зрением и слухом, текст будет выведен на дисплей Брайля.

Однако большинство сайтов содержат не только текст. У нас есть не столь гибкие виды контента, такие как изображения. Чтобы сделать альтернативные формы контента более доступными, мы должны предоставить для них текстовую альтернативу.

В случае изображений это обычно делается с помощью атрибута alt. По общему правилу, этот атрибут должен быть у всех изображений. Однако это не означает, что альтернативный текст обязателен для каждого изображения. Есть три состояния, которые могут быть у атрибута alt:

1. Определенное — когда в атрибуте имеется описательный текст, например, alt="A dog". В этом случае, скринридер будет читать предоставленный текст, когда пользователь сталкивается с изображением и, как правило, передает контекст этого изображения.
2. Пустое — когда атрибут есть, но оставлен пустым, то есть alt="". В этом случае скринридер пропустит изображение, как будто его не существует.
3. Невалидное (плохая практика) — когда атрибут полностью пропущен. Тогда вместо alt скринридер будет читать значение атрибута src. Это бесполезно для пользователя и поэтому не рекомендуется оставлять изображения в таком состоянии.

В этой статье мы рассмотрим случаи применения первых двух состояний и использование различных типов альтернативного текста.

Альтернативный текст для различных типов изображений

В целом у нас есть 7 типов изображений. Выбор альтернативного текста различен для каждого из них.

1. Текст в виде изображения

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

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

<img src="example.jpg" alt="The quick brown fox jumped over the lazy dog">  

2. Информативные изображения

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

Альтернативный текст информативных изображений должен передавать ту же информацию, что и изображение. Это может быть также просто, как передать содержание изображения на словах. Например, на следующем скриншоте, небольшие изображения используются в качестве меток для каждого раздела:

<section>  
  <h3><img src="location. png" alt="Location"></h3>
  <p>26 Eletu Ogabi...</p>
</section>
<section>  
  <h3><img src="cutlery.png" alt="Cuisine"></h3>
  <p>Continental</p>
</section>
<section>  
  <h3><img src="clock.png" alt="Opening Hours"></h3>
  <p>Monday 12:00 - 22:00 ...</p>
</section>

Если же цель изображения это создание какого-то особого впечатления, тогда физическое описание содержимого изображения может не соответствовать нашей цели. Вместо этого мы можем передать чувства, получаемые от просмотра изображения, чтобы альтернативный текст лучше передавал его суть.

Например, на сайте по выгулу собак следующее изображение может быть в разделе about.

Назначение изображения в данном контексте — показать, что собаки рады такому уходу, соответственно, альтернативный текст должен передать это чувство.

<img src="example.png" alt="Your dogs will have the best time!">  

3.

Функциональные изображения

Функциональные изображения отображают какие-либо действия на сайте. В отличие от информативных изображений, которые дают пользователю чистую информацию, функциональные изображения используются, чтобы показать, что пользователю доступно какое-либо действие. Эти изображения, как правило, привязаны к интерактивным элементам типа ссылок или кнопок. Альтернативный текст функционального изображения должен ясно показывать действие, которое может быть произведено.

В примере ниже кнопка используется для показа фильтра по ресторанам, представленным на изображении, поэтому альтернативный текст показывает функцию кнопки.

<img src="example.png" alt="Filter Restaurants">  

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

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

В таких случаях надо оставить атрибут alt пустым. Это позволит скринридеру просто пропустить изображение, так как оно бесполезно для пользователя с нарушениями зрения.

<img src="background.png" alt="">  

5. Комплексные изображения

Комплексные изображения это разновидность информативных изображений, содержащая детальную или существенную информацию. Например, графики или диаграммы. Для таких изображений стоит предоставлять не только краткое, но и полное описание.

Краткое описание делается в атрибуте

alt. Полное описание может быть задано в каком-либо другом элементе, который будет привязан к изображению с помощью атрибутов longdesc/ aria-labelledby или с помощью тегов <figure> и <figcaption>.

Вот образец задания краткого и полного описаний с помощью элементов <figure> и <figcaption>:

<figure role="group">  
  <img src="customers.png" alt="Line chart showing the number of customers over a period of 12 weeks">
  <figcaption>
    In the first week, there were 13,000 customers.  This slowly rose over the next few weeks, then rose drastically in week 4 to 37,000 customers. This was maintained until week 7, where there were less than 10,00 customers. In week 8, the number of customers rose again to 35,000, but this dropped back down in week 9. Since then, the number of customers has risen, and in week 12 there were 50,000 customers.
  </figcaption>
</figure> 

С той же целью мы можем использовать и атрибут longdesc:

<img src="customers.png"  
     alt="Line chart showing the number of customers over a period of 12 weeks"
     longdesc="#customers-chart-desc">
<p>  
    In the first week, there were 13,000 customers. This slowly rose over the next few weeks, then rose drastically in week 4 to 37,000 customers. This was maintained until week 7, where there were less than 10,00 customers. In week 8, the number of customers rose again to 35,000, but this dropped back down in week 9. Since then, the number of customers has risen, and in week 12 there were 50,000 customers. 
</p>  

Такого же эффекта можно добиться, используя вместо

longdesc атрибут aria-labelledby, который работает так же.

6. Группы изображений

Бывают случаи, когда группа изображений используется вместе, чтобы донести какую-то одну вещь. Например, пятизвездочная система рейтинга представляется в виде группы из 5 отдельных изображений звезды.

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

<img src="star.png" alt="4 out of 5 stars">  
<img src="star.png" alt="">  
<img src="star.png" alt="">  
<img src="star.png" alt="">  

7. Карты изображений

Наконец, карты изображений, то есть изображения, разбитые на множественные секции, у каждой из которых есть своя интерактивная область. Они создаются путем сочетания тегов <img> и <map>.

Для таких типов изображений рекомендуется заполнять атрибут как в основном элементе <img>, так и в каждом отдельном элементе <map>.

<img src="orgchart.png"  
     alt="Board of directors and related staff: "
     usemap="#Map">
<map name="Map">  
 <area shape="rect"
          coords="176,14,323,58"
          href="[…]"
          alt="Davy Jones: Chairman">
    […]
    <area shape="rect"
          coords="6,138,155,182"
          href="[…]"
          alt="Harry H Brown: Marketing Director (reports to chairman)">
    [
</map>  

Где и как использовать атрибут alt?

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

1. Является ли изображение текстом? Если да, тот же текст надо повторить и в атрибуте. Например, alt="Same text as in image".
2. Используется ли изображение в чисто декоративных и оформительских целях? Если да, то оставьте атрибут пустым, так он будет проигнорирован скринридерами, например, alt="".
3. Представляет ли изображение действие, которое может совершить пользователь? Если так, то альтернативный текст должен описывать действие, производимое при взаимодействии с элементом, например, alt="Add to Cart".
4. Является ли изображение чисто информативным? В этом случае альтернативный текст должен содержать ту же информацию, что и изображение, например, alt="Location".
5. Наконец, изображение содержит какую-либо информацию, не представленную на странице в текстовом виде? Если да, то эта информация должна быть добавлена в альтернативный текст, иначе, оставьте атрибут alt пустым и изображение будет проигнорировано скринридерами.

Alt текст для изображения атрибут обязательный

Alt текст для изображения нужно подписывать обязательно. Это нужно для оптимизации картинки, чтобы роботы проще ее находили. У меня был постоянно вопрос каким шрифтом прописать атрибут alt: русскими или латинскими буквами. Исправляла это не один раз, во всех картинках. Но сейчас знаю, что нужен русский шрифт для атрибута и ключевое слово. Title могут быть одинаковыми с alt, тоже русскими буквами. Ключевые слова в заголовке пишутся обязательно в первой картинке.  Но если изображений в статье много, то ключи повторяются еще в других названиях.  Первое изображение, должно быть ссылкой, для этого отметим его, как медиафайл.

Чтобы сделать необходимые надписи нужно нажать на вставленную картинку, изображение выделится и появится рисунок карандаша. Кликнем по карандашу. Откроется новое окно с названием » параметры изображения». Здесь есть нужные строки для записей.

В правой стороне окна есть возможность редактирования и замены изображения.  Можно картинку повернуть и нажать «заменить». При этом рисунок из вертикального положения может перейти в горизонтальный, или наоборот. Можно сделать подпись картинки, но оставляю эту строку пустой. Когда подпишем title, то на картинке появится всплывающая подсказка, при наведении на рисунок  левой кнопки мыши.

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

Ссылок на медиафайлы получается  много, потому делаю на них запрет в метатеге robots. Понемногу их количество в индексах уменьшается. Но после того как установила плагин Clearfy Pro, проблема с дублями медиафайлов окончательно исчезла. Кроме того, чтобы экземпляров картинок в библиотеке стало меньше, в настройках «медиафайлов» размеры выставляю «0». Тогда останется только одна картинка, но не 3 разных размера, как это предполагает Word Press.

Приятно когда в комментариях открываются фотографии друзей — аватары. Однако, если мы в настройках «обсуждение» отмечаем аватары, то все они должны быть подписаны. Иначе появляются ошибки — пустые alt описания. Потому аватары совсем не отмечаю. Даже запрещаю в плагине Clearfy Pro.

Alt текст со ссылкой открывается в браузерах

Когда мы заполнили строки alt и title и оставили ссылку, на медиафайл, картинка в браузере открывается одна, без текста. Кликнув по ней правой кнопкой получим контекстное меню.

По ссылкам контекстного меню есть активные переходы. В том числе находим картинку в Яндексе. Например, здесь сможем узнать есть ли она в составе картинок Яндекса. Там же показаны похожие изображения. О правилах рисунков постоянно вносятся изменения, видимо они будут продолжаться.

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

советов и подсказок | Инициатива веб-доступности (WAI)

в учебнике по изображениям

• Выбор подходящих вариантов текста:
  Представьте, что вы читаете вслух веб-страницу по телефону тому, кому нужно ее понять. Это должно помочь вам решить, какую информацию или функцию имеют изображения (если таковые имеются). Если кажется, что они не имеют никакой информативной ценности и не являются ссылками или кнопками, возможно, их можно считать декоративными.

• Приоритет информации в текстовом варианте:
  Старайтесь размещать самую важную информацию в начале.

• Длина альтернативного текста:
  Текст alt должен быть максимально кратким описанием назначения изображения. Если требуется что-то большее, чем короткая фраза или предложение, лучше использовать один из методов длинного описания, обсуждаемых в сложных изображениях.

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

• Пунктуация в пределах alt атрибутов:

  • Как и для любого текста, использование знаков препинания в альтернативном тексте облегчает понимание информации. В частности, не забудьте добавить символы пробела в alt текст, когда между изображением и соседним текстом нет пробела, чтобы избежать слияния слов при их чтении программой чтения с экрана.

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

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

• Графика SVG:

  • На графику

    SVG можно ссылаться в атрибуте src элемента , как и на другие форматы изображений (PNG, JPEG, GIF). В этом случае примеры из этого руководства можно использовать и с SVG.

  • Поскольку изображения SVG состоят из тегов, таких как HTML, их код также можно использовать напрямую в HTML5.

    В этом случае вы можете предоставить текстовую альтернативу в [другой код svg]

  • Логотипы:
    На изображения логотипов с текстом не распространяются некоторые требования доступности. Например, нет требований к минимальной контрастности.

  • Справочная информация о предоставлении текстовых альтернатив нетекстовому содержимому в статье «Как люди с ограниченными возможностями используют Интернет».
  • Проверьте доступность изображений на вашем сайте: Быстрые проверки Текстовые альтернативы изображениям.
  • Примеры хорошей и плохой практики выбора текстовых альтернатив можно найти в разделе «До и после демонстрации» (BAD).
  Вернуться к началу

  Альтернативный текст для изображений | Доступность

  Содержание

  • Введение
  • WCAG 2.0 Состояния
  • Стандартное изображение
  • Изображение с текстом
  • Связанное изображение
  • Декоративное изображение
  • Комплексное изображение
  • Друпал
  • Ресурсы и инструменты

  Введение

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

  Наиболее популярным средством чтения с экрана, используемым сообществом OSU, а также средством чтения с экрана, предоставляемым в компьютерных классах, является JAWS. Средства чтения с экрана линеаризуют содержимое веб-сайта, считывая HTML-код, чтобы люди, использующие программное обеспечение, могли взаимодействовать с веб-сайтом. Большинство средств чтения с экрана работают во всей вычислительной среде, но для наших целей наиболее важным в этом разделе является то, как они взаимодействуют с веб-сайтами.

  Всегда требуется замещающий текст, способ его написания может различаться в зависимости от типа изображения. Большинство программ для чтения с экрана объявляют о наличии изображения, добавляя к замещающему тексту слово, такое как «графика», поэтому следует избегать использования таких слов, как «фотография», «графика» и «изображение», в замещающем тексте, если только это не помогает. передать дополнительное значение, которое важно знать пользователю.

  Прослушайте первый пример изображения ниже без замещающего текста в JAWS или просмотрите расшифровку.

  В следующих примерах показано несколько типов изображений и показано, как замещающий текст следует использовать в каждом случае.

  WCAG 2.0 Государства

  1.1.1. Нетекстовое содержимое: Все нетекстовое содержимое, представляемое пользователю, имеет текстовую альтернативу, которая служит той же цели, за исключением [некоторых исключений]. (Уровень А)

  Стандартное изображение

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

  Например, если приведенное ниже изображение бывшего вице-провоста по студенческим вопросам Ларри Роупера использовалось в статье об OSU или в объявлении о мероприятии или программе, замещающий текст должен просто объявить, что это за изображение.

  HTML:

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

  HTML:

  Изображение с текстом

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

  Например, альтернативный текст этого несвязанного изображения должен состоять только из слов изображения.

  HTML:

  Связанное изображение

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

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

  HTML:

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

  Многие изображения используются на веб-сайтах только для визуального интереса, они не предназначены для передачи какого-либо значения или важной информации. В этом случае лучше всего использовать то, что называется замещающим текстом NULL или пустым замещающим текстом.

  Альтернативный текст NULL — это просто две кавычки после alt=. Обратите внимание, что атрибут alt по-прежнему присутствует, это всегда важно. Когда программа чтения с экрана встречает нулевой замещающий текст, она полностью пропускает изображение, даже не сообщая о его наличии. Кто-то, кто полностью видит, легко пропустит декоративное изображение, нулевой альтернативный текст позволяет любому, кто использует программу чтения с экрана, делать то же самое.

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

  Добавление замещающего текста null в системе управления контентом (CMS), такой как Drupal, возможно, но не так просто, как оставить поле замещающего текста пустым. Узнайте больше в разделе Drupal ниже.

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

  HTML:

  Так как средство чтения с экрана пропускает замещающий текст NULL, аудиопример 9 отсутствует.0003

  Сложные изображения

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

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

  Традиционным способом предоставления этого дополнительного контекста был атрибут, называемый длинным описанием. Он не так широко поддерживается браузерами и редко реализуется правильно. Атрибут longdesc служит ссылкой в ​​элементе изображения на другую страницу, содержащую только описание изображения. longdesc предоставляет доступ к ссылке только через программу чтения с экрана, поэтому только тот, кто использует программу чтения с экрана, может знать о существовании более подробной информации.

  HTML:

  Связанный файл longdesc или содержимое страницы должны содержать описание, подобное следующему:

  • На приведенной ниже диаграмме показаны тенденции с 2007 по 2011 год, в которых общее количество зачисленных студентов OSU сравнивается с количеством новых студентов каждый учебный год.
  • В 2007-2008 году обучалось 19753 студента, из них 5420 новых студентов.
  • В 2008-2009 году обучалось 20320 студентов, из них 5675 новых студентов.
  • В 2009-2010 году обучалось 21969 студентов, из них 6461 новых студентов.
  • В 2010-2011 году обучался 23761 студент, из них 6879 новых студентов.

  Друпал

  В Drupal альтернативный текст добавляется через поле Alt Text при вставке изображения.

  Чтобы добавить альтернативный текст NULL в Drupal, вы должны отредактировать страницу в формате ввода «Код PHP». Он находится непосредственно в разделе «Тело», когда вы просматриваете страницу для редактирования. В коде PHP вы должны работать в реальном коде, найти изображение, ищущее , расположите альтернативный текст внутри этого элемента и убедитесь, что используется правильное кодирование — атрибут alt должен соответствовать атрибуту в предыдущем предложении. Сохраните свою страницу, и у вас будут изображения с нулевым замещающим текстом. Если вы когда-нибудь измените формат ввода, вам придется делать это снова и снова.

  Длинное описание может быть добавлено в Drupal путем кодирования HTML и ссылки на другую страницу с длинным описанием, однако связанный сайт должен быть размещен на странице без какого-либо другого контента, поэтому шаблон Drupal не будет идеальным.