โมดูลนี้มุ่งเน้นที่การใช้เทคโนโลยีความช่วยเหลือพิเศษ (AT) สำหรับการทดสอบการช่วยเหลือพิเศษ ผู้พิการสามารถใช้ AT เพื่อช่วยเพิ่ม รักษา หรือปรับปรุงความสามารถของการทำงาน
ส่วนในโลกดิจิทัล AT สามารถมีสถานะดังต่อไปนี้
- ไม่/เทคโนโลยีต่ำ: ไม้จิ้มหัว/ปาก แว่นขยายแบบพกพา อุปกรณ์ที่มีปุ่มขนาดใหญ่
- เทคโนโลยีสุดไฮเทค: อุปกรณ์ที่เปิดใช้งานด้วยเสียง อุปกรณ์ติดตามสายตา แป้นพิมพ์/เมาส์แบบปรับอัตโนมัติ
- ฮาร์ดแวร์: ปุ่มเปลี่ยน แป้นพิมพ์ตามหลักการยศาสตร์ อุปกรณ์อักษรเบรลล์แบบรีเฟรชอัตโนมัติ
- ซอฟต์แวร์: โปรแกรมอ่านออกเสียงข้อความ คำบรรยายสด โปรแกรมอ่านหน้าจอ
เราขอแนะนำให้คุณใช้ AT หลายประเภทในเวิร์กโฟลว์การทดสอบโดยรวมของคุณ
ข้อมูลเบื้องต้นเกี่ยวกับการทดสอบโปรแกรมอ่านหน้าจอ
ในโมดูลนี้ เราจะเน้นไปที่ AT ดิจิทัลและโปรแกรมอ่านหน้าจอที่ได้รับความนิยมมากที่สุด โปรแกรมอ่านหน้าจอคือซอฟต์แวร์ที่อ่านโค้ดที่สำคัญของเว็บไซต์หรือแอป จากนั้นจะแปลงข้อมูลดังกล่าวเป็นคำพูดหรือเอาต์พุตอักษรเบรลล์สำหรับผู้ใช้
โปรแกรมอ่านหน้าจอจำเป็นสำหรับผู้ที่ตาบอดหรือตาบอด แต่ก็อาจมีประโยชน์สำหรับผู้ที่สายตาเลือนราง มีความบกพร่องด้านการอ่าน หรือความพิการทางสติปัญญา
ความเข้ากันได้กับเบราว์เซอร์
โปรแกรมอ่านหน้าจอมีตัวเลือกมากมายสำหรับโปรแกรมอ่านหน้าจอ โปรแกรมอ่านหน้าจอที่ได้รับความนิยมมากที่สุดในปัจจุบัน ได้แก่ JAWS, NVDA และ VoiceOver สำหรับคอมพิวเตอร์เดสก์ท็อป รวมถึง VoiceOver และ Talkback สำหรับอุปกรณ์เคลื่อนที่
โปรแกรมอ่านหน้าจออาจโดดเด่นเป็นตัวเลือกที่ดีที่สุด ทั้งนี้ขึ้นอยู่กับระบบปฏิบัติการ (OS) เบราว์เซอร์โปรด และอุปกรณ์ที่ใช้ โปรแกรมอ่านหน้าจอส่วนใหญ่สร้างขึ้นโดยคำนึงถึงฮาร์ดแวร์และเว็บเบราว์เซอร์ที่เฉพาะเจาะจง เมื่อใช้โปรแกรมอ่านหน้าจอกับเบราว์เซอร์ที่ไม่ได้ปรับเทียบ คุณอาจพบ "ข้อบกพร่อง" หรือลักษณะการทำงานที่ไม่คาดคิดมากขึ้น โปรแกรมอ่านหน้าจอจะทำงานได้ดีที่สุดเมื่อใช้กับชุดค่าผสมต่อไปนี้
คำสั่งของโปรแกรมอ่านหน้าจอ
เมื่อตั้งค่าซอฟต์แวร์โปรแกรมอ่านหน้าจอสำหรับเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่อย่างเหมาะสมแล้ว คุณควรดูเอกสารประกอบของโปรแกรมอ่านหน้าจอ (ลิงก์ไว้ในตารางก่อนหน้า) และเรียกใช้คำสั่งของโปรแกรมอ่านหน้าจอที่สำคัญเพื่อทำความคุ้นเคยกับเทคโนโลยี หากเคยใช้โปรแกรมอ่านหน้าจอมาก่อน ลองพิจารณาลองใช้โปรแกรมใหม่ดูสิ
เมื่อใช้โปรแกรมอ่านหน้าจอสำหรับการทดสอบการช่วยเหลือพิเศษ เป้าหมายของคุณคือการตรวจหาปัญหาในโค้ดที่รบกวนการใช้งานเว็บไซต์หรือแอป ไม่ใช่เพื่อจำลองประสบการณ์ของผู้ใช้โปรแกรมอ่านหน้าจอ ดังนั้น คุณสามารถทำสิ่งต่างๆ ได้มากมายโดยใช้ความรู้พื้นฐาน คำสั่งของโปรแกรมอ่านหน้าจอ และการฝึกฝนเล็กๆ น้อยๆ หรือมากมาย
หากต้องการทำความเข้าใจเพิ่มเติมเกี่ยวกับประสบการณ์ของผู้ใช้ของผู้ที่ใช้โปรแกรมอ่านหน้าจอและ AT อื่นๆ คุณสามารถมีส่วนร่วมกับองค์กรและผู้คนจำนวนมากเพื่อรับข้อมูลเชิงลึกอันมีค่านี้ โปรดทราบว่าการใช้ AT เพื่อทดสอบโค้ดกับชุดกฎและการถามผู้ใช้เกี่ยวกับประสบการณ์ของตนมักจะให้ผลลัพธ์ที่แตกต่างกัน ทั้ง 2 ด้านเป็นสิ่งสำคัญในการสร้างผลิตภัณฑ์ที่ไม่แบ่งแยกอย่างสมบูรณ์
คำสั่งแป้นพิมพ์สำหรับโปรแกรมอ่านหน้าจอเดสก์ท็อป
คำสั่งแป้นพิมพ์สำหรับโปรแกรมอ่านหน้าจอบนอุปกรณ์เคลื่อนที่
การสาธิตการทดสอบโปรแกรมอ่านหน้าจอ
ในการทดสอบการสาธิต เราใช้ 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 ที่อัปเดตสำหรับการสาธิตนี้
ตอนนี้คุณนำสิ่งที่ได้เรียนรู้มาตรวจสอบความสามารถเข้าถึงได้ง่ายของเว็บไซต์และแอปของคุณเองแล้ว
เป้าหมายของการทดสอบการช่วยเหลือพิเศษทั้งหมดนี้คือการแก้ปัญหาที่ผู้ใช้อาจพบให้มากที่สุด อย่างไรก็ตาม ไม่ได้หมายความว่าเว็บไซต์หรือแอปจะเข้าถึงได้ทุกครั้งเมื่อดำเนินการเสร็จสิ้น คุณจะพบความสำเร็จมากที่สุดด้วยการออกแบบเว็บไซต์หรือแอปให้สามารถเข้าถึงได้ง่ายตลอดทั้งกระบวนการ และรวมการทดสอบเหล่านี้ไว้ในการทดสอบก่อนการเปิดตัวอื่นๆ
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้ของคุณเกี่ยวกับการทดสอบความสามารถเข้าถึงได้ง่ายแบบอัตโนมัติ
ข้อใดคือโปรแกรมอ่านหน้าจอที่ดีที่สุดในการใช้ทดสอบการช่วยเหลือพิเศษ
วัตถุประสงค์ของการทดสอบด้วยเทคโนโลยีความช่วยเหลือพิเศษคืออะไร