دليل المبتدئين للوصول إلى البريد الإلكتروني (قائمة التحقق + الموارد)

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

ملاحظة: هذا البرنامج التعليمي جزء من محتوى بريد إلكتروني كامل لمدة أسبوع على Tuts + Web Design - راجع دليل تعلم البريد الإلكتروني Mastering HTML لمزيد من المعلومات!

البريد الإلكتروني المهنيين: حان الوقت لإعطاء الأولوية للوصول

وضعنا الكثير من الجهد في النشرات الإخبارية، والحملات التسويقية، ورسائل البريد الإلكتروني الأخرى نقوم بإرسال. ونحن بعناية الحرفية الرسالة الصحيحة. ونحن جد تصميم المرئيات. ونحن اختبار منتصرا في Outlook.

وأن يؤتي ثماره. البريد الإلكتروني لا يزال كيف أن معظم الناس يفضلون أن نسمع من الشركات، وله كقناة لتسويق، متوسط عائد على الاستثمار من 32 إلى 1.

لكن لا يزال معظمنا يمكن أن يكون أفضل. لم يتم تصميم رسائل HTML الإلكترونية تقليديًا وترميزها مع وضع إمكانية الوصول في الاعتبار. نتيجة لذلك ، يكافح العديد من المتلقين لدينا للانضمام ، ونحن نبعد جزءًا من جمهورنا.

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

ما الخطأ في هذه الصورة؟ #accessfail pic.twitter.com/H7tAy5X5ud

-إليشا الجمعة رأيت (@MsFridayology) 24 نوفمبر 2016

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

إذا كنت جديداً على ترميز رسائل البريد الإلكتروني، وأوصى أولاً قراءة دروس نيكول ميرلين. وهذه سوف يعلمك أساسيات HTML رسائل البريد الإلكتروني، وكيف تختلف عن صفحات ويب.

• 
  تصميم البريد الإلكتروني
  بناء قالب HTML البريد الإلكتروني من الصفر
  مرلين نيكول
• 
  البريد الإلكتروني
  إنشاء بريد إلكتروني مستقبلي مضاد للدليل بدون استعلامات الوسائط
  مرلين نيكول

سنقوم ببناء على تلك المهارات كما نتعلم كيفية تطبيق اعتبارات إمكانية الوصول إلى رسائل البريد الإلكتروني.

ماذا نعني بـ "إمكانية الوصول"؟

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

• 
  إمكانية الوصول
  بناء شبكة شاملة: لماذا مسائل الوصول
  سامي كيجونين

"نحن جميعا مختلفين ويمكن أن تتغير احتياجاتنا بمرور الوقت." - سامي كيجونين

الإعاقة يأتي في العديد من الأشكال والحدة. من هو العالم ويقدر التقرير المعني بالإعاقة أن 15% سكان العالم يعانون من ذوي إعاقة. اعتماداً على الحالة، قد يكون هؤلاء الأفراد الوصول إلى التقنيات التي تجعل المهام اليومية أسهل. لجعل رسائل البريد الإلكتروني أكثر سهولة، نحن بحاجة إلى تجنب وضع حواجز أمام الناس، فضلا عن أنها تعتمد على الأدوات.

ابدأ بتجربة أساسية

اختر البريد إلكتروني التي قمت بإرسالها مؤخرا. فتحه على الشاشة، أو الطباعة حيث يمكنك تدوين الملاحظات على ذلك.

ما هو الهدف من البريد الإلكتروني؟ ما هو عمل ينبغي أن المستلمين بعد قراءته، أو ما هي المعلومات يجب أن لديهم علم؟

ما العناصر التي يتكون منها البريد الإلكتروني؟ كيف يساهم كل واحد في الهدف؟ هل ستظل الرسالة الإلكترونية منطقية إذا تمت إزالة إحدى الفقرات أو الروابط أو الصور؟

ويساعدك طلب هذه الأنواع من الأسئلة على تحديد تجربة أساسية - الحد الأدنى الذي يجب أن يتم إبلاغه بنجاح إلى المستلم. قد يكون هذا بسيطًا مثل الارتباط وتسمية الشركة ، أو قد يكون هناك المزيد الذي تحتاج إلى الحصول عليه.

قبل كل شيء، يحتاج إلى تجربة خط الأساس لتكون متاحة لجميع المستفيدين الوصول إليها وفهمها. وكل شيء ينبغي أن تصمم على عدم الحصول على هذا الطريق. الآن للحصول التفاصيل...

1. جعل النص مقروء

تجنب جدران النص

تعد الفقرة، أكثر صعوبة من قراءة. وهذا ينطبق على الجميع، ولكن الناس لا سيما مع عسر القراءة أو صعوبات التعلم الأخرى.

إليك بعض النصائح لجعل النص أكثر ممكن الاطلاع عليه:

• تقسيم الفقرات الطويلة إلى أقصر منها. يجب أن يكون لكل فقرة تركيز واحد. قراءة كل جملة ومعرفة ما إذا كان يركز على نفس الشيء مثل آخر واحد. إذا لم يكن كذلك ، فقم ببدء فقرة جديدة.
• تجميع الفقرات ذات الصلة تحت العناوين الوصفية. إذا كنت تستخدم مستوى عنوان واحد أو أكثر, تأكد من التسلسل الهرمي المنطقي؛ عادة ما عليك استخدام<h1>العنوان الرئيسي،<h2>s لكل قسم،<h3>s للأقسام الفرعية، وهلم جرا.</h3></h2></h1> باستخدام عناصر العنوان الدلالي أيضا يجعل بريدك الإلكتروني أسهل للتنقل باستخدام قارئات الشاشة.
• استخدم مائل أو غامق للتأكيد ، ولكن استخدمها لماما. إذا ركزت على كل شيء ، فلا شيء يبرز.
• تقديم مجموعات من النقاط كتعداد نقطي (<ul>) أو رقمية (<ol>) قوائم لجعلها سهلة الهضم.</ol> </ul>
• تضمين الرسومات تصور ودعم محتوى النص.

استخدم كلمات بسيطة

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

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

إذا كنت كتابة إلى مجموعة من الناس حول هذا موضوع، لك سوف غالباً ما تكون أكثر دراية في هذا الموضوع منها. كلما علمنا أكثر بشيء ما ، كلما نسينا ما لا تريد معرفته. وتعرف هذه الظاهرة باسم "لعنة المعرفة".

إذا لم تكن متأكدًا مما إذا كان بإمكان الأشخاص الأقل دراية بالموضوع فهم كتاباتك ، فابحث عن شخص ما لطلب التعليقات. قد تكون تعاني من عنه المعرفة أيضا زملائك. ربما يمكنك الحصول على مساعدة من صديق أو فرد من أفراد الأسرة، أو أحد المشتركين الخاص بك؟

عندما قمت بتسجيل الدخول للكتابة لـ Tuts + ، أرسلوا لي دليل أسلوبهم الذي يحتوي على بعض الأمثلة على خيارات الكلمات الإنجليزية البسيطة:

هل يمكنك استبدال أي من الكلمات في رسائلك الإلكترونية بأخرى أبسط؟ ماذا عن الاحتفاظ بقائمة من المصطلحات المربكة التي تستخدمها بشكل شائع ، والكلمات المراد استخدامها بدلاً من ذلك؟

هناك أيضًا عدة صيغ لقياس مدى سهولة قراءة النص.

إذا كان يمكنك نسخ ولصق المحتوى الخاص بك في Outlook أو Word، يمكنك الحصول على قابلية القراءة تصنيفها باستخدام اختبارين: سهولة القراءة زادت، الذي يسجل سهولة القراءة من 0 إلى 100، واختبار مستوى الصف زادت-كينكايد، الذي يقدر في الولايات المتحدة ما مستوى الصف المدرسي عادة شخص أن يفهم النص.

تبحث هذه الاختبارات في متوسط عدد الكلمات لكل جملة ، ومتوسط عدد المقاطع لكل كلمة ، كمؤشرات لمدى سهولة قراءة النص.

للحصول على مزيد من الاختبارات الشاملة ، جرّب readable.io. تتيح لك هذه الأداة عبر الإنترنت تشغيل المحتوى الخاص بك من خلال اختبارات متعددة قابلية القراءة. خطط مدفوعة الأجر حتى نقدم أداة التحديد لرسائل البريد الإلكتروني: إعادة توجيه البريد الإلكتروني إلى عنوان بريد إلكتروني معين، ويقومون بالرد بتقرير قابلية قراءة تلقائية.

استخدم أحجام الخطوط 14px أو أكبر

زيادة حجم الخط ليس مجرد خدعة سخيفة لجعل المقال الخاص بك يبدو أطول.

كما أنها طريقة بسيطة لتسهيل قراءة رسائل البريد الإلكتروني الخاصة بك. 14px هو الحد الأدنى المطلق للهيئة نسخة. النص هنا على Tuts + حجم خط من 18px، وأن لا يشعر كبير جداً أما.

يجب أن تكون العناوين كبيرة بما يكفي لتمييزها بسهولة عن نسخة الجسم. Type Scale هي أداة مفيدة لحساب أحجام الخطوط المناسبة ومعاينتها. تعرف على المزيد حول الحجم والتسلسل الهرمي من هذه البرامج التعليمية:

• 
  أسلوب الطباعة
  كيفية إنشاء نطاق مطبعية وحدات
  إيان ياتس
• 
  طباعة
  فهم هرمية الطبوغرافية
  لويد جيريمي

تأكد من استخدام الألوان المتناقضة

كقاعدة عامة، نص الظلام على لون خلفية خفيفة أسهل في القراءة لمعظم الناس.

إذا كنت تستخدم مزيج ألوان مع التباين المنخفض، مثل النص الرمادي الضوء على خلفية بيضاء، يمكن أن يكون من الصعب قراءة للمصابين بضعف البصر أو عمي الألوان. التباين المنخفض أيضا يجعل النص صعوبة في قراءة تحت ظروف الإضاءة الضعيفة مثل ضوء الشمس المباشر.

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

هناك العديد من الأدوات للتحقق إذا كان لديك تباين الألوان عالية بما يكفي:

• contrast-ratio.com هو أداة مفيدة مع اسم نطاق لا ينسى. عندما تقوم بإدخال مجموعة ألوان ، تقوم على الفور بمعايرة التباين وتغيير شريط العنوان إلى رابط مباشر حتى تتمكن من مشاركة مجموعة الألوان.
• أنا أيضا أحب حقا تاناغورو مكتشف التباين ، والذي يقترح خيارات الألوان الأخرى إذا كان التباين الخاص بك منخفض جدا.

تجنب الأوزان الخطية الرفيعة

شعبية مع مصممي الخطوط الخفة منذ بعض سنوات حتى الآن، ولكن هم أقل شعبية مع الأشخاص المصابين بضعف في الرؤية.

عند دمجها مع تباين الألوان المنخفض والشاشات الأقدم ، يكون من الصعب قراءة أوزان الخط هذه بشكل خاص. للحصول على تجربة قراءة أفضل ، استخدم الأوزان من 500 (طبيعي) وما فوق.

محاذاة جسدك ، لا تبرير أو توسيط

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

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

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

استخدام كبير يكفي خط الطول

الكلمات تحتاج إلى مجال للتنفس.

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

ارتفاع الخط أفضل لاستخدام يعتمد على طول الخط وحجم الخط. ولكن إذا كنت تريد قاعدة عامة، سريعة، لا يمكنك الذهاب الخطأ جداً مع ارتفاع خط من 1.5 مرة حجم الخط. على سبيل المثال، حجم خط من 16px سيكون مرتاحاً للقراءة مع ارتفاع خط 24px.

دعم عميل البريد الإلكتروني لخاصية خط الارتفاع يكون في الغالب صلبة ، باستثناء بعض السلوك الغريب في Outlook. استخدم قيم px بدلاً من قيم em أو النسبة المئوية أو "بدون وحدة" للحصول على نتائج أكثر تناسقًا.

جعل طول الخط ("القياس") مقروء

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

إذا كان نصك واسعًا جدًا ، يجب أن تتحرك العين كثيرًا ، ومن الصعب مواصلة القراءة من سطر إلى آخر.

لسهولة القراءة المثلى، تهدف لطول خط حول الأحرف 45-75.

حجم الخط وارتفاع الخط وطول الخط يؤثر كل منهما على الآخر. هناك العديد من الطرق لتقرير النسب. يحب بعض الأشخاص استخدام النسبة الذهبية (حتى إذا لم تكن خصائصه السحرية بالضرورة وصفة مضمونة للنجاح). باستخدام حاسبة الطباعة النسبية الذهبية ، يمكنك الحصول بسرعة على توصيات ارتفاع الخط وحساب طول الخط التقريبي (CPL ، أو الأحرف في كل سطر) استنادًا إلى حجم الخط وعرض العمود.

استخدام العلامات الدلالية

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

كما يقول المثل: إذا كان كل ما لديك هو مطرقة ، كل شيء يبدو وكأنه مسمار.

ولكن مع قيام عملاء البريد الإلكتروني بتحسين أداءهم ، وكنا نحن مطوري البريد الإلكتروني قد عملنا بشكل جماعي على تحسين ممارسات الترميز الخاصة بنا ، وجد العديد منهم أن هناك سلبيات أكثر من مزايا نمط الترميز القائم على الجدول.

إذا كنت رمز بدلاً من الفقرات، والقوائم، والعناوين، كما<p>, <ul>, <ol>, <h1>,<h2>، إلخ، ثم الأشخاص الذين يستخدمون قارئات الشاشة والتقنيات المساعدة الأخرى سيكون أكثر سهولة التنقل ومعنى المحتوى الخاص بك. </h2></h1></ol></ul>

سوف لا يزال لديك نفس المستوى من التحكم في كيفية ظهور المحتوى الخاص بك بالتصميم مع المغلق، وأنه سيكون أكثر سهولة، مع رمز أقل. وسوف تحتاج إلى تطبيق الهوامش التي تريدها لكل عنصر، في حين أن الأساليب مثل حجم الخط نسخة الهيئة ويمكن تعيين عنصر أصل اللون والموروثة بواسطة كل من الفقرات.

إليك مثال أساسي:

1

<div style="color: #0A3048; font-family: sans-serif;

2

  font-size: 16px; line-height: 24px;">

3

  <h1 style="font-size: 44px; line-height: 66px;">Prektig

4

    arvelige banksaker</h1>

5

  <p>Grundigere vitende enkelstående bevares duer sum

6

    lengste, påfallende opplevet hukommelse dunstkrets,

7

    kant observasjon drakt besynderlig tillatt tent.</p>

8

  <p>Hyss gjeldsbevis luftdraget broderi, unyttig

9

    hvorledes ringeaktende begriper.</p>

10

</div>

استخدم سمة lang

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

لتحديد لغة المحتوى ، نستخدم سمة lang. في ما يلي مثال سريع حول كيفية نطق الجملة الفرنسية مع وبدون اللغة المحددة (فيديو من Léonie Watson):

تعمل سمة lang مع أي عنصر HTML. إذا كنت تستخدم عناصر مختلفة داخل نفس البريد الإلكتروني ، فحدد اللغة الصحيحة لكل جزء.

يجب تعيين اللغة الرئيسية<html>العنصر. ولكن لأن بعض عملاء البريد الإلكتروني سيتم إزالة هذا العنصر عند عرض رسالة البريد الإلكتروني، وأسلم أيضا تكرار السمة على عنصر مجمع داخل<body>، مثل<div>حول المحتوى بالبريد الإلكتروني بأكمله.</div></body></html>

للعثور على القيمة الصحيحة لاستخدامها في لغتك ، يمكنك الرجوع إلى تسجيل Subtag Registry ل IANA ، وهو عبارة عن ملف نصي طويل للغات وقيمها الفرعية المقابلة. أو استخدم البحث عن العلامات الفرعية للغة الودية والذي يتيح لك البحث عن نفس المعلومات.

هنا هو الحكم الفرنسي من قبل، مع اللغة تعيين بشكل صحيح:

1

<p lang="fr">l’eau monte au fur et à mesure de la fonte des neiges.</p>

2-استخدام لون تعقل

لا تتصل فقط مع اللون

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

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

أن عمي الألوان في الاعتبار

هناك أنواع مختلفة من عمى الألوان التي تجعل الناس يعانون من صعوبة في تمييز الألوان. النوع الأكثر شيوعاً من عمي الألوان الأحمر والأخضر، مما يجعل من الصعب معرفة الأشكال الأحمر والأخضر عن بعضها البعض. مجموع عمي الألوان، مما يجعل كل شيء نظرة الأسود والأبيض، ونادرة.

عند اختيار ألوان للنص، والرسومات، وعناصر التخطيط، أن تضع في اعتبارها تركيبات من الألوان في النطاق الأحمر-البرتقالي-الأصفر-الأخضر، وضعها قريبة من بعضها البعض. خاصة إذا كانت الألوان متشابهة في السطوع والتشبع.

هناك أيضًا تركيبات ألوان أخرى يمكن أن تكون مربكة للأشخاص الذين يعانون من أنواع مختلفة من عمى الألوان للتمييز. يمكنك استخدام محاكاة عمى الألوان للقبض على أي مشاكل في رسائل البريد الإلكتروني الخاصة بك. هناك الكثير للاختيار من بينها.

• مع تصفية صفحة ويب Colorblind من Toptal ، يمكنك إدخال عنوان URL لإصدار الويب الخاص ببريدك الإلكتروني.
• يحتوي Litmus على مرشح لعمى الألوان مدمج في اختبارات البريد الإلكتروني الخاصة به.
• لون أوراكل (ماك، ويندوز، ولينكس) والدالتونيه سيم (لجنة الهدنة العسكرية ودائرة الرقابة الداخلية) أدوات محاكاة المصدر المفتوح.

عدم الإفراط في استخدام ألوان مشرقة ومشبعة

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

بالنسبة إلى المساحات الكبيرة مثل ألوان الخلفية ، استخدم ألوانًا أكثر كتمًا عندما يكون ذلك ممكنًا.

• 
  إمكانية الوصول
  أساسيات التشغيل: تصميم للإعاقة البصرية
  فولتون غرايم
• 
  نظرية اللون
  لماذا يجب تجنب الاهتزاز تركيبات الألوان
  ايلي شيف

تجنب نص الارتباط غير مسطرة أو ملونة (خاصة الأزرق)

ليست كل الروابط باللون الأزرق ويتم وضع خط تحتها ، ولكن كل النصوص المسطرة والزرقاء مرتبطة ببعضها البعض. على الأقل هذا ما يتوقعه القراء.

لتجنب الارتباك والإحباط، لا تستخدم الألوان والتسطير للتركيز.

3-التحقق من أن الصور الخاصة بك متاحة

تجنب النص في الصور

لا يزال العديد من المرسلين يصممون رسائل البريد الإلكتروني التي تحتوي على نص في الصور بدلاً من نص HTML المباشر. إذا كان صاحب العمل أو العميل الخاص بك يتطلب التقديم بكسل مثالية، فمن السهل لنرى كيف هذا قد يبدو وكأنه حل جيد. لكن الجوانب السلبية لملائمة النص في ملفات الصور تفوق المزايا.

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

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

إذا كان التصميم الخاص بك يستدعي وضع نص على صورة ، فإن backgrounds.cm يساعدك في ترميز هذا بطريقة تعمل عبر معظم برامج البريد الإلكتروني الرئيسية.

أخيرا، في الحالات حيث لا يمكن تجنب استخدام الصور للنص، إضافة الدور = "نص" إلى الصورة حتى قارئات الشاشة سيتم علاج قيمته النص البديل كنص عادي.

استخدام النص البديل المفيد

يمكننا استخدام الصور لأغراض عديدة مختلفة. بعض تحتوي على معلومات هامة، والبعض الآخر الرسوم التوضيحية أو جزء من التخطيط.

كل الصور يجب أن يكون سمة alt، ولكن لا ينبغي أن يكون السمة دائماً قيمة. في الحالات حيث لا حاجة للنص البديل، استخدم سمة alt فارغة لمنع قارئات الشاشة من التدقيق الإملائي على اسم ملف الصورة أو URL لارتباط. تحقق من هذا المثال من بارمنتييه ريمي:

Email Accessiblity - Bad example #1

إذا كانت الصورة تحتوي على محتوى قيّم ، فصفها في النص البديل. أو إذا كانت الصورة عبارة عن ارتباط ، قم بإضافة نص بديل لوصف المكان الذي يشير إليه الارتباط.

وقد W3C شجرة قرار مفيد للنص البديل. وهو يغطي معظم الاستخدامات الشائعة للصور، وكيفية استخدام السمة alt في كل حالة على حدة.

استخدم ملفات GIF بشكل مسؤول

يتمثل خيارنا الأساسي في تضمين الرسوم المتحركة في رسائل البريد الإلكتروني التي ستعمل في معظم برامج البريد الإلكتروني في استخدام ملفات GIF. لقد رأينا العديد من الأمثلة الرائعة لملفات GIF في البريد الإلكتروني. يمكن أن تكون كبيرة لشرح أفكار أكثر فعالية عما كنت تستطيع العمل بصورة ثابتة، أو لإضافة الاهتمام البصري. أجهزة ضبط وقت العد التنازلي ومعاينة الفيديو استخدامات شعبية أخرى.

للأسف ، يمكن أن تتسبب GIF في حدوث مشكلات لبعض المستلمين.

في الأمثلة المتطرفة ، يمكن أن تؤدي الرسوم المتحركة المكثفة إلى حدوث نوبات للناس الذين يعانون من صرع حساس للضوء. إذا كانت لديك صور GIF ذات ألوان وامضة أو وامضة أو أنماط غامقة ذات تباين عالٍ ، فيجب اختبارها باستخدام أداة تحليل الصرع المجانية للصور في Trace Center (نظام Windows فقط). هذه الأداة تلتقط الصور المتحركة من الشاشة، ويحدد الاستيلاء على المخاطر المحتملة.

على الرغم من أن الرسوم المتحركة أقل درامية، خفية يمكن أن يسبب مشاكل أيضا. يمكن أن يصرف متحركة حلقة مستمرة إلى الأبد من المحتوى الأخرى، خاصة بالنسبة للأشخاص المصابين باضطراب نقص الانتباه فرط النشاط (ADHD) أو التوحد. يقدم البريد الإلكتروني على Acid بعض أفضل ممارسات الرسوم المتحركة للمشتركين الذين يعانون من ADHD.

4-الاهتمام بالتخطيط والجداول

تجنب الجداول غير الضرورية

على الرغم من أن جداول HTML ضرورية للحصول على بعض تخطيطات لعرض بشكل صحيح في عملاء البريد الإلكتروني، لا سيما في Outlook، البريد الإلكتروني المطورين تميل إلى الإفراط في استخدام لهم.

أود أن أوصى البحث من خلال التعليمات البرمجية قالب لكل مثيل من<table and="" evaluating="" whether="" that="" table="" is="" needed.="" i="" often="" come="" across=""></table><table>العلامات التي يمكن بسهولة الاستعاضة عنها بأكثر سهولة وخفيف الوزن<div>، أو حتى إزالتها تماما، دون أن تؤثر على كيف يعرض رسالة البريد الإلكتروني.</div></table>

دور استخدام = "العرض" في "جداول التخطيط"

على الجداول المتبقية ، قم بإضافة السمة role = "presentation". عادةً ما يعلن قارئي الشاشة كل خلية جدول يواجهونها ، مما يجعل رسائل البريد الإلكتروني مملة جدًا للقراءة.

بإضافة دور = "عرض تقديمي" ، فأنت تخبر قارئ الشاشة بأن يعامل الجدول كعنصر نص عادي ، ولا يتنقل إليه كجدول بيانات. راجع الأمثلة على Accessibility في البريد الإلكتروني: الجزء الثاني بواسطة Mark Robbins

إذا كانت رسائل البريد الإلكتروني تحتوي على جداول تحتوي على بيانات جدولة فعلية ، فلا تستخدم سمة الدور على تلك.

استخدم aria-hidden = "true" على عناصر Spacer

كما الهوامش والمسافات البادئة قد تتعارض إلى حد ما من الدعم عبر البريد الإلكتروني للعملاء، فإنه ليس من غير المألوف لاستخدام عناصر منفصلة مثل<div>s أو صور مباعدة حتى من المدرسة القديمة لإضافة المسافات لتصميم البريد إلكتروني.</div>

لا تضيف عناصر spacer هذه أي قيمة للأشخاص الذين يقرؤون بريدك الإلكتروني باستخدام قارئ الشاشة. لجعل قارئات الشاشة تتجاهل spacer ، أضف السمة aria-hidden = "true" إلى العنصر.

5-تصميم روابط واضحة وانقر فوق الأهداف

جعل روابط واضحة ، ما وراء اللون

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

تجنب استخدام لون رابط النص الذي لا يمكن النقر عليه ، لتفادي الارتباك.

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

من الأفضل بشكل عام تجنب "أزرار الشبح" ، وهو نمط شائع من الأزرار ذات لون مخطط تفصيلي ولكن بخلفية شفافة. وهذه يمكن أن يكون صعباً للمستلمين للاعتراف بأنها قابلة للنقر، خاصة عندما يوضع على رأس صورة خلفية. أنماط زر بلون خلفية متناقضة أسهل لاكتشاف.

استخدام نص الارتباط مفيدة

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

نص وصلة قصيرة ووصفية تساعد الناس التنقل كفاءة.

يجب ألا تحتوي الروابط التي تشير إلى أماكن مختلفة على نفس نص الرابط. اجعل كل واحدة منها فريدة - بلا روابط "اقرأ المزيد"!

تجنب عرض عناوين Url للموقع منذ فترة طويلة كنص الارتباط، حيث أنهم عادة ما تكون أقل فائدة كنص الارتباط إلى كافة المستلمين.

جعل أزرار كبيرة ونقر تماما

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

وجود كبير يجعل ما يكفي في منطقة للنقر فوق الزر أسهل للجميع لضرب، لا سيما العديد من المستخدمين ذوي الإعاقات الجسدية.

لدى Litmus نظرة عامة جيدة حول طرق ترميز أزرار البريد الإلكتروني. لمنع الصعوبات والإحباط ، اختر واحدًا يكون فيه سطح الزر بأكمله قابلاً للنقر.

قائلا: أن لدى تفضيل شخصي ل buttons.cm.

لا تجعل كل شيء رابطًا

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

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

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

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

النظر في: تحوم و: أنماط التركيز

إعطاء وصلات دهاء: النمط التحويم طريقة بسيطة ليؤكد للناس أن ما كانوا على وشك انقر فوق، في الواقع، وصلة.

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

في أي وقت تضيف فيه: نمط التحويم ، من الجيد عادة تطبيق نفس النمط على: التركيز بحيث يتمتع الأشخاص بتجربة مماثلة سواء التنقل باستخدام الماوس أو لوحة المفاتيح.

الارتباط بمحتوى قابل للوصول

على الرغم من أنه ليس شيئًا يمكنك التحكم فيه دائمًا ، عند الربط بصفحات الويب ، من الجيد تفضيل المحتوى الذي يمكن الوصول إليه أيضًا.

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

6-لا ننسى نص عادي

وتشمل إصدار نص عادي

نظرًا لمشكلات إمكانية الوصول التي قد يتعرض لها مع العديد من رسائل البريد الإلكتروني بتنسيق HTML ، يختار بعض المستلمين استخدام إصدار النص العادي لرسائل البريد الإلكتروني بدلاً من ذلك.

حيث لا يمكنك استخدام الصور وأحجام الخطوط والألوان وهلم جرا، وتقتصر خيارات التخطيط الخاص بك. عند إنشاء إصدار نص عادي، التفكير في أفضل السبل لتقديم الرسالة الأساسية الخاصة بك باستخدام نص فقط، وتقلق أقل عن جعلها متسقة مع إصدار HTML.

انتبه جيدًا إلى كيفية تنسيق الروابط ، حيث سيكون عنوان URL للارتباط قابلاً للنقر. النمط الجيد هو كتابة تسمية ارتباط وصفية متبوعة بنقطتين على سطر واحد ، ثم عنوان URL للرابط في السطر التالي.

1

…

2

3

Find more plain-text formatting tips here:

4

https://www.campaignmonitor.com/blog/email-marketing/2015/01/plain-text-emails-conversion/

5

6

…

اسبس كثيرة (مقدمي خدمات البريد الإلكتروني) سوف تولد تلقائياً نسخة نص عادي لك، ولكن إذا كنت تعطيه من خلال قراءة، وعادة ما ستجد طرق قليلاً لجعله أكثر قابلية للقراءة.

7-الحصول على دراية بالتجارب وأدوات

استخدام هذه الأدوات البريد الإلكتروني محددة

هناك العديد من الطرق لاختبار البريد الإلكتروني الخاص بك، على حد سواء المساعدة في العثور على قضايا الوصول، والتحقق من أن الإصلاحات الخاصة بك تعمل كما هو متوقع.

مكان جيد للبدء هو موجوداً email.org، مما يوفر لك مع تقرير إمكانية وصول للبريد الإلكتروني الخاص بك. هذا التحقق من أن جميع الصور يحتوي على سمة alt، وأن مستويات العناوين اتبع التسلسل هرمي صحيح، والعديد من النقاط الأخرى لقد غطت هنا.

إذا كانت هذه هي المرة الأولى لك كنت تقييم إمكانية الوصول إلى رسائل البريد الإلكتروني الخاصة بك، وهناك احتمالات ستحصل على قائمة مرتبة من التحسينات التي يمكنك أن تجعل. عندما كنت أعود إلى الاختبار الخاص بك رمز البريد الإلكتروني المحدثة، يمكنك البحث إلى الأمام بما يرضي صلبان حمراء تتحول إلى علامات الاختيار الخضراء.

بفضل مجموعته الشهيرة من أدوات اختبار البريد الإلكتروني ، يتيح لك Litmus التحقق من العديد من جوانب إمكانية الوصول إلى بريدك الإلكتروني ، مثل إصدار النص العادي ، وعرض الصور ، ومحاكاة عمى الألوان المختلفة لتصميم بريدك الإلكتروني

اختبار مع قارئات الشاشة

من الطرق الجيدة لتجربة بريدك الإلكتروني مثلما يفعل بعض المستلمين هو محاولة قراءته باستخدام تقنيات مساعدة مثل برامج قراءة الشاشة. تحتوي معظم أنظمة التشغيل على قارئ شاشة مدمج يمكنك اختباره من خلال:

• VoiceOver في نظامي MacOS و iOS.
• TalkBack في Android.
• 'الراوي' في Windows.
  

يمكنك أيضًا التفكير في الاختبار باستخدام أجهزة قراءة الشاشة من جهات خارجية. أجهزة قراءة الشاشات الأكثر استخدامًا هي JAWS (التجارية) و NVDA (المصدر المفتوح) ، اللذان يعملان على نظام التشغيل Windows. بالنسبة إلى JAWS ، يتوفر ترخيص لمدة 90 يومًا ، مما يساعد على تقليل تكلفة الاختبار.

تثبيت أدوات المتصفح المفضلة الخاصة بك والإضافات

تأتي جميع متصفحات الويب الرئيسية الآن مزودة بأدوات مطوّرة مضمنة لاختبار إمكانية الوصول. على الرغم من أن هذه ليست خاصة بالبريد الإلكتروني ، إلا أن معظم المخاوف تنطبق فقط.

أحدهما غالبًا ما أستخدمه هو علامة التبويب "التدقيق" في أدوات مطوّري البرامج في Chrome ، والتي تسجل الصفحة وتعطي نظرة عامة عن المشكلات اللازمة لإصلاحها.

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

• ويأتي tota11y ك bookmarklet وتمديد الكروم يمكن استخدام لاختبار البريد الإلكتروني الخاص بك في المستعرض. وتشمل الشيكات تباين ألوان النص ومعالم الأغنية. كما يظهر لك كيفية قارئات الشاشة انظر عناصر مختلفة في البريد الإلكتروني الخاص بك.
• مطور الويب هو ملحق متصفح لمتصفح Chrome و Firefox و Opera ، مما يجعل من السهل اختبار إيقاف تشغيل الصور و CSS المدمج ، بالإضافة إلى أشياء أخرى.
• تتكون إضافة Funkify Chrome من مجموعة من "محاكيات الإعاقة". يغير كل وضع الصفحة في الطرق التي تمثل تحديات مختلفة، مثل عسر القراءة وإيدي يرتجف، لمساعدتك على تقييم مدى يحمل التصميم الخاص بك. فونكيفي كما يأتي مع tota11y المدرجة كواحدة من طرق.

فهم أهمية اختبار المستخدم

لا يمكن لأي أداة أو جهاز محاكاة أن يحل محل الحديث تمامًا للأشخاص الذين يعانون من إعاقات ويتعلمون كيفية تفاعلهم مع بريدك الإلكتروني. يحتوي InVision على مقالة مفيدة حول بدء استخدام اختبار إمكانية الوصول للمستخدم.

استنتاج

بعد قراءة هذا المقال ، فإن أفضل ما يمكنك فعله بعد ذلك هو العثور على تحسين سريع يمكنك إجراؤه على إحدى رسائلك الإلكترونية ، والقيام بذلك.

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