ความรู้เบื้องต้นเกี่ยวกับความหมายและเทคโนโลยีความช่วยเหลือพิเศษ
คุณได้เห็นวิธีทำให้ผู้ใช้ที่ใช้เมาส์หรืออุปกรณ์ชี้ตำแหน่งเว็บไซต์ไม่ได้ ไม่ว่าจะเกิดจากความบกพร่องทางร่างกาย ปัญหาด้านเทคโนโลยี หรือความชอบส่วนบุคคล ด้วยการจัดการกับการใช้งานเฉพาะแป้นพิมพ์ แม้จะต้องการการดูแลและคิด แต่ก็ไม่ใช่เรื่องยุ่งยากหากคุณวางแผนตั้งแต่ต้น เมื่องานพื้นฐานต่างๆ เสร็จ เหลือเพียงคุณต่อไปเรื่อยๆ จนเว็บไซต์ของคุณเข้าถึงเว็บไซต์ได้อย่างสวยงามและครบถ้วนสมบูรณ์มากขึ้น
ในบทเรียนนี้ เราจะต่อยอดงานนั้นและให้คุณได้นึกถึงปัจจัยด้านการเข้าถึงอื่นๆ เช่น วิธีสร้างเว็บไซต์เพื่อรองรับผู้ใช้อย่าง Victor Tsaran ซึ่งมองไม่เห็นหน้าจอ
ก่อนอื่น เราจะมาดูข้อมูลเบื้องต้นเกี่ยวกับเทคโนโลยีความช่วยเหลือ ซึ่งเป็นคำทั่วไปสำหรับเครื่องมืออย่างเช่น โปรแกรมอ่านหน้าจอ ที่ช่วยเหลือผู้ใช้ที่มีความบกพร่องซึ่งทำให้ไม่สามารถเข้าถึงข้อมูลได้
ถัดไป เราจะมาดูแนวคิดเรื่องประสบการณ์ของผู้ใช้โดยทั่วไป แล้วต่อยอดแนวคิดเหล่านั้นเพื่อเจาะลึกเกี่ยวกับประสบการณ์ของผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษ
สุดท้ายเราจะดูวิธีใช้ HTML อย่างมีประสิทธิภาพเพื่อสร้างประสบการณ์ที่ดีให้แก่ผู้ใช้เหล่านี้ และดูว่า HTML ทับซ้อนกับวิธีที่เราจัดการโฟกัสก่อนหน้านี้อย่างไร
เทคโนโลยีความช่วยเหลือพิเศษ
เทคโนโลยีความช่วยเหลือพิเศษ เป็นคำกว้างๆ ที่ครอบคลุมถึงอุปกรณ์ ซอฟต์แวร์ และเครื่องมือต่างๆ ที่ช่วยให้ผู้พิการทำงานได้เสร็จสมบูรณ์ ในภาพรวม เทคโนโลยีนี้อาจเป็นอุปกรณ์แบบพื้นฐาน เช่น ไม้ค้ำยันสำหรับเดิน หรือแว่นขยายสำหรับอ่านหนังสือ หรือเทคโนโลยีไฮเทค เช่น แขนหุ่นยนต์หรือซอฟต์แวร์จดจำภาพในสมาร์ทโฟน
![ตัวอย่างเทคโนโลยีความช่วยเหลือพิเศษ เช่น แว่นขยายหน้าจอบางส่วนและหุ่นยนต์เทียม](https://web.dev/static/articles/semantics-builtin/image/assistive-technology-exam-beeec6611c495.png?authuser=4&hl=th)
เทคโนโลยีความช่วยเหลือพิเศษอาจรวมถึงสิ่งทั่วไปอย่างการซูมของเบราว์เซอร์ หรือเฉพาะเจาะจงเท่าตัวควบคุมเกมที่ออกแบบมาโดยเฉพาะ โดยอาจเป็นอุปกรณ์จริงแยกต่างหาก เช่น จอแสดงผลอักษรเบรลล์ หรือนำไปใช้ในซอฟต์แวร์อย่างการควบคุมด้วยเสียงได้อย่างสมบูรณ์ โดยสามารถติดตั้งในระบบปฏิบัติการอย่างเช่นโปรแกรมอ่านหน้าจอบางโปรแกรม หรืออาจเป็นส่วนเสริมอย่างส่วนขยาย Chrome ก็ได้
![ตัวอย่างเทคโนโลยีความช่วยเหลือพิเศษเพิ่มเติม เช่น จอแสดงผลอักษรเบรลล์การซูมในเบราว์เซอร์และการควบคุมด้วยเสียง](https://web.dev/static/articles/semantics-builtin/image/more-assistive-technology-dbc07e3c289be.png?authuser=4&hl=th)
เส้นแบ่งระหว่างเทคโนโลยีความช่วยเหลือพิเศษกับเทคโนโลยีโดยทั่วไปนั้นไม่ชัดเจนนัก เพราะท้ายที่สุดแล้ว เทคโนโลยีทั้งหมดมีไว้เพื่อช่วยเหลือผู้คนในการทำงานบางอย่างหรืออีกอย่างหนึ่ง และเทคโนโลยีเหล่านี้ก็มักจะเข้าไปอยู่ในและออกจากหมวดหมู่ "ความช่วยเหลือ"
เช่น ผลิตภัณฑ์สังเคราะห์เสียงเชิงพาณิชย์รุ่นแรกๆ ที่เปิดตัวที่สุดคือเครื่องคำนวณเสียงสำหรับคนตาบอด ตอนนี้การสังเคราะห์เสียงก็เกิดขึ้นได้ทั่วถึง ตั้งแต่เส้นทางการขับขี่ไปจนถึงผู้ช่วยเสมือน ในทางตรงกันข้าม เทคโนโลยีที่มีวัตถุประสงค์ทั่วไปแต่เดิมมักพบว่ามีประโยชน์ เช่น ผู้ที่สายตาเลือนรางอาจใช้การซูมด้วยกล้องของสมาร์ทโฟนเพื่อให้มองเห็นภาพของสิ่งที่เล็กในโลกความเป็นจริงได้ดีขึ้น
ในบริบทของการพัฒนาเว็บ เราต้องพิจารณาเทคโนโลยีที่หลากหลาย ผู้คนอาจโต้ตอบกับเว็บไซต์ของคุณโดยใช้โปรแกรมอ่านหน้าจอหรือจอแสดงผลอักษรเบรลล์ แว่นขยายหน้าจอ ผ่านการควบคุมด้วยเสียง การใช้อุปกรณ์สวิตช์ หรือเทคโนโลยีความช่วยเหลือพิเศษรูปแบบอื่นซึ่งจะปรับอินเทอร์เฟซเริ่มต้นของหน้าเว็บเพื่อสร้างอินเทอร์เฟซที่เฉพาะเจาะจงมากขึ้นที่ผู้ใช้จะใช้ได้
เทคโนโลยีความช่วยเหลือพิเศษเหล่านี้อาศัยความหมายแบบเป็นโปรแกรมเพื่อสร้างประสบการณ์ของผู้ใช้ที่เข้าถึงได้ และนี่คือเนื้อหาส่วนใหญ่ของบทเรียนนี้ แต่ก่อนที่เราจะอธิบายความหมายเชิงโปรแกรมที่แสดงออกทางโปรแกรมได้ เราต้องพูดถึงราคากันสักเล็กน้อย
ที่พัก
เมื่อใช้เครื่องมือหรืออุปกรณ์ที่มนุษย์สร้างขึ้น เรามักจะดูจากรูปแบบและการออกแบบ เพื่อช่วยให้เห็นภาพของสิ่งที่อุปกรณ์และเครื่องมือดังกล่าวมีและวิธีการทำงาน ฐานะราคาคือวัตถุใดก็ตามที่นำเสนอหรือเอื้อให้ผู้ใช้ดำเนินการ ยิ่งออกแบบแหล่งราคามาดีเท่าไหร่ ก็ยิ่งใช้งานได้ง่ายและชัดเจนมากขึ้นเท่านั้น
เช่น กาต้มน้ำหรือกาน้ำชา รู้ได้ง่ายๆ ว่าคุณควรหยิบมือจับ ไม่ใช่พวยกา แม้ว่าคุณไม่เคยเห็นกาน้ำชามาก่อนก็ตาม
![กาน้ำชาพร้อมที่จับและพวยน้ำ](https://web.dev/static/articles/semantics-builtin/image/a-teapot-handle-spout-cb54fefc75464.png?authuser=4&hl=th)
เพราะราคาก็คล้ายกับที่คุณเคยเห็นในวัตถุอื่นๆ หลายชนิด เช่น หม้อน้ำ เหยือกน้ำ แก้วกาแฟ และอื่นๆ คุณอาจอาจหยิบหม้อขึ้นมาข้างทาง แต่ประสบการณ์ที่มีราคาใกล้เคียงกันบอกว่าแฮนเดิลเป็นตัวเลือกที่ดีกว่า
ในอินเทอร์เฟซผู้ใช้แบบกราฟิก ราคาโฆษณาแสดงถึงการดำเนินการที่เราทำได้ แต่อาจไม่ชัดเจนเนื่องจากไม่มีวัตถุทางกายภาพให้โต้ตอบ พื้นที่ของ GUI จึงออกแบบมาอย่างชัดเจนเพื่อให้ใช้งานได้ง่าย โดยปุ่ม ช่องทำเครื่องหมาย และแถบเลื่อนมีไว้เพื่อถ่ายทอดการใช้งานโดยมีการฝึกให้น้อยที่สุดเท่าที่จะเป็นไปได้
ตัวอย่างเช่น คุณอาจถอดความโดยใช้องค์ประกอบ (แอตทริบิวต์โฆษณา) บางประเภทที่พบได้ทั่วไป ดังนี้
- ปุ่มตัวเลือก — "ฉันเลือกหนึ่งในตัวเลือกเหล่านี้ได้"
- ช่องทำเครื่องหมาย — "ฉันสามารถเลือก 'ใช่' หรือ 'ไม่' เป็นตัวเลือกนี้ได้"
- ช่องข้อความ — "ฉันพิมพ์บางอย่างลงในบริเวณนี้ได้"
- เมนูแบบเลื่อนลง — "ฉันเปิดองค์ประกอบนี้เพื่อแสดงตัวเลือกได้"
คุณจะสรุปเกี่ยวกับองค์ประกอบเหล่านี้ได้ก็ต่อเมื่อเห็นองค์ประกอบเหล่านั้น โดยปกติแล้ว ผู้ที่มองไม่เห็นเบาะแสที่มาจากองค์ประกอบหนึ่งๆ จะเข้าใจความหมายหรือเข้าใจมูลค่าของสิ่งที่อยู่ได้โดยสัญชาตญาณ เราจึงต้องตรวจสอบว่าข้อมูลแสดงได้อย่างยืดหยุ่นเพียงพอให้เทคโนโลยีความช่วยเหลือพิเศษสามารถเข้าถึงซึ่งสามารถสร้างอินเทอร์เฟซทางเลือกให้เหมาะกับความต้องการของผู้ใช้
การแสดงที่ไม่เกี่ยวข้องกับภาพนี้เรียกว่าอรรถศาสตร์
โปรแกรมอ่านหน้าจอ
เทคโนโลยีความช่วยเหลือพิเศษประเภทหนึ่งที่ได้รับความนิยมคือโปรแกรมอ่านหน้าจอ ซึ่งเป็นโปรแกรมที่ช่วยให้ผู้ที่มีความบกพร่องทางสายตาใช้คอมพิวเตอร์โดยการอ่านออกเสียงข้อความบนหน้าจอโดยใช้เสียงที่สร้างขึ้นได้ ผู้ใช้ควบคุมสิ่งที่อ่านได้โดยเลื่อนเคอร์เซอร์ไปยังบริเวณที่เกี่ยวข้องด้วยแป้นพิมพ์
เราได้ขอให้ Victor Tsaran อธิบายวิธีเข้าถึงเว็บโดยใช้โปรแกรมอ่านหน้าจอในตัวของ OS X ที่เรียกว่า VoiceOver ในฐานะคนตาบอด โปรดดูวิดีโอนี้ของ Victor ที่ใช้ VoiceOver
ถึงเวลาลองใช้โปรแกรมอ่านหน้าจอแล้ว นี่คือหน้าที่มี ChromeVox Lite ซึ่งเป็นโปรแกรมอ่านหน้าจอที่เรียบง่ายแต่ยังใช้งานได้ซึ่งเขียนด้วย JavaScript ระบบจะเบลอหน้าจอเพื่อจำลองประสบการณ์ที่มีสายตาเลือนรางและบังคับให้ผู้ใช้ทำงานด้วยโปรแกรมอ่านหน้าจอ แน่นอนว่า คุณต้องใช้ เบราว์เซอร์ Chrome สำหรับแบบฝึกหัดนี้
คุณสามารถใช้แผงควบคุมที่ด้านล่างหน้าจอในการควบคุมโปรแกรมอ่านหน้าจอ โปรแกรมอ่านหน้าจอนี้มีฟังก์ชันการทำงานน้อยมาก แต่คุณจะสำรวจเนื้อหาได้โดยใช้ปุ่ม Previous
และ Next
และคลิกสิ่งต่างๆ โดยใช้ปุ่ม Click
ได้
ลองใช้หน้านี้ที่เปิดใช้ ChromeVox Lite เพื่อทำความเข้าใจการใช้งานโปรแกรมอ่านหน้าจอ ให้นึกถึงข้อเท็จจริงที่ว่าจริงๆ แล้วโปรแกรมอ่านหน้าจอ (หรือเทคโนโลยีความช่วยเหลือพิเศษอื่นๆ) สร้างประสบการณ์ทางเลือกที่สมบูรณ์ให้กับผู้ใช้โดยอิงตามความหมายแบบเป็นโปรแกรม โปรแกรมอ่านหน้าจอ มีอินเทอร์เฟซแบบเสียง แทนที่จะใช้อินเทอร์เฟซแบบภาพ
สังเกตวิธีที่โปรแกรมอ่านหน้าจอบอกข้อมูลบางอย่างเกี่ยวกับองค์ประกอบอินเทอร์เฟซแต่ละรายการ คุณควรคาดหวังว่าเครื่องอ่านที่ออกแบบมาอย่างดีจะให้ข้อมูลต่อไปนี้ทั้งหมดหรืออย่างน้อยที่สุดเกี่ยวกับองค์ประกอบต่างๆ ที่เครื่องมือพบ
- บทบาทหรือประเภทองค์ประกอบ หากระบุไว้ (ควร)
- ชื่อขององค์ประกอบ (หากมี)
- ค่า ขององค์ประกอบ (หากมี) (อาจมีหรือไม่มี)
- stateขององค์ประกอบ เช่น เปิดหรือปิดใช้อยู่ (หากมี)
โปรแกรมอ่านหน้าจอสามารถสร้าง UI ทางเลือกนี้เนื่องจากองค์ประกอบเนทีฟมีข้อมูลเมตาการช่วยเหลือพิเศษในตัว เช่นเดียวกับที่เครื่องมือแสดงผล ใช้รหัสเนทีฟในการสร้างอินเทอร์เฟซแบบภาพ โปรแกรมอ่านหน้าจอจะใช้ข้อมูลเมตาในโหนด DOM เพื่อสร้างเวอร์ชันที่เข้าถึงได้ ประมาณนี้
![โปรแกรมอ่านหน้าจอใช้ DOM เพื่อสร้างโหนดที่เข้าถึงได้](https://web.dev/static/articles/semantics-builtin/image/a-screen-reader-uses-dom-d41868210913.png?authuser=4&hl=th)