กลยุทธ์การตลาดดิจิทัล (Digital marketing)

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

บล็อกของคุณครอบคลุมการใช้งานหรือไม่

ฉันกำลังทำงานร่วมกับทีม CMI เพื่อปรับปรุงบล็อกนี้

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

ฉันเริ่มขุดผ่าน แนวทางการเข้าถึงเนื้อหาเว็บ . เอกสาร WCAG อธิบายวิธีทำให้เนื้อหาเว็บสามารถเข้าถึงได้มากขึ้นสำหรับผู้ทุพพลภาพ

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

ด้วยเทคโนโลยีเสียง ที่เพิ่มขึ้น – Siri ของ Apple, Alexa ของ Amazon, การค้นหาด้วยเสียงของ Google เป็นต้น – การปรับเนื้อหาของคุณสำหรับโปรแกรมอ่านหน้าจอเป็นขั้นตอนที่ชาญฉลาด ช่วยผู้ที่มีความบกพร่องทางสายตาและทุกคนในกลุ่มผู้ชมของคุณที่ใช้เทคโนโลยีเสียง

(หากต้องการทดสอบเนื้อหาของคุณด้วยเครื่องมืออ่านหน้าจอ ให้ลอง TalkBack สำหรับ Android และ

VoiceOver สำหรับ iOS.)

ทำให้อ่านง่าย

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

Ann Smarty แนะนำ โดยใช้ TextOptimizer เพื่อตรวจสอบเนื้อหาของคุณและแนะนำการปรับปรุงในด้านความสามารถในการอ่าน รวมถึงการเลือกใช้คำ ประโยคและความยาวของย่อหน้า ความหลากหลาย – แต่ความชัดเจน – คำศัพท์

.@textoptimizer เป็นเครื่องมือที่มีประโยชน์เพื่อช่วยตรวจสอบความสามารถในการอ่านเนื้อหา & แนะนำการปรับปรุง @SEOSmarty ผ่าน @CMIContent @Brandlovellc กล่าว #เครื่องมือ คลิกเพื่อทวีต

  • เนื้อหาที่เกี่ยวข้อง:

    ความสามารถในการอ่านเนื้อหา: A Primer

  • เนื้อหาที่ประสบความสำเร็จนั้นใช้งานง่ายอย่างน่าขัน

    หลีกเลี่ยงการใช้ตัวย่อและการสะกดผิด

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

    คุณควรทำตามขั้นตอนเพื่อหลีกเลี่ยงไม่ให้โปรแกรมอ่านหน้าจอออกเสียงตัวย่อเป็นคำ – ให้คิดว่า “mlah” สำหรับ MLA ซึ่งเป็นคำย่อของ Modern Language Association ในบรรดาตัวเลือกที่ดีกว่า: กำจัดตัวย่อ ใช้จุดระหว่างตัวอักษร (MLA) หรือสะกดคำที่กล่าวถึงครั้งแรก ตามด้วยตัวย่อ (สมาคมภาษาสมัยใหม่) ).

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

    ใช้หัวเรื่องที่เหมาะสมเพื่อระบุส่วนหรือหมวดหมู่ใหม่ แทนที่จะใช้แบบอักษรตัวหนา การใช้ส่วนหัว H2 และ H3 อย่างต่อเนื่องช่วยให้เทคโนโลยีอำนวยความสะดวกและผู้อ่านทุกคนเข้าใจถึงองค์กรและโครงสร้างของเพจ

    ใช้ H2 และ H3 อย่างต่อเนื่อง ส่วนหัวช่วยให้เทคโนโลยีอำนวยความสะดวกรู้สึกถึงโครงสร้างของเพจ @Brandlovellc ผ่าน @CMIContent กล่าว #การเข้าถึงได้ คลิกเพื่อทวีต

    “ การรักษาลำดับชั้นที่เหมาะสมยังช่วยสื่อสารว่าหัวข้อย่อยเหล่านั้นเกี่ยวข้องกันอย่างไร ที่กล่าวว่าอย่าเริ่มบทความของคุณด้วยหัวข้อย่อย H3 ตามด้วยหัวข้อย่อย H2” Ann Smarty เขียน (หากต้องการเรียนรู้เพิ่มเติม โปรดดูบทความของเธอ วิธีจัดโครงสร้างเนื้อหาของคุณให้สามารถเข้าถึงได้ )

  • เนื้อหาที่เกี่ยวข้อง:
  • รออีโมจิ

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

    เอาล่ะ ฉันเหนื่อย โปรดหยุดทำสิ่งนี้

    จนกว่าจะมีวิธีที่เข้าถึงได้ในการสร้างงานศิลปะ ASCII และภาพประกอบอีโมจิ คุณกำลังสร้างความปวดหัวให้กับผู้ใช้โปรแกรมอ่านหน้าจอ

    โปรดใช้อีโมจิของคุณอย่างชาญฉลาด CC:

    @Emojipedia

    pic.twitter.com /WgiSX1U5pZ

    — Alexa Heinrich (@HashtagHeyAlexa) ตุลาคม ,

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

    สร้างกรณีสำหรับแฮชแท็ก

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

    แฮชแท็กในภาพหน้าจอด้านล่างเป็นตัวอย่างของ PascalCase:

    Screenshot of a click to tweet using PascalCase for hashtags to make it easier for screen readers to understand.

    ชื่อผู้ใช้ Twitter และแฮชแท็กในภาพหน้าจอด้านล่างใช้ camelCase:

    Image showing an example of direct labeling using legend beside each series.

    อย่า 'คลิกที่นี่'

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

  • เคล็ดลับ:
  • ลิงก์คำอธิบายช่วยให้เครื่องมือค้นหาค้นหาเนื้อหาของคุณได้ง่ายขึ้น

    ละเว้นหน้าต่างใหม่

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

    คิดใหม่ข้อความที่ฝังอยู่ในรูปภาพ

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

    ทำให้อินโฟกราฟิกและแผนภูมิใช้งานได้

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

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

    Image showing an example of direct labeling using legend beside each series.

    แหล่งที่มาของรูปภาพ

    ไปที่จุดในข้อความแสดงแทน

    อธิบาย – ไม่ใช่บทกวี – ด้วยข้อความแสดงแทนของคุณ ไม่รวมที่ไม่ช่วยเหลือ คำหลัก. ให้อธิบายภาพเป็นประโยคหรือสองประโยคแทน ล่าสุด CMI Twitter Chat Alexa Heinrich ทวีตว่า “โปรแกรมอ่านหน้าจอส่วนใหญ่ตัดคำอธิบายข้อความแสดงแทนออกหลังจาก 26 หรือ 80 อักขระ ดังนั้นหลีกเลี่ยงการโพสต์ภาพ หรือกราฟิกที่มีสำเนามากเกินไปหากคุณไม่สามารถเขียนคำอธิบายภาพที่มีประสิทธิภาพสำหรับพวกเขาได้”

    A5: โปรแกรมอ่านหน้าจอส่วนใหญ่ตัดคำอธิบายข้อความแสดงแทนออกหลังจาก 55 หรือ 55 อักขระ นักแสดง ดังนั้น หลีกเลี่ยงการโพสต์ภาพหรือกราฟิกที่มีสำเนามากเกินไป หากคุณไม่สามารถเขียนคำอธิบายภาพที่มีประสิทธิภาพสำหรับพวกเขา #CMWorld

    — Alexa Heinrich (@HashtagHeyAlexa) กันยายน , 946

    ทวิตเตอร์, เฟสบุ๊ค, Instagram และ LinkedIn ทั้งหมดอนุญาตให้เพิ่มข้อความแสดงแทนที่กำหนดเองลงในรูปภาพ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนคำอธิบายข้อความแสดงแทน โปรดดูบทความที่เป็นประโยชน์ของ Alexa ศิลปะของข้อความแสดงแทน .

    อธิบายรูปภาพที่ใช้งานได้

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

    กรอกรายละเอียดแบบฟอร์ม

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

    ลบฟิลด์ที่ไม่จำเป็นหรืออย่างน้อยติดป้ายกำกับว่า “ไม่บังคับ” ”

    บทความนี้มีคำแนะนำโดยละเอียดเกี่ยวกับวิธีสร้างแบบฟอร์มที่ตรงตาม WCAG 2.0 มาตรฐาน: การระบุฟิลด์ที่จำเป็นด้วยคุณสมบัติ Aria-Required.

    ส่วนโบนัส: คิดสี

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

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

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

    หากต้องการเลือกจานสีที่ใช้งานได้ดีกว่า r อ่านบทความของ David Nichols การระบายสีสำหรับคนตาบอดสี หรือสิ่งนี้ บทความ in Nature.

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

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

    ตรวจสอบให้แน่ใจว่าแบบอักษรของคุณทำงานร่วมกันได้ดีโดยใช้เครื่องมือ เช่น FontPair ซึ่งระบุแบบอักษรยอดนิยมของ Google ที่จับคู่ได้ดี

    เรา จะต้องทำให้ดีกว่านี้

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

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

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

    เนื้อหาที่เกี่ยวข้อง:

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

  • 1308444179803103234 ฉันอยากจะขอบคุณ Melissa Eggleston สำหรับ takin g ใช้เวลาในการทบทวนบทความของฉันและให้ข้อเสนอแนะอันมีค่า

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

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

    ภาพหน้าปกโดย Joseph Kalinowski/สถาบันการตลาดเนื้อหา503708446705527

    503708446705527214124458607871117012

    Back to top button