إمكانية الوصول في البريد الإلكتروني HTML والوضع الداكن والعرض عبر العملاء: دليل عملي

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

لماذا ترتبط إمكانية الوصول بالعرض

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

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

المشكلة	من يتأثر بها	السبب الجذري الشائع
محتوى داخل الصور فقط	مستخدمو قارئات الشاشة، ومن حُظرت صورهم، وأصحاب الاتصالات البطيئة	نص العرض مدمج في لافتة دون نص حقيقي أو نص بديل
نص باهت أو صغير	ضعاف البصر، وكبار السن، وكل من يقرأ في الخارج	رمادي فاتح على أبيض، ونص متن بحجم 11px أو 12px
روابط غامضة	مستخدمو قارئات الشاشة الذين يستعرضون قائمة الروابط، ومستخدمو لوحة المفاتيح	عدة روابط تقول فقط انقر هنا
غير مقروء في الوضع الداكن	من يستخدمون السمات الداكنة، غالبًا ليلًا	شعارات وأيقونات تفترض خلفية بيضاء
تخطيط منكسر في Outlook	مستخدمو Outlook لنظام Windows، غالبًا في بيئات العمل	الاعتماد على CSS يتجاهلها محرك Word
رسالة مقتطعة	مستخدمو Gmail مع الرسائل الطويلة	HTML ثقيل أو مكرر أو متضخم

بنية دلالية داخل تخطيطات الجداول

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

• نوع المستند واللغة والعنوان. ابدأ بتصريح doctype كامل، وضع خاصية lang على عنصر html، وأضف عنصر title وصفيًا. تستخدم قارئات الشاشة اللغة لاختيار قواعد النطق، ويفيد العنوان في بعض المعاينات.
• role presentation على جداول التخطيط. أضف role="presentation" إلى الجداول التي تنظّم المحتوى فقط، حتى لا يُعلن عنها كشبكات بيانات. واستخدم ترميز الجداول الحقيقي للبيانات الجدولية الفعلية فقط، مثل الفاتورة أو قائمة الأسعار.
• ترتيب القراءة يساوي الترتيب المرئي. تتبع قارئات الشاشة المصدر لا الصورة. وإذا كان تخطيط من عمودين يتكدس على الجوال، فتأكد من أن الترتيب المتكدس ما زال منطقيًا عند قراءته من الأعلى إلى الأسفل.
• عناوين وفقرات حقيقية. استخدم عناصر h1 إلى h3 وp للمحتوى، مع أنماط مضمّنة للتحكم في الحجم والتباعد. ولا تصطنع عنوانًا بنص غامق داخل خلية جدول.
• تداخل ضحل. كل مستوى جدول إضافي يضيف ضوضاء للتقنيات المساعدة ووزنًا للملف. ادمج الخلايا واستخدم الحشو بدلًا من جداول التباعد.
• لا صور للتخطيط. صور GIF الفاصلة والصور المقطّعة تضيف فوضى وتفشل فشلًا ذريعًا عند إيقاف الصور.

مثال مختصر

يُظهر هذا الهيكل الصغير العادات معًا. وهو قصير عمدًا، فكيّفه مع قالبك واختبره في مصفوفتك.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>Your order has shipped</title>
</head>
<body style="margin:0;padding:0;background-color:#f4f4f4;">
  <div style="display:none;max-height:0;overflow:hidden;">Your parcel is on its way.</div>
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td align="center" style="padding:16px;">
      <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;background-color:#ffffff;">
        <tr><td style="padding:24px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:24px;color:#222222;">
          <img src="https://example.com/logo.png" width="140" alt="Example Company" style="display:block;border:0;">
          <h1 style="font-size:24px;line-height:30px;margin:24px 0 8px;">Your order has shipped</h1>
          <p style="margin:0 0 16px;">Order 1042 left our warehouse today.</p>
          <a href="https://example.com/track/1042" style="color:#0b57d0;text-decoration:underline;">Track order 1042</a>
        </td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>

النص البديل ونص الروابط وخاصية اللغة

نص بديل يستحق مكانه

النص البديل هو ما ينوب عن الصورة حين لا يمكن رؤيتها. وهو أيضًا أول ما يراه الناس حين يحظر العميل الصور افتراضيًا. اكتبه وفق الدور الذي تؤديه الصورة.

نوع الصورة	أسلوب النص البديل	مثال
شعار	اسم المؤسسة	alt="Example Company"
صورة معلوماتية	وصف قصير ومحدد لما يهم	alt="Blue running shoe with white sole"
صورة تعمل كزر	الإجراء، بما يطابق الرابط	alt="Track order 1042"
فاصل أو زخرفة	نص بديل فارغ ليتم تخطيها	alt=""
لافتة تحتوي نصًا	النص نفسه، مع نص حقيقي قريب	alt="Autumn sale ends Sunday"

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

روابط مفهومة خارج سياقها

كثيرًا ما يستعرض مستخدمو قارئات الشاشة قائمة بكل الروابط في الرسالة. وقائمة من ستة عناصر تقول جميعها انقر هنا أو اقرأ المزيد لا فائدة منها. اجعل كل رابط يصف وجهته، مثل Track order 1042 أو Read the shipping policy. ونسّق الروابط بخط سفلي ولون يجتاز التباين، لأن اللون وحده إشارة ضعيفة. تتناول WCAG ذلك تحت بند غرض الرابط، والمبدأ بسيط: ينبغي أن تظل الكلمات مفهومة بمفردها.

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

حدد اللغة

تخبر خاصية lang على عنصر html التقنيات المساعدة بلغة الرسالة. وإذا كان قسم ما بلغة أخرى، فعلّمه بخاصية lang خاصة به. ولا كلفة لذلك، وهو يزيل الكلمات المنطوقة خطأً لدى مستخدمي قارئات الشاشة. استخدم رموزًا صحيحة مثل en وen-GB وhi وfr.

تباين الألوان وأحجام الخطوط وأهداف النقر

يطلب المستوى AA من WCAG 2.2 نسبة تباين لا تقل عن 4.5 إلى 1 للنص العادي و3 إلى 1 للنص الكبير، و3 إلى 1 لمكونات الواجهة ذات المعنى مثل حواف الأزرار. استخدم أداة فحص التباين على أزواج الألوان الفعلية في قالبك، بما فيها نص الأزرار وروابط التذييل والحروف الصغيرة. فالتذييلات هي المكان الذي يخفق فيه التباين عادةً.

• نص المتن. نحو 16px مع ارتفاع سطر بين 1.4 و1.5 مريح. تجنب النزول عن 14px لأي شيء مهم. تكبّر بعض عملاء الجوال النصوص الصغيرة تلقائيًا، مما قد يربك التخطيط، فاختبر ذلك.
• العناوين ودعوات اتخاذ الإجراء. استخدم درجات واضحة في الحجم. وأبقِ الإجراء الرئيسي ظاهرًا دون تمرير على الهاتف إن أمكن.
• أهداف النقر. امنح الأزرار حشوًا سخيًا. الإرشاد الشائع هو هدف بحجم نحو 44 في 44 بكسل على الأقل، مع مسافة بين الروابط المتجاورة.
• طول السطر. يظل العمود الواحد بعرض نحو 600px عرضًا آمنًا، ويُقرأ جيدًا على الشاشات الصغيرة.
• لا تعتمد على اللون وحده. ينبغي أن يختلف السعر الأحمر عن الأخضر أيضًا بالكلمات أو التسميات أو الأيقونات ذات النص البديل.
• خطوط الويب. تعامل معها كتحسين إضافي. اذكر دائمًا مجموعة خطوط احتياطية آمنة للويب، لأن كثيرًا من العملاء يتجاهل الخطوط المخصصة.

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

الوضع الداكن: ما الذي تفعله العملاء فعلًا

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

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

شعارات وأيقونات PNG الشفافة

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

• استخدم PNG شفافًا، واختر ألوانًا ذات تباين كافٍ على الخلفيتين الفاتحة والداكنة، مثل لون علامة تجارية متوسط الدرجة.
• أضف حدًا خارجيًا فاتحًا رفيعًا أو توهجًا إلى الأجزاء الداكنة من العمل الفني، ليبقى الشكل واضحًا على الخلفيات الداكنة.
• حيث يدعم العميل prefers-color-scheme، بدّل إلى نسخة فاتحة من الشعار للوضع الداكن باستخدام CSS.
• تجنب وضع نص أساسي داخل الصور. فالنص الحي يعاد تلوينه بشكل صحيح أما النص المسطح فلا.
• افحص الأيقونات التي هي رموز سوداء على خلفيات شفافة، فقد تختفي تمامًا.

الاشتراك عبر prefers-color-scheme

تدعم بعض العملاء استعلام الوسائط prefers-color-scheme، ويمكنك كتابة قواعد داكنة داخله. الدعم متفاوت، لذا اجعل هذه القواعد إضافة، واجعل التصميم الافتراضي يعمل دائمًا بدونها. وتخبر وسوم meta الخاصة بـ color-scheme في المثال أعلاه العملاء الداعمة بأن الرسالة جاهزة للوضعين.

<style>
  :root { color-scheme: light dark; supported-color-schemes: light dark; }
  @media (prefers-color-scheme: dark) {
    .bg-page { background-color: #121212 !important; }
    .bg-card { background-color: #1e1e1e !important; }
    .text-main { color: #eaeaea !important; }
    .logo-light { display: none !important; }
    .logo-dark { display: block !important; }
  }
</style>

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

Outlook ومحرك العرض Word

تعرض عدة إصدارات من Outlook لنظام Windows الـ HTML بمحرك Word لا بمحرك متصفح. وتوثق Microsoft ميزات HTML وCSS التي يدعمها هذا المحرك، وهي مجموعة أصغر مما تدعمه المتصفحات الحديثة. والنتيجة هي السبب الأكثر شيوعًا لقالب يعمل في كل مكان إلا في صندوق وارد واحد، غالبًا في بيئة عمل حيث يهم الأمر.

الخاصية	العرض المعتاد	الاستجابة العملية
دعم محدود لنموذج الصندوق	يتم تجاهل الحشو أو الهوامش أو العروض على عناصر div وp أو تتفاوت	نفّذ التخطيط بخلايا الجدول وضع الحشو على عناصر td
لا صور خلفية في حالات كثيرة	يجلس نص الغلاف على منطقة فارغة	حدد لون خلفية صلبًا كبديل واستخدم شيفرة شرطية للصور حيث لا بد منها
تجاهل الزوايا المستديرة والظلال	تبدو الأزرار مربعة	اقبل الزوايا المربعة كبديل مقبول
حجم الصورة	تتمدد الصور أو تظهر بحجم خاطئ	حدد خاصيتي width وheight على كل img، لا في CSS فقط
غرائب ارتفاع السطر والتباعد	تبدو كتل النص أطول أو أقصر	حدد ارتفاع سطر صريحًا على الخلية وتجنب فقرات التباعد الفارغة
ميزات التخطيط الحديثة غير مدعومة	ينهار Flexbox أو grid	استخدم جداول متداخلة وتخطيطات هجينة بعروض ثابتة

من الأساليب المفيدة أن نصمم للعميل الأكثر محدودية أولًا ثم نحسّن صعودًا. استخدم التعليقات الشرطية لـ Outlook فقط حين يلزم بديل فعلًا، وأبقِها صغيرة، واحتفظ بسجل يوضح سبب وجود كل منها. وقد يغير محرك Word أيضًا طريقة تصرف الألوان في السمات الداكنة، فأدرجه في فحوصات الوضع الداكن.

اقتطاع Gmail عند نحو 102KB

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

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

ويمس الحجم قابلية التسليم أيضًا. فالرسائل الثقيلة جدًا أبطأ في التسليم وأكثر عرضة للتصفية، كما نغطي في دليلنا حول حدود حجم البريد وMIME.

حظر الصور والنسخة النصية البديلة

تحظر بعض العملاء الصور البعيدة حتى يسمح القارئ بها، ويوقف بعض القراء الصور نهائيًا. صمم بحيث تظل الرسالة التي فُقدت كل صورها صالحة للعمل.

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

أرسل دائمًا جزءًا نصيًا

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

مصفوفة اختبار وسير عمل المعاينة

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

الفحص	ما ننظر إليه	ينجح حين
Outlook لنظام Windows (محرك Word)	التخطيط والأزرار والعروض والخلفيات	تكون الرسالة مقروءة ومترابطة وقابلة للاستخدام حتى لو أقل أناقة
Gmail على الويب وتطبيق الجوال	التخطيط والوضع الداكن وحجم الرسالة والاقتطاع	لا اقتطاع، والتذييل ظاهر، والألوان آمنة
Apple Mail على iPhone وMac	الوضع الداكن وحجم الخط وأهداف النقر	الشعار ظاهر في السمتين، وأهداف النقر سهلة
Outlook على الويب والجوال	إعادة تلوين الوضع الداكن والصور	يصمد التباين بعد إعادة التلوين
الصور متوقفة	النص البديل والخلفيات والأزرار	يظل العرض والإجراء واضحين
مراجعة بقارئ شاشة	ترتيب القراءة والنص البديل وقائمة الروابط واللغة	يكون مفهومًا عند الاستماع إليه من الأعلى إلى الأسفل
لوحة المفاتيح والتكبير	ترتيب Tab والتكبير حتى حجم كبير	لا يضيع شيء ولا يحدث تداخل
عرض النص العادي	المحتوى والروابط وإلغاء الاشتراك	كامل ومقروء

سير عمل يناسب دورة الإصدار

1. تحقق من HTML في أداة تحقق، وشغّل فحص إمكانية وصول آليًا على الملف المعروض للتباين ونقص النص البديل واللغة.
2. أرسل اختبارًا إلى حسابات حقيقية في عملائك الرئيسيين، أو استخدم أداة معاينة تعرض لقطات شاشة. اللقطات مرحلة أولى جيدة لكنها لا تحل محل صندوق وارد حقيقي.
3. افتح الرسالة مع إيقاف الصور وفي الوضع الداكن وعلى هاتف.
4. استمع إليها بقارئ شاشة لمدة دقيقة ودوّن كل ما يربك.
5. افحص حجم HTML النهائي بعد إضافة التخصيص والتتبع.
6. أصلح وأعد الإرسال وسجّل التاريخ والعملاء والنتيجة في سجل قصير.

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

مثال تطبيقي: القالب الذي أخفق من ثلاث جهات

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

الملاحظة	قبل	بعد
اقتطاع Gmail	HTML بحجم 118KB، والتذييل مخفي خلف رابط الاقتطاع	أُزيلت CSS والتعليقات غير المستخدمة، وانخفض HTML إلى 74KB، والتذييل ظاهر
شعار الوضع الداكن	يختفي الشعار الداكن على سطح داكن	أُعيد رسم الشعار بحد خارجي فاتح، مع نسخة فاتحة لقواعد الوضع الداكن
التباين	نص المتن رمادي بنسبة نحو 2.8 إلى 1 على الأبيض	غُمّق نص المتن ليجتاز 4.5 إلى 1، ورُفع الحجم من 12px إلى 16px
الروابط والنص البديل	ثلاثة روابط تقول انقر هنا؛ والنص البديل للغلاف فارغ	تقول الروابط Shop the autumn range وRead delivery details وManage preferences؛ ويحمل النص البديل للغلاف العرض، ويرد العرض نفسه أيضًا كنص حي

هذه أرقام مختلقة للتوضيح. المهم هو التسلسل: قِس، وأصلح الأسباب بترتيب الأثر، وأعد الاختبار في المصفوفة نفسها، ودوّن النتيجة. في هذا المثال انخفض HTML بمقدار 44KB، أي 37 بالمئة من الأصل، قبل تغيير أي محتوى. ثم يضيف الفريق جزءًا نصيًا عاديًا وrole presentation على كل جدول تخطيط، ويُعتمد الإصدار بسطر واحد في السجل للشخص التالي.

إمكانية الوصول وقابلية التسليم تدعمان بعضهما

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

قائمة التحقق قبل الإرسال

1. وجود doctype وخاصية lang وعنوان وصفي.
2. جداول التخطيط عليها role presentation، وترتيب المصدر يطابق ترتيب القراءة، والتداخل ضحل.
3. لكل صورة معلوماتية نص بديل محدد؛ وللصور الزخرفية نص بديل فارغ.
4. لا نص مهم يعيش داخل صورة فقط، والرسالة تعمل مع إيقاف الصور.
5. نص المتن يجتاز تباين 4.5 إلى 1، وحجمه نحو 16px، وللأزرار أهداف نقر سخية.
6. نص الرابط يصف الوجهة، والروابط مسطّرة أو معلَّمة بوضوح بطريقة أخرى.
7. فُحصت الشعارات والأيقونات في السمتين الفاتحة والداكنة، بـ PNG شفاف أو نسخة داكنة.
8. فُحص Outlook لنظام Windows، مع بدائل للخلفيات والأزرار المستديرة.
9. حجم HTML النهائي، بعد التتبع والتخصيص، أقل بكثير من نطاق اقتطاع Gmail.
10. أُدرج جزء نصي عادي حقيقي، ورابط إلغاء الاشتراك في أعلى الرسالة.
11. سُجلت النتائج، وتتم مراجعة المصفوفة مقابل بيانات الفتح الحالية.

قراءات إضافية ومصادر

• W3C: إرشادات الوصول إلى محتوى الويب (WCAG) 2.2
• W3C: فهم معيار النجاح 1.4.3، التباين (الحد الأدنى)
• W3C: فهم معيار النجاح 3.1.1، لغة الصفحة
• W3C: فهم معيار النجاح 2.4.4، غرض الرابط (في السياق)
• W3C WAI: دليل الصور وشجرة قرار النص البديل
• MDN: ميزة الوسائط prefers-color-scheme
• Microsoft: دعم HTML وCSS في Outlook (محرك عرض Word)