แนวทางการเข้าถึงอีเมล: มาตรฐานและแนวทางปฏิบัติที่ดีที่สุด

เผยแพร่แล้ว: 2022-01-19

มองไปรอบๆ ฟังว่าเกิดอะไรขึ้น คุณเห็นทุกอย่างชัดเจนหรือไม่ในโหมดเต็มสี? และคุณได้ยินเสียงและเสียงดีหรือไม่? ยินดีด้วย คุณเป็นคนที่โชคดีอย่างแน่นอน ยิ่งไปกว่านั้น คุณเป็นคนที่มีความสุขจริงๆ คุณมีวิสัยทัศน์และการได้ยิน!

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

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

และ 5% ของประชากรโลกมีความบกพร่องทางการได้ยิน ในแง่อื่น ๆ กว่า 360 ล้าน

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

ตอนนี้ ชงชาหรือกาแฟให้ตัวเอง แล้วมาดูรายละเอียดกัน

การเข้าถึงอีเมลย่อมาจากอะไร

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

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

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

โดยสรุป หมายถึงการปฏิบัติตามมาตรฐานที่ทำให้สามารถอ่านอีเมลได้สำหรับผู้ที่มีความต้องการพิเศษทุกประเภท โชคดีที่เครื่องมือสร้างเทมเพลตอีเมล HTML ที่ทันสมัยและซอฟต์แวร์การตลาดอื่นๆ ได้มอบเครื่องมือขั้นสูงเพื่อนำมาตรฐานเหล่านี้ไปปฏิบัติได้อย่างง่ายดายและไม่มีทักษะพิเศษใดๆ

ฉันจะแบ่งปันมาตรฐานเหล่านี้ด้านล่าง รวมทั้งแนวทางปฏิบัติบางอย่างที่จะเป็นประโยชน์ในการสร้างอีเมลที่สามารถเข้าถึงได้

มาตรฐานการช่วยสำหรับการเข้าถึง

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

1. ตาบอดสี

มีรายการประเภทตาบอดสี นี่คือ:

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

Stripo-Email-Accessibility-Red-Original-Image

และนี่คือวิธีที่ผู้รับที่เป็นโรคสายตายาวมองเห็นได้:

Stripo-Email-Accessibility-Red-Test

Deuteranopia เป็นการรับรู้ที่ลดลงของสีเขียว คนเหล่านี้มักจะสับสนระหว่างสีแดง/เขียว diapason สีเขียว/สีเหลืองสดใส และสีฟ้า/ม่วงอ่อน อีกครั้ง ให้ดูที่อีเมลเดิม: ต้นฉบับทางด้านซ้ายและเวอร์ชัน deuteranopia ทางด้านขวา

AcreliaNews

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

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

Green-Button
แคมเปญต้นฉบับจาก Wufoo
Green-Button-on-Red example
อีเมลเดียวกันผ่านสายตาของโมโนโครม

เราควรทำอย่างไร?

  • เลือกขนาดแบบอักษรสำหรับสำเนาอีเมลไม่ต่ำกว่า 14 พิกเซล อย่างไรก็ตาม ฉันแนะนำ 16px เพื่อให้ผู้รับมีการออกแบบอีเมลที่สามารถเข้าถึงได้
  • หลีกเลี่ยงวิธีแก้ปัญหาคอนทราสต์ตามสีที่ลูกค้าตาบอดสีอาจไม่สามารถแยกแยะได้ ตัวอย่างเช่น อย่าเขียนสำเนาของคุณด้วยข้อความสีเขียวหรือสีน้ำเงินบนพื้นหลังสีแดงหรือสีม่วง ดูข้อความด้านล่าง เป็นเรื่องปกติสำหรับผู้ที่มีการรับรู้สี diapason เต็มรูปแบบ ... แต่จะดีในกรณีของสายตายาวหรือสายตาเดียวหรือไม่? ฉันไม่คิดอย่างนั้น…
Accessibility-Green-Red

(ข้อความต้นฉบับ)

Red-Test-Dots

(นี่คือวิธีที่ลูกค้าที่เป็นโรคสายตายาวจะเห็น)

Monochromacy example

(วิธีโมโนโครมเห็นข้อความนี้)

พวกเขาควรจะเข้าใจได้อย่างไรว่าทีมโปรดของพวกเขาชนะหรือแพ้การแข่งขัน?

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

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

Bold-Links in email

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

สังเกตลิงก์ "ดูรายละเอียด" พร้อมลูกศร มันบอกว่าคุณสามารถดูรายละเอียดเพิ่มเติมได้โดยคลิกที่มัน

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

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

Types of color blindness graph

นอกจากนี้ยังมีเครื่องมือจำลองการตาบอดสีฟรีที่แสดงภาพของคุณในแบบที่ผู้รับตาบอดสีจะรับรู้

ดังที่เราเห็น การทดสอบสีไม่ซับซ้อนเกินไป - อย่ามองข้ามไป แสดงความห่วงใยต่อสมาชิกทุกคน ทำดี.

2. ตาบอดและความบกพร่องทางสายตาอย่างรุนแรง

บทต่อไปจะกล่าวถึงมาตรฐานการช่วยสำหรับการเข้าถึงสำหรับคนตาบอดและสายตาบางส่วน กฎเหล่านี้ล้วนเกี่ยวกับความผิดปกติทางสายตาเช่นกัน แต่หลักการและแนวทางแก้ไขที่นี่แตกต่างกันโดยสิ้นเชิง ในกรณีนี้จะไม่มีชุดสีหรือคอนทราสต์ผสมกัน แง่มุมของวิทยาศาสตร์การช่วยสำหรับการเข้าถึงนี้อิงจากการใช้ซอฟต์แวร์อ่านหน้าจอ

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

สิ่งที่ควรได้รับความสนใจเป็นพิเศษที่นี่?

หัวข้ออีเมล

โดยทั่วไป โปรแกรมอ่านหน้าจอจะเริ่มอ่านอีเมลจากหัวเรื่อง

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

ตั้งค่าภาษา

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

เพื่อหลีกเลี่ยงปัญหานี้ ให้ระบุภาษาที่เกี่ยวข้องในรหัสอีเมล (ถ้ามี)

ลำดับตรรกะ

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

เพื่อให้สามารถเข้าถึงได้โดยระบุแท็กส่วนหัวเช่น <h1> , <h2> , <p> ฯลฯ ในโค้ด HTML แท็กเหล่านี้จะเพิ่มลำดับความสำคัญเหนือข้อความปกติ ดังนั้นองค์ประกอบเหล่านี้จึงถูกเปล่งออกมาก่อน

Headline-in-Email

นอกจากนี้ ขนาดแบบอักษรไม่สำคัญเมื่อระบุแท็ก ในตัวอย่างข้างต้น ขนาดแบบอักษรของส่วนหัว 2 คือ 24px และแบบอักษรสำเนาปกติจะใหญ่กว่า — 27px แต่โปรแกรมอ่านหน้าจอจะเปล่งเสียงในหัวข้อ 2 ก่อน

ข้อความแสดงแทน

เทคโนโลยี AI มีการพัฒนาอย่างต่อเนื่องในปัจจุบัน แต่เครื่องมืออ่านหน้าจอยังไม่ฉลาดพอที่จะ "ดู" รูปภาพในอีเมลและอธิบายได้ บางทีในอนาคตอันใกล้นี้… ในปัจจุบัน โปรแกรมอรรถประโยชน์เหล่านี้สามารถอ่านได้เฉพาะข้อความแสดงแทนหรือข้อความแสดงแทนที่เราเพิ่มลงในรูปภาพเท่านั้น

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

ลิงค์ รายการ CTA ไอคอนโซเชียล

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

เพียงแค่ดูที่ลิงค์เหล่านี้:

Long vs short link example

ลิงค์แรก… เอ่อ… เอาจริงๆ นะ ฉันกลัวที่จะจินตนาการว่ามันจะฟังดูน่าขนลุกขนาดไหน ในขณะที่อันที่สองระบุเว็บไซต์ วันที่ตีพิมพ์ และชื่อโพสต์อย่างชัดเจน

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

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

นี่คือวิธีที่เราเห็นปุ่ม CTA ในอีเมล:

CTA Button

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

เกี่ยวกับไอคอนโซเชียลมีเดีย สมาชิกบางคนที่ "ฟัง" อีเมลในกล่องขาเข้าอาจไม่เข้าใจคำย่อที่เรานำไปใช้กับไอคอนเหล่านี้ ดังนั้นให้เขียนข้อความแสดงแทนคำอธิบายสำหรับรายการเหล่านี้

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

3. ดิสเล็กเซีย

ผู้ที่เป็นโรคดิสเล็กเซียมักจะสับสนลำดับตัวอักษรในข้อความ แม้ว่าจะมีระดับไอคิวปกติก็ตาม

Stripo-Email-Accessibility-Dyslectic-Readers-New-Screen

ต่อไปนี้คือแนวทางปฏิบัติในการเข้าถึงสำหรับผู้รับที่มีความบกพร่องทางการอ่านตามโพสต์ที่เผยแพร่โดย ที่ สมาคมดิสเล็กเซียแห่งอังกฤษ

  • หลีกเลี่ยงการขีดเส้นใต้ลิงก์ ดังที่ได้กล่าวมาแล้วข้างต้นเล็กน้อย ทำให้ลิงก์ของคุณเป็นตัวหนาแทนการขีดเส้นใต้
  • อย่าเริ่มประโยคใหม่ที่ท้ายบรรทัด ประโยคใหม่ควรขึ้นบรรทัดใหม่ตามลำดับ
  • ไม่มี CAPS LOCK หากคุณต้องการเน้น/เน้นแนวคิดบางอย่าง — ใช้แบบอักษรที่ใหญ่กว่าแทน
  • ลืมการจัดตำแหน่งกึ่งกลาง — ทางด้านซ้ายของหน้าจอเท่านั้น
  • พื้นหลังสีขาวอาจทำให้ผู้ที่เป็นโรค dyslexic เสียสมาธิ สีครีมจะอ่อนลงและไม่ทำให้เกิดปัญหา
  • จบประโยคทั้งหมดด้วยจุด (.) คุณควรใช้อัฒภาคเมื่อมีสัญลักษณ์แสดงหัวข้อย่อยในสำเนาอีเมล

4. หูหนวกและการได้ยินบางส่วน

สำหรับผู้ที่มีความบกพร่องทางการได้ยิน มีมาตรฐานเดียว วิดีโอทั้งหมดที่ฝังอยู่ในอีเมลของคุณควรมีคำบรรยายหรือคำอธิบายข้อความ

Adding Subtitles_Captions to Emails

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

เคล็ดลับการเข้าถึงอีเมลยอดนิยม

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

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

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

ฉันขอให้คุณทั้งหมดที่ดีที่สุด แผ่เมตตาเมตตาให้ทั่วถึง!