كيفية إنشاء Accessibility Switcher ™ في البريد الإلكتروني

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

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

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

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

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

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

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

لماذا الولوج مهم

فلماذا الوصول مهم؟ حسنًا ، الأمر بسيط للغاية:

1. كلما زادت إمكانية الوصول إلى رسائل البريد الإلكتروني الخاصة بنا ، زاد عدد الأشخاص الذين يمكننا الوصول إليهم
2. كلما زاد عدد الأشخاص الذين يمكننا الوصول إليهم ، كان لدينا وضع أفضل للتواصل كعلامات تجارية ومؤسسات

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

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

التصميم من أجل الاختلاف

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

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

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

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

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

أدخل محلول إمكانية الوصول

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

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

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

مسألة تفضيل

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

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

كيف يتم ترميز Accessibility Switcher

يستخدم Accessibility Switcher استخدام تقنيات البريد الإلكتروني التفاعلية ، حتى يعمل.

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

فيما يلي مقتطف من HTML لأزرار Accessibility Switcher ، الموضوعة بين العلامة <body> ومغلف البريد الإلكتروني:

 <body> <!-- Default Button --> <input type="radio" class="default" name="layout" checked> <label class="default" for="default"></label> <!-- Default Button End --> <!-- Large/Small Layout --> <input type="checkbox" class="large-small-layout" name="layout"> <label class="layout-buttons settings-box-element" for="large-small-layout"></label> <!-- Large/Small Layout End --> <!-- Yellow Tint Layout --> <input type="radio" class="yellow-tint-layout" name="layout"> <label class="layout-buttons settings-box-element" for="yellow-tint-layout"></label> <!-- Yellow Tint Layout End --> <div class="mainWrapper">

يتم وضع CSS في <head> للبريد الإلكتروني لاستهداف كل إدخال وتصميمه ، مما يسمح لك بتخصيصه لأغراضك الخاصة.

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

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

إليك CSS للزر "كبير / صغير" ، والذي يغير حجم الخط إلى 20 بكسل عند تحديده:

 .large-small-layout:checked ~ .mainWrapper p {font-size:20px !important; line-height:30px !important;}

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

إمكانية الوصول هي رحلة

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

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

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