การทดสอบเทคโนโลยีความช่วยเหลือพิเศษ

โมดูลนี้มุ่งเน้นที่การใช้เทคโนโลยีความช่วยเหลือพิเศษ (AT) สำหรับการทดสอบการช่วยเหลือพิเศษ ผู้พิการสามารถใช้ AT เพื่อเพิ่ม รักษา หรือปรับปรุงความสามารถในการทำงาน

ในโลกดิจิทัล AT สามารถทำสิ่งต่อไปนี้ได้

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

เราขอแนะนำให้คุณใช้ AT หลายประเภทในเวิร์กโฟลว์การทดสอบโดยรวม

ข้อมูลเบื้องต้นเกี่ยวกับการทดสอบโปรแกรมอ่านหน้าจอ

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

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

ความเข้ากันได้กับเบราว์เซอร์

มีโปรแกรมอ่านหน้าจอหลายตัวเลือกให้เลือก โปรแกรมอ่านหน้าจอที่ได้รับความนิยมมากที่สุด ได้แก่ JAWS, NVDA และ VoiceOver สำหรับคอมพิวเตอร์เดสก์ท็อป และ VoiceOver และ Talkback สำหรับอุปกรณ์เคลื่อนที่

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

โปรแกรมอ่านหน้าจอ ระบบปฏิบัติการ ความเข้ากันได้กับเบราว์เซอร์
การเข้าถึงงานด้วยเสียงพูด (JAWS) Windows Chrome, Firefox, Edge
Non-Visual Desktop Access (NVDA) Windows Chrome และ Firefox
ผู้บรรยาย Windows Edge
VoiceOver macOS Safari
Orca Linux Firefox
TalkBack Android Chrome และ Firefox
VoiceOver (สำหรับอุปกรณ์เคลื่อนที่) iOS Safari
ChromeVox ChromeOS Chrome

คำสั่งของโปรแกรมอ่านหน้าจอ

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

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

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

คำสั่งแป้นพิมพ์สำหรับโปรแกรมอ่านหน้าจอเดสก์ท็อป

องค์ประกอบ NVDA (Windows) VoiceOver (macOS)
แป้นคำสั่งทั่วไป แทรก Control+Option
หยุดการเล่นเสียง การควบคุม การควบคุม
อ่านรายการถัดไป/ก่อนหน้า หรือ Control+Option+ หรือ
เริ่มอ่าน แทรก Control+Option+A
รายการองค์ประกอบ/โรเตอร์ NVDA + F7 Control+Option+U
จุดสังเกต D Control+Option+U
ส่วนหัว Control+Option+Command+H
ลิงก์ K Control+Option+Command+L
ตัวควบคุมแบบฟอร์ม Control+Option+Command+J
ตาราง T Control+OptionCommand+T
ภายในตาราง Insert Alt + Control+Option+

แป้นคำสั่งสำหรับโปรแกรมอ่านหน้าจอบนอุปกรณ์เคลื่อนที่

องค์ประกอบ TalkBack (Android) VoiceOver (iOS)
สำรวจ ใช้ 1 นิ้วลากไปรอบๆ หน้าจอ ใช้ 1 นิ้วลากไปรอบๆ หน้าจอ
เลือกหรือเปิดใช้งาน แตะสองครั้ง แตะสองครั้ง
เลื่อนขึ้นหรือลง ใช้ 2 นิ้วปัดขึ้นหรือลง ใช้ 3 นิ้วปัดขึ้นหรือลง
เปลี่ยนหน้า ใช้ 2 นิ้วปัดไปทางซ้ายหรือขวา ใช้ 3 นิ้วปัดไปทางซ้ายหรือขวา
ถัดไป/ก่อนหน้า ใช้ 1 นิ้วปัดไปทางซ้ายหรือขวา ใช้ 1 นิ้วปัดไปทางซ้ายหรือขวา

การสาธิตการทดสอบโปรแกรมอ่านหน้าจอ

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

ขั้นตอนที่ 1

ไปที่ CodePen ที่อัปเดตแล้ว ซึ่งใช้การอัปเดตการช่วยเหลือพิเศษด้วยตนเองและแบบอัตโนมัติทั้งหมด

ดูในโหมดแก้ไขข้อบกพร่องเพื่อดำเนินการทดสอบถัดไป ขั้นตอนนี้มีความสำคัญ เนื่องจากจะนำ <iframe> ที่อยู่รอบหน้าเว็บสาธิตออก ซึ่งอาจรบกวนเครื่องมือทดสอบบางอย่าง ดูข้อมูลเพิ่มเติมเกี่ยวกับโหมดแก้ไขข้อบกพร่องของ CodePen

ขั้นตอนที่ 2

เปิดใช้งานโปรแกรมอ่านหน้าจอที่ต้องการ แล้วไปที่หน้าสาธิต คุณอาจลองเลื่อนดูทั้งหน้าจากบนลงล่างก่อนที่จะโฟกัสที่ปัญหาเฉพาะจุด

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

ปัญหาที่ 1: โครงสร้างเนื้อหา

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

หากพยายามไปยังส่วนต่างๆ ตามองค์ประกอบในเดโม คุณจะพบว่าไม่มีองค์ประกอบดังกล่าว

  • ตัวอย่างจุดสังเกต: <div class="main">...</div>
  • ตัวอย่างส่วนหัว: <p class="h1">Join the Club</p>

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

ฟังเสียงโปรแกรมอ่านหน้าจอไปยังส่วนต่างๆ ของปัญหานี้
มาแก้ปัญหากัน

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

ในการแก้ปัญหาเกี่ยวกับส่วนหัวและจุดสังเกต ก่อนอื่นคุณต้องระบุองค์ประกอบแต่ละรายการที่ควรมาร์กอัปและอัปเดต HTML ที่เกี่ยวข้อง อย่าลืมอัปเดต CSS ที่เกี่ยวข้องด้วย

  • ตัวอย่างจุดสังเกต: <main>...</main>
  • ตัวอย่างส่วนหัว: <h1>Join the Club</h1>

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

ตอนนี้เราแก้ไขโครงสร้างเนื้อหาแล้ว ให้ฟังเสียงโปรแกรมอ่านหน้าจอไปยังส่วนต่างๆ ของเดโมอีกครั้ง

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

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

<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
  Maple syrup urine disease (MSUD)
</a>
ฟังโปรแกรมอ่านหน้าจอไปยังส่วนต่างๆ ของปัญหานี้
มาแก้ปัญหากัน

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

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

<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
  aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
  Maple syrup urine disease (MSUD)
</a>
เมื่อแก้ไขบริบทของลิงก์แล้ว ลองฟังโปรแกรมอ่านหน้าจอเพื่อไปยังส่วนต่างๆ ของการสาธิตอีกครั้ง

ปัญหา 3: รูปภาพตกแต่ง

ในโมดูลการทดสอบอัตโนมัติ Lighthouse เลือกใช้ SVG ในหน้าที่ทำหน้าที่เป็นรูปภาพแนะนำหลักในหน้าสาธิตไม่ได้ อย่างไรก็ตาม โปรแกรมอ่านหน้าจอจะพบและอ่านออกเสียงเป็น "รูปภาพ" โดยไม่มีข้อมูลเพิ่มเติม ซึ่งจะยังคงมีผลแม้ว่าจะไม่ได้เพิ่มแอตทริบิวต์ role="img" ลงใน SVG อย่างชัดเจนก็ตาม

<div class="section-right">
  <svg>...</svg>
</div>
ฟังโปรแกรมอ่านหน้าจอที่ไปยังส่วนต่างๆ ของปัญหานี้
มาแก้ปัญหากัน

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

เราได้ชั่งน้ำหนักข้อดีและข้อเสียของวิธีจัดหมวดหมู่รูปภาพที่ดีที่สุด และตัดสินใจว่าจะตกแต่งรูปภาพ เราก็ต้องการเพิ่มหรือแก้ไขโค้ดเพื่อซ่อนรูปภาพ วิธีรวดเร็วคือเพิ่ม role="presentation" ลงในรูปภาพ SVG โดยตรง ซึ่งจะส่งสัญญาณให้โปรแกรมอ่านหน้าจอข้ามรูปภาพนี้และไม่แสดงรูปภาพในกลุ่มรูปภาพ

<div class="section-right">
  <svg role="presentation">...</svg>
</div>
ตอนนี้เราแก้ไขรูปภาพตกแต่งแล้ว ให้ฟังเสียงโปรแกรมอ่านหน้าจอไปยังส่วนต่างๆ ของเดโม

ปัญหาที่ 4: การตกแต่งหัวข้อ

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

<p class="bullet">...</p>
ฟังโปรแกรมอ่านหน้าจอไปยังส่วนต่างๆ ของปัญหานี้
มาแก้ปัญหากัน

เช่นเดียวกับตัวอย่างรูปภาพตกแต่งที่กล่าวถึงก่อนหน้านี้ คุณสามารถเพิ่ม role="presentation" ลงใน HTML ที่มีคลาสสัญลักษณ์หัวข้อเพื่อซ่อนจากโปรแกรมอ่านหน้าจอ ในทำนองเดียวกัน role="none" ก็ใช้ได้เช่นกัน โปรดอย่าใช้ aria-hidden: true ไม่เช่นนั้นระบบจะซ่อนข้อมูลย่อหน้าทั้งหมดจากผู้ใช้โปรแกรมอ่านหน้าจอ

<p class="bullet" role="none">...</p>

ปัญหาที่ 5: ช่องในแบบฟอร์ม

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

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

<form>
  <div class="form-group">
    <input type="email" placeholder="Enter your e-mail address" required>
    <button type="submit">Subscribe</button>
  </div>
</form>
ฟังเสียงโปรแกรมอ่านหน้าจอไปยังส่วนต่างๆ ของปัญหานี้
มาแก้ปัญหากัน

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

<form>
  <div class="form-group">
    <input type="email" required id="youremail" name="youremail" type="text">
    <label for="youremail">Enter your e-mail address</label>
    <button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
  </div>
</form>
ตอนนี้เราแก้ไขแบบฟอร์มแล้ว ให้ฟังโปรแกรมอ่านหน้าจอไปยังส่วนต่างๆ ของเดโม

สรุป

ยินดีด้วย คุณได้ทำการทดสอบทั้งหมดสําหรับการสาธิตนี้แล้ว คุณสามารถดูการเปลี่ยนแปลงทั้งหมดเหล่านี้ได้ในCodepen ที่อัปเดตสำหรับการสาธิตนี้

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

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

ทดสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับการทดสอบการช่วยเหลือพิเศษแบบอัตโนมัติ

โปรแกรมอ่านหน้าจอที่ดีที่สุดสำหรับทดสอบการช่วยเหลือพิเศษคืออะไร

VoiceOver
ไม่มี
Orca
JAWS

การทดสอบด้วยเทคโนโลยีความช่วยเหลือมีวัตถุประสงค์อย่างไร

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