Регистрация
Создай мобильный сайт в два клика
PAGECARD - платформа создания мобильных сайтов и привлечения клиентов
О проекте
Каталог скидок
Возможности
Тарифы
Блог
База знаний
Меню
Регистрация
Маркетинг | Email маркетинг

Как работает доступность в email

Доступность в электронных письмах становится всё более и более популярной за прошедшие годы.
Доступность в электронных письмах становится всё более и более популярной за прошедшие годы. Но до сих пор подавляющее большинство писем слабо адаптированы под доступность.

В этой статье мы не только покажем, что такое доступные письма, но и расскажем с примерами кода как их делать, параллельно рассказав о том в чем же разница между обычным письмом и доступным. Ниже вы прочитаете четыре совета для того, чтобы улучшить доступность в своих письмах, а также увидите наглядные видео примеры с ними.
Всегда используйте атрибут ALT
Этот атрибут необходим в <img> элементе начиная с HTML4. Это говорит о том, что каждое изображение в вашем письме должно иметь alt, даже если вы оставляете его пустым. alt=""

В противном случае, скринридеры такие как VoiceOver могут просто прочитать имя файла изображения. Вот пример письма от LEGO.
Почти у всех изображений в этом письме отсутствует атрибут alt. Для примера, вот код для изображения, которое находится в шапке письма.
<img src="…/n_sah_h3.gif" height="33" width="191" style="display:block;border:0;" />
Как мы уже писали выше, из-за отсутствия атрибута alt, VoiceOver прочтёт само имя файла, а именно (n_sah_h3.gif). Это, скажем так, не совсем помогает при чтении. Просто представьте насколько ужасно это будет выглядеть, когда в название файла будет состоять из 30 символов.

Но к нашему счастью, это можно легко исправить с помощью атрибута alt, будь он пустым или содержащим определенный текст. Вот исправленный пример:
Будьте аккуратны с пустым alt. Если у вас пустой alt с ссылкой, то VoiceOver может прочитать последняя часть URL.

Вот плохой пример от Spotify.
Пусть даже в этом письме в основном персонализированный текст, оно полностью состоит из изображений. Так же оно всё кликабельно. Но к сожалению, каждое изображение имеет пустой атрибут alt. Что нужно сделать в этом случае? Добавить подходящий альтернативный текст.
Используйте релевантный альтернативный текст
Вы уже поняли, что наличие атрибута alt это необходимость. Но теперь давайте убедимся в том, что он релевантент. Вот пример письма от Deliverloo.
"600px WIDE IMAGE". Это альтернативный текст для главного изображения из этого письма, которое включает в себя как фотогафию, так и заглавный текст. Этот alt выходит просто бесполезен. А вот тоже самое письмо, но с верным альтернативным текстом.
А вот еще один странный пример. На этот раз от American Eagle Outfitters.
Каждый alt в этом письме содержит текст Turn your images on. Shop AEO. Это просто ужасно. Потому что люди, которым в основном нужен альтернативный текст, не имеют возможности, по какой-либо из причин смотреть на изображение вместо него.

Хорошим выходом, основываясь на практике, является включение атрибута alt, текст в котором совпадает с текстом в письме. Ну а если уже нет текста, то от вас будет зависеть то, какой смысл несет изображение и нужно ли его описывать.
Используйте role="presentation" в таблицах
Как вы уже знаете, HTML таблицы не созданы для отображения контента. Это хороший урок, который мы выучили в начале 2000х. С письмами также. Кроме того, что вам нужно использовать таблицы, чтобы применять определенные стили, такие как width, padding и т.п в Outlook и других почтовых клиентах.

В VoiceOver каждая строка или каждая ячейка таблицы будут прочитаны. Вот пример письма от Jacadi.
Чтобы избежать этого, вы можете использовать role="presentation" на каждой нужной таблице шаблона. Вот предыдущий пример, исправленный этим атрибутом.
У VoiceOver есть особые моменты, в которых будет достаточно умно не произносить содержимое строки или колонки, если таблица включает в себя только одну строку с колонкой, соответствующе. Но чтобы быть полностью уверенным, это хорошая практика, добавлять role="presentation" всем нужным для шаблона табличкам.
Используйте атрибут lang
Не все говорят на одном с вами языке. Следовательно, не каждый компьютер настроен под один язык с вашим. Без любого определения языка, на котором написан контент, скринридер обычно использует язык, выставленный по-дефолту.

О чём это говорит? О том, что если у вас есть компьютер и VoiceOver, по-дефолту настроенный на французский, а письмо на английском, но без определения lang, то оно будет прочтено как французское. Как это будет выглядеть, посмотрите ниже.
Добавляя атрибут lang="en" в тег <html>, этого будет достаточно, чтобы сделать письмо доступнее. VoiceOver сейчас способен выбрать правильный язык. Вот результат:
Эти советы не означают того, что ваши письма будут на 100% доступны. Но если уж говорить по делу, то это будут первые шаги в направлении доступности, которые должен сделать каждый разработчик писем.
Я очень рад, что вы прочитали статью. Надеюсь, что наш сервис и наш блог помогут вам развивать ваш бизнес.
Антон Столповский
основатель Pagecard.me
Узнавайте первыми о выходе новых функций и получайте скидки на создание сайтов
Подписаться на рассылку
Узнавайте первыми о выходе новых функций
и получайте скидки на создание сайтов