Від автора: атрибут alt усередині тега img забезпечує альтернативний контент для користувачів, які не можуть завантажувати зображення, або тих, у кого вони відключені. Ми користуємося цим атрибутом, щоб зробити свій контент більш доступним, але ви замислювалися коли-небудь, як насправді це виглядає?
Ми збираємося використовувати в якості прикладу шаблон електронної пошти, створений у попередньому підручнику, але ці принципи так само застосовні і до браузерному веб-дизайну.
Ось як буде виглядати файл з вимкненими зображеннями:
Зрозуміло, що альтернативний текст непривабливий — особливо посилання. Але дещо ми можемо з ним зробити. В основному заголовку ми значно збільшимо текст і зробимо його темно-синім замість чорного. Для цього потрібно додати батьківського елементу (в даному випадку клітинці) стилі. Вони ж потім будуть застосовані до тегах alt всередині комірки. Ось вона:
Призначимо стилі тексту, щоб він виглядав так:
І визначимо стилі посиланнями соціальних мереж, щоб ті стали білими:
|
|
Так просто! Тепер можна бути впевненим, що адреса електронної пошти красиво відображатися навіть при вимкнених зображеннях.
