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