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