Атрибут альт фонового зображення CSS

Це той, якому я раніше не мусив займатися. Мені потрібно використовувати теги alt на всіх зображеннях на сайті, включаючи ті, які використовуються атрибутом background-image CSS.

Наскільки немає такого властивості CSS, наскільки я знаю, тож який найкращий спосіб зробити це, будь ласка?

Фонові зображення обов'язково можуть представляти дані! Насправді це часто рекомендується, коли представлення візуальних іконок є більш компактним та зручним для користувачів, ніж еквівалентний список розмиттів тексту. Будь-яке використання образів спрайтів може отримати користь від цього підходу.

Це досить поширене для значків списків готелів для відображення зручностей. Уявіть сторінку, де було вказано 50 готелів, і кожен готель мав 10 зручностей. Sprite CSS був би ідеально підходить для подібних речей - кращого користувальницького досвіду, оскільки це швидше. Але як ви реалізуєте теги ALT для цих зображень? Приклад сайту .

Відповідь полягає в тому, що вони взагалі не використовують altтекст, а замість цього використовують titleатрибут, що містить div.

HTML

<div class="hotwire-fitness" title="Fitness Centre"></div>

CSS

.hotwire-fitness {
    float: left;
    margin-right: 5px;
    background: url(/prostyle/images/new_amenities.png) -71px 0;
    width: 21px;
    height: 21px;
}

Відповідно до W3C (див. Посилання вище), атрибут заголовка служить майже тією ж метою, що і атрибут alt

Назва

Значення атрибута заголовка можуть відображатися користувачами-агентами різними способами. Наприклад, візуальні браузери часто відображають заголовок як "підказку інструмента" (коротке повідомлення, яке з'являється, коли вказівний пристрій зупиняється над об'єктом). Аудіокористувачі можуть говорити про назву інформації в аналогічному контексті. Наприклад, встановлення атрибуту на посилання дозволяє користувачам-агентам (візуальним та невидимим) повідомляти користувачам про природу пов'язаного ресурсу:

alt

Атрибут alt визначений у наборі тегів (а саме img, область та необов'язково для введення та аплета), що дозволяє надати текстовий еквівалент об’єкту.

Текстовий еквівалент приносить наступні переваги вашому веб-сайту та його відвідувачам у таких поширених ситуаціях:

• В даний час веб-браузери доступні в дуже широкому спектрі платформ з дуже різними можливостями; деякі взагалі не можуть відображати зображення або лише обмежений набір типів зображень; деякі з них можна налаштувати не завантажувати зображення. Якщо у вашому коді на зображенні встановлений атрибут alt, більшість із цих браузерів відображатиме опис, який ви дали замість зображень
• деякі з ваших відвідувачів не можуть бачити зображення, будь вони сліпі, кольорові, слабозорі; атрибут alt допомагає тим людям, які можуть покластися на нього, щоб добре уявити, що на вашій сторінці
• боти пошукової системи належать до двох вищезазначених категорій: якщо ви хочете, щоб ваш веб-сайт був індексований так добре, як це заслуговує, використовуйте атрибут alt, щоб переконатися, що вони не пропустять важливих розділів ваших сторінок.

У цій статті Yahoo Developer Network ( заархівоване посилання ) пропонується, що якщо ви абсолютно повинні використовувати фонове зображення замість елемента img та атрибута alt, використовуйте атрибути ARIA наступним чином:

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

Випадок використання в статті описує, як Flickr вирішив використовувати фонові зображення, оскільки продуктивність значно покращилася на мобільних пристроях.

Я думаю, ви повинні прочитати цей пост Крістіана Хайльмана. Він пояснює, що фонові зображення є ТОЛЬКО для естетики і не повинні використовуватися для подання даних, а тому виключаються з правила, що кожне зображення повинне мати змінний текст.

Уривок (моє наголос):

Фонові зображення CSS, які за визначенням мають лише естетичну цінність, а не візуальний зміст самого документа . Якщо вам потрібно помістити зображення на сторінку, яке має значення, тоді використовуйте елемент IMG та надайте йому альтернативний текст в атрибуті alt.

Я згоден з ним.

Як було зазначено в інших відповідях, для тегу div немає лише (підтримуваного) атрибута alt для тегу img.

Справжнє питання - чому потрібно додати атрибут alt до всіх фонових зображень для сайту? Виходячи з цієї відповіді, він допоможе вам визначити, який маршрут слід пройти у вашому підході.

Візуальний / текстовий: Якщо ви просто намагаєтеся додати текстовий відступ для користувача, якщо зображення не завантажується, просто використовуйте атрибут заголовка. Більшість браузерів надає візуальну підказку (поле вікна), коли користувач наводить на зображення зображення, і якщо зображення не завантажується з будь-якої причини, воно поводиться так само, як атрибут alt, що представляє текст, коли зображення виходить з ладу. Ця техніка все ще дозволяє сайту прискорити завантаження, зберігаючи зображення, встановлені на фони.

Зчитувачі екрану: опція середини дороги - це різниться, оскільки технічне збереження ваших зображень як фонового режиму та використання підходу атрибутів заголовка повинно працювати, як натякано вище, "Аудіо користувацькі агенти можуть говорити інформацію про заголовок у подібному контексті". Однак це не гарантується у всіх випадках, навіть деякі читачі можуть ігнорувати все це разом. Якщо ви вирішите вибрати цей підхід, ви також можете спробувати додати арії-мітки, щоб переконатися, що читачі екрану вибирають їх.

SEO / пошукові системи: Ось найбільший, якщо ви були подібні до мене, ви додавали свої фонові зображення, все було добре. Потім місяці пізніше замовник (а може і сам) зрозумів, що ви пропускаєте якесь першокласне золото SEO, не маючи альту для своїх зображень. Майте на увазі, що атрибут заголовка не має жодної ваги для пошукових систем , з мого дослідження та як згадується у статті тут: https://www.searchenginejournal.com/how-to-use-link-title-attribute-corправильно /. Тож якщо ви орієнтуєтесь на SEO, вам знадобиться мати тег img з атрибутом alt. Один з можливих підходів - просто завантажувати дуже маленькі фактичні зображення на сайт з атрибутами alt, таким чином ви отримуєте всю SEO та не потрібно перестроювати наявний CSS на місці. Однак це може призвести до додаткового часу завантаження залежно від розміру, а Google дійсно дивиться на шлях зображення при індексації. Якщо коротко, якщо ви їдете цим маршрутом, просто прийміть те, що потрібно зробити, і додайте фактичні зображення, а не використовуйте фони.

Загальна думка полягає в тому, що ви не повинні використовувати фонові зображення для речей зі значущим смисловим значенням, тому насправді немає правильного способу зберігання даних alt з цими зображеннями. Важливе питання - що ви збираєтеся робити з цими даними alt? Ви хочете, щоб він відображався, якщо зображення не завантажуються? Вам це потрібно для якоїсь програмної функції на сторінці? Ви можете зберігати дані довільно, використовуючи створені властивості css, які не мають ніякого значення (це може спричинити помилки?) АБО додаючи приховані зображення, у яких є зображення та тег alt, і тоді, коли вам потрібні фонові зображення alt, ви можете порівняти зображення шляхи, а потім обробляти дані, однак ви хочете скористатися певним сценарієм, щоб імітувати те, що потрібно. Я не знаю, як змусити браузер автоматично обробляти якийсь атрибут alt для фонових зображень.

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

<div class"ir background-image">Your alt text</div>

з фоновим зображенням, що знаходиться у класі, якому ви призначаєте фонове зображення, і ir може бути HTML5boilerplates клас заміни зображення, нижче:

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

Ця стаття від W3C розповідає про те, що вони думають, що вам слід зробити https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage

і тут є приклади http://mars.dequecloud.com/demo/ImgRole.htm

серед яких

<a href="http://www.facebook.com">
 <span class="fb_logo" role="img" aria-label="Connect via Facebook">
 </span>
</a>

Але якщо, як у наведеному вище прикладі, елемент, що містить фонове зображення, є лише порожнім контейнером, я особисто вважаю за краще вкласти текст туди і заховати його за допомогою CSS; там, де ви показуєте зображення замість цього:

<a href="http://www.facebook.com"><span class="fb_logo">
  Connect via Facebook
</span></a>

.fb_logo {
  height: 37px; width: 37px;
  background-image: url('../gfx/logo-facebook.svg');
  color:transparent; overflow:hidden; /* hide the text */
}

Ось мій варіант вирішення цього виду проблеми:

Створіть новий клас у CSS та відключіть екран. Потім поставте текст alt в HTML прямо перед властивістю, яка викликає ваше фонове зображення. Може бути будь-який тег, H1, H2, pі т.д.

CSS

<style type="text/css">
  .offleft {
    margin-left: -9000px;
    position: absolute;
  }
</style>

HTML

<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image>  </div>

Мені не зрозуміло, чого ти хочеш.

Якщо ви хочете, щоб властивість CSS надавала значення атрибута alt, можливо, ви шукаєте функцію атрибута CSS, наприклад:

IMG:before { content: attr(alt) }

Якщо ви хочете помістити атрибут alt на фонове зображення, то ... це дивно, оскільки атрибут alt є атрибутом HTML, тоді як фонове зображення - це властивість CSS. Якщо ви хочете використовувати атрибут HTML alt, я думаю, вам знадобиться відповідний HTML-елемент, щоб ввести його.

Чому вам "потрібно використовувати альти-теги на фонових зображеннях": це з семантичної причини чи з якоїсь причини візуального ефекту (і якщо так, то який ефект чи з якої причини)?

Ви можете досягти цього, помістивши altтег у те div, на якому з’явиться ваше зображення.

Приклад:

<div id="yourImage" alt="nameOfImage"></div>