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