الدليل النهائي لنص ALT المصمم في البريد الإلكتروني

نشرت: 2016-10-31

من أفضل الممارسات المقبولة عمومًا في عالم البريد الإلكتروني تضمين سمات ALT للصور. اختصار للنص البديل ، أصبح نص ALT في البريد الإلكتروني الآن هو الممارسة القياسية لهواة البريد الإلكتروني.

هناك عدة أسباب لذلك:

  • يقوم معظم عملاء البريد الإلكتروني بحظر الصور افتراضيًا. في بعض الحالات ، بدلاً من إظهار الصورة ، سيعرض عميل البريد الإلكتروني بدلاً من ذلك نص ALT. هذا مفيد بالتأكيد ، خاصة في الحالات التي يتكون فيها تصميم البريد الإلكتروني في الغالب من الصور. يمكن أن يساعد نص ALT في توصيل الرسالة حتى لو لم تستطع الصور ذلك.
  • في الحالة التي يتعذر فيها تحميل الصور أو لا يتم تحميلها بسبب اتصال سيء أو ارتباط معطل وما إلى ذلك ، سيظهر نص ALT بدلاً من الصورة.
  • يدرك المسوقون والمصممين الحساسين لاحتياجات القراء ضعاف البصر أن برامج قراءة الشاشة تستخدم نص ALT. نظرًا لأن هؤلاء المستخدمين غير قادرين على عرض النص أو الصور ، يعمل نص ALT على وصف الصورة عبر قارئ الشاشة.
تحقق من أن صورك تحتوي على نص ALT

تحقق من أن صورك تحتوي على نص ALT

باستخدام قائمة التحقق من Litmus ، ستحصل على معاينات لرسائل البريد الإلكتروني الخاصة بك مع إلغاء الصور ، وسيتم إعلامك إذا كانت أي من صورك تفتقد إلى نص ALT. أرسل بثقة في كل مرة.

جرب Litmus مجانًا →

إعداد نص ALT قياسي

يعد تعيين نص ALT للصور في بريد إلكتروني بتنسيق HTML أمرًا بسيطًا. تُعرف باسم سمة ، وهي جزء قياسي من بناء جملة HTML ، ويتم تضمينها في علامة الصورة:

 <img src="logo.jpg" width="400" height="149" alt="Litmus" >

من المهم تضمين قيم الطول والعرض لأن هذا يؤدي إلى إنشاء مربع عنصر نائب لنص ALT ليتم تثبيته عند تعطيل الصور.

عرض نص ALT قياسي

إليك ما تبدو الصور المعطلة في رسالة بريد إلكتروني بدون نص ALT المرسل إلى Gmail:

Disabled image without alt text in Gmail

مقارنة بالصور المعطلة في رسالة بريد إلكتروني تحتوي على نص ALT :

Disabled image with alt text in Gmail

أي واحد تفضل أن تحصل عليه؟

إضافة نمط إلى نص ALT

يمكنك أيضًا الاستمتاع بنص ALT الخاص بك ، مع إضافة القليل من CSS المضمنة لتغيير الخط واللون والحجم والنمط والوزن لنص ALT:

 <img src="NAME OF IMAGE.PNG" width="500" height="462" alt="Litmus"/>

إليك نفس المثال أعلاه ، ولكن مع تطبيق أنماط نص ALT:

Disabled image with styled alt text in Gmail

دعم نصي ALT مصمم عبر عملاء البريد الإلكتروني

على الرغم من كونه أسلوبًا أنيقًا ، إلا أن هذا البريد الإلكتروني الذي نتحدث عنه ، لذلك من الطبيعي أن يكون الدعم مبعثرًا قليلاً بين برامج البريد الإلكتروني المختلفة. لقد اقترضت بعض العناصر من بريد Dreamforce المثير للإعجاب من Salesforce لاختبار نص ALT المصمم للأمثلة التالية.

دعم نصي ALT على غرار بريد الويب

نص ALT في عملاء بريد الويب
عملاء بريد الويب الصور محظورة بشكل افتراضي يعرض نص ALT يعرض نص ALT ذو نمط
بريد AOL (Internet Explorer)
AOL Mail (Firefox)
بريد AOL (كروم)
Comcast (جميع المتصفحات)
G-Suite و Gmail (Internet Explorer)
G-Suite و Gmail (Firefox)
G-Suite و Gmail (Chrome)
GMX.de (إنترنت إكسبلورر)
GMX.de (Firefox)
GMX.de (كروم)
Mail.ru (جميع المتصفحات)
Office 365 (Internet Explorer)
Office 365 (Firefox)
أوفيس 365 (كروم)
Outlook.com (إنترنت إكسبلورر) بعض الأحيان*
Outlook.com (Firefox) بعض الأحيان*
Outlook.com (Chrome) بعض الأحيان*
Web.de (Internet Explorer)
Web.de (Firefox)
Web.de (Chrome)
ياهو! البريد (Internet Explorer)
ياهو! البريد (Firefox)
ياهو! البريد (كروم)

عملاء بريد الويب مثل Gmail هم الأكثر تنوعًا نظرًا لأنه يمكن الوصول إلى برامج البريد هذه في متصفحات مختلفة. في جميع عملاء بريد الويب ، يعتمد دعم نص ALT المصمم على المتصفح المستخدم. يتم دعم نص ALT ذي النمط في الإصدارات الحالية من Firefox و Chrome و Safari.

على سبيل المثال ، سيكون نص ALT المصمم مرئيًا للمشترك الذي يعرض Gmail في Firefox ، ولكن نوعًا من الأعمال فقط في Internet Explorer. في هذه الحالة ، يتم دعم اللون ، ولكن ليس الخط أو السمات الأخرى. يبدو أن Internet Explorer مستعرض غير مألوف لنص ALT المصمم بشكل عام. وجدنا أنه بينما كان اللون مدعومًا ، لم يكن الخط غالبًا:

  • Gmail و G-Suite في Internet Explorer
  • GMX.de في Internet Explorer
  • Office 365 في Internet Explorer
  • Outlook.com في Internet Explorer
  • Web.de في Internet Explorer
  • ياهو! البريد في Internet Explorer

نص ALT منمق في Gmail / Firefox:

Styled ALT text in Gmail/Firefox

نص ALT منمق في Gmail / IE:

Styled ALT text in Gmail/IE

نص ALT على الصور المرتبطة

قد يكون نص ALT للصور المرتبطة مسطرًا أو أزرق في بعض عملاء بريد الويب. ياهو! يقوم بتسطير نص ALT في الصور المرتبطة ، بينما يقوم Gmail بتسطير الألوان المحددة ويتجاهلها ، وبدلاً من ذلك يتحول إلى اللون الأزرق النابض بالحياة افتراضيًا:

Styled & Linked ALT text in Gmail/Firefox

Outlook.com

بدلاً من حظر جميع الصور ، يدعي Outlook.com "حظر المحتوى من المرسلين المشبوهين" ، على الرغم من أنني لست متأكدًا من كيفية تحديدهم لمن يبدو مريبًا! بشكل عشوائي ، يكون بعض المرسلين "موثوقين" ، ويعرضون الصور تلقائيًا ، بينما يقوم الآخرون بإرسال تحذير بشأن المحتوى المحظور:

Blocked Content in Outlook.com

يمكن للمستخدمين حظر الصور لأي شخص غير موجود في قائمة المرسلين الموثوق بهم في إعدادات Outlook.com الخاصة بهم. يتعامل Outlook.com مع هذين النوعين من تصفية المحتوى بشكل مختلف ، وذلك باستخدام سلوك حظر الصور الشبيه بـ Gmail لمرسلين "مريبين المظهر" أثناء استخدام المربعات الرمادية في Hotmail لحظر الصور للمستخدمين الذين لديهم إعدادات أكثر صرامة لحظر المحتوى.

دعم نصي ALT بنمط سطح المكتب

عملاء سطح المكتب أكثر موثوقية نظرًا لعدم وجود العديد من المتغيرات المعنية:

نص ALT في عملاء سطح المكتب
عملاء سطح المكتب الصور محظورة بشكل افتراضي يعرض نص ALT يعرض نص ALT ذو نمط
بريد أبل
لوتس نوتس 8.5
توقعات 2000-2003 نوعا ما*
برنامج Outlook 2007 نوعا ما*
برنامج Outlook 2010 نوعا ما*
Outlook 2011 (Outlook لنظام التشغيل Mac) نوعا ما*
برنامج Outlook 2013 نوعا ما*
توقعات 2016 نوعا ما*
ثندربيرد
بريد Windows 10

* يضيف Outlook رسالة أمان إلى نص ALT. مزيد من التفاصيل أدناه.

بينما لا يحظر Apple Mail و Thunderbird الصور افتراضيًا ، يمكنك اختيار القيام بذلك في التفضيلات لكل تطبيق. لقد قمت يدويًا بتمكين حظر الصور على هؤلاء العملاء لمعرفة ما إذا كانوا يدعمون نص ALT المصمم.

كانت هناك بعض الاختلافات الطفيفة لدعم المتغيرات الأخرى ، لا سيما المتعلقة بخطوط الويب:

  • لم يدعم Apple Mail الخطوط ذات الأنماط ، على الرغم من استمرار تضمين اللون والخصائص الأخرى.
  • في Outlook 2000-2003 ، على الرغم من أنه يمكنك تغيير اللون ، لا يمكنك ضبط أي شيء آخر باستخدام نص ALT ذي النمط.

رسالة أمان Outlook

Outlook 2003 و 2007 و 2010 و 2013 و 2016 تمهيدًا لنص ALT مع رسالة أمان طويلة تنص على "انقر بزر الماوس الأيمن هنا لتنزيل الصور. للمساعدة في حماية خصوصيتك ، منع Outlook التنزيل التلقائي لهذه الصورة من الإنترنت. " لسوء الحظ ، هذا يجعل نص ALT في عملاء البريد الإلكتروني هؤلاء عديم الفائدة تقريبًا لأنه يظهر فقط في نهاية تحذير أمان Outlook:

ALT Text in Outlook

تظهر هذه الرسالة أيضًا في نظام التشغيل Windows 10 ، مما يحظر تمامًا أي نص ALT.

دعم النص البديل على الهاتف المحمول

يتمتع عملاء الجوّال بدعم قوي لنص ALT المصمم ، وهو خبر سار - خاصةً للمسوقين الذين لديهم جماهير كثيفة من Android.

نص ALT في عملاء الجوال
عملاء الجوال الصور محظورة بشكل افتراضي يعرض نص ALT يعرض نص ALT ذو نمط
بريد Android الإلكتروني (4.4)
Android Gmail (4.4)
AOL Mail (متصفح Android)
AOL Mail (متصفح iPhone)
تطبيق AOL Alto Mail
نظام التشغيل بلاك بيري 6
نظام التشغيل بلاك بيري 7
بلاك بيري ز 10
iOS 6.x (عميل البريد الإلكتروني الأصلي)
iPhone 5s (iOS 7)
iPhone 5s (iOS 8)
أيفون 6
آيفون 6s
iPhone 6s +
iPad (iOS 9)
iPad Mini (iOS 9)
تطبيق Gmail (iOS)
تطبيق Gmail (متصفح iPhone)
صندوق البريد (iOS)
Outlook.com (مستعرض Android) بعض الأحيان
Outlook.com (متصفح iPhone) بعض الأحيان
ويندوز موبايل 7.5
هاتف ويندوز 8
ياهو! التطبيق (Android)
ياهو! التطبيق (iOS)
ياهو! البريد (متصفح Android) نوعا ما نوعا ما
ياهو! البريد (متصفح iPhone)

مثل Apple Mail و Thunderbird ، قمت يدويًا بتحديث إعدادات iOS الخاصة بي لحظر الصور من أجل ملاحظة كيفية تعامل نظام تشغيل الهاتف المحمول هذا مع نص ALT.

نص ALT منسق في Android (Samsung Galaxy Nexus):

Styled ALT text in Android

يظهر نص ALT المصمم بشكل مماثل في تطبيقات البريد الإلكتروني و Gmail في Android.

نص ALT منمق في BlackBerry OS 6 (Torch 9810):

Styled ALT text in BlackBerry

نص ALT منسق في iOS (iPhone 5):

Styled ALT text in iPhone

حظر الصور في Windows Phone 7.5 (Nokia Lumia 900):

Styled ALT text in Windows Phone

خصائص خط CSS والروابط والطول متغيرات

الغوص في التفاصيل ، يتم دعم معظم خصائص الخط التالية في العملاء الذين يعرضون نص ALT ذو نمط:

  • خط العائلة
  • حجم الخط
  • وزن الخط
  • اللون
  • نوع الخط

كان هناك بعض الاختلاف في الاختبار عندما يتعلق الأمر بخصائص معينة مدعومة. دعم كل عميل تقريبًا خصائص اللون ، ولكن ليس الخط. هذا يختلف أيضًا بين المتصفحات. على سبيل المثال ، إليك ما بدا عليه Gmail / G-Suite في Chrome في اختباري لخطين منمقين بألوان مختلفة:

خصائص خط CSS

بينما يحترم Gmail / G Suite في Internet Explorer اللون وليس الخط:

يحترم Gmail / G Suite في Internet Explorer اللون ولكن ليس الخط

اعلم أن بعض العملاء قد لا يدعمون جميع الخطوط أو الأحجام في نص ALT المصمم ، لكن هذا لا يعني أنه لا يمكنك إضافة بعض العلامات التجارية أو الذوق. تحقق من هذا المورد المفيد الذي كتبته أخصائية التسويق عبر البريد الإلكتروني Jaina Mistry لـ Campaign Monitor لمضاعفة التحقق من دعم خط الويب.

أوصي أيضًا بقائمة الخطوط المثبتة بشكل شائع على نظامي التشغيل Windows و Mac.

سلوكيات أخرى ملحوظة لحظر الصور

في العديد من عملاء البريد الإلكتروني ، سيختفي نص ALT بمجرد أن يتجاوز حجم النص أو طوله عرض و / أو ارتفاع حاوية الصورة. بسبب هذا السلوك ، من الأفضل الالتزام بأوصاف أقصر وأحجام خطوط أصغر لتجنب إزالة نص ALT تمامًا.

تسمح لك جميع برامج البريد الإلكتروني تقريبًا بتغيير إعداداتك لعرض الصور أو إخفائها تلقائيًا (على الرغم من أن الإخفاء / الحظر هو الإعداد الافتراضي في أغلب الأحيان) ، وسيطالبون المستخدمين بتشغيل الصور للرسائل الفردية. يسمح البعض أيضًا للمستخدمين بإضافة مرسلين محددين إلى قائمة السماح أو دفتر العناوين ، أو تحديد "عرض الصور دائمًا من ..."

معاينة بريدك الإلكتروني مع إيقاف تشغيل الصور (وتشغيل!)

كيف يبدو بريدك الإلكتروني مع تعطيل الصور؟ هل يتم عرض نص ALT الخاص بك بشكل صحيح؟ قم بمعاينة بريدك الإلكتروني في أكثر من 50 عميلاً لسطح المكتب والجوال وبريد الويب - بما في ذلك طرق عرض الصور - باستخدام Litmus.

ابدأ الاختبار →