โมดูลนี้มุ่งเน้นที่การใช้เทคโนโลยีความช่วยเหลือพิเศษ (AT) สำหรับการทดสอบการช่วยเหลือพิเศษ ผู้พิการสามารถใช้ AT เพื่อช่วยเพิ่ม รักษา หรือปรับปรุงความสามารถในการทำงานให้ดีขึ้น
ในพื้นที่ดิจิทัล AT อาจมีลักษณะดังนี้
- เทคโนโลยีต่ำหรือไม่มีเทคโนโลยี: ไม้สำหรับใช้ด้วยปากและศีรษะ แว่นขยายแบบมือถือ อุปกรณ์ที่มีปุ่มขนาดใหญ่
- เทคโนโลยีสูง: อุปกรณ์ที่สั่งงานด้วยเสียง อุปกรณ์ติดตามดวงตา แป้นพิมพ์และเมาส์แบบปรับได้
- ฮาร์ดแวร์: ปุ่มสวิตช์ แป้นพิมพ์ที่ออกแบบตามหลักสรีรศาสตร์ อุปกรณ์อักษรเบรลล์ที่รีเฟรชอัตโนมัติ
- ซอฟต์แวร์: โปรแกรมอ่านออกเสียงข้อความ คำบรรยายสด โปรแกรมอ่านหน้าจอ
เราขอแนะนำให้คุณใช้ AT หลายประเภทในเวิร์กโฟลว์การทดสอบโดยรวม
ข้อมูลพื้นฐานเกี่ยวกับการทดสอบโปรแกรมอ่านหน้าจอ
ในโมดูลนี้ เราจะมุ่งเน้นที่ AT ดิจิทัลที่ได้รับความนิยมมากที่สุดอย่างหนึ่ง นั่นก็คือโปรแกรมอ่านหน้าจอ โปรแกรมอ่านหน้าจอเป็นซอฟต์แวร์ที่อ่านโค้ดเบื้องหลังของเว็บไซต์หรือแอป จากนั้นจะแปลงข้อมูลดังกล่าวเป็นคำพูดหรือเอาต์พุตอักษรเบรลล์สำหรับผู้ใช้
โปรแกรมอ่านหน้าจอมีความสำคัญอย่างยิ่งสำหรับผู้ที่ตาบอดและหูหนวกตาบอด แต่ก็เป็นประโยชน์ต่อผู้ที่มีสายตาเลือนราง มีความบกพร่องทางการอ่าน และมีความบกพร่องด้านความรู้ความเข้าใจด้วย
ความเข้ากันได้กับเบราว์เซอร์
มีตัวเลือกโปรแกรมอ่านหน้าจอมากมาย โปรแกรมอ่านหน้าจอที่ได้รับความนิยมมากที่สุด ได้แก่ JAWS, NVDA และ VoiceOver สำหรับคอมพิวเตอร์เดสก์ท็อป รวมถึง VoiceOver และ Talkback สำหรับอุปกรณ์เคลื่อนที่
โปรแกรมอ่านหน้าจอหนึ่งอาจโดดเด่นในฐานะตัวเลือกที่ดีที่สุด ทั้งนี้ขึ้นอยู่กับระบบปฏิบัติการ (OS) เบราว์เซอร์ที่คุณชื่นชอบ และอุปกรณ์ที่คุณใช้ โปรแกรมอ่านหน้าจอส่วนใหญ่สร้างขึ้นโดยคำนึงถึงฮาร์ดแวร์และเว็บเบราว์เซอร์ที่เฉพาะเจาะจง เมื่อใช้โปรแกรมอ่านหน้าจอกับเบราว์เซอร์ที่ไม่ได้ปรับเทียบไว้ คุณอาจพบ "ข้อบกพร่อง" หรือลักษณะการทำงานที่ไม่คาดคิดมากขึ้น โปรแกรมอ่านหน้าจอจะทำงานได้ดีที่สุดเมื่อใช้ร่วมกับเบราว์เซอร์และระบบปฏิบัติการต่อไปนี้
| โปรแกรมอ่านหน้าจอ | ระบบปฏิบัติการ | ความเข้ากันได้กับเบราว์เซอร์ |
|---|---|---|
| Job Access With Speech (JAWS) | Windows | Chrome, Firefox, Edge |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome และ Firefox |
| Narrator | Windows | Edge |
| VoiceOver | macOS | Safari |
| Orca | Linux | Firefox |
| TalkBack | Android | Chrome และ Firefox |
| VoiceOver (สำหรับอุปกรณ์เคลื่อนที่) | iOS | Safari |
| ChromeVox | ChromeOS | Chrome |
คำสั่งโปรแกรมอ่านหน้าจอ
เมื่อตั้งค่าซอฟต์แวร์โปรแกรมอ่านหน้าจอสำหรับเดสก์ท็อป หรืออุปกรณ์เคลื่อนที่เรียบร้อยแล้ว คุณควรอ่านเอกสารประกอบของโปรแกรมอ่านหน้าจอ (ลิงก์ใน ตารางก่อนหน้า) และลองใช้ คำสั่งโปรแกรมอ่านหน้าจอที่จำเป็นบางอย่างเพื่อ ทำความคุ้นเคยกับเทคโนโลยี หากเคยใช้โปรแกรมอ่านหน้าจอมาก่อน ลองใช้โปรแกรมใหม่ดู
เมื่อใช้โปรแกรมอ่านหน้าจอสำหรับการทดสอบการช่วยเหลือพิเศษ เป้าหมายของคุณคือการตรวจหาปัญหาในโค้ดที่รบกวนการใช้งานเว็บไซต์หรือแอป ไม่ใช่การจำลองประสบการณ์การใช้งานของผู้ใช้โปรแกรมอ่านหน้าจอ ดังนั้น คุณจึงทำสิ่งต่างๆ ได้มากมายด้วยความรู้พื้นฐาน คำสั่งโปรแกรมอ่านหน้าจอ 2-3 คำสั่ง และการฝึกฝนเล็กน้อย (หรือมาก)
หากต้องการทำความเข้าใจประสบการณ์การใช้งานของผู้ที่ใช้โปรแกรมอ่านหน้าจอและ AT อื่นๆ ให้มากขึ้น คุณสามารถติดต่อองค์กรและบุคคลต่างๆ เพื่อรับข้อมูลเชิงลึกที่มีคุณค่านี้ โปรดทราบว่าการใช้ AT เพื่อทดสอบโค้ดกับชุดกฎและการถามผู้ใช้เกี่ยวกับประสบการณ์การใช้งานมักจะให้ผลลัพธ์ที่แตกต่างกัน ทั้ง 2 อย่างเป็นสิ่งสำคัญในการสร้างผลิตภัณฑ์ที่ครอบคลุมอย่างเต็มที่
คำสั่งแป้นพิมพ์หลักสำหรับโปรแกรมอ่านหน้าจอเดสก์ท็อป
| องค์ประกอบ | NVDA (Windows) | VoiceOver (macOS) |
|---|---|---|
| แป้นคำสั่งทั่วไป | Insert | Control+Option |
| หยุดการเล่นเสียง | Control | Control |
| อ่านรายการถัดไป/ก่อนหน้า | ↓ หรือ ↑ | Control+Option+→ หรือ ← |
| เริ่มอ่าน | Insert↓ | Control+Option+A |
| รายการองค์ประกอบ/โรเตอร์ | NVDA + F7 | Control+Option+U |
| จุดสังเกต | D | Control+Option+U |
| ส่วนหัว | H | Control+Option+Command+H |
| ลิงก์ | K | Control+Option+Command+L |
| ตัวควบคุมแบบฟอร์ม | F | Control+Option+Command+J |
| ตาราง | T | Control+OptionCommand+T |
| ภายในตาราง | Insert Alt + ↓ ↑ ← → | Control+Option+↓ ↑ ← → |
คำสั่งแป้นพิมพ์หลักสำหรับโปรแกรมอ่านหน้าจออุปกรณ์เคลื่อนที่
| องค์ประกอบ | TalkBack (Android) | VoiceOver (iOS) |
|---|---|---|
| สำรวจ | ลากนิ้วเดียวไปรอบๆ หน้าจอ | ลากนิ้วเดียวไปรอบๆ หน้าจอ |
| เลือกหรือเปิดใช้งาน | แตะสองครั้ง | แตะสองครั้ง |
| เลื่อนขึ้นหรือลง | ใช้ 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: บริบทของลิงก์
การให้ข้อมูลแก่ผู้ใช้โปรแกรมอ่านหน้าจอเกี่ยวกับวัตถุประสงค์ของลิงก์และบอกว่าลิงก์จะเปลี่ยนเส้นทางผู้ใช้ไปยังตำแหน่งใหม่ภายนอกเว็บไซต์หรือแอปหรือไม่นั้นเป็นสิ่งสำคัญ
ในการสาธิต เราได้แก้ไขลิงก์ส่วนใหญ่เมื่ออัปเดตข้อความสำรองของรูปภาพที่ใช้งานอยู่ แต่ยังมีลิงก์เพิ่มเติมอีก 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>
หากต้องการแก้ไขปัญหานี้ เราต้องตัดสินใจก่อนว่ารูปภาพให้ข้อมูล informative หรือ decorative จากนั้นเราต้องเพิ่มข้อความสำรองที่เหมาะสมสำหรับรูปภาพ (รูปภาพให้ข้อมูล) หรือซ่อนรูปภาพจากผู้ใช้โปรแกรมอ่านหน้าจอ (รูปภาพตกแต่ง)
เราได้พิจารณาข้อดีและข้อเสียของวิธีจัดหมวดหมู่รูปภาพที่ดีที่สุดแล้ว และตัดสินใจว่ารูปภาพเป็นรูปภาพตกแต่ง ซึ่งหมายความว่าเราต้องการเพิ่มหรือแก้ไขโค้ดเพื่อซ่อนรูปภาพ วิธีที่รวดเร็วคือการเพิ่ม role="presentation" ลงในรูปภาพ SVG
โดยตรง ซึ่งจะส่งสัญญาณไปยังโปรแกรมอ่านหน้าจอให้ข้ามรูปภาพนี้และไม่แสดงรูปภาพในกลุ่มรูปภาพ
<div class="section-right">
<svg role="presentation">...</svg>
</div>
ปัญหาที่ 4: การตกแต่งด้วยสัญลักษณ์แสดงหัวข้อย่อย
คุณอาจสังเกตเห็นว่าโปรแกรมอ่านหน้าจออ่านรูปภาพสัญลักษณ์แสดงหัวข้อย่อย CSS ในส่วนโรคหายาก แม้ว่ารูปภาพนี้จะไม่เหมือนกับที่เรา พูดถึงในโมดูลรูปภาพ แต่ก็ยังต้องแก้ไขเนื่องจากรบกวนการไหลของเนื้อหาและอาจทำให้ผู้ใช้โปรแกรมอ่านหน้าจอเสียสมาธิหรือ สับสน
<p class="bullet">...</p>
เช่นเดียวกับตัวอย่างรูปภาพตกแต่งที่กล่าวถึงก่อนหน้านี้ คุณสามารถเพิ่มa
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 ที่อัปเดตแล้วสำหรับการสาธิตนี้
ตอนนี้คุณสามารถใช้สิ่งที่ได้เรียนรู้เพื่อตรวจสอบการช่วยเหลือพิเศษของเว็บไซต์และแอปของคุณเอง
เป้าหมายของการทดสอบการช่วยเหลือพิเศษทั้งหมดนี้คือการแก้ไขปัญหาให้ได้มากที่สุดเท่าที่จะเป็นไปได้ที่ผู้ใช้อาจพบ อย่างไรก็ตาม การทดสอบนี้ไม่ได้หมายความว่าเว็บไซต์หรือแอปของคุณจะเข้าถึงได้อย่างสมบูรณ์แบบเมื่อคุณทำเสร็จแล้ว คุณจะประสบความสำเร็จมากที่สุดโดยการออกแบบเว็บไซต์หรือแอปโดยคำนึงถึงการช่วยเหลือพิเศษตลอดกระบวนการ และรวมการทดสอบเหล่านี้กับการทดสอบอื่นๆ ก่อนเปิดตัว