Фоновые изображения CSS и доступность
Последнее обновление: 14 июня 2011 г.
Появилось множество статей, в которых обсуждались фоновые изображения и проблемы их доступности. Кажется, нет четкого решения для всех браузеров и обсуждения всех текущих методов в одном месте.
Проблема
Фоновые изображения CSS часто используются вместо встроенных изображений, поскольку их можно использовать в качестве карт спрайтов CSS. Карта спрайтов — это способ использования одного изображения и отображения только небольшой части этого изображения в виде определенного значка или элемента страницы, например вкладки страницы. Поскольку отправляется только одно изображение, оно выполняется быстрее, чем множество небольших изображений, и может повысить производительность страницы.
Основная проблема с недекоративными фоновыми изображениями CSS заключается в том, что при отключении изображений или включении режима высокой контрастности (например, в ОС Windows) фоновые изображения исчезают.
Если фоновое изображение либо содержит текст, как в случае вкладок страниц, либо содержит осмысленные изображения значков, то пользователи режима высокой контрастности и те, у кого нет изображений, не увидят этот контент. Хотя это может повлиять только на пользователей программ чтения с экрана, для пользователей программ чтения с экрана это проще решить, используя атрибут title в ссылках на изображения и текст за пределами экрана внутри контейнеров, содержащих фоновые изображения.
Сравнение со встроенными изображениями
Эта проблема отличается для стандартных встроенных изображений, поскольку при их удалении браузеры вместо них вставляют замещающий текст на экране. Это может быть проблемой для небольших значков, где мало места, но для многих изображений это не проблема.
Требования
Для изображений текста, для которых часто используется этот метод, существует четкое требование WCAG 2 уровня AA не использовать изображения текста, когда текст может быть отображен технологической платформой.
Для веб-приложений почти всегда можно создать текст, за исключением шрифтов, которых может не быть в пользовательских системах. В этих случаях можно использовать технику стиля Cufon. Проблема все еще остается для изображений, которые не являются текстовыми, но имеют смысл, и проблемы по-прежнему относятся к другим требованиям доступности, таким как Раздел 508.
Решения
Невозможно просто скрыть текст за чем-то, так как фоновое изображение CSS является фоновым изображением, и, таким образом, никакая настройка его непрозрачности не приведет к тому, что текст в элементе, который его содержит, будет закрыт. Возможны несколько концептуальных решений.
Не использовать фоновые изображения
Просто заменить недекоративный фон CSS стандартными встроенными изображениями. Это решение не решает проблему производительности, но предоставляет доступное решение и показывает, сколько сайтов было отрендерено за последние 15 лет.
Позиционирование частей встроенного изображения
Не используйте фоновые изображения — используйте встроенные изображения, но используйте CSS для размещения только той части изображения, которую вы хотите видеть на нужных элементах.
В основном это включает в себя создание встроенной карты спрайтов изображения. Информацию об этой технике можно найти в статье TJK Design CSS Sprite.
Использовать до или после псевдоэлементов
Для отображения изображений можно использовать псевдоэлементы. Этот метод отлично подходит для изображений, чтобы сохранить их на экране, но не поддерживается некоторыми браузерами, в основном Internet Explorer 7. Информацию об этом методе можно найти в блоге Paciello Group. Кроме того, псевдоэлементы не могут быть выбраны.
Использовать HTML 5 Canvas
Элемент canvas можно использовать для отображения изображения и размещения холста поверх текста внутри элемента. Это метод, который Cufon использует, когда поддерживается HTML 5. В противном случае Cufon использует VML для отображения пользовательских шрифтов. Cufon разбивает каждое слово на отдельный элемент span, и, таким образом, одним из побочных эффектов использования Cufon является то, что текст может быть разбит на части при чтении с помощью программы чтения с экрана.
Используйте трюк с позиционированием CSS
Можно разместить фоновое изображение как дочернее (но поверх) элемента, содержащего текстовый эквивалент. Затем сделайте размер родителя шириной изображения. Когда фоновые изображения отключены, текст появляется в некоторых браузерах, и текст также будет доступен для программ чтения с экрана.
Этот метод работает неодинаково в разных браузерах. Firefox по-прежнему отображает текст поверх фонового изображения, в то время как Internet Explorer скрывает текст за изображением. Хотя в режиме высокой контрастности Internet Explorer не отображал текст должным образом.
Заключение
В заключение, единственный метод, который действительно доступен и поддерживается почти всеми браузерами, — это использование встроенных изображений вместо фоновых изображений CSS для отображения недекоративного содержимого. Если требуются карты спрайтов, рассмотрите возможность использования встроенных карт спрайтов.
Хотите расширить знания своей команды о передовых методах веб-доступности?
Узнайте больше о наших выездных семинарах под руководством экспертов и о нашем портале электронного обучения.
НЕОБХОДИМОЕ Доступность сменила название на Level Access! Подробнее
Признан репрезентативным поставщиком в отчете Gartner Market Guide for Digital Accessibility за 2023 год.
Доступ к отчету
Подписка на обновления
тематика — Фоновые изображения CSS не будут изменены после повторной загрузки и сброса кэша
спросил
Изменено 7 лет, 9 месяцев назад
Просмотрено 2к раз
Если я загружу фоновое изображение css моего сайта, изменю его с помощью GIMP (или MS Paint, если уж на то пошло) и повторно загружу его, ничего не произойдет. Более того, даже после того, как я удалю файл с сервера, изображение остается в сети… при нажатии «Очистить все кеши» ничего не происходит.
.. Я также отмечаю, что изображение в основном остается прежним — То же имя файла и расширение файла, поэтому это очень проводной. Что посоветуете проверить?
- Отключение внешнего инструмента кэширования сервера (как для статического, так и для динамического кэша).
- Отключение AdvAgg из config/development/performance/advagg (флажок «Включить…» не установлен)
- Отключение внутренней системы кэширования Drupal.
Обновление: найден рабочий ответ… См. ниже ответ с зеленой галочкой.
- тематика
11
Поскольку все кэширование не может исправить, давайте попробуем сузить проблему.
Сначала попробуйте удалить изображение из темы. Очистите все кеши и посмотрите, сохранилось ли фоновое изображение. Если это так, откройте инструмент разработки браузера, проверьте URL-адрес фонового изображения и попробуйте открыть его в новой вкладке, проверьте URL-адрес изображения и перейдите по нему в каталоге вашего сервера, если он действительно все еще существует.
Во-вторых, попробуйте перезапустить сервер или любые связанные с ним запущенные службы на вашем сервере.
Надеюсь, это хотя бы даст представление о том, где найти причину проблемы.
Перейдите на страницу настроек темы и сохраните ее. Цветной модуль может вызвать проблемы, подобные описанным вами. AdvAgg очень старается обнаружить это, но не может уловить каждый вариант использования. Это проблема с ядром, которую AdvAgg исправляет в 95% случаев.
4
Это проблема кэширования, и это может произойти в разных местах в зависимости от вашей настройки:
- Прокси (например, Varnish)
- Веб-сервер (например, apache или nginx)
- браузер
Веб-серверы обычно не кешируют ресурсы, я видел несколько кратковременных кешей на nginx — около 5-10 секунд.
Скорее всего кеширование происходит в прокси или в вашем браузере. Вы, вероятно, знали бы о проблеме с прокси-сервером, если бы использовали прокси-сервер, поэтому я думаю, что ваш браузер кэширует изображение.
Чтобы проверить, связана ли проблема с кэшированием, вы можете попробовать просмотреть изображение с URL-адреса, используемого в CSS, и вы должны увидеть то же изображение, что и на веб-странице. Затем вы можете попытаться изменить URL-адрес, добавив параметр GET.
Если URL-адрес изображения: http://example.com/image.png, вы можете изменить URL-адрес на http://example.com/image.png?test=1
Поскольку URL-адрес теперь совершенно другое, браузер (и прокси) не сохранил бы кеш для этого, и вы должны увидеть изображение, которое вы только что загрузили. Если это так, это доказывает, что вам нужно очистить кэши.
При разработке рекомендуется полностью отключить кеш браузера, чтобы избежать подобных проблем. Есть множество расширений для всех браузеров, которые могут вам в этом помочь, если это не встроено в браузер.
1
Проблема явно связана с CDN. Я использую бесплатную версию службы CDN Cloudflare, и после очистки ее кеша удаленное изображение больше не появлялось в сети на сайте.
.. Я попытался повторить процедуру, чтобы подтвердить, что это действительно была служба CDN, поэтому я повторно загрузил изображение с некоторыми изменениями цвета и другим именем файла, и снова, после того, как я его удалил, он продолжал появляться в сети на сайте, но исчез только после очистки кеша CDN (но не любого другого типа кеша) через Cpanel на базе области управления Cloudflare.
Итак, лучше попробуйте очистить его, если вы столкнетесь с этой проблемой, или очистите и отключите CDN на некоторое время (особенно если это не повлияет на время загрузки и показатели оптимизации на странице). Возможно, режим разработки является альтернативой полному отключению — не пробовал этот вариант. Бен.
Я получаю это случайно, и то же самое с фавиконками. Я не запускал CDN и никогда не решал эту проблему, вместо этого я просто начал увеличивать имена файлов одно за другим, чтобы полностью избежать проблемы.
Это не очень умное решение, но если вы спешите, оно должно сработать.