Декоративные изображения: Как отличить контентное изображение от декоративного — Блог HTML Academy

Содержание

Как отличить контентное изображение от декоративного — Блог HTML Academy

Давайте разберёмся, что такое контентное изображение, что такое декоративное и как их отличить друг от друга. От типа изображения зависит то, как оно будет добавлено на страницу.

Теория

Контентное изображение

Слово контент происходит от английского слова «content» — содержимое. С помощью таких изображений мы можем донести до пользователей полезную информацию. Чтобы добавить контентное изображение к себе на страницу, используйте в разметке <img>. Для изображений такого типа необходимо заполнять атрибут alt, который описывает то, что изображено на картинке.

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

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

Практика

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

Очевидные случаи

Изображение товара в карточке товара, контентное
Карточка товара на сайте EdoqueКарточки товаров на сайте Cadbury

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

Реализация: <img>

Логотип, контентное
Логотип на сайте Haribo-shopЛоготип на сайте EvercodelabПартнёрские логотипы на сайте Specia

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

И также часто встречаются блоки с партнёрскими логотипами. В таких ситуациях логотипы являются контентными изображениями.

Реализация: <img>

Изображения и текст, контентное
Изображение в статье на сайте MeduzaИзображения товара на индивидуальной странице на сайте PichShop

Примеры выше — изображения в статье.

Данный случай ничем не отличается от карточки товара — у нас есть и описание, и изображение, несущие важную для пользователя информацию. Таким образом, изображение является контентным и должно быть сделано тегом <img>.

Реализация: <img>

Вспомогательная иконка, декоративное
Вспомогательные декоративные иконки на сайте MediaMarkt

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

Реализация: background-image для псевдоэлемента

Вспомогательные декоративные иконки на сайте MediaMarkt

Другой пример из того же магазина. Изображение лишь дополняет подпись. Такие изображения лишь поясняют названия и являются декоративными.

Реализация: background-image для всего блока или для псевдоэлемента

Фоновое изображение, декоративное
Фоновая картинка с фруктами на сайте EdoqueПитерское фоновое изображение на сайте Sobor.
gorozhanko.ru

На примерах выше мы можем рассмотреть варианты декоративных фоновых изображений. Для реализации лучше всего подойдёт background-image для всего блока.

Реализация: background-image для всего блока

Спорные моменты

Изображение в промослайдере
Слайдер на сайте Cadbury

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

Реализация: <img>

Слайдер на сайте S7

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

Реализация: background-image для всего блока

Карта с изображением
Карта в блоке с контактами. Макет Девайс.

Под интерактивную карту принято добавлять изображение с картой, на случай если интерактивная карта не загрузилась. Каким же образом её добавлять? Карта несёт информацию об адресе. Например, в макете Девайс с нашего базового интенсива по HTML и CSS. В блоке «Контакты» только по карте можно понять адрес компании, ведь в тексте адрес не продублирован, а значит если изображение потеряется, пользователь потеряет информацию о местонахождении компании. Таким образом, изображения карт относятся к контентным изображениям.

Реализация: <img> (атрибут alt должен описывать изображение, в данном случае — Карта офиса по адресу улица Строителей, 15)

Иконки соцсетей
Социальные кнопки на сайте Haribo

Кнопки с социальными сетями представляют собой более интересный случай. С одной стороны, они являются декоративными, так как являются частью интерфейса сайта, однако, если их картинки не загрузятся — информация всё же пропадёт (пользователь будет не способен понять к какой социальной сети относится каждая ссылка). Таким образом, здесь применяется комплексный подход: внутри ссылки обязательно прописывается поясняющий текст. Изображение на этих кнопках-ссылках декоративные. Для доступного скрытия текста ссылки необходимо добавить класс

.visually-hidden. Описание этого паттерна скрытия можно почитать в нашей статье. Таким образом, при потере CSS-файла, изображение пропадёт, а текст ссылки появится. При нормальной работе сайта пользователь увидит лишь изображение. Также необходимо не забывать про доступность — так как в разметке мы прописываем текст ссылки, то при чтении сайта скринридером, ссылки будут озвучены.

Реализация: background-image для ссылки

Вывод

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

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

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

=========================================================================

  Первое изображение относится к классу контентных, так как это изображение продаваемого товара. Глядя на эту картинку, покупатель может вынести определенную информацию: компания, которая произвела телефон, бренд, цвет и т.д. Второе изображение относится к разряду декоративных, так как оно не несет в себе никакой ценной информации для пользователя. Оно означает то, что означает - абстрактный телефонный аппарат.
Пример 2: изображения в слайдерах и каруселях на главное странице
Очень часто слайдеры и карусели на главное странице относят к декоративным изображениям. Однако это не всегда так. В примере ниже мы видим, что слайдер несет полезную для покупателя информацию о скидках. Поэтому оно автоматически становится контентным. Если же слайдер сделан в качестве украшения сайта или для привлечения внимания посетителя, то он относится к разряду декоративных изображений.
Декоративные изображения Декоративные изображения не добавляют информацию к содержанию страницы или текста, они украшают ее. Как правило, таким изображениям не задают описание и атрибуты alt, иначе при сканировании страницы веб-краулерами произойдет ошибка и дублирование информации. Достаточно вспомнить пример с двумя телефонами, приведенный выше. К декоративным изображениям в веб-дизайне можно отнести:
  • Визуальные стили. Это всевозможные фоновые изображения, границы, заливки и т.д.;
  • UI- kit (элементы пользовательского интерфейса: кнопки, флажки, списки и т.д.;
  • Eye-candy. Красивые картинки, привлекающие взгляд человека, но не несущие никакой информации.
Очень часто декоративные изображения замедляют скорость загрузки страницы или веб-сайта в целом. Чтобы этого не случилось, используйте CSS или HTML. Так вы получите красивые изображения размером всего несколько сотен байт.

определение, виды, рисунки и примеры

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

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

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

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

Форма и тип

Декоративные изображения можно разделить на две формы или типа, а именно:

1. Геометрическая форма

Геометрические формы отражают формы, имеющие регулярность как по размеру, так и по форме.

Примерами геометрических фигур являются равносторонние треугольники, квадраты, пятиугольники, шестиугольники и круги.

2. Стилизованная форма

Стилизованная форма - это форма с различными стилями / стилями.

Примеры включают геометрические декоративные мотивы, флору, фауну и людей.

Декоративная фигура художника

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

  • Картоно Юдхокусумо

    Картоно Юдхокусумо был одним из первых художников в мире, рисовавших в декоративном стиле в конце 1940-х годов.

    В молодостион, чья художественная кровь продолжала течь от голландских и японских художников, уже числилась профессиональным художником.

  • Я Густи сделал деблог

    Деблог - художник из Денспасара, который родился в Банджар-Тэнсиат с 1906 по 1986 год.

    Его черно-белые картины динамичны и полны деталей.

  • Я Густи Кетут Кобот

    I Gusti Ketut Kobot многое перенял от стиля композиции Рудольфа Бонне.

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

  • Батара Любис

    Батара Любис - художник из Хута Годанга, Мандайлинг Натал.

    Затем Батара Любис переехал из Медана в Джокьякарту, чтобы изучать полулуки. Он характерный художник контрастных цветовых тонов.

Читайте также: 20+ изображений красивых пейзажей мира и мира [ПОСЛЕДНИЕ]

Пример декоративного изображения

Мотив геометрии листа

Животный мотив

Мотив геометрии

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

Может ли текст гиперссылки содержать как слова, так и декоративные изображения?



Я знаю, что технически возможно иметь одну гиперссылку, содержащую как текст, так и изображение:

<a href="http://example.com/user/profile">
    Joe Bloggs
    <img src="http://example.org/decorative-image.png">
</a>

Есть ли причина (HTML spec, доступность и т. д.), по которой ссылки не должны содержать как текст, так и изображения вместе? Мне интересно, было бы лучше вывести изображение после гиперссылки:

<a href="http://example.com/user/profile">
    Joe Bloggs
</a>
<img src="http://example.org/decorative-image.png">

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

html hyperlink accessibility
Поделиться Источник henrywright     21 марта 2016 в 14:34

2 ответа


  • Проверьте, может ли элемент содержать текст

    Есть ли чистый и надежный способ, которым я могу проверить (используя чистый javascript или также jQuery), может ли элемент HTML содержать некоторый текст? Например, <br> , <hr> или <tr> не могут содержать текстовые узлы , в то время как <div> , <td> или <span>...

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

    Привет, я делаю окно поиска для поиска элементов в списке. Когда пользователи начинают вводить слова, исходный список исчезает, а список совпадающих элементов исчезает, и элементы в списке будут содержать некоторые гиперссылки. вот что я получаю прямо сейчас, http://jsfiddle.net/x69chen/sbAR6/5/ ....



2

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

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

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

<a href="http://example.com/user/profile">
    Joe Bloggs
    <img alt="" src="http://example.org/decorative-image.png">
</a>

В качестве альтернативы можно

<a href="http://example.com/user/profile">
    Joe Bloggs
    <img src="http://example.org/decorative-image.png" role="presentation">
</a>

Поделиться unobf     21 марта 2016 в 15:37



0

Вы вполне можете обернуть тег ссылки вокруг текста и изображений.

Поделиться Stuart     21 марта 2016 в 14:36


Похожие вопросы:


Декоративные элементы для веб-страниц

Знаете ли вы какой-нибудь источник, где можно скачать некоторые декоративные элементы (изображения) для веб-страниц? (например, маленькие изображения, которые можно использовать как list-style-image...


Как я могу сделать текст textbox в качестве гиперссылки?

Как я могу сделать текст a textbox в качестве гиперссылки? У меня есть текстовое поле asp.net, в которое пользователь может ввести свой email , и я хотел показать введенный текст в виде гиперссылки....


Текст гиперссылки поверх изображения в HTML5

Я хочу создать текст гиперссылки поверх изображения в HTML5 . Пожалуйста, подскажите, как это сделать ? С уважением, RAvi


Проверьте, может ли элемент содержать текст

Есть ли чистый и надежный способ, которым я могу проверить (используя чистый javascript или также jQuery), может ли элемент HTML содержать некоторый текст? Например, <br> , <hr> или...


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

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


Может ли xs:documentation содержать HTML тегов?

Моя цель-сделать руководство программиста для моего веб-сервиса. Существует множество инструментов, которые генерируют руководства непосредственно из источника XSD, и эти инструменты интенсивно...


Может ли язык LL (0) содержать более одного слова?

У меня есть следующий простой вопрос: если язык LL(0), может ли он содержать более одного слова ? Я думаю, что ответ будет отрицательным, так как если бы было два слова, вы не можете прочитать их,...


Может ли объект класса Matrix содержать объект Bitmap изображения?

Может ли объект класса System.Drawing.Drawing2D.Matrix содержать объект изображения bitmap? например, графический объект может удерживать его.


CSS рубрике гибкие декоративные изображения на обе стороны

Я пытаюсь сделать декоративный заголовок с горизонтальными линиями по обе стороны, похожий на http://www.impressivewebs.com/centered-heading-horizontal-line/ но со следующими ограничениями:...


как сделать расширение chrome, которое превращает определенные слова в гиперссылки?

Я пытаюсь создать расширение chrome, которое находит определенные слова на страницах и превращает их в гиперссылки. Так, например, если я посещаю веб-сайт, на котором где-то написано слово search,...

Пояснения к ТН ВЭД 9701900000

9701 - Картины, рисунки и пастели, выполненные полностью от руки, кроме рисунков, указанных в товарной позиции 4906, и прочих готовых изделий, разрисованных или декорированных от руки; коллажи и аналогичные декоративные изображения:

9701Картины, рисунки и пастели, выполненные полностью от руки, кроме рисунков, указанных в товарной позиции 4906, и прочих готовых изделий, разрисованных или декорированных от руки; коллажи и аналогичные декоративные изображения:
9701 10 000 0- картины, рисунки и пастели
9701 90 000 0- прочие

(А) Картины, рисунки и пастельные рисунки, написанные только от руки, кроме картин,

входящих в товарную позицию 4906 и промышленных товаров,

разрисованных и украшенных не от руки

В эту группировку входят картины, рисунки и пастельные рисунки (как старинные, так и современные), написанные только от руки. Это могут быть полотна, написанные маслом, воском, темперой, акрилом, акварелью, гуашью, пастелью, миниатюры, раскрашенные цветными красками манускрипты, карандашные рисунки (включая рисунки типа "Конте"), рисунки углем или пером и т.д., написанные на любом материале.

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

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

В группировку не входят:

а) Чертежи и рисунки для промышленных, архитектурных и инженерных целей, являющиеся авторскими произведениями, исполненными от руки (товарная позиция 4906).

б) Эскизы и рисунки модной одежды, ювелирных изделий, обоев, тканей, мебели и т.д., являющиеся авторскими работами, исполненными от руки (товарная позиция 4906).

в) Театральные декорации, студийные занавесы и аналогичные предметы из крашеного холста (товарная позиция 5907 и 9706).

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

(Б) Коллажи и аналогичные декоративные изображения

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

В соответствии с целями данной группировки термин "аналогичные декоративные изображения" не включает изделия, состоящие из одного куска материала, даже если он оправлен или приклеен к основе. Более конкретно они рассматриваются в других товарных позициях номенклатуры под названием "украшения" из пластмассы, дерева, черных и цветных металлов и т.д. Такие товары классифицируются в своих соответствующих товарных позициях (товарные позиции 4420, 8306 и т.д.).

***

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

Код ТН ВЭД 9701900000. Коллажи и аналогичные декоративные изображения. Товарная номенклатура внешнеэкономической деятельности ЕАЭС

Позиция ТН ВЭД
  • 97

    XXI. Произведения искусства, предметы коллекционирования и антиквариат (Группа 97)

  • 97

    Произведения искусства, предметы коллекционирования и антиквариат

  • 9701 ...

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

  • 9701 90 000 0

    прочие


Позиция ОКПД 2
  • 90.03.13

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


Таможенные сборы - ИМПОРТ
Базовая ставка таможенной пошлины 0
реш.54
Акциз Не облагается
НДС

20%

Рассчитать контракт


(PDF) ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ И УНИФИКАЦИЯ ДЕТАЛЕЙ ШВЕЙНЫХ ИЗДЕЛИЙ

одном орнаменте игра фигур, цветовая гамма и линии настолько радуют глаз

человека, что этим вмзмвают разммшление о сммсле каждого орнамента.

Национальнме орнаментм встречаются в таких национальнмх народнмх

изделиях как костюм, халатм, паранджа, платки, ичиги, пояса, сюзане и т.д. Эти

декорм имеют много схожих черт. Здесь следует говорить о взаимодействии

цвета, техники вмш ивания, а также стилистических особенностей. Кроме этого

есть особая пропорциональность в размешении орнамента в национальнмх

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

декоративностью и оригинальностью, и вмделяется друг от друга такими

качествами как форма, колорит, структура, объем, сммсл, назначение, приемм

вмшивания и т.п.

В конце XIX и начале XX веков вмш ивка играла большую роль в

повседневной жизни жителей Узбекистана. Известно что, изготовление сюзане

полностью находилось в руках женшин. Они, как знатоки целительной силм

местнмх растений, изображали предпочтительно те растения, которме наряду с

их декоративнмм назначением имели также значение при лечении различнмх

недугов (ирис, тюльпан, гвоздика) [1]. Значит, и мм на сегодняшний день

должнм создать современнме модели, применяя декорм, учитмвая взаимосвязи

между психологическим и физиологическим состоянием человека.

В процессе украшения костюма вмш ивкой надо обратить внимание не

только на его эстетические направления как композиция формм, характер

материалов, колорит, но и его конструктивное решение, определение

технологического цикла, изготовление. Компонентами композиции одеждм как

произведения являются: форма, силуэт, цвет и линии (конструктивнме и

декоративнме), отдельнме детали одеждм и украшаюшие ее элементм (декорм).

Как бмло отмечено, повседневная одежда тоже может бмть украшена с

вмшивкой. При этом, применяется орнаментальнмй подход в оформлении

одеждм вмшивкой различного назначения - покрмвается весь фон изделия,

оставляя основную ткань практически невидимой, крупнме узорм орнамента

составляют композиционнмй центр костюма. Чтобм вмш ивка бмла стойкой в

54

Альтернативное дерево решений • Изображения • Учебные пособия по веб-доступности WAI

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

  • Содержит ли изображение текст?
    • Да:
      • … и текст также присутствует как настоящий текст рядом. Используйте пустой атрибут alt . См. Декоративные изображения.
      • … и текст отображается только для визуальных эффектов. Используйте пустой атрибут alt . См. Декоративные изображения.
      • … и текст выполняет определенную функцию, например, значок. Используйте атрибут alt , чтобы сообщить функцию изображения. См. Функциональные изображения.
      • … и в противном случае текст на изображении отсутствует. Используйте атрибут alt , чтобы включить текст изображения. См. Изображения текста.
    • Номер:
  • Используется ли изображение в ссылке или кнопке, и было бы трудно или невозможно понять, что делает ссылка или кнопка, если бы изображения не было?
    • Да:
      • Используйте атрибут alt , чтобы сообщить место назначения ссылки или предпринятого действия.См. Функциональные изображения.
    • Номер:
  • Придает ли изображение значение текущей странице или контексту?
    • Да:
      • … и это простой рисунок или фотография. Используйте краткое описание изображения таким образом, чтобы передать это значение в атрибуте alt . См. Информационные изображения.
      • … и это график или сложная информация. Включите информацию, содержащуюся в изображении, в другое место на странице. См. Сложные изображения.
      • … и показывает контент, дублирующий реального текста рядом. Используйте пустой атрибут alt . См. (Избыточные) функциональные изображения.
    • Номер:
  • Изображение чисто декоративное или не предназначено для пользователя?
  • Использование изображения не указано выше или непонятно, какой текст alt предоставить?
    • Это дерево решений не охватывает все случаи.Для получения подробной информации о предоставлении альтернативных текстов обратитесь к странице Image Concepts.

Мы приветствуем ваши идеи

Присылайте любые идеи, предложения или комментарии в (общедоступный) список рассылки [email protected] Вы также можете внести свой вклад в код прямо на Github.

Создайте и отредактируйте эту страницу на Github

WebAIM: альтернативный текст

Введение

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

Важно

Также см. Нашу статью об изображениях для получения дополнительной информации о доступности изображений.

Основы альтернативного текста

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

Альтернативный текст выполняет несколько функций:

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

Ключевой принцип заключается в том, что компьютеры и программы чтения с экрана не могут анализировать изображение и определять, что оно представляет. Как разработчики, пользователю необходимо предоставить текст, который представляет КОНТЕНТ и ФУНКЦИЯ изображений в вашем веб-контенте.

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

  • В атрибуте alt элемента img .
  • В контексте или окружении самого изображения.

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

Важно

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

Каждое изображение должно иметь атрибут alt . Это требование стандарта HTML (возможно, с некоторыми исключениями в HTML5). Изображения без атрибута alt , скорее всего, недоступны. В некоторых случаях изображениям может быть присвоено пустое значение атрибута alt (например, alt = "" , иногда альтернативный текст называется "null").

Контекст - это все

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

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

Примечание

Чтобы лучше всего представить эти принципы альтернативного текста, большинству изображений в этой статье был предоставлен альтернативный текст «пример изображения». Однако содержание изображений обычно представлено в контексте страницы.

Пример 1

Из-за его роли главнокомандующего американскими войсками в Войне за независимость, а затем и первого президента Соединенных Штатов Джорджа Вашингтона часто называют «отцом своей страны».

Какой альтернативный текст будет подходящим для изображения в Примере 1?

  1. "Образ Джорджа Вашингтона"
  2. «Джордж Вашингтон, первый президент США»
  3. Достаточно пустого атрибута alt ( alt = "" ).
  4. "Джордж Вашингтон"

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

Давайте рассмотрим некоторые важные правила, касающиеся атрибута alt .

Важно

Атрибут alt должен обычно :

  • Будьте точны и эквивалентны при представлении того же содержимого и функции изображения.
  • Будьте лаконичны. Это означает, что правильное содержание (если есть контент) и функция (если есть функция) изображения должны быть представлены настолько лаконично, насколько это необходимо. Обычно требуется не более нескольких слов, хотя редко бывает уместным короткое предложение или два.
  • НЕ является избыточным или не предоставляет ту же информацию, что и текст в контексте изображения.
  • НЕ ИСПОЛЬЗУЙТЕ фразы "изображение"... "или" графика из ... "для описания изображения. Обычно пользователю очевидно, что это изображение. И если изображение передает контент, обычно нет необходимости, чтобы пользователь знал, что это изображение, которое передает содержание, а не текст. Если тот факт, что изображение является фотографией или иллюстрацией и т. д., является важным содержанием, может быть полезно включить его в альтернативный текст.

Исходя из этих правил, вариант D ( alt = "Джордж Вашингтон" ), вероятно, будет лучшим альтернативным текстом в этом случае.Вариант А без необходимости описывает изображение как изображение. Вариант B предоставляет дополнительную информацию, которая не представлена ​​непосредственно на изображении, а также является избыточной для содержимого, представленного позже в тексте. Вариант C (без атрибута alt ) не подходит, потому что изображение передает контент, который непосредственно не представлен в окружающем контексте. Несмотря на то, что окружающий текст указывает на то, что он относится к Джорджу Вашингтону, визуальные пользователи могут сказать это непосредственно по содержимому изображения - поэтому, если изображение передает контент, ему следует дать альтернативный текст.

Пример 2


Джордж Вашингтон

Из-за его роли главнокомандующего американскими войсками в Войне за независимость, а затем и первого президента Соединенных Штатов Джорджа Вашингтона часто называют «отцом своей страны».

Каким будет соответствующий атрибут alt для изображения в примере 2?

  1. "Джордж Вашингтон"
  2. Достаточно пустого атрибута alt ( alt = "" ).
  3. "Изображение"
  4. Для изображения не требуется атрибут alt .

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

Пример 3


Джордж Вашингтон

Каким будет соответствующий атрибут alt для изображения в примере 3?

  1. Достаточно пустого атрибута alt ( alt = "" ).
  2. «Запись в Википедии Джорджа Вашингтона»
  3. "Подробнее"
  4. "Джордж Вашингтон"

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

Вариант А не подходит. Изображение, которое является единственным элементом ссылки, никогда не должно иметь отсутствующего или пустого атрибута alt . Это связано с тем, что программа чтения с экрана должна прочитать ЧТО-ТО, чтобы идентифицировать ссылку.Программы чтения с экрана могут считывать имя файла изображения или URL-адрес страницы, на которую ведет ссылка, что может оказаться полезным или бесполезным. И помните, что ссылка может быть прочитана вне контекста окружающего текста, например, когда пользователь перемещается по ссылкам на странице. Вариант B предоставляет контент, который недоступен только через изображение (т. Е. Вы не можете определить ссылки изображения на Википедию, просто взглянув на него). Вариант C не дает адекватного описания функции, особенно вне контекста.

Весь этот пример также можно было бы значительно улучшить, поместив изображение и текстовую подпись в одну ссылку:

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

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

Пример 4

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

Какой атрибут alt будет наиболее подходящим для изображения в примере 4?

  1. "Джордж Вашингтон"
  2. "Картина Джорджа Вашингтона"
  3. "Картина Джорджа Вашингтона, пересекающего реку Делавэр"
  4. "Классическая картина, демонстрирующая использование света и цвета для создания композиции.«
  5. «Картина Джорджа Вашингтона, пересекающего реку Делавэр. Вихревые волны окружают лодку, где величественный Джордж Вашингтон смотрит вперед из шторма и в лучи света через реку, когда он ведет свои осторожные войска в бой».

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

Вариант А («Джордж Вашингтон»), вероятно, неадекватно описывает содержание изображения. Тот факт, что на картине изображен Джордж Вашингтон, не обязательно имеет значение в этом контексте. Вариант B («Картина Джорджа Вашингтона») может быть адекватным, но не дает особого дополнительного содержания.Однако может быть уместным описать изображение как картину, а не как фотографию или другой тип изображения. Вариант C предоставляет дополнительную информацию, которая может помочь пользователю идентифицировать сам контент. Помните, что альтернативный текст предназначен не только для слепых. Многие зрячие пользователи смогут идентифицировать конкретную рассматриваемую картину по этому описанию, тогда как «Джордж Вашингтон» сам по себе не будет достаточно описательным. Вариант D может быть подходящим, если целью изображения является представление определенной художественной техники, а содержание самого изображения не имеет значения.Вариант E также может быть подходящей альтернативой, если подробное изучение картины необходимо, но оно слишком длинное и многословное, чтобы быть полезным - такой текст лучше использовать в качестве текста на веб-странице.

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

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

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

Пример 5

Изображение «Продукты» является частью панели навигации.

Какой атрибут alt будет наиболее подходящим для навигационного изображения «Продукты» в примере 5?

  1. «Продукция»
  2. «Ссылка на товары»
  3. Изображение не передает контент, поэтому ( alt = "" ) будет достаточно.

В данном случае вариант А - лучший ответ. Он обеспечивает как содержание, так и функцию изображения.На изображении отображается слово «Продукты», а также ссылка на страницу продуктов на сайте. Изображение будет идентифицировано как находящееся внутри ссылки, поэтому «Ссылка на» не требуется, что делает вариант B плохим выбором. Поскольку изображение - единственный объект в ссылке, alt = "" никогда не подходит. Когда изображение содержит только текст, отображаемый текст обычно может использоваться как альтернативный текст.

Пример 6

Перейдите на следующую страницу, чтобы прочитать о президентстве Джорджа Вашингтона.

Какой атрибут alt будет наиболее подходящим для изображения синей стрелки в примере 6?

  1. "следующая"
  2. "следующая страница"
  3. "Президентство Джорджа Вашингтона"
  4. "Продолжить президентство Джорджа Вашингтона"

Опять же, это пример, на который нет однозначного наилучшего ответа. Фактически, в этом примере, вероятно, может быть уместен любой из вариантов.Вариантов A и B, вероятно, будет достаточно в большинстве случаев, если пользователю будет ясно, что в статье несколько страниц. Вариант C очень четко представляет функцию ссылки, но не указывает, что ссылка ведет на следующую страницу в серии. Вариант D может быть лучшим решением, поскольку он представляет функцию ссылки и сообщает, что она является частью серии страниц. Как указывалось ранее, определение наиболее подходящего альтернативного текста зависит от индивидуальной интерпретации, исходя из более широкого контекста рассматриваемого изображения.Описание этого изображения («стрелка») не подходит. Возможно, лучшим решением было бы разместить текст «Следующая страница» или аналогичный рядом с изображением и внутри ссылки, и в этом случае изображению можно было бы присвоить alt = "" .

Пример 7

Какой атрибут alt будет наиболее подходящим для изображения значка в примере 7? Обратите внимание, что значок находится внутри ссылки.

  1. «Заявление о приеме на работу»
  2. "PDF-файл"
  3. "Значок PDF"
  4. Содержание изображения представлено в контексте, поэтому ( alt = "" ) подходит.

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

Вариант A («Заявление о приеме на работу») дублирует окружающий текст, поэтому это не лучший выбор.Вариант B - лучший выбор (хотя, возможно, будет достаточно даже более сжатого «PDF») - он четко предоставляет содержимое, которое представлено изображением - ссылка на файл PDF. Функция («Загрузить заявление о приеме на работу») представлена ​​в тексте ссылки, поэтому ее не нужно снова включать в атрибут alt . Вариант C («значок PDF») действительно описывает само изображение, поэтому не подходит для данного контекста. В другом контексте может быть важно, чтобы пользователь знал, что это изображение действительно является значком.Вариант D (пустой текст alt ) не предоставляет важную информацию, которую представляет изображение.

Здесь важно отметить, что если бы сам значок был ссылкой на документ, альтернативный текст должен обеспечивать полную альтернативу содержания и функции комбинации ссылка / изображение. Что-то вроде «Скачать заявление о приеме на работу в формате PDF». Самого по себе «формата PDF» будет недостаточно, особенно если есть несколько документов со ссылками такого рода.В этом случае пользователь программы чтения с экрана, переходящий по ссылкам на странице, услышит: «Формат PDF, формат PDF, формат PDF ...». Как правило, если одно и то же изображение используется на странице несколько раз, чтобы ссылки на разные места, альтернативный текст внутри ссылки должен указывать на различия.

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

Декоративные изображения не представляют важного содержания, используются в макетных или неинформативных целях и не отображаются в ссылке. Почти во всех случаях разделители и декоративные изображения должны иметь пустые значения атрибутов alt ( alt = "" ).

Пример 8

Текст содержимого здесь.

Текст нижнего колонтитула здесь.

Каким будет соответствующий атрибут alt для изображения горизонтального разделителя в примере 8?

  1. "декоративная строчка"
  2. «Начало нижнего колонтитула»
  3. "сепаратор"
  4. alt = "" хватит

Поскольку изображение не передает контент и не находится внутри ссылки, вариант D является наиболее подходящим выбором.Описание изображения не подходит.

Примечание

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

Пример 9

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

Удовлетворение потребностей клиентов является нашим главным приоритетом и гарантировано, или ваши деньги вернутся.

Каким будет соответствующий атрибут alt для изображения в примере 9?

  1. «рукопожатие»
  2. «Бизнесмены пожимают друг другу руки для заключения договора»
  3. alt = "" хватит
  4. «Гарантируем профессиональные услуги»

При анализе этого примера определите, представляет ли изображение важный контент.В этом случае я бы сказал, что это не так. В настоящее время в Интернете многим таким изображениям предоставляется описательный альтернативный текст , даже если изображения не содержат полезного содержимого. Вариант C ( alt = "" ), вероятно, будет наиболее подходящим в этом случае, потому что изображение не передает релевантный или важный контент. Варианты A и B описывают изображение, но не передают эквивалент того, что передает само изображение - что в данном случае является ничем или, возможно, только эмоциональным настроением или чувством.Другими словами, изображение носит преимущественно декоративный характер. Вариант D явно неверен, хотя стоит отметить, что дополнительная информация часто вводится в текст alt , чтобы предоставить дополнительную информацию или предоставить дополнительные ключевые слова для поисковых систем. Такая практика не является подходящим использованием альтернативного текста.

Примечание

Во многих случаях вы можете задать вопрос: «Если бы я не мог использовать это изображение, что бы я поставил на его место?» для определения подходящего альтернативного текста.

В приведенном выше примере маловероятно, что фотография рукопожатия будет заменена текстом, поэтому, вероятно, достаточно alt = "" .

Расширенные изображения

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

Кнопки с изображением формы

Кнопки изображения формы должны иметь атрибут alt , который описывает функцию кнопки.Кнопки с изображениями часто используются для создания более привлекательных или уменьшенных версий кнопок стандартной формы. Альтернативный текст должен описывать, что будет делать кнопка при выборе, например «Поиск», «Отправить», «Зарегистрироваться», «Разместить заказ» и т. Д. Например, может быть подходящим для кнопки с изображением в форме поиска по сайту.

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

При использовании клиентских карт изображений главное изображение должно иметь атрибут alt .Атрибут alt должен представлять любой контент, который представлен с изображением, но не представлен с горячими точками карты изображения. Например, если у вас есть карта штата Нью-Йорк, на которой есть горячие точки для каждого региона, изображение может иметь значение атрибута alt «Регионы Нью-Йорка». Если основное изображение не передает контент, а в первую очередь является контейнером для горячих точек (например, панель навигации), тогда подходит alt = "" .

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

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

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

Иногда большие изображения разделяются на несколько изображений на веб-сайте в целях дизайна. Когда несколько фрагментов изображения вместе передают контент, этот контент должен быть представлен пользователю.Обычно это делается путем предоставления альтернативного текста в атрибуте alt самого большого или наиболее заметного фрагмента изображения. Нецелесообразно повторять альтернативный текст без надобности, разбивать альтернативный текст на несколько атрибутов image alt или вообще не предоставлять альтернативы. Если фрагмент изображения находится внутри ссылки, альтернативный текст, описывающий функцию ссылки, должен быть предоставлен в атрибуте images alt , в атрибуте alt другого изображения в той же ссылке или в тексте внутри той же ссылки.Каждая ссылка должна содержать функциональный текст, описывающий функцию ссылок.

Фоновые изображения

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

Однако фоновые изображения

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

Иногда для представления контента используются спрайты изображений или другие фоновые изображения. Хотя их обычно следует избегать, если они используются, любой контент, передаваемый через фоновое изображение, должен быть доступен в разметке страницы. Если вместо изображения значка PDF в примере 7 выше было представлено фоновое изображение CSS, вы могли бы использовать технику замены текста для представления содержимого в ссылке:

Загрузите заявление о приеме на работу (PDF)

Затем вы можете использовать CSS для размещения текста «(PDF)» (элемент span ) за пределами экрана.См. CSS в действии: невидимое содержимое только для пользователей программ чтения с экрана для получения дополнительных сведений. Зрячие пользователи увидят фоновое изображение PDF, а пользователи программ чтения с экрана услышат закадровый текст «(PDF)».

Логотипы

В Интернете распространена практика, когда основной логотип сайта также ссылается на главную страницу сайта. Поскольку это довольно стандартная практика, обычно достаточно предоставить альтернативный текст для изображения, например название вашей компании ( alt = "Acme Company )".Идентификация логотипа как фактического логотипа ( alt = "Логотип компании Acme" ) обычно не требуется. Содержание и функции не являются «логотипом». Разработчики часто идентифицируют изображение как ведущее на главной странице ( alt = "Домашняя страница компании Acme ), хотя, если изображение постоянно находится в начале страницы и альтернативный текст уместен, эта дополнительная информация не требуется.

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

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

График годовых данных о продажах

Просмотреть данные о продажах

Примечание к longdesc

Атрибут longdesc был предназначен для ссылки на страницу с подробным описанием. Значение атрибута longdesc элемента img будет содержать URL-адрес страницы подробного описания, а не НЕ сам текст подробного описания. Однако longdesc работает только с некоторыми программами чтения с экрана. Кроме того, зрячие пользователи обычно не знают, что страница описания доступна.Кроме того, атрибут longdesc не является частью HTML5. По этим причинам не рекомендуется полагаться на longdesc на при предоставлении доступа к этой странице с длинным описанием.

Мы представили обзор поддержки longdesc (проведен в сентябре 2015 г.).

Рисунок и figcaption

HTML5 вводит элемент figure , необязательно с figcaption , который является самодостаточным и обычно упоминается как единый блок из основного потока документа.Фигуру можно убрать из основного потока документа, не влияя на смысл документа.

figure и figcaption позволяют семантическую ассоциацию между рисунком и подписью к нему. figcaption может предоставлять сводку или дополнительную информацию о фигуре и / или связывать фигуру с содержащимся в ней документом. Однако любое изображение внутри рисунка должно по-прежнему иметь значение атрибута alt , представляющее альтернативный текст изображения - это не должно передаваться через figcaption .

Вы можете узнать больше о figure и figcaption в How do you figure?

Заключение

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

  • Добавление альтернативного текста к изображениям - один из самых простых способов доступа принципы, которые нужно изучить, и одни из самых сложных для освоения.
  • Альтернативный текст может быть предоставлен в атрибуте alt или в окружающем контексте изображения.
  • Каждое изображение должно иметь атрибут alt .
  • Альтернативный текст следует :
    • представляют СОДЕРЖАНИЕ и ФУНКЦИЮ изображения.
    • будьте лаконичны.
  • Альтернативный текст не должен :
    • быть избыточным (быть таким же, как смежный или основной текст).
    • используйте фразы «изображение…» или «изображение…».
  • Соответствующий альтернативный текст сильно зависит от контекста изображения.
  • Альтернативный текст функционального изображения (например, изображения в ссылке) должен описывать функция, а также содержание.
  • Для декоративных изображений по-прежнему требуется атрибут alt , но он должен быть пустым ( alt = "" ).

Доступность Интернета в целом резко увеличилась бы, если бы альтернативный текст был предоставлен и реализован правильно.

Рекомендации по использованию замещающего текста

Image - Центр поддержки Siteimprove

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

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

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

При использовании альтернативного текста изображения он не должен включать:

Программы чтения с экрана автоматически объявляют изображение как изображение. Таким образом, альтернативный текст «Изображение яблока» читается вслух программой чтения с экрана как «изображение, изображение яблока».

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

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

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

HTML: Король Англии Генрих VIII

(Источник изображения короля Англии Генриха VIII)


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

HTML:  Вид с воздуха на Центральный парк в Нью-Йорке

(Источник изображения Центрального парка в Нью-Йорке с воздуха)


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

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

(две кавычки после alt =)

HTML:

(Источник декоративного изображения)

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

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

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

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

HTML: Быстрая коричневая лиса перепрыгивает через ленивую собаку

(Источник быстрой коричневой лисы перепрыгивает через изображение ленивой собаки)


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

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

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

Пример 1: Изображение, используемое отдельно в качестве связанного логотипа

Следующее изображение содержит ссылку, которая ведет на веб-страницу Siteimprove и отображается без какого-либо другого текста ссылки. В нем есть альтернативный текст «Siteimprove home», указывающий, куда пользователь перейдет по ссылке.

Siteimprove home

Пример 2: Изображение в тексте ссылки

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

Siteimprove Home

Siteimprove Home

Дополнительные ресурсы

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

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

Советы по написанию альтернативного текста:

1) Для этих изображений вы хотите оставить атрибут alt пустым ( alt = "" ).

Примеры:


  

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

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


  .share-img {
    фоновое изображение: url ('../ images / share.jpg');
    размер фона: обложка;
    дисплей: блок;
    высота: 27,3 бэр;
    ширина: 100%;
}
  

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

Важные заметки:

1) Хотя атрибут alt остается пустым, он все равно должен присутствовать внутри тега . Если не указывать полностью, программа чтения с экрана обычно зачитывает имя файла изображения.Это может сбивать с толку пользователей.

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

3) Вы также можете использовать атрибут WAI-ARIA role = "presentation" , чтобы скрыть изображения от программ чтения с экрана, однако не все программы чтения с экрана это признают. Итак, если вы собираетесь его использовать, обязательно соедините его с пустым атрибутом alt.

4) По возможности используйте псевдоэлементы и свойства фонового изображения в CSS для представления декоративных изображений.

Резюме

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

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

изображений | Удобство использования и веб-доступность

Загрузите учебные слайды «Доступность изображений для редакторов контента».

Содержание

  1. Как люди с ограниченными возможностями взаимодействуют с изображениями
  2. Альтернативный текст и длинные описания
  3. Рекомендации по изображению
  4. Изображения текста
  5. Диаграммы, графики и другие сложные изображения
  6. Рекомендации для разработчиков
    1. Все теги img должны иметь атрибуты alt
    2. Другие способы предоставления альтернативного текста
    3. Скрытие декоративных изображений от вспомогательных технологий
    4. Доступность SVG

Как люди с ограниченными возможностями взаимодействуют с изображениями

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

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

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

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

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

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

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

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

(Разработчикам и редакторам содержимого следует избегать использования HTML-атрибута longdesc в целом. Как ни странно, длинные описания никогда не следует предоставлять непосредственно в longdesc .)

Руководство по изображению

Понимание того, что делает текст хорошим alt , - дело тонкое и важное. Он должен быть кратким: не более 250 знаков. Он должен передавать цель изображения, а не описывать его. При написании текста alt подумайте, какие детали были наиболее важными для автора. Одно и то же изображение может иметь совершенно разный текст или в зависимости от контекста. Дополнительные примеры см. На слайдах редактора содержимого вверху страницы.

Некоторые другие передовые практики включают:

Чтобы узнать больше об изображениях, обратите внимание на следующие ресурсы:

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

Как правило, на веб-сайтах следует избегать изображений текста.Изображения текста лучше всего использовать, когда важна конкретная визуальная презентация, например, логотип. Если изображение представляет собой небольшой объем текста, текст alt должен точно соответствовать тексту на изображении. Если изображение содержит значительный объем текста, он также должен быть в другом месте на странице.

Как правило, текст в изображениях должен иметь достаточно большой размер, чтобы уменьшить пикселизацию при увеличении. Минимальный размер 19 пикселей - хорошее практическое правило, чем больше, тем лучше. Текст в изображениях должен соответствовать минимальным значениям цветовой контрастности.Для текста размером не менее 24 пикселей и нормальной толщиной или 19 пикселей и жирным шрифтом используйте коэффициент контрастности не менее 3: 1. В идеале используйте контраст не менее 4,5: 1.

Диаграммы, графики и другие сложные изображения

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

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

Альтернативный текст должен выглядеть примерно так: alt = "Требования Йельского колледжа к иностранному языку.См. Обсуждение ниже «.

Рекомендации для разработчиков

Все

тегов должны иметь alt атрибутов

Если изображение не имеет атрибута alt, программа чтения с экрана может вместо этого объявить атрибут src изображения. Итак, все изображения должны иметь атрибут alt. Если изображение не имеет альтернативного текста, укажите нулевой атрибут alt, например:

    

или

    

Другие способы предоставления альтернативных текстов

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

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

Разработчики также могут использовать

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

Скрытие декоративных изображений от вспомогательных технологий

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

Декоративные изображения можно скрыть в программах чтения с экрана несколькими способами:

  • с использованием нулевого атрибута alt
  • с использованием ARIA role = "presentation"
  • с использованием фонового изображения CSS

Доступность SVG

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

изображений SVG, реализованных как теги , также должны включать атрибут role = "image" .

Изображения

SVG, реализованные с использованием элемента , должны включать </code> и <code> <desc> </code>.</p><p> Ссылки на доступность SVG:</p><h2><span class="ez-toc-section" id="_-_alt_WCAG"> Когда веб-автор может использовать нулевой альтернативный текст alt = "", чтобы изображение соответствовало WCAG? </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div><p> Среди авторитетных специалистов по доступности Интернета существуют разные мнения. профессионалы о том, когда уместно использовать <code> alt = "" </code> в серой зоне фоновых изображений.Появляется большая часть отклонений быть вокруг интерпретации «Чистого украшения».</p><h3><span class="ez-toc-section" id="i-55"> Сводка выводов </span></h3><ol><li> Если это градиентное изображение, разделительное изображение и т. Д., Все согласен, ему нужно <code> alt = "" </code>.</li><li> Если это изображение, имеющее цель, информацию или функции, то ей нужен описательный альтернативный текст.</li><li> Если это фото какой-то <strong> вещи </strong> для окружающая среда или конфетка для глаз, тогда он находится в серой зоне и может иметь <code> alt = "".</code> Однако короткий <code> alt </code> описание предпочтительнее для большинства пользователей программ чтения с экрана.</li></ol><h3><span class="ez-toc-section" id="i-56"> Подробное рациональное: Краткая история нулевого альтернативного текста </span></h3><p> Когда макеты таблиц правили миром Интернета, веб-мастера использовали Сотни маленьких изображений-разделителей для регулировки положения на странице. Программа чтения с экрана считывает имя файла "spacer, spacer spacer" 100 раз на страницу. Это было решено с помощью <code> alt = "" </code> чтобы пользователи программ чтения с экрана игнорировали их.(Была война на должен ли быть пробел между кавычками, но это было решено.)</p><h3><span class="ez-toc-section" id="_WCAG_2"> Определение WCAG 2: "Чистое украшение" </span></h3><code> "</code></h3><p> Текущий язык WCAG фактически восходит к этому самые ранние черновики, в те дни, когда изображения-разделители были еще обычным явлением в сети.</p><p> В WCAG сознательно избегают слова «Украшение» и вместо термина «<strong> <em> Чистый </em> </strong>» украшение »(выделено мной) вводится и определяется как:</p><dl><dt> чистый декор</dt><dd><p> служит только эстетическим целям, не обеспечивая информация, и не имеющая функциональности</p><p> <em> Примечание: </em> Текст является чисто декоративным только в том случае, если слова могут быть перегруппированными или замененными без изменения их назначения.</p><p> <em> Пример: </em> Титульная страница словаря случайна слова в очень светлом тексте на заднем плане.</p></dd></dl><p> Так что технически «Чистое украшение» очень узкое.</p><h3><span class="ez-toc-section" id="i-57"> Понятия «смежность» и «Резервирование» </span></h3><p> Строгое определение «Чистого украшения» в WCAG делает не включать концепции <em> <strong> соседнего </strong> </em> или <em> <strong> повторяющийся </strong> </em> текст, а также Понимание документ.Однако методы h3 (написано около 2002 г.) говорит, что у связанного изображения такой же пункт назначения в виде текста рядом с ним, используйте <code> alt = "" </code> и заверните их в один и тот же якорь. Спустя годы избыточность и смежность была закреплено в спецификации HTML5. Вот текст:</p><blockquote><dl><dt> Если src установлен атрибут, а alt атрибут установлен в пустую строку ( <code> alt = "" </code> )</dt></dl><ul><li> Изображение является либо <strong> декоративным </strong>, либо <strong> дополнительным </strong> для остального контента, <strong> избыточный </strong> с некоторыми другая информация в документе.</li><li> Если изображение доступно и пользовательский агент настроен для отображения этого изображения, тогда элемент представляет данные изображения элемента.</li><li> В противном случае элемент представляет ничего, и может быть полностью опущен при визуализации. Пользователь агенты могут предоставить пользователю уведомление о том, что изображение присутствует, но не был показан на рендеринге.</li></ul></blockquote><p> Недавно созданные учебные пособия по веб-доступности, созданные Группа W3C Education and Outreach, с одобрения WCAG, далее укрепляет концепции избыточности и смежности.Сейчас они в окончательном варианте но раздел изображений был одобрен WCAG. Он говорит:</p><p> <--- начало цитаты ---></p><p> Фрагмент кода:</p> <code><p> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt = "Собака с колокольчиком прикреплен к его ошейнику. " data-lazy-src="dog.jpg"><noscript><img src = "dog.jpg" alt = "Собака с колокольчиком прикреплен к его ошейнику. "></noscript> Собаки-поводыри в свободное от работы время носят ...</p> </code><blockquote><p> <strong> Примечание: </strong> Если в текст включено объяснение того, как собака носит колокольчик, изображение можно считать <em> <strong> лишним </strong> </em> а значит и декоративный.Поскольку об этом не упоминается в тексте, изображение считается быть информативным. Пример 2 на этой странице. (мой акцент)</p><p> Было бы ошибкой WCAG разместить подпись или легенду перед или после изображения, которое относится к окружающему изображению с <code> alt = "" </code> . Например, «© 2004» помещается после изображения с <code> alt = "" </code> запутает пользователя программы чтения с экрана, потому что изображение не существует для них.</p><p> <--- конечная цитата ---></p></blockquote><h3><span class="ez-toc-section" id="_Ambient_Images"> Концепция «Ambient Images» </span></h3><p> WCAG не упоминает фотографии окружающей среды в своем определении «чистое украшение». Ясно, что они содержат "информация", поэтому они не соответствуют строгому определению, но эмбиентные образы (фотографии с конфетами для глаз) постепенно стали обычным явлением. использование <code> alt = "" </code> . Это, пожалуй, самая большая серая зона и вызывает наибольшие споры. вариант использования <code> alt = "" </code> на практике.</p><p> HTML5 говорит следующее:</p><blockquote><h6><span class="ez-toc-section" id="47118"> 4.7.1.1.8 Графическое представление некоторого окружающего текста </span></h6><p> Во многих случаях изображение на самом деле просто вспомогательное, и его присутствие просто усиливает окружающий текст. В этих случаях, альт атрибут должен присутствовать, но его значение должно быть пустой строкой.</p><p> Как правило, изображение попадает в эту категорию при удалении изображение не делает страницу менее полезной, но включает изображение значительно упрощает пользователям визуальных браузеров понять концепцию.</p></blockquote><p> Учебник EO также формулирует атмосферу как оправданное использование <code> alt = "" </code> .</p><p> <--- начало цитаты ---></p><p> Пример 4</p><blockquote><p> Фрагмент кода:</p> <br/> <code> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt = "Мы семейный. " data-lazy-src="family.jpg"><noscript><img src = "family.jpg" alt = "Мы семейный. "></noscript> </code><p> Это изображение используется только для добавления атмосферы или визуального интереса. на страницу.</p><p> <strong> Примечание: </strong> Если целью этого изображения было идентифицировать растение или передать другую информацию, а не просто улучшить внешний вид страницы, ее, вероятно, следует рассматривать как информативную.Автор определяет цель использования изображения.</p></blockquote><p> <--- конечная цитата ---></p><h4><span class="ez-toc-section" id="_EO_ALT_HTML5"> Комментарии все еще приняты к Учебному пособию EO и ALT руководство в HTML5 </span></h4><p> HTML5 в тексте руководство в настоящее время пересматривается, поэтому, если вы хотите комментарий к описанию окружающих изображений в разделе 4.7.1.1.8 вы можете установить создайте учетную запись bugzilla здесь.</p><p> Вы также можете прокомментировать в учебном пособии по образованию и информированию (EO), но комментарии скоро закроется.</p><h3><span class="ez-toc-section" id="i-58"> Что говорят профессионалы в области доступности? </span></h3><p> Я опубликовал опрос в Твиттере</p><blockquote lang="en"><p> ОПРОС: Соответствует ли этот альтернативный текст #WCAG? <img scr = "john.jpeg" alt = ""><h2><span class="ez-toc-section" id="i-59"> Джон Доу Биография </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div><p> Джон родился ....</p> - Дэвид Макдональд (@davidmacd) январь 20, 2015</blockquote><p> Это вызвало настоящую дискуссию около 30 постов. Здесь несколько отзывов:</p><blockquote data-conversation="none" lang="en"><p> @davidmacd @pauljadam @dylanbarrell @jared_w_smith @mixolydian пример портретный снимок http: // t.co / B8yS1KDDqq это суждение автора</p> - Стив Фолкнер (@stevefaulkner), январь. 20, 2015</blockquote><blockquote data-conversation="none" lang="en"><p> @davidmacd сбой, как Могу ли я, как слепой, просмотреть фотографию Джона? Покажи это другу чтобы помочь мне найти этого человека в толпе или поставить PPT?</p> - Пол Дж. Адам (@pauljadam) январь 20, 2015</blockquote><blockquote data-conversation="none" lang="en"><p> @davidmacd @jared_w_smith @pauljadam В большинстве я бы сказал, что это тривиально, хотя очевидно, что случаи, когда это было бы необходимо.</p> - Сэм Дж (@mixolydian) январь 20, 2015</blockquote><blockquote data-conversation="none" lang="en"><p> @pauljadam @davidmacd Вот мой аргумент в более подходящей среде, чем Twitter http://t.co/slqtQDx814</p> - holistica11y (@dylanbarrell) январь 20, 2015</blockquote><blockquote lang="en"><p> @dylanbarrell это хорошо. вы не можете просто поставить на него alt = "" хоть. @davidmacd</p> - Пол Дж. Адам (@pauljadam) январь 20, 2015</blockquote><blockquote data-conversation="none" lang="en"><p> @davidmacd Да, это проходит.Передается содержание изображения.</p> - Джаред Смит (@jared_w_smith) январь 20, 2015</blockquote><blockquote data-conversation="none" lang="en"><p> @davidmacd @jimthatc @pauljadam Я не знаю думаю, вопрос в том, является ли изображение декоративным, а скорее в том, является ли это избыточным.</p> - Сэм Дж (@mixolydian) январь 20, 2015</blockquote><blockquote data-conversation="none" lang="en"><p> @davidmacd согласен, нравится короткие альты по вещам серой зоны. иметь возможность приятно</p> - Брайан Мур (@ bmoore123) январь 28, 2015</blockquote><blockquote lang="en"><p> @davidmacd IMO окружающий изображения могут включать ключи к разнообразию, принятию и включению - может быть # a11y важность.</p> - Джон Авила (@JonAvilaSSB) январь 29, 2015</blockquote><h3><span class="ez-toc-section" id="i-60"> Пользовательское тестирование </span></h3><p> Мы провели неформальное тестирование с пользователями программ чтения с экрана, и обнаружили, что около 90% предпочитают короткие альтернативы декоративным изображения, если они не являются "чистым украшением", например градиентная линия, или распорка.</p><p> Член WCAG Кэти Уолбин из Interactive A11Y показал аналогичные результаты при пользовательском тестировании. Она сообщает пользователи говорят "Мне это нравится" в кратком описании декоративные фотографии.</p><p> Сэм Дж., Продвинутый пользователь программы чтения с экрана сообщает выше, что для него это не имеет значения, и он предпочитает не возиться с графикой, если на ней нет функциональное назначение.</p><p> WebAim предлагает, чтобы при пользовательском тестировании неприятие потерь, то есть пользователи более склонны говорить "сохранить" что-то, даже если это не так важно это чем не держать его. В этом случае я предпочитаю брать пользователей на их слово, даже если они могут испытывать отвращение к потере.Неприятие потери может быть разумной человеческой характеристикой. Ветеран Пользователь программы чтения с экрана Леони Уотсон опубликовал сообщение в статье говорится следующее:</p><blockquote><p> Мне кажется, что глаз одного человека радует глаз другого. эмоциональная ссылка человека на веб-сайт ... Если люди не хотят слушать альтернативный текст, они не будут. Если [зрячие] люди не хотят останавливаться и смотреть на изображение, они не будут. В любом случае хорошо иметь выбор.</p></blockquote><p> Это то, что мы обнаружили у большинства пользователей программ чтения с экрана.</p><h3><span class="ez-toc-section" id="i-61"> Заключение </span></h3><p> Рабочая группа WCAG разрешила интерпретацию «чистое украшение», которое будет развиваться, чтобы включить избыточность <em> <strong> </strong> </em>, <em> <strong> смежность </strong> </em> и <em> <strong> окружение </strong> </em> в новом руководстве EO WCAG и спецификации HTML5 без комментарий или возражение, и сомнительно, что WCAG даст дальнейшее определение "чистый украшение".Вероятно, они бы стали, если бы сообщество инвалидов вызвали серьезные опасения, но этого не произошло. Самый экран читатели считают, что <code> alt </code> на окружающих изображениях - это хорошо, но бороться за это не стоит.</p><p> В целом рабочая группа WCAG считает, что если автор похоже, добросовестно применяет <code> alt </code> на сайте (а не на свалке <code> alt = "" </code> на все) тогда автор может решить, есть ли что-то предназначено быть чисто декоративным или нет.Большинство экспертов в этой области обозначить серую зону в трактовке чистого декора. Думайте об этом как о континууме:</p><ol><li> Если это градиентное изображение, разделительное изображение и т. Д., Все согласен, ему нужно <code> alt = "" </code>.</li><li> Если это изображение, имеющее цель, информацию или функции, то ей нужен описательный альтернативный текст.</li><li> Если это фото какой-то <strong> вещи </strong> для окружающая среда или конфетка для глаз, тогда он находится в серой зоне и может иметь <code> alt = "".</code> Однако короткий <code> alt </code> описание предпочтительнее для большинства пользователей программ чтения с экрана.</li></ol><p> Не стесняйтесь комментировать в Twitter @davidmacd</p><h5><span class="ez-toc-section" id="i-62"> Информация об авторе: </span></h5><p> Дэвид Макдональд - ветеран WCAG, соредактор использования WAI ARIA в HTML5 и член рабочей группы по доступности HTML5. Мнения мои собственные.</p> <br/><h2><span class="ez-toc-section" id="_Alt"> Создание пустого или нулевого атрибута Alt для декоративных изображений - лучшие практики в доступном онлайн-дизайне </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div><p data-type="author"> Хизер Капретт</p><p> Декоративное изображение - это изображение, которое не передает смысла и не добавляет информации на страницу.Примеры декоративных изображений:</p><ol><li> Изображения, служащие рамками, разделителями, углами, растяжками</li><li> Изображения рядом с текстом, которые передают то же значение или информацию, что и текст, например изображение Авраама Линкольна рядом с текстовой ссылкой «Авраам Линкольн». Вы хотите избежать дублирования, когда программа чтения с экрана читает то, что там есть.</li><li> Изображения рядом с текстом, которые служат «конфетой» или «атмосферой» и не добавляют информации.</li><li> Изображения, используемые рядом с текстом ссылки просто для улучшения его внешнего вида или увеличения интерактивной области</li></ol><p> Декоративные изображения требуют добавления пустого или нулевого атрибута alt в <strong> HTML Code View </strong>, который сообщит программе чтения с экрана пропустить изображение.Пустой атрибут alt записывается как alt = ”” с пробелом между двойными кавычками. Нулевой альтернативный текст записывается как <strong> alt = ”” </strong> без пробелов между кавычками. Без нулевого или пустого атрибута alt программа чтения с экрана сообщит, что изображение есть, и, возможно, укажет его размеры, но оставит аудиторию в недоумении, что это за изображение и важно ли оно.</p><p> Вы можете создать <strong> пустой атрибут </strong> alt (alt = ""), введя один пробел с помощью пробела в поле <strong> Описание изображения </strong> при вставке изображения с помощью редактора содержимого Blackboard.Это легкий путь. Когда контент читается с помощью JAWS 17 в Firefox, он будет пропускать изображения, не объявляя их вообще. NVDA объявит «графику», но не даст никаких размеров или другой информации. Если вы используете атрибут <strong> null </strong> alt для изображения, NVDA пропустит его, не объявляя об этом. JAWS 17 также будет пропускать изображение, не объявляя об этом, если установлен нулевой атрибут alt. <em> Таким образом, лучше всего создать нулевой атрибут alt для декоративного изображения или такого атрибута, который не передает информацию, которой нет на странице </em>.</p><p> Ниже приведен пример декоративного изображения завитка, который может использоваться в верхней части страницы или в качестве разделителя для разделов документа. Это потребует нулевого атрибута alt в элементе изображения в HTML. HTML-код этого изображения будет выглядеть следующим образом:</p><p> <img src = ”flowish.jpg alt = ””></p><p></p><p> *** ВНИМАНИЕ! Редактор содержимого Blackboard не будет создавать нулевые атрибуты замещающего текста для изображения, если вы просто оставите поле <strong> Описание изображения </strong> пустым при вставке изображения.То есть, если вы оставите поле «Описание изображения» пустым, а затем нажмете кнопку <strong> HTML Code View </strong> после того, как вставите изображение, вы нигде не увидите <img alt = ””>.</p><p> Чтобы настроить изображение с нулевым замещающим текстом, вставьте изображение со значком <strong> Вставить / изменить изображение </strong>, как обычно, но оставьте поле <strong> Описание изображения </strong> пустым, как показано на изображении ниже. Не беспокойся об этом прямо сейчас.</p><p></p><p> Когда вы получите всплывающее диалоговое окно с предупреждением о том, что вам необходимо включить описание изображения, чтобы сделать изображение доступным, нажмите OK.Когда этот диалог исчезнет, ​​нажмите <strong> Вставить </strong>, чтобы завершить вставку изображения.</p><p></p><p> Затем вам нужно будет переключиться в <strong> HTML Code View </strong>, используя значок <strong> HTML </strong>, который находится вторым справа в третьей строке, чтобы отредактировать код.</p><p></p><p> Вы увидите код, созданный редактором контента Blackboard для изображения. Это будет выглядеть так:</p><p> <img src = ”https–csuohio.blackboard.com/sessions/3/4/2/0/8/8/4/7/session/ff9f70436e4a4ab9a27a283871716715/flourish%281%29.gif ”высота =” 105 ″ ширина = ”659 ″ />.</p><p> Вы можете увидеть действительно длинное расположение и изменение имени, созданное Blackboard для изображения, заканчивающееся форматом файла, которым является gif. Вы также увидите атрибуты высоты и ширины. Вы можете добавить нулевой атрибут alt в любом месте после <em> img </em> плюс пробел. Мы добавим его сразу после пути к исходному тексту (<em> src </em>) к гифке. Поместите курсор непосредственно перед <em> h </em> по высоте и введите alt = ””, а затем пробел. Теперь код будет выглядеть так:</p><p> <img src = ”https: // bb – csuohio.blackboard.com/sessions/3/4/2/0/8/8/4/7/session/ff9f70436e4a4ab9a27a283871716715/flourish%281%29.gif ”<strong> alt =” ”</strong> высота =” 105 ″ ширина = ”659 ″ /></p><h5><span class="ez-toc-section" id="i-63"> Создание плавного размера изображения </span></h5><p> Мы заставим изображение реагировать на изменения размера окна браузера, изменив его ширину на процентное значение. Установка его ширины в процентах от контейнера, в котором он находится, позволит ему масштабироваться пропорционально вниз с уменьшением размера окна. Этот метод также позволяет избежать горизонтальной прокрутки, если окно становится меньше ширины изображения.Мы удалим height = ”105 ″ и width =” 659 ″ из ​​приведенного выше кода, чтобы он выглядел следующим образом:</p><p> <img src = ”https://bb.blackboard.com/sessions/3/4/2/0/8/8/4/7/session/ff9f70436e4a4ab9a27a283871716715/flourish%281%29.gif” alt = ”” /></p><p> Теперь мы создадим ширину, которая использует процент в качестве значения. Я использую 90%. Мне нравится делать изображение чуть меньше 100% его контейнера, чтобы создать небольшое пространство слева и справа от изображения. Чтобы ввести ширину = «90%», я оставляю пробел после alt = «» и ввожу новое свойство.Окончательный код будет выглядеть так:</p><p> <img src = ”https://bb–csuohio.blackboard.com/sessions/3/4/2/0/8/8/4/7/session/ff9f70436e4a4ab9a27a283871716715/flourish%281%29.gif” <strong> alt = ”” Ширина = ”90%” </strong> /></p><p> Примечание о размере изображения: если размер вашего изображения в пикселях составляет меньший процент родительского контейнера, чем процент, который вы пишете, произойдет некоторое увеличение масштаба, что может привести к менее детальному отображению изображения. Область содержимого Blackboard масштабируется до минимальной ширины 1150 пикселей, прежде чем перестает реагировать на уменьшение ширины экрана браузера.</p><p> Ниже приведена сравнительная таблица, которую вы можете использовать для определения процента, который займет изображение с определенным количеством пикселей, когда область содержимого Blackboard уменьшена до минимальной ширины. Если окно браузера увеличено, изображение по-прежнему будет занимать указанный вами процент пространства, но пиксели не будут добавлены к вашему изображению для сохранения качества изображения.</p><table dir="ltr" lang="en-us" frame="box" rules="all" cellpadding="5"><caption></caption><tbody><tr><th scope="col" align="center" valign="middle"> Ширина изображения в пикселях</th><th scope="col" align="center" valign="middle"> Ширина изображения в процентах</th></tr><tr><td> 1150</td><td> 100%</td></tr><tr><td> 1092.5</td><td> 95%</td></tr><tr><td> 1035</td><td> 90%</td></tr><tr><td> 977,5</td><td> 85%</td></tr><tr><td> 920</td><td> 80%</td></tr><tr><td> 862,5</td><td> 75%</td></tr><tr><td> 805</td><td> 70%</td></tr><tr><td> 747,5</td><td> 65%</td></tr><tr><td> 690</td><td> 60%</td></tr><tr><td> 632,5</td><td> 55%</td></tr><tr><td> 575</td><td> 50%</td></tr><tr><td> 517.5</td><td> 45%</td></tr><tr><td> 460</td><td> 40%</td></tr><tr><td> 402,5</td><td> 35%</td></tr><tr><td> 345</td><td> 30%</td></tr><tr><td> 287,5</td><td> 25%</td></tr><tr><td> 230</td><td> 20%</td></tr><tr><td> 172,5</td><td> 15%</td></tr><tr><td> 115</td><td> 10%</td></tr><tr><td> 57,5 ​​</td><td> 5%</td></tr></tbody></table><h5/></h5><p> Существует еще один способ заставить изображение реагировать на уменьшение размера экрана и устранить необходимость горизонтальной прокрутки, но выполнение в Blackboard неидеально.Blackboard обрезает небольшую часть изображения с правой стороны. Этот метод использует свойство max-width для изменения размера изображения. С помощью <strong> HTML Code View </strong> вы устанавливаете максимальную ширину изображения равной 100% содержащего родительский элемент, а высоту устанавливаете на auto. В этом случае изображение будет уменьшено до размера окна, меньшего, чем его исходная ширина в пикселях (до минимальной ширины 1150 пикселей в Blackboard), но оно не будет увеличиваться, если размер окна больше, чем его ширина в пикселей.Код будет выглядеть следующим образом:</p><p> <img alt = ”” src = ”https://bb–csuohio.blackboard.com/bbcswebdav/pid-2020261-dt-content-rid-11186514_1/xid-11186514_1 ″ style =” max-width: 100%; высота: авто; ” /></p><h5><span class="ez-toc-section" id="_2-2"> Пример декоративного изображения № 2: </span></h5><p> В следующем примере показано использование изображения (кнопка «Пуск») рядом с текстом, чтобы привлечь внимание пользователя к важной информации. Это помогает зрячим пользователям и может помочь сориентироваться людям со слабым зрением или когнитивными нарушениями. Изображение круглой кнопки с надписью «Начать» повторяет ту же информацию или имеет то же значение, что и текстовый заголовок «Начать здесь», расположенный над ней.Таким образом, это не добавит смысла тем, кто слушает программу чтения с экрана. Поэтому мы добавим к этому изображению нулевой атрибут alt, чтобы программа чтения с экрана пропустила его.</p><p></p><p> Желтый значок папки означает, что автор добавил папку с содержимым в свой курс Blackboard. Чтобы создать папку под названием «Начать здесь!» Вы можете добавить <strong> Content Folder </strong> из меню <strong> Build Content </strong> на панели действий Blackboard <strong> </strong> с <strong> Edit </strong> mode <strong> On </strong>.</p><p></p><p> Введите имя вашей папки содержимого, например "Начать здесь!" в текстовом поле <strong> Имя </strong>.</p><p></p><p> Чтобы создать изображение кнопки «Пуск» слева от текстового описания папки, вы можете скопировать и вставить следующий код в <strong> HTML Code View </strong> для поля Текстовое описание:</p><p><div style = ”color: # 000; заполнение: 1.5em; размер шрифта: 1 см; font-weight: жирный; семейство шрифтов: Arial, Helvetica, sans-serif; ”> <img src =” https: // bb-csuohio.blackboard.com/bbcswebdav/pid-2171115-dt-content-rid-11267299_1/xid-11267299_1 ″ style = ”margin: 0px 10px;» height = ”50 ″ width =” 50 ″ alt = ”” /> Эта папка содержит инструкции и общий обзор курса.</div></p><p> На изображении ниже показан код, вставленный в диалоговое окно просмотра кода HTML, наложенный поверх редактора WYSIWYG. Обратите внимание, что кнопка проверки орфографии, обведенная красным, выключена. Это значок ABC с галочкой. Это сделано для того, чтобы избежать ненужной вставки элементов <span> в ваш код из-за ошибки в текущей версии Blackboard Learn.Кнопка HTML, нажатая для входа в представление кода HTML, также обведена красным.</p><p></p><p> *** Примечание: этот код будет работать для центрирования выравнивания по вертикали для одного маленького изображения и одной короткой строки текста рядом с ним. Если у вас есть изображение большего размера и вы хотите обернуть абзац текста справа от него в редакторе содержимого Blackboard Learn, см. Раздел <em> «Создание плавного обтекания текста вокруг изображения </em>».</p> .</div><div class="html-after-content"></div><div class='social_share clearfix'><p class='socshare-title'></p> <a rel="nofollow" class="psb fb" target="_blank" href="http://www.facebook.com/sharer.php?u=https://devchyli.ru/raznoe-2/dekorativnye-izobrazheniya-kak-otlichit-kontentnoe-izobrazhenie-ot-dekorativnogo-blog-html-academy.html&t=%D0%94%D0%B5%D0%BA%D0%BE%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5+%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F%3A+%D0%9A%D0%B0%D0%BA+%D0%BE%D1%82%D0%BB%D0%B8%D1%87%D0%B8%D1%82%D1%8C+%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%BD%D0%BE%D0%B5+%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5+%D0%BE%D1%82%C2%A0%D0%B4%D0%B5%D0%BA%D0%BE%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B3%D0%BE+%E2%80%94+%D0%91%D0%BB%D0%BE%D0%B3+HTML+Academy&src=sp" title="Поделиться в Facebook"></a> <a rel="nofollow" class="psb vk" target="_blank" href="http://vkontakte.ru/share.php?url=https://devchyli.ru/raznoe-2/dekorativnye-izobrazheniya-kak-otlichit-kontentnoe-izobrazhenie-ot-dekorativnogo-blog-html-academy.html" title="Поделиться во ВКонтакте"></a> <a rel="nofollow" class="psb ok" target="_blank" href="https://connect.ok.ru/offer?url=https://devchyli.ru/raznoe-2/dekorativnye-izobrazheniya-kak-otlichit-kontentnoe-izobrazhenie-ot-dekorativnogo-blog-html-academy.html&title=%D0%94%D0%B5%D0%BA%D0%BE%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5+%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F%3A+%D0%9A%D0%B0%D0%BA+%D0%BE%D1%82%D0%BB%D0%B8%D1%87%D0%B8%D1%82%D1%8C+%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%BD%D0%BE%D0%B5+%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5+%D0%BE%D1%82%C2%A0%D0%B4%D0%B5%D0%BA%D0%BE%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B3%D0%BE+%E2%80%94+%D0%91%D0%BB%D0%BE%D0%B3+HTML+Academy" title="Поделиться в Одноклассниках"></a> <a rel="nofollow" class="psb gp" target="_blank" href="https://plus.google.com/share?url=https://devchyli.ru/raznoe-2/dekorativnye-izobrazheniya-kak-otlichit-kontentnoe-izobrazhenie-ot-dekorativnogo-blog-html-academy.html" title="Поделиться в Google+"></a> <a rel="nofollow" class="psb tw" target="_blank" href="http://twitter.com/share?url=https://devchyli.ru/raznoe-2/dekorativnye-izobrazheniya-kak-otlichit-kontentnoe-izobrazhenie-ot-dekorativnogo-blog-html-academy.html&text=%D0%94%D0%B5%D0%BA%D0%BE%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5+%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F%3A+%D0%9A%D0%B0%D0%BA+%D0%BE%D1%82%D0%BB%D0%B8%D1%87%D0%B8%D1%82%D1%8C+%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%BD%D0%BE%D0%B5+%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5+%D0%BE%D1%82%C2%A0%D0%B4%D0%B5%D0%BA%D0%BE%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B3%D0%BE+%E2%80%94+%D0%91%D0%BB%D0%BE%D0%B3+HTML+Academy" title="Поделиться в Twitter"></a></div><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div><aside class="meta"></aside><div class="markup"><meta itemscope itemprop="mainEntityOfPage" content="https://devchyli.ru/raznoe-2/dekorativnye-izobrazheniya-kak-otlichit-kontentnoe-izobrazhenie-ot-dekorativnogo-blog-html-academy.html" /><div itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><link itemprop="url" href="https://devchyli.ru/wp-content/themes/basic/img/default.jpg"><link itemprop="contentUrl" href="https://devchyli.ru/wp-content/themes/basic/img/default.jpg"><meta itemprop="width" content="80"><meta itemprop="height" content="80"></div><meta itemprop="datePublished" content="2019-07-20T22:30:21+03:00"><meta itemprop="dateModified" content="2021-05-04T02:59:22+03:00" /><meta itemprop="author" content="alexxlab"><div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><meta itemprop="name" content="Девчули.ру — женский журнал от Юли"><meta itemprop="address" content="Russia"><meta itemprop="telephone" content="+7 (000) 000-000-00"><div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><link itemprop="url" href="https://devchyli.ru/wp-content/themes/basic/img/logo.jpg"><link itemprop="contentUrl" href="https://devchyli.ru/wp-content/themes/basic/img/logo.jpg"></div></div></div></article><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/dekorativnye-izobrazheniya-kak-otlichit-kontentnoe-izobrazhenie-ot-dekorativnogo-blog-html-academy.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://devchyli.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> Обязательные поля помечены <span class="required">*</span></p><div class="rcomment"><textarea id="comment" name="comment" cols="45" rows="8" placeholder="Сообщение" aria-required="true"></textarea></div><div class="rinput rauthor"><input type="text" placeholder="Ваше имя" name="author" id="author" class="required" value="" /></div><div class="rinput remail"><input type="text" placeholder="Ваш E-mail" name="email" id="email" class="required" value="" /></div><div class="rinput rurl"><input type="text" placeholder="Ваш Вебсайт" name="url" id="url" class="last-child" value="" /></div><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /><label for="wp-comment-cookies-consent">Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев.</label></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='12321' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main><aside id="sidebar" class=""><ul id="widgetlist"><li id="search-2" class="widget widget_search"><form method="get" class="searchform" action="https://devchyli.ru//"> <input type="text" value="" placeholder="Поиск" name="s" class="s" /> <input type="submit" class="submit search_submit" value="»" /></form></li><li id="custom_html-4" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><ins class="adsbygoogle" style="display:inline-block;width:100%;height:600px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="6847132033" ></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div></li><li id="nav_menu-2" class="widget widget_nav_menu"><p class="wtitle">Рубрики</p><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5559" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5559"><a href="https://devchyli.ru/category/dizajn">Дизайн</a></li><li id="menu-item-5560" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5560"><a href="https://devchyli.ru/category/izdeliya">Изделия</a></li><li id="menu-item-5561" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5561"><a href="https://devchyli.ru/category/master-2">Мастер-классы</a></li><li id="menu-item-5562" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5562"><a href="https://devchyli.ru/category/novoe">Новинки</a></li><li id="menu-item-5563" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5563"><a href="https://devchyli.ru/category/novichkov">Новичкам</a></li><li id="menu-item-5564" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5564"><a href="https://devchyli.ru/category/rukami">Руками</a></li><li id="menu-item-5565" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5565"><a href="https://devchyli.ru/category/rukodelie">Рукоделие</a></li><li id="menu-item-5566" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5566"><a href="https://devchyli.ru/category/rukami-2">Своими руками</a></li><li id="menu-item-5567" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5567"><a href="https://devchyli.ru/category/raznoe">Советы рукодельницам</a></li><li id="menu-item-5568" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5568"><a href="https://devchyli.ru/category/raznoe-2">Разное</a></li></ul></div></li><li id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> </div></li><li id="custom_html-3" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><div id="yandex_rtb_R-A-567524-7"></div> <script type="text/javascript">(function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-567524-7", renderTo: "yandex_rtb_R-A-567524-7", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks");</script></div></li></ul></aside></div><footer id="footer" class=""><div class="copyrights maxwidth grid"><div class="copytext col6"><p id="copy"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20148%200'%3E%3C/svg%3E" alt="footer logo" width="148" data-lazy-src="https://devchyli.ru/wp-content/themes/basic/img/logotype.png"><noscript><img src="https://devchyli.ru/wp-content/themes/basic/img/logotype.png" alt="footer logo" width="148"></noscript><p>© Девчули.РУ 2019 ©</p><p>За копирование контента Юля и Инесса разозлятся, поэтому лучше вам этого не делать</p></p></div><div class="themeby col6 tr"><p id="designedby"> <a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p><div class="footer-counter"></div></div></div></footer></div></div> <a id="toTop">➤</a><style type="text/css">.pgntn-page-pagination{text-align:left!important}.pgntn-page-pagination-block{width:60%!important;padding:0 0 0 0}.pgntn-page-pagination a{color:#1e14ca!important;background-color:#ffffff!important;text-decoration:none!important;border:1px solid #cccccc!important}.pgntn-page-pagination a:hover{color:#000!important}.pgntn-page-pagination-intro,.pgntn-page-pagination .current{background-color:#efefef!important;color:#000!important;border:1px solid #cccccc!important}.archive #nav-above,.archive #nav-below,.search #nav-above,.search #nav-below,.blog #nav-below,.blog #nav-above,.navigation.paging-navigation,.navigation.pagination,.pagination.paging-pagination,.pagination.pagination,.pagination.loop-pagination,.bicubic-nav-link,#page-nav,.camp-paging,#reposter_nav-pages,.unity-post-pagination,.wordpost_content .nav_post_link,.page-link,.page-links,#comments .navigation,#comment-nav-above,#comment-nav-below,#nav-single,.navigation.comment-navigation,comment-pagination{display:none!important}.single-gallery .pagination.gllrpr_pagination{display:block!important}</style><link rel='stylesheet' id='yarppRelatedCss-css' href='https://devchyli.ru/wp-content/plugins/yet-another-related-posts-plugin/style/related.css' type='text/css' media='all' /><link rel='stylesheet' id='pgntn_stylesheet-css' href='https://devchyli.ru/wp-content/plugins/pagination/css/nav-style.css' type='text/css' media='all' /> <!--[if lt IE 9]> <script type='text/javascript' src='https://devchyli.ru/wp-content/themes/basic/js/html5shiv.min.js?ver=3.7.3' id='basic-html5shiv-js'></script> <![endif]--> <script type='text/javascript' src='https://devchyli.ru/wp-content/themes/basic/js/functions.js?ver=1' id='basic-scripts-js' defer></script> <script type='text/javascript' src='https://devchyli.ru/wp-includes/js/comment-reply.min.js' id='comment-reply-js' defer></script> <script type='text/javascript' id='q2w3_fixed_widget-js-extra'>/* <![CDATA[ */ var q2w3_sidebar_options = [{"sidebar":"sidebar","margin_top":10,"margin_bottom":0,"stop_id":"","screen_max_width":0,"screen_max_height":0,"width_inherit":false,"refresh_interval":1500,"window_load_hook":false,"disable_mo_api":false,"widgets":["custom_html-3"]}]; /* ]]> */</script> <script type='text/javascript' src='https://devchyli.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.1.9' id='q2w3_fixed_widget-js' defer></script> <script type='text/javascript' src='https://devchyli.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js' defer></script> <script type='text/javascript' src='https://devchyli.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js' defer></script> <script type='text/javascript' src='https://devchyli.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js' defer></script> <script type='text/javascript' src='https://devchyli.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js' defer></script> <script type='text/javascript' id='ez-toc-js-js-extra'>/* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */</script> <script type='text/javascript' src='https://devchyli.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js' defer></script> <script>window.lazyLoadOptions={elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}};window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){return} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){return} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://devchyli.ru/wp-content/plugins/wp-rocket/assets/js/lazyload/12.0/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script> </body></html> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me -->