Почему не пишешь картинки
Проблема довольно банальна — ссылка на картинку блока из CSS файла блока не работает. Единственный работающий вариант это:
. background-image: url(../../common.blocks/header/images/bg-header.png) . Фактически это абсолютный путь к блоку, в который так-же входит и путь к папке блоков common.blocks , что на мой взгляд совершенно неверно. Т.е. если я допустим захочу вынести потом этот компонент в допустим папку blog.blocks то получается надо будет бегать и пути менять. Или переименую я блок — та-же история.
Вот такой вариант:
. background-image: url(images/bg-header.png) . Borschik (через enb — project-stub) чё-то как-то не помог — такой путь он просто проигнорировал. Пытался крутить конфиг .borschik но без особого успеха (но тут я сильно глубоко не рыл).
Итого вопрос — как всё-таки идеологически верно указывать пути к картинкам блока в CSS-файлах блока?
Комментарии: 3
7 years ago
@webhive Правильный вариант — это как раз тот, про который ты пишешь, что он работать отказался.
Но у меня такая же нога, и не болит:
- Беру project-stub .
- Создаю папку common.blocks/b1/images
- Кладу туда картинку common.blocks/b1/images/b1.jpg
- Создаю файл common.blocks/b1/b1.css
- Пишу в него
Так что единственный вариант, который могу предложить — опубликуй свой проект на github, попробую разобраться.
7 years ago
Правильный вариант — это как раз тот, про который ты пишешь, что он работать отказался. Но у меня такая же нога, и не болит:
Вот чорт! Дико извиняюсь тогда за беспокойство — видимо сам где-то накосячил. Буду рыть дальше.
7 years ago
Короче разобрался в чём тут дело. После прочтения форума по этой теме (пути к картинкам) создалось ощущение, что за разворачивание пути до картинок отвечает borschik . В результате прикрутил его но нифига не помогло. Чортов борщ игнорировал пути и ничего не переписывал.
После ответа от @tadatuta попробовал всё сделать на чистом project-stub -е — всё получилось. Мистика! Попробовал вырезать борщ из project-stub . Ничего не поменялось — всё продолжило работать. Вот это уже интереснее. Ну думаю без вариантов — вся эта магия зашита в stylus . Заменил enb-stylus на enb-css в project-stub — всё равно работает. Да как блин так-то. 🙁
В итоге полез ковырять исходники enb-stylus и enb-css . Внутри обоих обнаружил postcss с плугином postcss-url . Вот блин и вся магия.
В моём тестовом проекте (который не работал) как раз использовался postcss . Добавил туда
plugins : [ . require('postcss-url')(< url: 'rebase' >), . ] и всё заработало.
В общем всё больше прихожу к выводу, что postcss заруливает все остальные технологии. Один хрен без него остальные плугины не работают, поэтому не вижу смысла ни в enb-css ни в enb-stylus — оба заменяются одним postcss — ом, к которому кстати можно прикручивать дополнительные парсеры.
Accessibility картинок. Как сделать изображения доступными?
Всем привет! Меня зовут Артём Плаксин, я незрячий специалист по цифровой доступности и работаю в VK. Почитать о моей работе в офисе вы можете в одном из постов этого блога. Сегодня я хочу поговорить о практической стороне доступности. Этот пост посвящён доступности изображений, выводимых через теги и .
Вы узнаете:
- Как понять, нужна ли подпись (альтернативный текст) к картинке.
- Какие подписи будут too much.
- Как адаптировать картинки, которым нужна подпись.
- И, наконец, как адаптировать картинки, которым не нужна подпись.
Каким картинкам подпись нужна
Не старайтесь дать описание каждой картинке, которая есть на вашем сайте. Задавайте описания только тем изображениям, которые несут смысловую нагрузку сами по себе либо помогают определить контекст ссылки или кнопки, если они находятся на них. Как правило, такие изображения на сайте будут уникальными либо пользовательскими, и точно их будет нельзя отнести к декоративным изображениям.
Нужны альтернативные тексты:
- фотографиям;
- стикерам и смайликам;
- логотипам;
- изображениям, дополняющим статью.
Подписи не нужны:
- иконкам списков;
- любым декоративным иконкам вроде телефона или значка электронной почты;
- картинкам на ссылках, рядом с которыми есть или возможно добавить лейбл или альтернативный текст, описывающий контекст;
- логотипам на ссылках, если название компании уже присутствует в тексте ссылки.
Требования к альт-тексту
При добавлении альтернативного текста к картинке нужно понимать, что он должен быть коротким и ёмким. От вас не требуется составлять подробный тифлокомментарий (специальное описание для слепых всей визуальной информации), а нужно лишь дать краткое название изображённому.
Вы можете опираться на этот короткий чек-лист:
- Длина альтернативного текста не должна превышать 100 символов, желательно уложиться в 80.
- Слов «Изображение», «Графика», «Иконка» в описании быть не должно. Об этом сообщает роль элемента.
- Однако можете смело указать категорию изображения: «Фотография», «Логотип», «Скриншот».
- Избегайте сложных предложений с запятыми и иными знаками препинания.
- Как в любом лейбле, пишите альт-текст с заглавной буквы и не ставьте точку в конце.
Скорее всего, у вас в работе будут возникать ситуации, когда какой-то из пунктов чек-листа не удаётся выполнить. Такое может произойти, не существует универсальной памятки под все изображения в мире, поэтому просто постарайтесь сделать то, что можете. Наличие альтернативного текста априори лучше, чем его отсутствие.
Хороший пример
Плохой пример
Ссылка на скачивание мобильного приложения FNS в одном из сторов.
Адаптация
Самое главное — для адаптации картинок, выведенных через тег , использовать атрибут alt. Причём он должен быть обязательным во всех ваших проектах, даже если он пустой.
Полезное
Если изображению нужно описание, этот тег нужно заполнить: .
Декоративное
Если изображению не нужно описание и оно является декоративным, крайне важно явно указать, что атрибут пустой: .
Отсутствие атрибута у декоративного изображения приведёт к тому, что оно в некоторых браузерах, основанных на Chromium, всё равно попадёт в дерево доступности, только как изображение без описания.
Важно! В различных публикациях в сети вам могут предлагать адаптировать декоративное изображение, выведенное через , сразу тремя атрибутами: alt=»» , aria-hidden=»true» и role=»presentation» .
Использовать следует только пустой альт. Соблюдайте гигиену кода.
Адаптация
Как правило, в контейнерах выводятся декоративные изображения, которые необходимо скрывать, однако в этой публикации я в том числе расскажу, как их можно адаптировать, чтобы скринридер корректно считывал лейбл.
Полезное
Тег не на всех связках скринридеров и браузеров корректно определяется в качестве изображения, поэтому, кроме лейбла, ему нужно явно указать роль изображения.
Декоративное
Так как у отсутствует атрибут alt , для адаптации его мы использовать пустым не можем, поэтому нужно явно повесить атрибут aria-hidden=»true» .
Этот атрибут необходимо добавлять ко всему контейнеру, избегая попадания фокусируемых с клавиатуры элементов внутрь области его действия.
Конец
На этом всё, надеюсь, мне удалось ответить на популярные вопросы о доступности картинок. Если есть идеи для новых разборов, пишите в комментариях. Буду рад вернуться с новым материалом в следующем месяце.
Подписывайтесь на мой блог в Telegram, в нём я пишу о буднях незрячего и мысли на тему цифровой доступности.
- Блог компании VK
- Веб-дизайн
- Accessibility
Скучно без тебя, почему не пишешь
Информация о гиф открытке: анимационная картинка гифка со словами, надписью Скучно без тебя, почему не пишешь. Размер 9.2Kb, формат изображения: gif 650×510.
Хотите использовать открытки Скучно без тебя, почему не пишешь в своём блоге, форуме или комментарии? Воспользуйтесь нужным кодом для вставки, просто скопируйте его и целиком вставьте туда где вы планировали разместить картинку. Удачи!
Код — HTML (блоги, сайты)
Код — BB (форумы, комментарии)
Скачать картинку
—>Добавлено пользователем otkrytka
Mне нравится
Поделись с другом, картинки — Скучно без тебя, почему не пишешь
Не путай картинку и иллюстрацию
Леха, я был неправ. Прежде чем рассказывать тебе про пёсиков, я должен был объяснить матчасть. Прости меня и позволь сделать это, пока не поздно.
Смотри, есть картинки и есть иллюстрации. Это разные вещи.
Картинки — это просто прямоугольники с пикселями. Фотография, коллаж, рисунок, скриншот — всё это картинки. Даже прямоугольник с белым шумом — это картинка.
Иллюстрация — это любой элемент статьи, который раскрывает мысль автора с помощью обращения к чувственному опыту. Иллюстрация может быть сделана с помощью картинки, а может быть с помощью таблицы, схемы и даже текстового примера. Главное — чтобы она раскрывала авторскую мысль.
Непонятно? Давай на примере. Возьмем наполненную неловкостью фотографию из фотостока:
Сейчас это просто картинка в формате джипег. Сама по себе она ничего не значит. Читатель может увидеть в ней переговоры, дружбу народов, Хиллари Клинтон, завещание, «Роснефть», ущемление прав коренных народов, творческую импотенцию и что угодно еще. Но конкретно в этой нашей статье эта картинка еще ничего не значит. Это просто картинка, прямоугольник с пикселями.
Чтобы эта картинка стала иллюстрацией, она должна встать в текст и раскрыть авторскую мысль. Например, это отличная иллюстрация для статьи о неестественных позах в фотографии:
Сейчас ты думаешь, что эта фотография гораздо лучше подошла бы для статьи о переговорах. Но это как посмотреть. Если мы говорим, например, об одежде на переговорах — может быть:
Такая иллюстрация работает, потому что рассматривая ее, человек лучше понимает содержание твоей статьи. Ты пишешь об одежде: «Если вы босс, одевайтесь в черное; если помощник — в светлое. Так будет понятно, кто есть кто». Я смотрю на твою фотографию, вижу черный и светлый костюм, и убеждаюсь в твоих словах. Иллюстрация работает, потому что она помогает раскрыть мысль автора с помощью обращения к чувственному опыту.
А ты хотел, наверное, как-то так?
У тебя раздел о принципе «не в порядке», а иллюстрация непонятно о чем. Какую мысль она раскрывает? Что доказывает? В чем я смогу убедиться, рассматривая твою иллюстрацию? Ни в чем. Это та же ситуация, как с твоими песиками — ты поставил картинку, чтобы отвлечь внимание, а не чтобы проиллюстрировать мысль.
Но я понимаю твою боль. Статью о переговорах трудно проиллюстрировать фотографией — ведь важно не то, как люди выглядят, а то, что они говорят. А как проиллюстрировать разговор? Хм. Вот бы был инструмент, чтобы иллюстрировать то, что люди говорят.
Внезапно мы проиллюстрировали статью не картинкой, а текстом: примерами фраз, которые помогут стать «не в порядке» на переговорах. Этот текст — полноценная иллюстрация: она помогает раскрыть мысль автора с помощью обращения к чувственному опыту.
Чтобы иллюстрация была мощнее, добавим антипримеры:
Теперь я не только знаю, как правильно, но и могу поймать себя на ошибке. Всё благодаря иллюстрациям. А теперь сравни со своей картинкой с фотостока. Могу ли я из нее понять всё то, что я передал на иллюстрации текстом?
В этом разница между картинкой и иллюстрацией:
Хорошая иллюстрация может быть не только картинкой, но и текстом, таблицей, схемой и чем угодно ещё. Главное — чтобы она раскрывала мысль автора
P. S. Фотосточные картинки, как правило, плохо работают как иллюстрации, потому что они изначально создаются в отрыве от твоей статьи. Ну что могут рассказать о переговорах в России напомаженные американские фотомодели в арендованных костюмах?
Поэтому я на фотостоке стараюсь брать либо фотографии природы, либо предметов, но не людей. Съемки с коптера над озером Байкал можно брать с фотостока, Байкал он и есть Байкал. Фотографию дуриана для статьи об экзотических фруктах — без проблем. А вот фотографии людей — только в комедийных целях. Но это я так делаю. Ты, конечно, делай как хочешь.
Почитай еще на эту тему: