HTML ईमेल एक्सेसिबिलिटी, डार्क मोड और क्लाइंट्स में रेंडरिंग: एक व्यावहारिक गाइड

अच्छी HTML ईमेल एक्सेसिबिलिटी और रेंडरिंग का काम एक ही काम के दो पहलू हैं: आप यह सुनिश्चित कर रहे हैं कि हर सब्सक्राइबर, चाहे वह कोई भी क्लाइंट, डिवाइस, थीम या असिस्टिव टेक्नोलॉजी इस्तेमाल करे, आपका संदेश पढ़ सके और उस पर कार्रवाई कर सके। जो टेम्पलेट आपके एडिटर में बिल्कुल सही दिखता है, वह इमेज ब्लॉक होने पर खाली डिब्बों की दीवार दिखा सकता है, डार्क मोड में धुंधला पड़ सकता है, Windows के Outlook में टूट सकता है या Gmail में कट सकता है। यह गाइड हमें इन सबके लिए बनाने और टेस्ट करने का व्यावहारिक तरीका देती है, साफ़ नियमों के साथ जिन्हें हम अपने अगले टेम्पलेट पर लागू कर सकते हैं।

एक्सेसिबिलिटी और रेंडरिंग साथ-साथ क्यों चलती हैं

ज़्यादातर रेंडरिंग की विफलताएं एक्सेसिबिलिटी की भी विफलताएं होती हैं। अगर कोई संदेश ऑफ़र दिखाने के लिए एक ही इमेज पर निर्भर है, तो इमेज ब्लॉक करने वाला व्यक्ति, स्क्रीन रीडर उपयोगकर्ता और धीमे कनेक्शन वाला व्यक्ति, तीनों उसे चूक जाते हैं। अगर हल्के बैकग्राउंड पर ग्रे टेक्स्ट तेज़ रोशनी में पढ़ना कठिन है, तो वह कम दृष्टि वाले व्यक्ति के लिए भी बाधा है। कारण को एक बार ठीक करने से सबको फ़ायदा होता है।

ईमेल वेब से अलग भी है। यहां कोई एक ब्राउज़र इंजन नहीं है। हर क्लाइंट आपके कोड के कुछ हिस्सों को अपने तरीके से हटाता, बदलता या नज़रअंदाज़ करता है, और उनमें से कुछ, जैसे Windows के लिए Outlook, अब भी ऐसा इंजन इस्तेमाल करते हैं जो मौजूदा वेब मानकों से बहुत पीछे है। इसलिए हम सतर्क ढंग से बनाते हैं और मानकों के भरोसे बैठने के बजाय खुलकर टेस्ट करते हैं।

समस्या	कौन प्रभावित होता है	आम मूल कारण
कंटेंट सिर्फ़ इमेज के अंदर	स्क्रीन रीडर उपयोगकर्ता, इमेज ब्लॉक करने वाले लोग, धीमे कनेक्शन	ऑफ़र का टेक्स्ट बैनर में बेक है और कोई असली टेक्स्ट या alt नहीं है
फीका या छोटा टेक्स्ट	कम दृष्टि वाले, बुज़ुर्ग पाठक, बाहर धूप में पढ़ने वाले	सफ़ेद पर हल्का ग्रे, 11px या 12px की बॉडी कॉपी
अस्पष्ट लिंक	लिंक की सूची देखने वाले स्क्रीन रीडर उपयोगकर्ता, कीबोर्ड उपयोगकर्ता	कई लिंक जिन पर बस यहां क्लिक करें लिखा है
डार्क मोड में अपठनीय	डार्क थीम इस्तेमाल करने वाले लोग, अक्सर रात में	लोगो और आइकन जो मानकर चलते हैं कि बैकग्राउंड सफ़ेद है
Outlook में बिगड़ा लेआउट	Windows के लिए Outlook उपयोगकर्ता, अक्सर बिज़नेस माहौल में	ऐसे CSS पर निर्भरता जिसे Word इंजन नज़रअंदाज़ करता है
संदेश कट जाना	लंबे संदेशों पर Gmail उपयोगकर्ता	भारी, दोहराव वाला या फूला हुआ HTML

टेबल लेआउट के अंदर सिमैंटिक ढांचा

ईमेल के लिए टेबल अब भी सबसे सुरक्षित लेआउट तरीका है, लेकिन जब तक हम अलग से न बताएं, असिस्टिव टेक्नोलॉजी टेबल को डेटा के रूप में पढ़ती है। कुछ छोटी आदतें टेबल लेआउट को समझने योग्य बनाए रखती हैं।

• Doctype, भाषा और title। पूरे doctype से शुरू करें, html एलिमेंट पर lang एट्रिब्यूट रखें और वर्णनात्मक title एलिमेंट जोड़ें। स्क्रीन रीडर भाषा से उच्चारण के नियम चुनते हैं, और 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 टेक्स्ट, लिंक टेक्स्ट और भाषा एट्रिब्यूट

ऐसा alt टेक्स्ट जो अपनी जगह कमाए

Alt टेक्स्ट उस इमेज का विकल्प है जब वह दिखाई नहीं देती। जब कोई क्लाइंट डिफ़ॉल्ट रूप से इमेज ब्लॉक करता है, तो लोग सबसे पहले यही देखते हैं। इसे उस काम के लिए लिखें जो इमेज करती है।

इमेज का प्रकार	Alt टेक्स्ट का तरीका	उदाहरण
लोगो	संगठन का नाम	alt="Example Company"
जानकारीपूर्ण फ़ोटो	जो मायने रखता है उसका छोटा, स्पष्ट विवरण	alt="सफ़ेद सोल वाला नीला रनिंग शू"
बटन वाली इमेज	कार्रवाई, जो लिंक से मेल खाए	alt="ऑर्डर 1042 ट्रैक करें"
सजावटी डिवाइडर या अलंकरण	खाली alt ताकि वह छोड़ दिया जाए	alt=""
टेक्स्ट वाला बैनर	वही टेक्स्ट, साथ में पास में असली टेक्स्ट	alt="शरद ऋतु सेल रविवार को खत्म"

इमेज की तस्वीर जैसे वाक्यांश से शुरुआत न करें, कीवर्ड न ठूंसें, और एट्रिब्यूट को पूरी तरह छोड़ें भी नहीं, क्योंकि तब कुछ क्लाइंट फ़ाइल का नाम पढ़कर सुनाते हैं। Alt टेक्स्ट को भी स्टाइल करें: img एलिमेंट पर फ़ॉन्ट, रंग और साइज़ सेट करने से उन क्लाइंट्स में फ़ॉलबैक टेक्स्ट पढ़ने योग्य रहता है जो तस्वीर की जगह उसे दिखाते हैं।

ऐसे लिंक जो संदर्भ के बिना भी समझ आएं

स्क्रीन रीडर उपयोगकर्ता अक्सर संदेश के सभी लिंक की सूची खोलते हैं। छह ऐसी प्रविष्टियों की सूची बेकार है जिन सब पर यहां क्लिक करें या और पढ़ें लिखा हो। हर लिंक अपनी मंज़िल का वर्णन करे, जैसे ऑर्डर 1042 ट्रैक करें या शिपिंग नीति पढ़ें। लिंक को अंडरलाइन और ऐसे रंग से स्टाइल करें जो कंट्रास्ट पास करे, क्योंकि केवल रंग एक कमज़ोर संकेत है। WCAG इसे लिंक के उद्देश्य के अंतर्गत रखता है, और सिद्धांत सरल है: शब्द अपने आप में भी अर्थ दें।

बटन भी असली रखें। टेबल सेल के अंदर स्टाइल किए गए लिंक से बना, भरपूर पैडिंग वाला bulletproof बटन टैप करने में आसान होता है और स्क्रीन रीडर के साथ काम करता है। केवल चपटी इमेज वाला बटन इमेज ब्लॉक होने पर भी और ज़ूम करने पर भी विफल होता है।

भाषा सेट करें

html एलिमेंट पर lang एट्रिब्यूट असिस्टिव टेक्नोलॉजी को बताता है कि संदेश किस भाषा में है। अगर कोई हिस्सा दूसरी भाषा में है, तो उसे उसके अपने lang एट्रिब्यूट से चिह्नित करें। इसमें कोई लागत नहीं है और स्क्रीन रीडर उपयोगकर्ताओं के लिए गलत उच्चारण दूर हो जाते हैं। en, en-GB, hi या fr जैसे सही कोड इस्तेमाल करें।

रंग कंट्रास्ट, फ़ॉन्ट साइज़ और टैप टारगेट

WCAG 2.2 का AA स्तर सामान्य टेक्स्ट के लिए कम से कम 4.5 से 1, बड़े टेक्स्ट के लिए 3 से 1, और बटन के किनारे जैसे सार्थक इंटरफ़ेस घटकों के लिए 3 से 1 का कंट्रास्ट रेशियो मांगता है। अपने टेम्पलेट के असली रंग जोड़ों पर कंट्रास्ट चेकर चलाएं, जिनमें आपके बटनों का टेक्स्ट, फ़ुटर लिंक और छोटे अक्षरों की इबारत शामिल है। कंट्रास्ट अक्सर फ़ुटर में ही विफल होता है।

• बॉडी कॉपी। लगभग 16px और 1.4 से 1.5 की लाइन हाइट आरामदेह रहती है। जो भी मायने रखता हो, उसके लिए 14px से नीचे न जाएं। कुछ मोबाइल क्लाइंट छोटे टेक्स्ट को खुद बड़ा कर देते हैं, जिससे लेआउट बिगड़ सकता है, इसलिए इसे टेस्ट करें।
• हेडिंग और कॉल टू एक्शन। साइज़ के स्पष्ट चरण इस्तेमाल करें। यदि हो सके तो मुख्य कार्रवाई को फ़ोन पर स्क्रॉल किए बिना दिखाई देने दें।
• टैप टारगेट। बटनों को उदार पैडिंग दें। आम सलाह कम से कम लगभग 44 गुणा 44 पिक्सल के टारगेट की है, और पास-पास के लिंक के बीच जगह रखें।
• लाइन की लंबाई। लगभग 600px का एकल कॉलम अब भी सुरक्षित चौड़ाई है, और छोटी स्क्रीन पर अच्छा पढ़ा जाता है।
• केवल रंग पर निर्भर न रहें। लाल कीमत और हरी कीमत शब्दों, लेबल या alt वाले आइकन से भी अलग होनी चाहिए।
• वेब फ़ॉन्ट। इन्हें एक अतिरिक्त सुविधा मानें। हमेशा वेब-सेफ़ फ़ॉलबैक स्टैक दें, क्योंकि कई क्लाइंट कस्टम फ़ॉन्ट को नज़रअंदाज़ करते हैं।

कंट्रास्ट केवल लाइट मोड का सवाल नहीं है। अगर आप डार्क मोड स्टाइल जोड़ते हैं, तो नए रंग जोड़ों को भी जांचें।

डार्क मोड: क्लाइंट असल में क्या करते हैं

अलग-अलग क्लाइंट में डार्क मोड अलग तरह से व्यवहार करता है, और एक ही क्लाइंट के डेस्कटॉप, वेब और मोबाइल वर्शन में भी फ़र्क हो सकता है। मोटे तौर पर तीन व्यवहार हैं, और अच्छा टेम्पलेट इन सब में टिकता है।

व्यवहार	क्लाइंट क्या करता है	हम इसके लिए क्या करते हैं
कोई बदलाव नहीं	आपका ईमेल ठीक वैसे ही हल्के रंगों पर दिखाता है जैसा डिज़ाइन किया गया	कुछ खास नहीं, पर सुनिश्चित करें कि डिज़ाइन अपने बैकग्राउंड पर अपने दम पर टिके
आंशिक उलटाव	केवल उन रंगों को बदलता है जिन्हें वह हल्के बैकग्राउंड और गहरे टेक्स्ट के रूप में पहचानता है	बैकग्राउंड और टेक्स्ट के रंग स्पष्ट रूप से सेट करें ताकि बदलाव का अनुमान लगाया जा सके
पूर्ण उलटाव	ज़्यादातर बैकग्राउंड और टेक्स्ट का रंग बदल देता है, कभी-कभी असमान रूप से	शुद्ध सफ़ेद और शुद्ध काले से बचें, लोगो और आइकन टेस्ट करें, दोनों तरफ़ कंट्रास्ट सुरक्षित रखें

पारदर्शी PNG लोगो और आइकन

लोगो आम तौर पर सबसे पहले बिगड़ते हैं। पारदर्शी बैकग्राउंड पर गहरा लोगो गहरी सतह पर गायब हो जाता है। ठोस सफ़ेद बैकग्राउंड के साथ सहेजा गया लोगो चमकीले आयत की तरह दिखता है। जो विकल्प अक्सर काम करते हैं:

• पारदर्शी PNG इस्तेमाल करें, और ऐसे रंग चुनें जिनका हल्के और गहरे दोनों बैकग्राउंड पर पर्याप्त कंट्रास्ट हो, जैसे मध्यम टोन का ब्रांड रंग।
• आर्टवर्क के गहरे हिस्सों में हल्की आउटलाइन या ग्लो जोड़ें, ताकि आकृति गहरे बैकग्राउंड पर टिकी रहे।
• जहां क्लाइंट prefers-color-scheme सपोर्ट करता है, वहां CSS से डार्क मोड के लिए लोगो का हल्का वर्शन बदलकर लगाएं।
• मुख्य टेक्स्ट को इमेज में रखने से बचें। असली टेक्स्ट सही ढंग से रंग बदलता है, चपटा किया गया टेक्स्ट नहीं।
• उन आइकनों को जांचें जो पारदर्शी बैकग्राउंड पर काले ग्लिफ़ हैं, क्योंकि वे पूरी तरह गायब हो सकते हैं।

prefers-color-scheme से ऑप्ट-इन करना

कुछ क्लाइंट prefers-color-scheme मीडिया क्वेरी सपोर्ट करते हैं, और आप उसके अंदर डार्क नियम लिख सकते हैं। सपोर्ट असमान है, इसलिए इन नियमों को अतिरिक्त मानें और डिफ़ॉल्ट डिज़ाइन हमेशा इनके बिना भी चलने वाला बनाएं। ऊपर के उदाहरण में color-scheme के meta टैग सपोर्ट करने वाले क्लाइंट्स को बताते हैं कि संदेश दोनों मोड के लिए तैयार है।

<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 रेंडरिंग इंजन

Windows के लिए Outlook के कई वर्शन HTML को ब्राउज़र इंजन से नहीं, बल्कि Word के इंजन से रेंडर करते हैं। Microsoft दस्तावेज़ों में बताता है कि वह इंजन कौन से HTML और CSS फ़ीचर सपोर्ट करता है, और यह आधुनिक ब्राउज़रों से छोटा सेट है। नतीजा यह है कि टेम्पलेट हर जगह चलता है पर एक इनबॉक्स में नहीं चलता, और यही सबसे आम कारण है, अक्सर ऐसे बिज़नेस माहौल में जहां इससे फ़र्क पड़ता है।

खामी	आम लक्षण	व्यावहारिक जवाब
सीमित बॉक्स मॉडल सपोर्ट	div और p एलिमेंट पर पैडिंग, मार्जिन या चौड़ाई नज़रअंदाज़ होती है या असंगत रहती है	लेआउट टेबल सेल से करें और पैडिंग td एलिमेंट पर रखें
कई मामलों में बैकग्राउंड इमेज नहीं	हीरो टेक्स्ट खाली जगह पर बैठा दिखता है	फ़ॉलबैक के तौर पर ठोस बैकग्राउंड रंग सेट करें और जहां ज़रूरी हो वहां इमेज के लिए कंडीशनल कोड इस्तेमाल करें
गोल कोने और शैडो नज़रअंदाज़	बटन चौकोर दिखते हैं	चौकोर कोनों को शालीन फ़ॉलबैक के रूप में स्वीकार करें
इमेज साइज़िंग	तस्वीरें खिंच जाती हैं या गलत साइज़ में दिखती हैं	हर img पर केवल CSS नहीं, width और height एट्रिब्यूट भी सेट करें
लाइन हाइट और स्पेसिंग की अजीबताएं	टेक्स्ट ब्लॉक ज़्यादा लंबे या छोटे दिखते हैं	सेल पर स्पष्ट लाइन हाइट सेट करें और खाली स्पेसर पैराग्राफ़ से बचें
आधुनिक लेआउट फ़ीचर असमर्थित	Flexbox या grid ढह जाता है	नेस्टेड टेबल और निश्चित चौड़ाई वाले हाइब्रिड लेआउट इस्तेमाल करें

एक उपयोगी तरीका है सबसे सीमित क्लाइंट के लिए पहले डिज़ाइन करना और फिर ऊपर की ओर सुधार करना। Outlook के लिए कंडीशनल कमेंट केवल तब इस्तेमाल करें जब फ़ॉलबैक सच में ज़रूरी हो, उन्हें छोटा रखें, और हर एक क्यों है इसका रिकॉर्ड रखें। Word इंजन डार्क थीम में रंगों के व्यवहार को भी बदल सकता है, इसलिए इसे अपनी डार्क मोड जांच में शामिल करें।

लगभग 102KB पर Gmail क्लिपिंग

जब किसी संदेश का HTML बड़ा होता है, तो Gmail दिखाए गए संदेश को छोटा कर देता है और पूरा ईमेल देखने का लिंक जोड़ देता है। जो आंकड़ा ज़्यादातर लोग बताते हैं, वह लगभग 102KB है, और यह HTML के साइज़ पर लागू होता है, उससे लिंक की गई इमेज पर नहीं। इसके दो व्यावहारिक नतीजे हैं। क्लिप किया गया संदेश आपका फ़ुटर और अनसब्सक्राइब लिंक छिपा सकता है, और ट्रैकिंग एलिमेंट भी छिपा सकता है, इसलिए कट के नीचे का कोई भी कंटेंट छूट सकता है। चूंकि सटीक नियम Google का है और बदल सकता है, इस संख्या को मार्गदर्शक मानें और भरपूर गुंजाइश छोड़ें।

• अनुपयोगी CSS, कमेंट किए हुए ब्लॉक और आपके एडिटर से बचा हुआ टेम्पलेट कोड हटाएं।
• जब style ब्लॉक में छोटी क्लास से काम चल सकता हो, तो हर सेल के लिए लंबी इनलाइन स्टाइल स्ट्रिंग दोहराने से बचें, बशर्ते आधार डिज़ाइन इनलाइन स्टाइल के साथ भी काम करे।
• जहां आपका प्लेटफ़ॉर्म अनुमति दे, वहां बहुत लंबे ट्रैकिंग URL छोटे करें, क्योंकि हर लिंक बाइट जोड़ता है।
• बहुत सारा टेक्स्ट न चिपकाएं और एक ही कंटेंट को कई छिपे ब्लॉक में न दोहराएं।
• अंतिम साइज़ तब जांचें जब आपके प्लेटफ़ॉर्म ने ट्रैकिंग और पर्सनलाइज़ेशन जोड़ दिया हो, सिर्फ़ तब नहीं जब आपने फ़ाइल लिखी थी।
• सबसे ज़रूरी कंटेंट और अनसब्सक्राइब लिंक को संदेश के ऊपरी हिस्से में रखें।

साइज़ का असर डिलीवरेबिलिटी पर भी पड़ता है। बहुत भारी संदेश देर से पहुंचते हैं और फ़िल्टरिंग को आकर्षित करने की संभावना ज़्यादा रखते हैं, जैसा हम ईमेल साइज़ सीमा और MIME की हमारी गाइड में बताते हैं।

इमेज ब्लॉकिंग और प्लेन-टेक्स्ट विकल्प

कुछ क्लाइंट रिमोट इमेज तब तक ब्लॉक रखते हैं जब तक पाठक अनुमति न दे, और कुछ पाठक इमेज हमेशा के लिए बंद कर देते हैं। इस तरह डिज़ाइन करें कि हर इमेज गायब होने पर भी संदेश काम करे।

• हेडलाइन, ऑफ़र और कॉल टू एक्शन के लिए असली टेक्स्ट रखें।
• स्टाइल किया हुआ alt टेक्स्ट इस्तेमाल करें, और सेल पर बैकग्राउंड रंग सेट करें ताकि गायब गहरी इमेज पर सफ़ेद टेक्स्ट सफ़ेद पर सफ़ेद न हो जाए।
• इमेज बटन की जगह टेक्स्ट और सेल के रंग से बने bulletproof बटन इस्तेमाल करें।
• पूरे संदेश के रूप में एक बड़ी इमेज का उपयोग न करें। यह अनुपलब्ध भी है और ऐसा पैटर्न भी जिस पर फ़िल्टर नज़र रखते हैं। हमारा कंटेंट और स्पैम फ़िल्टर का अवलोकन बताता है कि क्यों।
• ओपन गिनने के लिए ओपन पिक्सल पर निर्भर न रहें, क्योंकि ब्लॉक की गई इमेज और प्राइवेसी फ़ीचर उस गिनती को अविश्वसनीय बना देते हैं।

हमेशा टेक्स्ट हिस्सा भेजें

अच्छे ढंग से बना संदेश multipart alternative रखता है, जिसमें एक टेक्स्ट हिस्सा और एक HTML हिस्सा होता है। टेक्स्ट हिस्से में असली कंटेंट, पढ़ने योग्य पैराग्राफ़, वही मुख्य लिंक पूरे लिखे हुए और अनसब्सक्राइब की जानकारी होनी चाहिए। यह प्लेन टेक्स्ट पसंद करने वाले पाठकों की मदद करता है, असिस्टिव टेक्नोलॉजी के लिए उपयोगी है और फ़िल्टरों के लिए सावधानी का अच्छा संकेत है। खाली टेम्पलेट या सिर्फ़ यह एक पंक्ति न चिपकाएं कि इस ईमेल को अपने ब्राउज़र में देखें। अगर आपका प्लेटफ़ॉर्म HTML से टेक्स्ट हिस्सा बना सकता है, तब भी नतीजा पढ़ें और सुधारें, क्योंकि स्वचालित रूपांतरण अक्सर बेतरतीब URL और खाली पंक्तियां छोड़ देता है।

टेस्टिंग मैट्रिक्स और प्रीव्यू वर्कफ़्लो

हर डिवाइस पर हर क्लाइंट का टेस्ट करना व्यावहारिक नहीं है। मैट्रिक्स हमें दोहराई जा सकने वाली छोटी सूची देता है। इसे क्लाइंट और डिवाइस के अनुसार अपने खुद के ओपन डेटा से बनाएं, और जान-बूझकर कुछ मुश्किल क्लाइंट जोड़ें।

जांच	क्या देखें	कब पास माना जाए
Windows के लिए Outlook (Word इंजन)	लेआउट, बटन, चौड़ाई, बैकग्राउंड	पढ़ने योग्य, लिंक वाला और उपयोग योग्य, भले ही कम निखरा हो
Gmail वेब और मोबाइल ऐप	लेआउट, डार्क मोड, संदेश का साइज़, क्लिपिंग	कोई क्लिप नहीं, फ़ुटर दिखता है, रंग सुरक्षित
iPhone और Mac पर Apple Mail	डार्क मोड, फ़ॉन्ट साइज़, टैप टारगेट	लोगो दोनों थीम में दिखता है, टारगेट आसानी से टैप होते हैं
वेब और मोबाइल पर Outlook	डार्क मोड में रंग बदलना, इमेज	रंग बदलने के बाद भी कंट्रास्ट बना रहता है
इमेज बंद	Alt टेक्स्ट, बैकग्राउंड, बटन	ऑफ़र और कार्रवाई अब भी स्पष्ट हैं
स्क्रीन रीडर से जांच	रीडिंग ऑर्डर, alt टेक्स्ट, लिंक सूची, भाषा	ऊपर से नीचे सुनने पर समझ में आता है
कीबोर्ड और ज़ूम	टैब क्रम, बड़े साइज़ तक मैग्निफ़िकेशन	कुछ खोता या एक-दूसरे पर चढ़ता नहीं है
प्लेन-टेक्स्ट व्यू	कंटेंट, लिंक, अनसब्सक्राइब	पूर्ण और पढ़ने योग्य

ऐसा वर्कफ़्लो जो रिलीज़ में फ़िट बैठे

1. HTML को वैलिडेटर में जांचें और रेंडर की गई फ़ाइल पर कंट्रास्ट, गायब alt टेक्स्ट और भाषा के लिए स्वचालित एक्सेसिबिलिटी जांच चलाएं।
2. अपने मुख्य क्लाइंट्स के असली अकाउंट पर टेस्ट भेजें, या स्क्रीनशॉट रेंडर करने वाला प्रीव्यू टूल इस्तेमाल करें। स्क्रीनशॉट अच्छी पहली जांच हैं, लेकिन वे असली इनबॉक्स की जगह नहीं लेते।
3. संदेश को इमेज बंद करके, डार्क मोड में और फ़ोन पर खोलें।
4. एक मिनट के लिए इसे स्क्रीन रीडर से सुनें और जो भी भ्रमित करे उसे नोट करें।
5. पर्सनलाइज़ेशन और ट्रैकिंग जुड़ने के बाद अंतिम HTML साइज़ जांचें।
6. सुधारें, दोबारा भेजें और तारीख, क्लाइंट और नतीजा एक छोटे लॉग में दर्ज करें।

इसे आज़माने के लिए सुरक्षित जगह इस्तेमाल करें। टेस्ट सीड पतों या स्टेजिंग स्ट्रीम पर भेजें, लाइव लिस्ट पर नहीं, और सुरक्षित ढंग से ईमेल टेस्ट करने की हमारी गाइड का तरीका अपनाएं। हमारी डिलीवरेबिलिटी मेट्रिक्स गाइड दिखाती है कि भेजने के बाद नतीजों पर कैसे नज़र रखें, और टेम्पलेट बदलते समय क्लाइंट के अनुसार एंगेजमेंट की तुलना करना उपयोगी है।

एक उदाहरण: वह टेम्पलेट जो तीन तरह से विफल हुआ

एक काल्पनिक प्रचार टेम्पलेट लें जो 118KB का है, जिसमें पारदर्शी बैकग्राउंड पर गहरा लोगो है, सफ़ेद पर 12px ग्रे बॉडी टेक्स्ट है, एक हीरो इमेज है जिसमें ऑफ़र बेक किया हुआ है, और तीन लिंक हैं जिन सब पर यहां क्लिक करें लिखा है। टेस्टिंग में यह चार जगह विफल होता है।

निष्कर्ष	पहले	बाद में
Gmail क्लिपिंग	HTML 118KB, फ़ुटर क्लिप लिंक के पीछे छिपा	अनुपयोगी CSS और कमेंट हटाए गए, HTML घटकर 74KB, फ़ुटर दिखता है
डार्क मोड लोगो	गहरी सतह पर गहरा लोगो गायब हो जाता है	लोगो हल्की आउटलाइन के साथ दोबारा बनाया गया, साथ में डार्क नियमों के लिए हल्का वैरिएंट
कंट्रास्ट	बॉडी टेक्स्ट ग्रे, सफ़ेद पर लगभग 2.8 से 1	बॉडी टेक्स्ट गहरा किया गया ताकि 4.5 से 1 पास हो, साइज़ 12px से बढ़ाकर 16px
लिंक और alt टेक्स्ट	तीन लिंक जिन पर यहां क्लिक करें लिखा है, हीरो का alt खाली	लिंक अब शरद ऋतु की रेंज खरीदें, डिलीवरी का विवरण पढ़ें और पसंद प्रबंधित करें पढ़ते हैं, हीरो का alt ऑफ़र बताता है और वही ऑफ़र असली टेक्स्ट में भी है

ये बनावटी आंकड़े केवल समझाने के लिए हैं। मुद्दा क्रम का है: नापें, कारणों को प्रभाव के क्रम में ठीक करें, उसी मैट्रिक्स में दोबारा टेस्ट करें और नतीजा लिख लें। इस उदाहरण में कंटेंट बदले बिना ही HTML 44KB घट गया, जो मूल का 37 प्रतिशत है। इसके बाद टीम प्लेन-टेक्स्ट हिस्सा और हर लेआउट टेबल पर role presentation जोड़ती है, और अगले व्यक्ति के लिए एक पंक्ति के लॉग के साथ रिलीज़ पास हो जाती है।

एक्सेसिबिलिटी और डिलीवरेबिलिटी एक-दूसरे को सहारा देती हैं

असली टेक्स्ट हिस्से, ईमानदार लिंक और दिखाई देने वाले अनसब्सक्राइब वाला साफ़, पढ़ने योग्य संदेश फ़िल्टरों के लिए भरोसेमंद और पाठकों के लिए जुड़ने लायक भी होता है। सुनिश्चित करें कि फ़ुटर लिंक काम करते हों और आसानी से मिल जाएं, जैसा हमारी वन-क्लिक अनसब्सक्राइब गाइड में समझाया गया है। इनमें से कुछ भी ऑथेंटिकेशन, लिस्ट की गुणवत्ता या प्रेषक की प्रतिष्ठा की जगह नहीं लेता, लेकिन यह किसी पाठक के संदेश को अनदेखा करने या रिपोर्ट करने के टाले जा सकने वाले कारणों को हटा देता है।

भेजने से पहले की चेकलिस्ट

1. Doctype, lang एट्रिब्यूट और वर्णनात्मक title मौजूद हैं।
2. लेआउट टेबल में role presentation है, सोर्स ऑर्डर रीडिंग ऑर्डर से मेल खाता है और नेस्टिंग कम है।
3. हर जानकारीपूर्ण इमेज में स्पष्ट alt टेक्स्ट है; सजावटी इमेज में खाली alt है।
4. कोई ज़रूरी टेक्स्ट केवल इमेज के अंदर नहीं है, और संदेश इमेज बंद होने पर भी काम करता है।
5. बॉडी टेक्स्ट 4.5 से 1 कंट्रास्ट पास करता है, लगभग 16px है और बटनों के टैप टारगेट उदार हैं।
6. लिंक टेक्स्ट मंज़िल का वर्णन करता है और लिंक अंडरलाइन किए गए हैं या किसी और तरह साफ़ चिह्नित हैं।
7. लोगो और आइकन लाइट और डार्क दोनों थीम में जांचे गए हैं, पारदर्शी PNG या डार्क वैरिएंट के साथ।
8. Windows के लिए Outlook जांचा गया है, बैकग्राउंड और गोल बटनों के फ़ॉलबैक के साथ।
9. ट्रैकिंग और पर्सनलाइज़ेशन के बाद अंतिम HTML साइज़ Gmail क्लिपिंग सीमा से काफ़ी नीचे है।
10. असली प्लेन-टेक्स्ट हिस्सा शामिल है और अनसब्सक्राइब लिंक संदेश में ऊपर की ओर है।
11. नतीजे दर्ज किए गए हैं, और मैट्रिक्स की समीक्षा मौजूदा ओपन डेटा के आधार पर की गई है।

आगे पढ़ें और स्रोत

• W3C: Web Content Accessibility Guidelines (WCAG) 2.2
• W3C: Understanding Success Criterion 1.4.3, Contrast (Minimum)
• W3C: Understanding Success Criterion 3.1.1, Language of Page
• W3C: Understanding Success Criterion 2.4.4, Link Purpose (In Context)
• W3C WAI: Images tutorial और alt टेक्स्ट डिसीज़न ट्री
• MDN: prefers-color-scheme media feature
• Microsoft: Outlook HTML and CSS support (Word rendering engine)