Мережа черпає свою силу в різноманітті: і чим зручніше ресурс, тим краще. Атрибут alt був раннім прикладом цього, але написання хороших, точних описових текстів вимагає знання деяких правил.
Атрибут alt (часто помилково згадується як «тег alt») необхідний для кожного елемента на вашому сайті. У більшості випадків найпростіший спосіб скласти текст alt - це писати так, ніби ви описуєте картинку.
Наприклад, фото, що знаходиться вгорі даної статті може бути описано як
Але краще:
Загальне правило: чим точніше текст описує, тим краще.
Винятки Alt: логотипи
Якщо основний контент зображення - текст, то правила змінюються. Зображення, в якому текст, «удрукований» всередину, наприклад, як це:
... має мати атрибут alt, який повністю буде відповідати тексту на зображенні.
Причина проста: більшість екранних зчитувачів ще не можуть розпізнати текст, надрукований в зображенні, роблячи його незрозумілим для пошукових систем і сліпих людей. Розміщуючи текстовий опис через значення alt, ви переводите опис і для тих, і для інших.
Часто ви можете побачити бідно написану розмітку:
Не треба так.
До речі, це хороший привід розглянути відповідну розмітку для векторної графіки (svg) або розмітку для логотипів. Правильно створений текст в розмітці логотипу буде справжнім текстом, таким чином, він буде читаємо. Важливо знати, що якщо текст не був сприйнятий розміткою svg, то семантична складова тексту буде втрачена. Альтернативним (можливо, навіть кращим) рішенням буде зберегти графічну складову логотипу в svg, а решта записати через стилізовану розмітку. Звичайно, обидві версії будуть співставлені під час завантаження вбудованого шрифту.
порожній alt
Є 2 умови, коли alt може залишитися порожнім:
- зображення бідно наповнений, немає інформації, яку можна описати;
- зображення детально описано відповідним елементом семантичної верстки: зазвичай це
.
Але якщо ви хочете зберегти «вага» сторінки, то alt повинен бути прописаний для всіх зображень.
Щоб залишити атрибут порожнім, задайте значення у вигляді подвійних лапок без пробілу:.
Також ви можете не задавати значення alt в HTML5:.
Бувають рідкісні випадки, коли значення атрибута картинки схоже з її
Не плутайте alt з title
Іноді ви можете побачити розмітку, яка використовує один і той же значення тексту для alt і title. Це не дуже хороша ідея для загального правила. Несподівано виникає текст підказки ледь видно користувачам, так як з'являється на кілька секунд і не буде помічений користувачам з обмеженими можливостями, якщо не буде зафіксовано.
Стиль тексту в атрибуті alt
Оскільки читачі будуть переглядати картинку в складі загального контенту сторінки, то і alt варто прописувати в тому ж стилі, що і весь інший текст.