Налаштування альтернативних текстів для зображень в 1С-Bitrix
Пустий alt — це не просто проблема доступності. Це SEO-втрата: Google використовує alt-текст як текстовий сигнал для ранжування зображень у пошуку. Інтернет-магазин з тисячею товарів, у яких alt або пустий, або дорівнює «image.jpg» — це тисяча пропущених точок входу з Google Images. В Bitrix alt-тексти не заповнюються автоматично ніде в стандартних компонентах.
Де зберігається alt у інфоблоці
Bitrix зберігає alt-текст зображення в таблиці b_file — поле DESCRIPTION. Це поле заповнюється в адміністраторській частині при завантаженні файлу. Також для властивостей типу F є поле DESCRIPTION в b_iblock_element_property — це підпис до конкретного використання зображення в елементі, незалежно від підпису в b_file.
Пріоритет при виведенні: якщо у властивості елемента є DESCRIPTION — використовувати його; якщо ні — взяти DESCRIPTION з b_file; якщо й там пусто — згенерувати з назви товару.
В шаблоні компонента:
$fileId = $arResult['DETAIL_PICTURE']['ID'];
$fileData = \CFile::GetFileArray($fileId);
$alt = '';
// Пріоритет 1: опис властивості елемента
if (!empty($arResult['PROPERTIES']['DETAIL_PICTURE']['DESCRIPTION'])) {
$alt = $arResult['PROPERTIES']['DETAIL_PICTURE']['DESCRIPTION'];
}
// Пріоритет 2: опис файлу
elseif (!empty($fileData['DESCRIPTION'])) {
$alt = $fileData['DESCRIPTION'];
}
// Пріоритет 3: назва товару
else {
$alt = $arResult['NAME'];
}
$alt = htmlspecialcharsEx($alt);
Масове заповнення alt для існуючих товарів
Якщо магазин працює кілька років і тисячі зображень без alt — потрібен скрипт масового заповнення. Логіка: пройти всі елементи інфоблока, для кожного взяти DETAIL_PICTURE та MORE_PHOTO, перевірити DESCRIPTION в b_file, при пустому — заповнити з назви елемента.
Скрипт запускається агентом Bitrix або через CLI:
$res = \CIBlockElement::GetList(
['ID' => 'ASC'],
['IBLOCK_ID' => CATALOG_IBLOCK_ID],
false,
['nTopCount' => 100, 'iNumPage' => $page],
['ID', 'NAME', 'DETAIL_PICTURE']
);
while ($el = $res->GetNextElement()) {
$fields = $el->GetFields();
if (empty($fields['DETAIL_PICTURE'])) continue;
$fileId = $fields['DETAIL_PICTURE'];
$fileData = \CFile::GetFileArray($fileId);
if (empty($fileData['DESCRIPTION'])) {
$DB->Query("UPDATE b_file SET DESCRIPTION = '" .
$DB->ForSql($fields['NAME']) .
"' WHERE ID = " . (int)$fileId);
}
}
Прямий UPDATE в b_file швидше, ніж CFile::Update() — той скидає кеш по кожному файлу окремо.
Alt для зображень в інфоблоці новин та статей
Для зображень, вставлених через TinyMCE у поле DETAIL_TEXT, alt заповнюється безпосередньо в редакторі. Проблема: якщо контент-менеджери ігнорують поле alt у діалозі вставки зображення, картинки отримують пустий alt="" або alt="image".
Рішення на рівні редактора: в налаштуваннях TinyMCE (файл конфігурації в шаблоні) додати обов'язковість поля alt через користувацький плагін або через валідацію форми вставки. Інший підхід — постобробка HTML при збереженні через обробник OnBeforeIBlockElementUpdate: парсити DETAIL_TEXT через DOMDocument, знаходити <img> без alt та підставляти заголовок статті.
Декоративні зображення
Іконки, розділювачі та декоративні фонові елементи повинні мати пустий alt="" — це намисне пустий атрибут, що сигналізує screen reader ігнорувати зображення. Помилка — взагалі не вказувати alt (порушення WCAG 1.1.1) або вказувати описовий текст для декору (зайвий шум для assistive technology). В шаблонах Bitrix іконки часто виводяться через <img> — варто замінити їх на inline SVG з aria-hidden="true" або додати явний alt="".