คุณเคยหยุดสงสัยไหมว่าเทคโนโลยีความช่วยเหลือพิเศษ เช่น หน้าจอ ผู้ใช้ทราบว่าควรประกาศอะไรแก่ผู้ใช้บ้าง คำตอบคือเทคโนโลยีเหล่านี้ จะต้องให้นักพัฒนาซอฟต์แวร์มาร์กอัปหน้าเว็บของตนด้วย HTML เชิงความหมาย แต่ อรรถศาสตร์ และวิธีใช้งานโปรแกรมอ่านหน้าจอ
อภิปรายและความหมาย
ก่อนที่จะเจาะลึกในความหมายของคำ คุณควรเข้าใจอีกคำหนึ่งดังนี้ (affordance) การจ่ายค่าตอบแทนคือสิ่งของใดๆ ที่เสนอหรือจ่ายเงินแก่ผู้ใช้ ในการทำงาน ตัวอย่างสุดคลาสสิกคือกาน้ำชา
![](https://web.dev/static/articles/semantics-and-screen-readers/image/EXqR31Kq3mosH6jv6jiG.png?authuser=6&hl=th)
กาน้ำชานี้ไม่ต้องใช้คู่มือการใช้งาน แต่เป็นการออกแบบตัวผลิตภัณฑ์ สื่อให้ผู้ใช้ทราบว่าควรทำงานอย่างไร เพราะมีแฮนเดิล และเนื่องจาก ที่คุณเห็นวัตถุอื่นๆ บนโลกใบนี้ที่มีแฮนเดิลคล้ายคลึงกัน คุณสามารถอนุมานได้ว่า คุณควรหยิบขึ้นมาและเริ่มทำงาน
เมื่อเราสร้างอินเทอร์เฟซผู้ใช้แบบกราฟิก เราจะใช้สิ่งต่างๆ เช่น CSS ในการเพิ่มภาพ เงินที่จ่ายใช้สอยใน UI ของเรา ตัวอย่างเช่น คุณอาจทำให้ปุ่มมีเงาตกกระทบและ เส้นขอบเพื่อให้ดูคล้ายปุ่มจริงๆ ในโลกจริง
แต่หากผู้ใช้มองไม่เห็นหน้าจอ การปรับปรุงภาพเหล่านี้ ไม่ได้รับอนุญาตให้รับรู้ ดังนั้น คุณต้องตรวจสอบว่า UI ของคุณ สร้างขึ้นในลักษณะที่สามารถถ่ายทอดความเป็นไปได้เดียวกันนี้เพื่อช่วยอำนวยความสะดวก เทคโนโลยี การแสดงค่าใช้จ่ายขององค์ประกอบ UI ที่ไม่มีภาพนี้เรียกว่า ความหมายของมัน
ใช้ HTML เชิงความหมาย
วิธีที่ง่ายที่สุดในการถ่ายทอดความหมายที่ถูกต้องคือการใช้ HTML ที่มีความหมาย จากองค์ประกอบเหล่านี้
การใช้ CSS เป็นไปได้
เพื่อจัดรูปแบบองค์ประกอบ <div>
และ <button>
เพื่อให้องค์ประกอบภาพเหมือนกัน
แต่การใช้งานทั้ง 2 แบบแตกต่างกันมากเมื่อใช้โปรแกรมอ่านหน้าจอ
<div>
เป็นเพียงองค์ประกอบในการจัดกลุ่มทั่วไป
เพื่อให้โปรแกรมอ่านหน้าจออ่านเฉพาะเนื้อหาข้อความของ <div>
<button>
ประกาศว่าเป็น "ปุ่ม"
เป็นสัญญาณที่ชัดเจนยิ่งขึ้นแก่ผู้ใช้ว่าเป็นสิ่งที่พวกเขาสามารถโต้ตอบด้วยได้
ที่ง่ายที่สุด
และมักจะเป็นทางออกที่ดีที่สุดสำหรับปัญหานี้
คือการหลีกเลี่ยงการควบคุมแบบอินเทอร์แอกทีฟที่กำหนดเองโดยสิ้นเชิง
เช่น แทนที่ <div>
ที่ทำงานเหมือนปุ่ม
ด้วย <button>
จริง
สมบัติทางความหมายและโครงสร้างการช่วยเหลือพิเศษ
กล่าวโดยทั่วไปคือ องค์ประกอบ HTML ทุกองค์ประกอบจะมีความหมายบางอย่างดังต่อไปนี้ พร็อพเพอร์ตี้:
- บทบาทหรือประเภท
- ชื่อ
- ค่า (ไม่บังคับ)
- รัฐ (ไม่บังคับ)
บทบาทขององค์ประกอบจะอธิบายประเภท เช่น "ปุ่ม" "input" หรือแม้กระทั่ง
"กลุ่ม" สำหรับสิ่งต่างๆ เช่น div
และ span
ชื่อขององค์ประกอบคือป้ายกำกับที่คำนวณได้ โปรแกรมอ่านหน้าจอมักจะอ่านออกเสียง
ชื่อองค์ประกอบตามด้วยบทบาท เช่น "ปุ่มลงชื่อสมัครใช้" อัลกอริทึม
ซึ่งกำหนดปัจจัยชื่อขององค์ประกอบต่างๆ เช่น มีข้อความ
เนื้อหาภายในองค์ประกอบ ไม่ว่าจะมีแอตทริบิวต์อย่าง title
หรือไม่
หรือ placeholder
ว่าองค์ประกอบนั้นเชื่อมโยงกับแท็ก
<label>
และหากองค์ประกอบมีแอตทริบิวต์ ARIA เช่น
aria-label
และ aria-labelledby
องค์ประกอบบางอย่างอาจมีค่า ตัวอย่างเช่น <input type="text">
อาจ
มีค่าที่แสดงสิ่งที่ผู้ใช้พิมพ์ในช่องข้อความ
องค์ประกอบบางอย่างอาจมีสถานะด้วย ซึ่งแสดงถึงสถานะปัจจุบันขององค์ประกอบ
ตัวอย่างเช่น องค์ประกอบ <select>
อาจเป็นแบบขยายหรือ
สถานะยุบ ขึ้นอยู่กับว่าเปิดหรือปิดอยู่
แผนผังการช่วยเหลือพิเศษ
สำหรับแต่ละโหนดใน DOM เบราว์เซอร์จะพิจารณาว่า โหนด "น่าสนใจ" ในเชิงความหมาย แล้วเพิ่มลงในการช่วยเหลือพิเศษ ต้นไม้ เมื่อเทคโนโลยีความช่วยเหลือพิเศษ เช่น โปรแกรมอ่านหน้าจอมี UI ทางเลือก ต่อผู้ใช้ ก็มักจะทำด้วยการเดินโครงสร้างการช่วยเหลือพิเศษนี้
เมื่อใช้เครื่องมือสำหรับนักพัฒนาเว็บของ Chrome คุณจะตรวจสอบความหมายขององค์ประกอบต่างๆ ได้ พร็อพเพอร์ตี้ และสำรวจตำแหน่งของโฆษณาในแผนผังการช่วยเหลือพิเศษ
ขั้นตอนถัดไป
เมื่อคุณเข้าใจความหมายของคำ และวิธีที่เครื่องมือเหล่านี้ช่วยนำทางด้วยโปรแกรมอ่านหน้าจอแล้ว คุณก็ต้องดูคนละหน้ากับหน้าที่คุณสร้าง ในส่วนถัดไป เราจะถอยหลังกลับไปหนึ่งก้าว และพิจารณาว่าโครงร่างทั้งหมดของหน้าเว็บ ถ่ายทอดโดยใช้ส่วนหัวและจุดสังเกตที่มีประสิทธิภาพ