คุณเคยสงสัยไหมว่าเทคโนโลยีความช่วยเหลือพิเศษ เช่น โปรแกรมอ่านหน้าจอ รู้ได้อย่างไรว่าจะอ่านออกเสียงอะไรให้ผู้ใช้ฟัง คำตอบคือเทคโนโลยีเหล่านี้อาศัยนักพัฒนาซอฟต์แวร์ในการมาร์กอัปหน้าเว็บด้วย HTML เชิงความหมาย แต่ "ความหมาย" คืออะไร และโปรแกรมอ่านหน้าจอใช้ความหมายอย่างไร
ความสามารถในการใช้งานและความหมาย
ก่อนเจาะลึกความหมาย คุณควรทำความเข้าใจอีกคำหนึ่งคือ การอำนวยความสะดวก สิ่งกระตุ้นให้ดำเนินการคือวัตถุที่เสนอหรือให้โอกาสผู้ใช้ดำเนินการ ตัวอย่างคลาสสิกคือกาน้ำชา
กาน้ำชานี้ไม่จำเป็นต้องมีคู่มือการใช้งาน แต่การออกแบบที่เป็นรูปธรรมจะบอกให้ผู้ใช้ทราบถึงวิธีการใช้งาน เพราะมีด้ามจับ และเนื่องจากคุณเคยเห็นวัตถุอื่นๆ ในโลกที่มีด้ามจับคล้ายกัน คุณจึงอนุมานได้ว่าควรหยิบและใช้งานอย่างไร
เมื่อสร้างอินเทอร์เฟซผู้ใช้แบบกราฟิก เราจะใช้สิ่งต่างๆ เช่น CSS เพื่อเพิ่มการสื่อความหมายด้วยภาพใน UI เช่น คุณอาจใส่เงาและเส้นขอบให้ปุ่มเพื่อให้ดูเหมือนปุ่มจริงในชีวิตจริง
แต่หากผู้ใช้มองไม่เห็นหน้าจอ ระบบก็จะไม่แสดงสิ่งต่างๆ เหล่านี้ ดังนั้น คุณต้องตรวจสอบว่า UI ของคุณสร้างขึ้นในลักษณะที่สื่อถึงสิ่งเดียวกันเหล่านี้ไปยังเทคโนโลยีความช่วยเหลือพิเศษ การแสดงผลที่ไม่ใช่ภาพนี้ของสิ่งที่เอื้ออำนวยขององค์ประกอบ UI เรียกว่าความหมาย
ใช้ HTML เชิงความหมาย
วิธีที่ง่ายที่สุดในการสื่อความหมายที่เหมาะสมคือการใช้องค์ประกอบ HTML ที่สื่อความหมาย
เมื่อใช้ CSS คุณสามารถกำหนดสไตล์ให้กับองค์ประกอบ <div> และ <button> เพื่อให้สื่อถึงสิ่งเดียวกันได้ แต่ประสบการณ์การใช้งานทั้ง 2 แบบจะแตกต่างกันมากเมื่อใช้โปรแกรมอ่านหน้าจอ
<div> เป็นเพียงองค์ประกอบการจัดกลุ่มทั่วไป ดังนั้นโปรแกรมอ่านหน้าจอจะอ่านออกเสียงเฉพาะเนื้อหาข้อความของ <div>
ระบบจะประกาศ <button> เป็น "ปุ่ม" ซึ่งส่งสัญญาณที่ชัดเจนกว่ามากว่าผู้ใช้สามารถโต้ตอบกับสิ่งนั้นได้
วิธีแก้ปัญหาที่ง่ายที่สุดและมักได้ผลดีที่สุดคือหลีกเลี่ยงการควบคุมแบบอินเทอร์แอกทีฟที่กําหนดเองโดยสิ้นเชิง
เช่น แทนที่ <div> ที่ทํางานเหมือนปุ่มด้วย <button> จริง
พร็อพเพอร์ตี้เชิงความหมายและลําดับชั้นการช่วยเหลือพิเศษ
โดยทั่วไปแล้ว องค์ประกอบ HTML ทั้งหมดจะมีพร็อพเพอร์ตี้เชิงความหมายต่อไปนี้
- บทบาทหรือประเภท
- ชื่อ
- value (ไม่บังคับ)
- state (ไม่บังคับ)
บทบาทขององค์ประกอบจะอธิบายประเภทขององค์ประกอบ เช่น "ปุ่ม" "อินพุต" หรือเพียงแค่ "กลุ่ม" สำหรับองค์ประกอบต่างๆ เช่น องค์ประกอบ div และ span
ชื่อขององค์ประกอบคือป้ายกำกับที่คำนวณแล้ว โดยทั่วไปแล้ว โปรแกรมอ่านหน้าจอจะอ่านออกเสียงชื่อขององค์ประกอบตามด้วยบทบาท เช่น "ปุ่มลงชื่อสมัครใช้" อัลกอริทึมที่กําหนดชื่อขององค์ประกอบจะพิจารณาปัจจัยต่างๆ เช่น เนื้อหาข้อความภายในองค์ประกอบ มีแอตทริบิวต์ เช่น title หรือ placeholder หรือไม่ องค์ประกอบเชื่อมโยงกับองค์ประกอบ <label> จริงหรือไม่ และองค์ประกอบมีแอตทริบิวต์ ARIA เช่น aria-label และ aria-labelledby หรือไม่
องค์ประกอบบางอย่างอาจมีค่า เช่น <input type="text"> อาจมีค่าที่แสดงถึงสิ่งที่ผู้ใช้พิมพ์ลงในช่องข้อความ
องค์ประกอบบางรายการอาจมีสถานะด้วย ซึ่งจะแสดงสถานะปัจจุบัน
เช่น องค์ประกอบ <select> อาจเป็นสถานะขยายหรือยุบก็ได้ โดยขึ้นอยู่กับว่าเปิดหรือปิดอยู่
แผนผังการช่วยเหลือพิเศษ
สําหรับโหนดแต่ละโหนดใน DOM เบราว์เซอร์จะกําหนดว่าโหนด "น่าสนใจ" ในแง่ความหมายหรือไม่ และเพิ่มโหนดนั้นลงในต้นไม้การช่วยเหลือพิเศษ เมื่อเทคโนโลยีความช่วยเหลือพิเศษ เช่น โปรแกรมอ่านหน้าจอ แสดง UI ทางเลือกแก่ผู้ใช้ มักจะทําโดยการเรียกใช้ลําดับชั้นการช่วยเหลือพิเศษนี้
เมื่อใช้เครื่องมือสำหรับนักพัฒนาเว็บของ Chrome คุณจะตรวจสอบพร็อพเพอร์ตี้เชิงความหมายขององค์ประกอบและสำรวจตําแหน่งในลําดับชั้นการช่วยเหลือพิเศษได้
ขั้นตอนถัดไป
เมื่อคุณทราบข้อมูลเบื้องต้นเกี่ยวกับความหมายและวิธีที่ความหมายช่วยในการไปยังส่วนต่างๆ ของหน้าด้วยโปรแกรมอ่านหน้าจอแล้ว คุณจะต้องมองหน้าเว็บที่สร้างในมุมมองใหม่ ในส่วนถัดไป เราจะย้อนกลับไปดูวิธีถ่ายทอดเค้าโครงทั้งหมดของหน้าเว็บโดยใช้ส่วนหัวและจุดสังเกตที่มีประสิทธิภาพ