Підказка: Памятайте про стилі альтернативного тексту

16

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

Ми збираємося використовувати в якості прикладу шаблон електронної пошти, створений у попередньому підручнику, але ці принципи так само застосовні і до браузерному веб-дизайну.

Підказка: Памятайте про стилі альтернативного тексту

Ось як буде виглядати файл з вимкненими зображеннями:

Підказка: Памятайте про стилі альтернативного тексту

Зрозуміло, що альтернативний текст непривабливий — особливо посилання. Але дещо ми можемо з ним зробити. В основному заголовку ми значно збільшимо текст і зробимо його темно-синім замість чорного. Для цього потрібно додати батьківського елементу (в даному випадку клітинці) стилі. Вони ж потім будуть застосовані до тегах alt всередині комірки. Ось вона:

Підказка: Памятайте про стилі альтернативного тексту

Призначимо стилі тексту, щоб він виглядав так:

Підказка: Памятайте про стилі альтернативного тексту

І визначимо стилі посиланнями соціальних мереж, щоб ті стали білими:

Підказка: Памятайте про стилі альтернативного тексту   Підказка: Памятайте про стилі альтернативного тексту

Підказка: Памятайте про стилі альтернативного тексту

Так просто! Тепер можна бути впевненим, що адреса електронної пошти красиво відображатися навіть при вимкнених зображеннях.