ความหมายและโปรแกรมอ่านหน้าจอ

ร็อบ ดอดสัน

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

ขั้นตอนถัดไป

เมื่อคุณทราบข้อมูลเกี่ยวกับความหมายและวิธีการที่เครื่องมือช่วยนำทางด้วยโปรแกรมอ่านหน้าจอมากขึ้นแล้ว คุณก็อดไม่ได้ที่จะดูหน้าที่คุณสร้างต่างไปจากเดิม ในส่วนถัดไป เราจะมองย้อนกลับไปและพิจารณาว่าโครงร่างทั้งหมดของหน้าจะสื่อออกมาได้อย่างไรโดยใช้ส่วนหัวและจุดสังเกตที่มีประสิทธิภาพ