От автора: в последнее время доступность в электронных письмах все более актуально, и это хорошо. Однако я все еще встречаю много писем с очень слабой доступностью. Во время уроков программирования электронных писем и на конференциях я понял, что люди быстрее понимают разницу между доступными и обычными письмами, когда им это показывают, а не рассказывают. Это становится хорошим стимулом для того, чтобы сделать электронное письмо более доступным. Ниже я собрал четыре совета по улучшению доступности электронных писем с видео.
1. Всегда добавляйте атрибут alt
С HTML 4 атрибут alt стал обязательным в теге . То есть все изображения в электронном письме должны иметь атрибут 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). Кстати, VoiceOver — #TeamGif. Это неудобно. Представьте, что будет, если название файла – это 32 случайных символа.
К счастью, это можно исправить, добавив пустой или заполненный текстом атрибут alt. Ниже поправленное видео из предыдущего примера.
Используйте alt аккуратно. Если в изображении alt пустой, и изображение обернуто в ссылку, VoiceOver может вслух прочитать последнюю часть URL.
Письмо от Spotify, которым поделился Alex Kelly (код).
Несмотря на то, что в письме почти весь текст персонализирован, все полностью сгенерировано из изображений. Все письмо кликабельно. Однако у всех изображений атрибут alt пустой. Лучше в атрибут alt добавить правильный текст.
2. Используйте релевантный альтернативный текст
Наличие атрибута alt – первый важный шаг. Теперь проверим, что текст в нем релевантный.
Письмо с Deliveroo, которым поделился Email Chic Geek (код).
600px WIDE IMAGE – такой альтернативный текст задан у главного изображения в письме. Текст задан в изображении и заголовке. Альтернативный текст совсем не помогает. Ниже то же письмо, но с правильным альтернативным текстом.
Еще один тревожный пример появился в прошлом году от American Eagle Outfitters (код).
Во всех изображениях в письме задан альтернативный текст «Turn your images on. Shop AEO». Так делать нельзя. Люди, для которых ввели атрибут alt, не могут просто взять и включить зрение.
Общее правило – включать в alt текст, который можно было бы дать вместе с изображением. Если текста нет, вы сами решаете, несет ли изображение важный смысл, стоит ли его описывать или нет.
3. Используйте role=”presentation” в таблицах
HTML таблицы не предназначены для презентации. Этот большой урок мы выучили в начале 2000-х. Электронные письма не исключение. Кроме того, что в электронных письмах необходимо использовать таблицы, чтобы применить определенные стили в Outlook (width и padding).
VoiceOver зачитывает вслух каждую строку и ячейку тега table. Письмо с Jacadi (код).
Чтобы избавиться от этого, используйте атрибут role=»presentation» на всех таблицах в макете. Предыдущий пример с этим атрибутом в главной таблице.
VoiceOver – достаточно умный скрин ридер и не будет озвучивать строки и колонки, если в таблице всего одна строка или ячейка. Но на всякий случай добавляйте role=»presentation» во все таблицы, это хорошая практика.
4. Используйте атрибут lang
Не все говорят на одном с вами языке. Поэтому не на всех компьютерах установлен ваш язык. Если не указан язык контента, скрин ридеры типа VoiceOver будут использовать язык по умолчанию.
То есть если у вас Voice Over по умолчанию задан на французский, а на странице письма с английским текстом отсутствует атрибут lang, то скрин ридер прочитает ее на французском. Если когда-нибудь хотели узнать, как робот на французском читает английский текст, то теперь можете проверить.
Достаточно добавить атрибут lang=»en» в тег html, и письмо станет доступным. Voice Over теперь может выбрать правильный язык, если он установлен на вашем компьютере. Результат.
Представленные советы не гарантируют 100% доступность. Но это легкие первые шаги, которые разработчики писем должны делать.
Процитирую разработчика Paul Airy с его же конференции Accessibility in Action на Litmus Live в прошлом году: «Любая реализация доступности, неважно насколько она мала, уже успех.»
Автор: Rémi Parmentier
Источник: https://emails.hteumeuleu.com/
Редакция: Команда webformyself.