การเข้าถึงในการตลาดผ่านอีเมล: 7 เคล็ดลับง่ายๆ ในการทำให้โค้ดของคุณเข้าถึงได้ง่ายขึ้น

เผยแพร่แล้ว: 2019-04-16

การช่วยสำหรับการเข้าถึงได้กลายเป็นส่วนสำคัญของการตลาดผ่านอีเมลอย่างรวดเร็ว เช่นเดียวกับในประสบการณ์ของผู้ใช้และการออกแบบ แบรนด์ต่างๆ จำนวนมากขึ้นเรื่อยๆ ตรวจสอบให้แน่ใจว่า สมาชิก ทุกคน สามารถเพลิดเพลินกับแคมเปญอีเมลของตนได้ ไม่ว่าพวกเขาจะมีความบกพร่องทางร่างกาย การมองเห็น หรือการรับรู้ หรือแม้กระทั่งไม่สามารถดูภาพในอีเมลได้เนื่องจากสภาพแวดล้อมในองค์กร

ในฐานะนักการตลาดผ่านอีเมล เราทุกคนมุ่งมั่นที่จะส่งอีเมลที่ยอดเยี่ยมไปยังกล่องจดหมายของสมาชิก เราทำการทดสอบสแปมและทดสอบอีเมลเพื่อให้แน่ใจว่าการออกแบบของเราแสดงผลได้อย่างสมบูรณ์แบบบนอุปกรณ์และไคลเอนต์อีเมลทั้งหมด แต่บางครั้ง เราลืมตั้งค่าแท็ก ALT สำหรับรูปภาพของเรา ใช้การผสมสีที่อ่านยาก หรือล้มเหลวในการปรับอีเมลของเราให้เหมาะสมสำหรับโปรแกรมอ่านหน้าจอ และทำให้สมาชิกบางคนแปลกแยก

หากคุณเพิ่งเริ่มต้นทำให้รหัสอีเมลของคุณสามารถเข้าถึงได้มากขึ้น สิ่งต่างๆ อาจทำให้คุณลำบากใจ แต่มีเคล็ดลับง่ายๆ สองสามข้อที่คุณนำไปใช้ได้ง่าย—และมีผลกระทบอย่างมากต่อการเข้าถึงอีเมล

ต่อไปนี้คือวิธีตรวจสอบอีเมลของคุณสำหรับการเข้าถึง ของสมาชิก ทั้งหมด ของคุณ ทีละส่วน

อีเมลของคุณสามารถเข้าถึงได้หรือไม่

การตรวจสอบการช่วยสำหรับการเข้าถึงในรายการตรวจสอบ Litmus ทำให้ง่ายต่อการทดสอบอีเมลของคุณเทียบกับแนวทางปฏิบัติที่ดีที่สุดในการช่วยสำหรับการเข้าถึง ระบุประเด็นที่ต้องปรับปรุง และทำให้สมาชิกทุกคนเข้าถึงอีเมลของคุณได้มากขึ้น

เรียนรู้เพิ่มเติม →

รายการตรวจสอบการช่วยสำหรับการเข้าถึงของคุณ

1. เพิ่มรหัสภาษาใน <HTML> . ของคุณ

สมาชิกบางคนของคุณจะไม่อ่านอีเมลของคุณบนแล็ปท็อปหรือโทรศัพท์ บางคนจะใช้โปรแกรมอ่านหน้าจอเพื่อเข้าถึงอีเมลของคุณ เนื่องจากเนื้อหาอีเมลของคุณจะถูกอ่านออกเสียง จึงควรเป็นภาษาที่ถูกต้อง การออกเสียงจึงจะถูกต้อง คุณไม่ต้องการให้อีเมลที่เขียนเป็นภาษาฝรั่งเศสออกเสียงเป็นภาษาอังกฤษแบบอเมริกัน ใช่ไหม

เพื่อป้องกันไม่ให้เกิดขึ้นคุณจะมีเพื่อให้ผู้อ่านรู้ว่าสิ่งที่หน้าจอภาษาอีเมลของคุณจะถูกเขียนใน. หากมีรหัสภาษาที่ไม่ระบุไว้ในอีเมลของคุณอ่านหน้าจอไม่สามารถออกเสียงได้อย่างถูกต้องคัดลอกและอีเมลฝีปากของคุณอาจจะออกมา ฟังดูผิดอย่างสมบูรณ์

นั่นเป็นสาเหตุสำคัญที่จะต้องตรวจสอบ <HTML> เพื่อหารหัสภาษา ซึ่งเป็นข้อมูลโค้ดง่ายๆ ที่ระบุภาษาของอีเมลของคุณ หากยังไม่มีอยู่ในรหัสของคุณ ให้เพิ่ม lang=“xx” — แทนที่ xx ด้วยรหัสภาษาที่เหมาะสมสำหรับอีเมลของคุณ รายการของรหัสภาษาทั้งหมดที่เป็นไปได้และ A-ท้องถิ่นซึ่งช่วยให้คุณบัญชีสำหรับสำเนียงแตกต่างกันเช่นความแตกต่างระหว่างอังกฤษและอเมริกันภาษาอังกฤษเป็นภาษาที่สามารถพบได้ที่นี่

มีบางกรณีพิเศษที่ต้องพิจารณา:

หากคุณกำลังใช้ XML ในแท็ก <HTML> คุณจะต้องเพิ่ม xml:lang=“xx” ด้วย
หากคุณรวมโปรแกรมแก้ไข Outlook 120dpi ไว้ในโค้ดอีเมล คุณจะต้องใช้โซลูชันนี้ เพื่อระบุภาษา โค้ดของเรามีลักษณะดังนี้:
```
 <html xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" lang="en" xml_lang="en">
```

เคล็ดลับสำหรับมือโปร: เป็นไปได้ที่จะเติมรหัสภาษาแบบไดนามิกหากคุณตั้งค่าการแปลเป็นภาษาท้องถิ่นไว้ภายใน ESP ของคุณ

2. ใส่แท็ก ALT สำหรับรูปภาพของคุณเสมอ

สิ่งสำคัญคือต้องจำไว้ว่ารูปภาพในอีเมลของคุณอาจไม่ปรากฏแก่สมาชิกของคุณเสมอไป บางทีพวกเขาอาจปิดรูปภาพ หรือมีการเชื่อมต่อที่ไม่ดี หรือใช้โปรแกรมอ่านหน้าจอ และหากคุณใส่ข้อมูลสำคัญจำนวนมากในภาพของคุณ ข้อความนั้นจะหายไป นั่นคือที่มาของข้อความ ALT คุณสามารถตั้งค่าข้อความที่สมาชิกของคุณมองเห็นได้ (หรืออ่านโดยโปรแกรมอ่านหน้าจอของพวกเขา) เพื่อให้พวกเขายังคงได้รับข้อความเดียวกันกับคนที่ สามารถ เห็นภาพของคุณได้

ทุกที่ที่คุณมีแท็ก <IMG> ในโค้ดอีเมลของคุณ อย่าลืมตั้งค่าแท็ก ALT หากคุณใส่แท็ก ALT แล้ว ให้ตรวจสอบอีกครั้งเพื่อให้แน่ใจว่าข้อความตรงกับข้อความบนรูปภาพ หากคุณมีแท็ก ALT ที่ว่างเปล่า ตรวจสอบให้แน่ใจว่าไม่มีข้อความใดๆ บนรูปภาพที่จำเป็นต้องใส่เพื่อให้โปรแกรมอ่านหน้าจอดูได้ หากไม่มีแท็ก ALT ในภาพของคุณและข้อความในภาพตัวเองหรือข้อความใด ๆ ที่จำเป็นสำหรับความหมายของไม่มีอีเมลให้แน่ใจว่าจะเพิ่มแท็ก ALT ว่างเปล่า: alt =“” หากคุณไม่ใส่ข้อมูลนี้ โปรแกรมอ่านหน้าจอจะอ่าน URL ของรูปภาพ และไม่มีใครต้องการให้ URL ยาวอ่านออก

เมื่อคุณตั้งค่าทั้งหมดของคุณ ALT แท็กว่างเปล่าหรือไม่สำหรับภาพในอีเมลของคุณเพิ่มจัดแต่งทรงผมตัวอักษรลงใน <img> แท็กสำหรับข้อความ ALT สไตล์ การจัดสไตล์นี้ช่วยให้คุณใช้ข้อความ ALT ได้ตามใจชอบ และให้คุณเปลี่ยนรูปลักษณ์ของแบบอักษร สี ขนาด สไตล์ และน้ำหนักได้

3. รวมแอตทริบิวต์ role=”presentation” ในองค์ประกอบ <TABLE> ทั้งหมด

นักการตลาดอีเมลส่วนใหญ่พึ่งพาตารางในการจัดโครงสร้างเลย์เอาต์อีเมล แต่สิ่งเหล่านี้อาจทำให้เกิดปัญหาร้ายแรงสำหรับโปรแกรมอ่านหน้าจอ หากโปรแกรมอ่านหน้าจอระบุตารางในรหัสอีเมลของคุณ โปรแกรมจะอ่านออกเสียงเป็นตารางเดียว มันอาจบอกคุณได้อย่างแท้จริงว่ามีแถวและคอลัมน์กี่แถว โดยบอกคุณถึงตำแหน่งและเนื้อหาของแต่ละคอลัมน์ ทำให้ไม่สามารถเข้าใจข้อความของคุณ

จึงต้องบอกโปรแกรมอ่านหน้าจอว่าคุณกำลังใช้ตารางเพื่อการจัดวางเท่านั้น คุณสามารถทำได้โดยเพิ่ม role=“presentation” ให้กับทุกตารางในอีเมลของคุณ บทบาทนี้บอกให้โปรแกรมอ่านหน้าจอลบความหมายเชิงความหมายออกจากตาราง ดังนั้นแทนที่จะอ่านหมายเลขแถวและคอลัมน์ บทบาทนี้จะเน้นที่เนื้อหาแทน

มาดูส่วนหัวของอีเมลง่ายๆ นี้จากอีเมลของเรากัน:

ก่อนที่เราจะปรับให้เหมาะสมสำหรับการเข้าถึง โค้ดของเรามีลักษณะดังนี้:

 <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" /> </a> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> </td></tr></table> </td></tr></table>

คุณสังเกตเห็นว่าไม่มีแอตทริบิวต์ ALT และตารางไม่ได้ตั้งค่าเป็น role=”นำเสนอ” หรือไม่

การกำกับดูแลเล็กน้อยเหล่านั้นมีผลกระทบอย่างมากต่อการเข้าถึง นี่คือวิธีที่โปรแกรมอ่านหน้าจอตีความโค้ดด้านบน:

โปรแกรมอ่านหน้าจอ: ส่วนหัวของอีเมลที่ไม่สามารถเข้าถึงได้

และนี่คือรหัสเดียวกันที่ได้รับการปรับโครงสร้างใหม่โดยการเพิ่ม แอตทริบิวต์ ALT=”” และ บทบาท=”การนำเสนอ” ให้กับ แท็ก <TABLE> เพื่อให้อ่านหน้าจอได้ง่าย:

 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table role="presentation" class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" alt="Litmus" /> </a> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> </td></tr></table> </td></tr></table>

โปรแกรมอ่านหน้าจอ: ส่วนหัวของอีเมลที่สามารถเข้าถึงได้

อย่างที่คุณได้ยิน มีความแตกต่างค่อนข้างมาก!

4. ใช้องค์ประกอบเชิงความหมายเพื่อจัดโครงสร้างเนื้อหาของคุณ

องค์ประกอบเชิงความหมายทำให้ง่ายต่อการเน้นลำดับชั้นของเนื้อหา โดยแสดงให้สมาชิก (และโปรแกรมอ่านหน้าจอ) เห็นว่าพาดหัวคืออะไร และสำเนาย่อหน้าคืออะไร การรวมองค์ประกอบทางความหมายช่วยให้สมาชิกของคุณที่ใช้โปรแกรมอ่านหน้าจอมีตัวเลือกในการ "สแกน" ผ่านอีเมลได้ง่ายขึ้น

เมื่อตรวจสอบสำเนาของคุณอีกครั้ง ตรวจสอบให้แน่ใจว่าสำเนาที่พาดหัวข่าวควรอยู่ภายใน แท็ก <H> : <H1> , <H2> , <H3> เป็นต้น ในทำนองเดียวกัน ตรวจสอบให้แน่ใจว่าสำเนาเนื้อหาอยู่ภายใน แท็ก <P> เมื่ออ่านอีเมลของคุณ โปรแกรมอ่านหน้าจอจะเน้นที่ส่วนหัวที่เฉพาะเจาะจง และการตั้งค่า แท็ก <H> และ <P> เหล่านี้ จะทำให้อีเมลของคุณไปยังส่วนต่างๆ ได้ง่ายขึ้น

5. จัดสำเนาของคุณให้ชิดซ้าย ถ้าเป็นไปได้

เมื่อพูดถึงข้อความในเนื้อหา การจัดตำแหน่งกึ่งกลางอาจเป็นเรื่องที่ดึงดูดใจ อย่างไรก็ตาม เมื่อพูดถึงการช่วยสำหรับการเข้าถึง นี่ไม่ใช่สิ่งใหญ่ !

เมื่อคุณจัดข้อความให้อยู่กึ่งกลาง ขอบเริ่มต้นจะเปลี่ยนไปทุกบรรทัด ซึ่งบังคับให้สมาชิกของคุณทำงานหนักขึ้นเพื่อค้นหาจุดเริ่มต้นของแต่ละบรรทัด และนั่นเป็นความท้าทายสำหรับผู้ที่มีความบกพร่องในการอ่านและผู้ที่มีความบกพร่องในการอ่านอื่นๆ หากคุณมีสำเนาที่ยาวกว่าสองบรรทัด ให้จัดแนวสำเนานั้นทางซ้าย นี่เป็นสิ่งสำคัญอย่างยิ่งสำหรับมือถือ เนื่องจากความกว้างที่แคบมักจะสร้างบรรทัดข้อความมากกว่าที่คุณคิด คุณอาจต้องจัดข้อความชิดซ้ายแบบตอบสนองบนมือถือ

6. ตรวจสอบความคมชัดของสำเนาของคุณ

ตรวจสอบอัตราส่วนคอนทราสต์ของสีข้อความกับสีพื้นหลังของอีเมล คุณอาจมีผู้สมัครสมาชิกที่มีการขาดสี และถ้าสีของคุณไม่ให้ความคมชัดเพียงพอสำหรับพวกเขา พวกเขาอาจไม่สามารถอ่านอีเมลของคุณ คุณสามารถตรวจสอบอัตราส่วนคอนทราสต์ได้สองวิธี:

หากคุณสามารถโฮสต์ HTML และสร้าง URL เพื่อใช้ นี่เป็นวิธีตรวจสอบสีที่ฉันชอบ: http://www.checkmycolours.com/
หากคุณต้องการป้อนรหัสสีด้วยตนเอง โปรดดูที่ https://contrast-ratio.com/

7. เพิ่มเอฟเฟกต์โฮเวอร์สำหรับ CTA ลิงก์และรูปภาพ

ที่ Litmus เราใช้เอ ฟเฟกต์โฮเวอร์ บน CTA ลิงก์ และรูปภาพเพื่อระบุความสามารถในการคลิก เอฟเฟกต์โฮเวอร์เป็นองค์ประกอบแบบโต้ตอบง่ายๆ ที่สามารถทำให้อีเมลของคุณมีส่วนร่วมมากขึ้นและปรับปรุงประสบการณ์ของสมาชิก แม้ว่าเอฟเฟกต์โฮเวอร์จะรองรับใน AOL, Apple Mail, Gmail และ Yahoo! เมล เป็นเอฟเฟกต์ยอดนิยมและคุ้มค่าที่จะนำไปใช้ในโค้ดอีเมลของคุณ คุณสามารถทำให้รูปภาพเฟด เปลี่ยนสีของปุ่ม CTA เพิ่มแท็บป๊อปอัป และอื่นๆ
เอฟเฟกต์การวางเมาส์เหนือสามารถช่วยทำให้อีเมลของคุณสามารถเข้าถึงได้มากขึ้น เช่น ในตัวอย่างนี้ ซึ่งปุ่มจะเปลี่ยนสีเมื่อวางเมาส์ไว้

ดูอีเมลฉบับเต็มใน Litmus Builder →

ต้องการเคล็ดลับอีเมลเพิ่มเติมหรือไม่

สุดยอดคู่มือการเข้าถึงอีเมล

คู่มือนี้มีข้อมูลเชิงลึกและคำแนะนำทีละขั้นตอนที่คุณต้องการในการเขียน ออกแบบ และเขียนโค้ดอีเมลที่ทุกคนสามารถเพลิดเพลินได้ โดยไม่คำนึงถึงความสามารถของพวกเขา

ดาวน์โหลดอีบุ๊ก →

รับเคล็ดลับ สถิติ และทรัพยากรด้านการตลาดผ่านอีเมลและการออกแบบที่ดีที่สุดตรงไปยังกล่องจดหมายของคุณ และอยู่แถวหน้าของนวัตกรรมอีเมลเมื่อคุณสมัครใช้งาน Litmus News

อยู่ในความรู้ →