Marketing & Digital marketing

เคล็ดลับในการปรับปรุงเนื้อหาเว็บไซต์สำหรับโปรแกรมอ่านหน้าจอ

บล็อกของคุณใช้งานได้จริงหรือไม่? ฉันกำลังทำงานร่วมกับทีม CMI เพื่อปรับปรุงบล็อกนี้ เมื่อเร็ว ๆ นี้ Melissa Eggleston ได้ชี้ให้เห็นถึงปัญหาบางประการที่ทำให้บล็อกอ่านยากสำหรับผู้ที่มีความบกพร่องทางสายตา แม้ว่าการแก้ไขจะอยู่ในเรดาร์ของฉัน แต่บันทึกของเธอได้ผลักดันให้พวกเขาขึ้นไปอยู่ในอันดับต้น ๆ ของรายการสิ่งที่ต้องทำของฉัน ฉันเริ่มศึกษาแนวทางการเข้าถึงเนื้อหาเว็บ เอกสาร WCAG อธิบายวิธีทำให้เนื้อหาเว็บสามารถเข้าถึงได้มากขึ้นสำหรับผู้ทุพพลภาพ หัวข้อแรกที่เรากำลังดำเนินการคือองค์ประกอบที่สำคัญสำหรับโปรแกรมอ่านหน้าจอ – ซอฟต์แวร์แปลงข้อความเป็นคำพูดที่ให้เสียงกับข้อความ รูปภาพ ปุ่ม ฯลฯ เนื่องจากการใช้เทคโนโลยีเสียงที่เพิ่มขึ้น – Siri ของ Apple, Alexa ของ Amazon การค้นหาด้วยเสียงของ Google เป็นต้น – การปรับเนื้อหาของคุณสำหรับโปรแกรมอ่านหน้าจอเป็นขั้นตอนที่ชาญฉลาด ช่วยผู้ที่มีความบกพร่องทางสายตาและทุกคนในกลุ่มผู้ชมของคุณที่ใช้เทคโนโลยีเสียง (หากต้องการทดสอบเนื้อหาของคุณด้วยเครื่องมืออ่านหน้าจอ ให้ลองใช้ TalkBack สำหรับ Android และ VoiceOver สำหรับ iOS) ทำให้อ่านง่าย เทคนิคที่ปรับปรุงความสามารถในการอ่านสำหรับผู้ชมของคุณก็ใช้ได้ดีกับโปรแกรมอ่านหน้าจอเช่นกัน: ใช้ประโยคและหัวข้อย่อยที่สั้นลง Ann Smarty แนะนำให้ใช้ TextOptimizer เพื่อตรวจสอบเนื้อหาของคุณและแนะนำการปรับปรุงในด้านความสามารถในการอ่าน ซึ่งรวมถึงการเลือกคำ ประโยคและความยาวของย่อหน้า ความหลากหลาย – แต่ความชัดเจน – คำศัพท์ .@textoptimizer เป็นเครื่องมือที่มีประโยชน์เพื่อช่วยตรวจสอบความสามารถในการอ่านเนื้อหา & แนะนำการปรับปรุง @SEOSmarty ผ่าน @CMIContent @Brandlovellc กล่าว #tools คลิกเพื่อทวีต HANDPICKED เนื้อหาที่เกี่ยวข้อง: ความสามารถในการอ่านเนื้อหา: เนื้อหาที่ประสบความสำเร็จในไพรเมอร์นั้นใช้งานง่ายอย่างน่าขัน หลีกเลี่ยงตัวย่อและตัวสะกดผิด การพิสูจน์อักษรเป็นสิ่งสำคัญไม่ว่าใครจะ – หรืออะไร – จะอ่านเนื้อหาของคุณ แต่การสะกดและไวยากรณ์ที่ถูกต้องมีความสำคัญอย่างยิ่งสำหรับโปรแกรมอ่านหน้าจอ การสะกดผิดอาจทำให้โปรแกรมอ่านหน้าจอออกเสียงคำผิดได้ คุณควรทำตามขั้นตอนเพื่อหลีกเลี่ยงโปรแกรมอ่านหน้าจอที่ออกเสียงตัวย่อเป็นคำ – คิดว่า “mlah” สำหรับ MLA ซึ่งเป็นคำย่อของ Modern Language Association ในบรรดาตัวเลือกที่ดีกว่า: กำจัดตัวย่อ ใช้จุดระหว่างตัวอักษร (MLA) หรือสะกดคำที่กล่าวถึงในครั้งแรก ตามด้วยตัวย่อ (สมาคมภาษาสมัยใหม่) ). เนื้อหาที่เกี่ยวข้องด้วยมือ: การพิสูจน์อักษรและการแก้ไข: วิธีทำให้เนื้อหาของคุณดูน่ากลัวน้อยลง ใช้หัวเรื่องแทนตัวหนา ใช้หัวเรื่องที่เหมาะสมเพื่อระบุส่วนหรือหมวดหมู่ใหม่แทนที่จะใช้แบบอักษรตัวหนา การใช้ส่วนหัว H2 และ H3 อย่างต่อเนื่องช่วยให้เทคโนโลยีอำนวยความสะดวกและผู้อ่านทุกคนเข้าใจถึงการจัดระเบียบและโครงสร้างของเพจ การใช้ส่วนหัว H2 และ H3 อย่างต่อเนื่องช่วยให้เทคโนโลยีอำนวยความสะดวกเข้าใจโครงสร้างของเพจ @Brandlovellc ผ่าน @CMIContent กล่าว #Accessibility คลิกเพื่อทวีต “การรักษาลำดับชั้นที่เหมาะสมยังช่วยสื่อสารว่าหัวข้อย่อยเหล่านั้นเกี่ยวข้องกันอย่างไร ที่กล่าวว่าอย่าเริ่มบทความของคุณด้วยหัวข้อย่อย H3 ตามด้วยหัวข้อย่อย H2” Ann Smarty เขียน (หากต้องการเรียนรู้เพิ่มเติม โปรดดูบทความของเธอ วิธีจัดโครงสร้างเนื้อหาของคุณเพื่อให้สามารถเข้าถึงได้) เนื้อหาที่เกี่ยวข้องด้วยมือ: รายการตรวจสอบที่ต้องมีเพื่อสร้างเนื้อหาที่มีคุณค่า รออิโมจิ หากคุณใช้อิโมจิในสำเนา ให้ใส่ไว้ที่ท้าย ประโยค. การวางไว้ตรงกลางจะทำให้การตีความคำพูดยุ่งเหยิงและทำให้เนื้อหาของคุณอ่านง่ายขึ้น ดังที่ Alexa Heinrich แสดงให้เห็นในตัวอย่างนี้ ฉันเหนื่อยแล้ว ได้โปรดหยุดทำเรื่องแบบนี้เสียที จนกว่าจะมีวิธีที่เข้าถึงได้ในการสร้างงานศิลปะ ASCII และภาพประกอบอิโมจิ คุณกำลังสร้างความปวดหัวให้กับผู้ใช้โปรแกรมอ่านหน้าจอ โปรดใช้ความฉลาดในการใช้อีโมจิของคุณ CC: @Emojipedia pic.twitter.com/WgiSX1U5pZ – Alexa Heinrich (@HashtagHeyAlexa) ตุลาคม , 2020 เคล็ดลับ: ตรวจสอบ Emojipedia หรือ Emoji Dictionary เพื่อดูว่าโปรแกรมอ่านหน้าจอตีความอีโมจิในเนื้อหาของคุณอย่างไร ทำกรณีสำหรับแฮชแท็ก PascalCase และ camelCase เป็นภาษารักสำหรับโปรแกรมอ่านหน้าจอ ช่วยให้อ่านแฮชแท็กได้ง่ายขึ้น ด้วย PascalCase อักษรตัวแรกของทุกคำเป็นตัวพิมพ์ใหญ่ สำหรับ camelCase ตัวอักษรตัวแรกของคำแรกจะเป็นตัวพิมพ์เล็ก ในขณะที่ตัวอักษรตัวแรกของคำที่ตามมาทุกคำเป็นตัวพิมพ์ใหญ่ แฮชแท็กในภาพหน้าจอด้านล่างเป็นตัวอย่างของ PascalCase: ชื่อผู้ใช้ Twitter และแฮชแท็กในภาพหน้าจอด้านล่างใช้ camelCase: อย่า 'คลิกที่นี่' ข้อความที่เชื่อมโยงต้องสมเหตุสมผลโดยไม่ขึ้นกับประโยคโดยรอบ แทนที่จะพูดว่า “คลิกที่นี่” ให้ใช้ข้อความอธิบาย เช่น “ดูโพสต์นี้ในหัวข้อ A” ผู้เยี่ยมชมเว็บไซต์จะรู้ว่าพวกเขาจะดูอะไรหากคลิกลิงก์ เคล็ดลับ: ลิงก์อธิบายช่วยให้เครื่องมือค้นหาค้นหาเนื้อหาของคุณได้ง่ายขึ้น ละเว้นหน้าต่างใหม่ เมื่อคุณใส่ลิงก์ในข้อความของคุณ ให้อนุญาตให้ลิงก์นั้นเปิดในหน้าต่างที่มีอยู่เพื่อลดความสับสนและหลีกเลี่ยงการรีเซ็ตปุ่มย้อนกลับ หากคุณมีเหตุผลเหนือกว่าที่ต้องการให้ลิงก์เปิดในหน้าต่างใหม่ ให้แสดงคำเตือน ผู้เข้าชมสามารถตัดสินใจได้ว่าต้องการออกจากหน้าต่างปัจจุบันหรือไม่ และหากเปิดไว้ ก็สามารถหาทางกลับไปยังหน้าต่างเดิมได้ คิดใหม่ข้อความที่ฝังอยู่ในรูปภาพ โปรแกรมอ่านหน้าจอไม่สามารถอ่านข้อความที่พิมพ์บนรูปภาพได้ ฝังเฉพาะข้อความสำคัญในรูปภาพหากคุณได้สร้างข้อความแสดงแทนหรือคำอธิบายภาพสำหรับคำอธิบายนั้น ทำให้อินโฟกราฟิกและแผนภูมิทำงานได้ หากคุณสร้างอินโฟกราฟิกหรือแผนภูมิ ให้ใส่คำอธิบายข้อความโดยละเอียดของข้อมูลหรือข้อมูลที่ให้ไว้ในรูปภาพ ติดป้ายกำกับข้อมูลของคุณโดยตรง แทนที่จะใช้คำอธิบายที่มีรหัสสีเท่านั้น เพื่อลดภาระการรับรู้ของผู้ใช้ เทคนิคดังกล่าวยังช่วยลดความต้องการของผู้อ่านที่เป็นมนุษย์ในการสแกนไปมาเพื่อให้ตรงกับคำอธิบายประกอบกับข้อมูล แผนภูมิด้านล่างแสดงป้ายกำกับถัดจากเส้นสำหรับแต่ละภูมิภาค (สหรัฐอเมริกา ยุโรป สหราชอาณาจักร และเอเชียแปซิฟิก) แทนที่จะใช้คำอธิบายที่มีรหัสสี แหล่งที่มาของรูปภาพ เข้าประเด็นในข้อความแสดงแทน สื่อความหมาย ไม่ใช่เชิงกวี ด้วยข้อความแสดงแทนของคุณ อย่าใส่คำหลักที่ไม่เป็นประโยชน์ ให้อธิบายภาพเป็นประโยคหรือสองประโยคแทน ใน CMI Twitter Chat ล่าสุด Alexa Heinrich ทวีตว่า “โปรแกรมอ่านหน้าจอส่วนใหญ่ตัดคำอธิบายข้อความแสดงแทนออกหลังจาก 96 หรือ 125 อักขระ ดังนั้น หลีกเลี่ยงการโพสต์ภาพหรือกราฟิกที่มีสำเนามากเกินไป หากคุณไม่สามารถเขียนคำอธิบายภาพที่มีประสิทธิภาพสำหรับพวกเขาได้” A5: โปรแกรมอ่านหน้าจอส่วนใหญ่ตัดคำอธิบายข้อความแสดงแทนหลังจากอักขระ 96 หรือ 125 ดังนั้น หลีกเลี่ยงการโพสต์ภาพหรือ กราฟิกที่มีสำเนามากเกินไป หากคุณไม่สามารถเขียนคำอธิบายภาพที่มีประสิทธิภาพสำหรับพวกเขาได้ #CMWorld — Alexa Heinrich (@HashtagHeyAlexa) กันยายน 11, 2020 Twitter, Facebook, Instagram และ LinkedIn อนุญาตให้เพิ่มข้อความแสดงแทนที่กำหนดเองลงในรูปภาพได้ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนคำอธิบายข้อความแสดงแทน โปรดดูบทความที่เป็นประโยชน์ของ Alexa เรื่อง The Art of Alt Text อธิบายรูปภาพที่ใช้งานได้ เว็บไซต์ใช้รูปภาพเพื่อการใช้งานและภาพประกอบ รูปภาพที่ใช้เป็นลิงก์ (รวมถึงปุ่ม) ควรมีข้อความแสดงแทนเพื่ออธิบายฟังก์ชันการทำงาน ตัวอย่างเช่น ข้อความแสดงแทนสำหรับวงรีสีน้ำเงินที่มีคำว่า “ส่ง” อาจเป็น “ปุ่มส่งแบบฟอร์ม” กรอกรายละเอียดแบบฟอร์ม ใช้สัญลักษณ์ เช่น เครื่องหมายดอกจัน เพื่อระบุช่องที่ต้องกรอกในแบบฟอร์ม การแสดงเครื่องหมายดอกจันที่จุดเริ่มต้นด้วยสีที่ต่างกันช่วยให้ระบุฟิลด์ที่ต้องการได้ง่ายขึ้นเล็กน้อย ในแบบฟอร์มที่คุณขอให้ผู้อ่านกรอก ให้เพิ่ม “จำเป็น” ลงในโค้ดเพื่อให้โปรแกรมอ่านหน้าจอสามารถพูดว่า “จำเป็น” ลบฟิลด์ที่ไม่จำเป็นหรืออย่างน้อยก็ติดป้ายกำกับว่า “ไม่บังคับ” บทความนี้มีคำแนะนำโดยละเอียดเกี่ยวกับวิธีสร้างแบบฟอร์มที่ตรงตาม WCAG 2.0 มาตรฐาน: การระบุฟิลด์ที่จำเป็นด้วยคุณสมบัติที่ต้องการ Aria ส่วนโบนัส: Think color Color อาจไม่ส่งผลต่อวิธีที่โปรแกรมอ่านหน้าจอตีความสำเนาของคุณ แต่สีอาจส่งผลต่อความสามารถในการอ่านของผู้ที่มีความบกพร่องทางการมองเห็น คุณไม่จำเป็นต้องพิจารณาจานสีของแบรนด์ของคุณใหม่ทั้งหมด แต่คุณควรคิดใหม่ว่ามันรวมเข้ากับหน้าที่การใช้งานบนไซต์ของคุณอย่างไร ตัวอย่างเช่น ผู้เข้าชมที่ตาบอดสีอาจไม่รับรู้สัญญาณสี CMI ใช้สีส้มเพื่อระบุไฮเปอร์ลิงก์ภายในข้อความ Melissa ชี้ให้เห็นว่าสีนี้ไม่ตรงตามมาตรฐานการช่วยสำหรับการเข้าถึง เป้าหมายคือการทำให้ลิงก์โดดเด่นอย่างชัดเจนจากเนื้อหา สีน้ำเงินใช้งานได้ดีกับสำเนาสีเข้ม และลิงก์ที่ขีดเส้นใต้ทำให้มองเห็นได้ง่ายยิ่งขึ้น (เรากำลังดำเนินการปรับปรุงเหล่านี้ในไซต์ของเรา) หากต้องการเลือกจานสีที่ใช้งานได้จริง โปรดอ่านบทความของ David Nichols, Coloring for Color blindness หรือบทความนี้ใน Nature ผู้อ่านบางคนมีปัญหาในการอ่านข้อความเมื่อมีความคมชัดไม่เพียงพอระหว่างพื้นหน้าและพื้นหลัง คุณสามารถทดสอบคอนทราสต์ของชุดสีของคุณได้ด้วยตัวตรวจสอบคอนทราสต์ของ WebAIM เครื่องมือที่มีประโยชน์อีกอย่างหนึ่งในการตรวจสอบการเข้าถึงความเปรียบต่างของสีคือ a11y เครื่องมือตรวจสอบการเข้าถึงความเปรียบต่างของสีนี้แสดงปัญหาความคมชัดของสีของหน้าเว็บหรือคู่สีที่เลือก คุณควรใส่ใจกับอัตราส่วนคอนทราสต์สำหรับข้อความและรูปภาพของข้อความด้วย ควรเป็น 4.5 ต่อ 1 ยกเว้นข้อความขนาดใหญ่ (อย่างน้อย 3 ต่อ 1) ข้อความบังเอิญที่เป็นการตกแต่งหรือส่วนหนึ่งของรูปภาพ (ไม่มีข้อกำหนดด้านคอนทราสต์) และข้อความที่เป็นส่วนหนึ่งของโลโก้หรือชื่อแบรนด์ (ไม่มีคอนทราสต์) ความต้องการ). คุณต้องการให้ผู้คนจำนวนมากอ่านโลโก้หรือแบรนด์ของคุณอ่านได้ทันทีหรือไม่? ตรวจสอบให้แน่ใจว่าแบบอักษรของคุณทำงานร่วมกันได้ดีโดยใช้เครื่องมือ เช่น FontPair ซึ่งระบุแบบอักษร Google ยอดนิยมที่เข้าคู่กันได้ดี เราต้องทำให้ดีกว่านี้ การรวมความสามารถในการเข้าถึงในกลยุทธ์การตลาดเนื้อหาของคุณไม่ใช่แค่การตัดสินใจทางกฎหมายที่ชาญฉลาดเท่านั้น แต่ยังเปิดโอกาสให้ทุกคนมีส่วนร่วมกับแบรนด์ของคุณ เราหมายถึง CMI และอุตสาหกรรมการตลาดเนื้อหา ต้องทำมากกว่านี้เพื่อให้แน่ใจว่าทุกคนสามารถเข้าถึงเนื้อหาของเราได้ เราเริ่มต้นโดยเน้นที่โปรแกรมอ่านหน้าจอและการออกแบบสำหรับผู้ที่มีความบกพร่องทางสายตา แต่เราไม่ได้หยุดเพียงแค่นั้น ฉันจะให้ความรู้กับตัวเองต่อไปและทำงานเพื่อบล็อก CMI ที่ครอบคลุมมากขึ้น ฉันพลาดอะไร? โปรดแชร์สิ่งที่คุณทำเพื่อให้แน่ใจว่าเนื้อหาของคุณครอบคลุมทั้งหมด เนื้อหาที่เกี่ยวข้องด้วยมือ: สร้างและให้บริการเนื้อหาที่เข้าถึงได้สำหรับผู้ชมของคุณ วิธีการทำการตลาดเนื้อหาที่หลากหลายและครอบคลุมที่มีความสำคัญ วิธีการทำเนื้อหาแบบรวมที่ช่วยผู้ชมและธุรกิจของคุณ ฉันขอขอบคุณ Melissa Eggleston ที่สละเวลาทบทวนบทความของฉันและ ให้ข้อเสนอแนะที่มีคุณค่า หมายเหตุ: เครื่องมือทั้งหมดที่กล่าวถึงมาจากผู้เขียน โปรดแนะนำเครื่องมือเพิ่มเติมในความคิดเห็น (จากบริษัทของคุณหรือที่คุณเคยใช้) ตรวจสอบให้แน่ใจว่าคุณกำลังเข้าถึงคำแนะนำ เคล็ดลับ และแนวโน้มด้านการตลาดเนื้อหาที่ดีที่สุดเพื่อช่วยเหลือผู้ชมของคุณต่อไป สมัครรับจดหมายข่าว CMI ในวันทำงานฟรี ภาพหน้าปกโดย Joseph Kalinowski/Content Marketing Institute

Back to top button