คุณเคยหยุดสงสัยไหมว่าเทคโนโลยีความช่วยเหลือพิเศษ เช่น หน้าจอ ผู้ใช้ทราบว่าควรประกาศอะไรแก่ผู้ใช้บ้าง คำตอบคือเทคโนโลยีเหล่านี้ จะต้องให้นักพัฒนาซอฟต์แวร์มาร์กอัปหน้าเว็บของตนด้วย HTML เชิงความหมาย แต่ อรรถศาสตร์ และวิธีใช้งานโปรแกรมอ่านหน้าจอ
อภิปรายและความหมาย
ก่อนที่จะเจาะลึกในความหมายของคำ คุณควรเข้าใจอีกคำหนึ่งดังนี้ (affordance) การจ่ายค่าตอบแทนคือสิ่งของใดๆ ที่เสนอหรือจ่ายเงินแก่ผู้ใช้ ในการทำงาน ตัวอย่างสุดคลาสสิกคือกาน้ำชา
กาน้ำชานี้ไม่ต้องใช้คู่มือการใช้งาน แต่เป็นการออกแบบตัวผลิตภัณฑ์ สื่อให้ผู้ใช้ทราบว่าควรทำงานอย่างไร เพราะมีแฮนเดิล และเนื่องจาก ที่คุณเห็นวัตถุอื่นๆ บนโลกใบนี้ที่มีแฮนเดิลคล้ายคลึงกัน คุณสามารถอนุมานได้ว่า คุณควรหยิบขึ้นมาและเริ่มทำงาน
เมื่อเราสร้างอินเทอร์เฟซผู้ใช้แบบกราฟิก เราจะใช้สิ่งต่างๆ เช่น 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 คุณจะตรวจสอบความหมายขององค์ประกอบต่างๆ ได้ พร็อพเพอร์ตี้ และสำรวจตำแหน่งของโฆษณาในแผนผังการช่วยเหลือพิเศษ
ขั้นตอนถัดไป
เมื่อคุณเข้าใจความหมายของคำ และวิธีที่เครื่องมือเหล่านี้ช่วยนำทางด้วยโปรแกรมอ่านหน้าจอแล้ว คุณก็ต้องดูคนละหน้ากับหน้าที่คุณสร้าง ในส่วนถัดไป เราจะถอยหลังกลับไปหนึ่งก้าว และพิจารณาว่าโครงร่างทั้งหมดของหน้าเว็บ ถ่ายทอดโดยใช้ส่วนหัวและจุดสังเกตที่มีประสิทธิภาพ