โมดูลนี้มุ่งเน้นที่การใช้เทคโนโลยีความช่วยเหลือพิเศษ (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 |
| ผู้บรรยาย | 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: บริบทของลิงก์
คุณต้องแสดงเนื้อหาเกี่ยวกับจุดประสงค์ของลิงก์แก่ผู้ใช้โปรแกรมอ่านหน้าจอ และระบุว่าลิงก์จะเปลี่ยนเส้นทางผู้ใช้ไปยังตำแหน่งใหม่นอกเว็บไซต์หรือแอปหรือไม่
ในตัวอย่างของเรา เราได้แก้ไขลิงก์ส่วนใหญ่เมื่ออัปเดตข้อความแสดงแทนของรูปภาพที่มีการใช้งานแล้ว แต่ยังมีลิงก์เพิ่มเติมอีก 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 ที่อัปเดตแล้วสําหรับการสาธิตนี้
ตอนนี้คุณใช้สิ่งที่ได้เรียนรู้เพื่อตรวจสอบการช่วยเหลือพิเศษของเว็บไซต์และแอปของคุณเองได้แล้ว
เป้าหมายของการทดสอบการช่วยเหลือพิเศษทั้งหมดนี้คือเพื่อแก้ไขปัญหาที่ผู้ใช้อาจพบให้ได้มากที่สุด อย่างไรก็ตาม ไม่ได้หมายความว่าเว็บไซต์หรือแอปของคุณจะเข้าถึงได้อย่างสมบูรณ์แบบเมื่อดำเนินการเสร็จแล้ว คุณจะได้รับความสำเร็จสูงสุดด้วยการออกแบบเว็บไซต์หรือแอปที่เข้าถึงได้ง่ายตลอดกระบวนการ และรวมการทดสอบเหล่านี้เข้ากับการทดสอบอื่นๆ ก่อนการเปิดตัว
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับการทดสอบการช่วยเหลือพิเศษอัตโนมัติ
โปรแกรมอ่านหน้าจอที่ดีที่สุดสำหรับทดสอบการช่วยเหลือพิเศษคืออะไร
การทดสอบด้วยเทคโนโลยีความช่วยเหลือมีวัตถุประสงค์อย่างไร