Фоновые изображения 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! Подробнее
Что делать дальше
Мы можем помочь вам соответствовать стандартам WCAG и поддерживать соответствие требованиям ADA и AODA:
- Свяжитесь с нами сегодня , чтобы узнать больше о нашем комплексном подходе к цифровой доступности, включая автоматизированный и ручной аудит возможности и широкий спектр управляемых услуг.
- Посетите наш раздел ресурсов, чтобы загрузить бесплатные официальные документы и веб-семинары, а также найти наши новейшие блоги о тенденциях в отрасли.
- Свяжитесь с нами, чтобы продолжить общение в Linkedin, Твиттер или Фейсбук.
Признан репрезентативным поставщиком в отчете Gartner Market Guide for Digital Accessibility.
Доступ к отчету
Подписка на обновления
Добавление фонового изображения в ваши формы
Хотите знать, как добавлять фоновые изображения в формы? С помощью CSS можно легко оформить форму с помощью изображения или цветового градиента в качестве фона!
В этом уроке мы покажем вам, как добавить фоновое изображение в вашу форму.
- Выбор фонового изображения
- Рекомендации
- Выбор формы
- Добавление фонового изображения в форму
- Использование существующего образа
- Использование градиента в качестве фонового изображения
1. Выбор фонового изображения
Для начала вам необходимо выбрать изображение, которое будет использоваться в качестве фона формы. Вы можете использовать любое изображение из своей медиатеки или из любого места в Интернете, к которому есть доступ у вашего сайта.
Что следует учесть
Для максимальной удобочитаемости обеспечьте достаточный контраст между фоновым изображением и любым текстом или полями в форме.
Например, избегайте использования светлого текста на светлом фоне. Вместо этого используйте более темный текст на светлом фоне и более светлый текст на темном фоне.
2. Выбор формы
Затем выберите форму, которую хотите настроить.
Если вы еще не создали свою форму, добавьте новую форму, нажав WPForms »Добавить новую .
Чтобы начать работу, вы можете выбрать один из множества доступных шаблонов.
Если ни одно из значений по умолчанию не соответствует вашим требованиям, вы все равно можете выбрать аналогичный шаблон и настроить его в Конструкторе форм.
3. Добавление фонового изображения в форму
В конструкторе форм перейдите к Настройки » Общие » Дополнительные .
Отсюда введите имя класса в поле Класс CSS формы. Не стесняйтесь использовать любое имя для своего класса, но мы рекомендуем добавить wpf- в качестве префикса. Это помогает избежать конфликтов между вашим пользовательским кодом CSS и любыми темами или плагинами на вашем сайте.
Примечание: Во избежание проблем обязательно начинайте имя класса с буквы. Также помните, что имена классов в CSS чувствительны к регистру.
Для получения дополнительной информации ознакомьтесь с нашим руководством по добавлению классов в WPForms.
Использование существующего изображения
Если вы хотите использовать изображение из своей медиатеки, вам потребуется полный URL-адрес изображения. Чтобы получить это, сначала перейдите в Медиа » Библиотека.
Здесь щелкните изображение, которое хотите использовать.
В открывшемся диалоговом окне нажмите Копировать URL в буфер обмена .
URL-адрес изображения будет скопирован в буфер обмена.
Сделав это, перейдите к Внешний вид » Настройте и выберите Дополнительный CSS.
Затем создайте пользовательский класс со свойством background-image и вставьте URL-адрес, который вы скопировали ранее.
Ниже мы написали пример такого класса. Не забудьте заменить /path/wpforms-backdrop.png фактическим URL-адресом вашего изображения.
.wpf-пользовательский-фон {
фоновое изображение: url(/path/wpforms-backdrop.png) !важно;
отступ: 15px 35px !важно;
/*Заполнение не является обязательным, но улучшает внешний вид при использовании фонового изображения в вашей форме.*/
}
Ваши настройки должны выглядеть примерно так.
Убедившись, что код правильный, нажмите Опубликовать , чтобы сохранить изменения.
Если в вашем коде нет ошибок, ваша форма теперь будет иметь фоновое изображение. Вот пример формы с использованием приведенного выше кода:
Использование градиента в качестве фонового изображения
С помощью CSS цветовые градиенты можно использовать в качестве изображений, и это решение также работает с вашими формами. Градиенты широко настраиваются и могут использовать любое количество цветов.
Поскольку градиенты генерируются автоматически, вам не нужно исходное изображение из вашей медиатеки или где-либо еще в Интернете.
Это дает преимущество повышенной скорости и уникальности. Вам также не придется беспокоиться о пропаже исходного изображения.
В CSS доступно три вида градиентов:
-
conic-gradient() -
линейный градиент() -
радиальный градиент()
В этом примере мы покажем вам, как использовать простой линейный градиент в качестве фона для вашей формы. Просто напишите свой класс, как и раньше, но вместо URL-адреса мы будем использовать функцию CSS 9.0135 линейный градиент()
.Чтобы увидеть, как это работает, посмотрите пример кода ниже:
.wpf-custom-background {
background-image: linear-gradient(#0299ed, #FFFFFF) !важно;
/*Заполнение не обязательно, но настоятельно рекомендуется*/
отступ: 15px 35px !важно;
}
Это создаст мягкий градиент от синего к белому в качестве фонового изображения вашей формы:
Вот и все! Теперь вы знаете, как добавить фоновое изображение в свои формы в WPForms.