Доступность электронных писем в действии

Доступность электронных писем в действии

От автора: в последнее время доступность в электронных письмах все более актуально, и это хорошо. Однако я все еще встречаю много писем с очень слабой доступностью. Во время уроков программирования электронных писем и на конференциях я понял, что люди быстрее понимают разницу между доступными и обычными письмами, когда им это показывают, а не рассказывают. Это становится хорошим стимулом для того, чтобы сделать электронное письмо более доступным. Ниже я собрал четыре совета по улучшению доступности электронных писем с видео.

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, то скрин ридер прочитает ее на французском. Если когда-нибудь хотели узнать, как робот на французском читает английский текст, то теперь можете проверить.

Письмо с Mailchimp (код).

Достаточно добавить атрибут lang=»en» в тег html, и письмо станет доступным. Voice Over теперь может выбрать правильный язык, если он установлен на вашем компьютере. Результат.

Представленные советы не гарантируют 100% доступность. Но это легкие первые шаги, которые разработчики писем должны делать.

Процитирую разработчика Paul Airy с его же конференции Accessibility in Action на Litmus Live в прошлом году: «Любая реализация доступности, неважно насколько она мала, уже успех.»

Автор: Rémi Parmentier

Источник: https://emails.hteumeuleu.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree