ข้อมูลเบื้องต้นเกี่ยวกับแผนผังการช่วยเหลือพิเศษ
สมมติว่าคุณกำลังสร้างอินเทอร์เฟซผู้ใช้สำหรับผู้ใช้โปรแกรมอ่านหน้าจอเท่านั้น คุณไม่จำเป็นต้องสร้าง UI ภาพใดๆ เลย แต่แค่ระบุให้เพียงพอ ให้โปรแกรมอ่านหน้าจอใช้
สิ่งที่คุณจะสร้างคือ API ชนิดหนึ่งที่อธิบายโครงสร้างหน้าเว็บ กับ DOM API แต่คุณสามารถ ประหยัดได้เพราะข้อมูลน้อยลง และมีจำนวนโหนดน้อยลง เพราะข้อมูลจำนวนมากนั้น มีประโยชน์สำหรับการนำเสนอด้วยภาพเท่านั้น ทั้งนี้ อาจมีลักษณะประมาณนี้
โดยพื้นฐานแล้ว เบราว์เซอร์จะแสดงต่อโปรแกรมอ่านหน้าจอ จะใช้แผนผัง DOM และแก้ไขให้อยู่ในรูปแบบที่เป็นประโยชน์ เทคโนโลยีความช่วยเหลือพิเศษ เราเรียกโครงสร้างที่แก้ไขนี้ว่า การเข้าถึง ต้นไม้
คุณอาจแสดงภาพแผนผังการช่วยเหลือพิเศษที่ดูคล้ายกับหน้าเว็บเก่า จากยุค 90: รูปภาพ 2-3 รูป ลิงก์จำนวนมาก อาจเป็นช่องข้อมูลและปุ่ม
การสแกนหน้าลงแบบเห็นภาพเหมือนกรณีนี้จะให้ประสบการณ์ที่คล้ายกับ สิ่งที่ผู้ใช้โปรแกรมอ่านหน้าจอจะได้รับ อินเทอร์เฟซมีอินเทอร์เฟซที่เรียบง่าย และโดยตรง คล้ายๆ กับอินเทอร์เฟซโครงสร้างการช่วยเหลือพิเศษ
แผนผังการช่วยเหลือพิเศษคือสิ่งที่เทคโนโลยีความช่วยเหลือพิเศษส่วนใหญ่โต้ตอบด้วย จะมีขั้นตอนดังนี้
- แอปพลิเคชัน (เบราว์เซอร์หรือแอปอื่นๆ) แสดงเวอร์ชันเชิงอรรถศาสตร์ UI สำหรับเทคโนโลยีความช่วยเหลือพิเศษผ่าน API
- เทคโนโลยีความช่วยเหลือพิเศษอาจใช้ข้อมูลที่อ่านผ่าน API เพื่อ สร้างการนำเสนออินเทอร์เฟซผู้ใช้ทางเลือกสำหรับผู้ใช้ ตัวอย่างเช่น โปรแกรมอ่านหน้าจอสร้างอินเทอร์เฟซที่ผู้ใช้ได้ยินเสียงพูด ที่บ่งบอกถึงแอปนั้น
- เทคโนโลยีความช่วยเหลือพิเศษยังอาจช่วยให้ ผู้ใช้โต้ตอบกับแอปได้ใน วิธีอื่น ตัวอย่างเช่น โปรแกรมอ่านหน้าจอส่วนใหญ่มีฮุกเพื่อให้ ผู้ใช้สามารถจำลองการคลิกด้วยเมาส์หรือการแตะด้วยนิ้วได้อย่างง่ายดาย
- เทคโนโลยีความช่วยเหลือพิเศษจะถ่ายทอดความตั้งใจของผู้ใช้ (เช่น "คลิก") กลับไปที่ แอปผ่าน API การช่วยเหลือพิเศษ จากนั้นแอปก็จะมีหน้าที่ ตีความการดำเนินการได้อย่างเหมาะสมในบริบทของ UI เดิม
สำหรับเว็บเบราว์เซอร์ จะมีขั้นตอนเพิ่มเติมในแต่ละทิศทาง เนื่องจากเบราว์เซอร์ ที่จริงแล้วเป็นแพลตฟอร์มสำหรับเว็บแอปพลิเคชันที่ทำงานภายในแพลตฟอร์ม เบราว์เซอร์จึงต้อง แปลเว็บแอปเป็นแผนผังการช่วยเหลือพิเศษ และต้องตรวจสอบว่า เหตุการณ์ที่เหมาะสมจะเริ่มทำงานใน JavaScript ตามการดำเนินการของผู้ใช้ที่เกิดขึ้น จากเทคโนโลยีความช่วยเหลือพิเศษ
แต่ทั้งหมดนี้เป็นความรับผิดชอบของเบราว์เซอร์ หน้าที่ของเราในฐานะนักพัฒนาเว็บ ตระหนักว่าปัญหานี้กำลังเกิดขึ้น และพัฒนาหน้าเว็บที่ใช้ประโยชน์จาก ของกระบวนการนี้เพื่อสร้างประสบการณ์ที่เข้าถึงได้ง่ายสำหรับผู้ใช้
เราดำเนินการดังกล่าวโดยตรวจสอบว่าได้แสดงความหมายของหน้าเว็บอย่างถูกต้อง ดังนี้ ให้ตรวจดูว่าองค์ประกอบสำคัญในหน้ามีรายการที่เข้าถึงได้ที่ถูกต้อง บทบาท สถานะ และคุณสมบัติ และเราระบุชื่อที่เข้าถึงได้และ คำอธิบาย จากนั้นเบราว์เซอร์จะยอมให้เทคโนโลยีความช่วยเหลือพิเศษเข้าถึงข้อมูลต่อไปนี้ เพื่อสร้างประสบการณ์ที่กำหนดเอง
ความหมายใน HTML แบบเนทีฟ
เบราว์เซอร์สามารถแปลงแผนผัง DOM เป็นแผนผังการช่วยเหลือพิเศษเนื่องจาก DOM มีความหมายโดยนัย นั่นคือ DOM ใช้ HTML แบบเนทีฟ ที่เบราว์เซอร์รู้จักและคาดเดาการทำงานได้บน ใหม่ องค์ประกอบ HTML ในตัว เช่น ลิงก์หรือปุ่ม สามารถเข้าถึงได้ง่ายสำหรับองค์ประกอบ HTML ที่มีอยู่ จึงได้รับการจัดการโดยอัตโนมัติ เราสามารถใช้ประโยชน์จาก การช่วยเหลือพิเศษ โดยการเขียน HTML ที่แสดงความหมายขององค์ประกอบหน้าเว็บของเรา
อย่างไรก็ตาม บางครั้งเราใช้องค์ประกอบที่ดูเหมือนองค์ประกอบเนทีฟแต่กลับไม่เป็นเช่นนั้น ตัวอย่างเช่น "ปุ่ม" นี้ ไม่เป็นปุ่มเลย
ไฟล์อาจสร้างขึ้นใน HTML ด้วยวิธีใดก็ตาม แสดงเพียงเส้นทางเดียวด้านล่าง
<div class="button-ish">Give me tacos</div>
เมื่อเราไม่ได้ใช้องค์ประกอบปุ่มจริง โปรแกรมอ่านหน้าจอจะไม่มีทางรู้ว่า สิ่งที่เกิดขึ้น นอกจากนี้ เราคงต้องเพิ่มภาระงานเพิ่ม Tabindex ใช้งานได้สำหรับผู้ใช้ที่ใช้แป้นพิมพ์เท่านั้น เนื่องจากขณะนี้โค้ดดังกล่าวใช้ได้เฉพาะเมื่อ ด้วยเมาส์
เราแก้ไขปัญหานี้ได้ง่ายๆ โดยใช้องค์ประกอบ button ปกติแทน div
การใช้องค์ประกอบเนทีฟยังได้ประโยชน์จากการดูแลแป้นพิมพ์
การโต้ตอบของเรา และอย่าลืมว่าคุณไม่จำเป็นต้องสูญเสียภาพที่สดใส
เพียงเพราะใช้องค์ประกอบเนทีฟ จะได้จัดสไตล์องค์ประกอบ
เนทีฟ
ทำให้ผลการค้นหามีลักษณะในแบบที่คุณต้องการและยังคงความหมายโดยนัยและ
พฤติกรรมของคุณ
ก่อนหน้านี้ เราสังเกตเห็นว่าโปรแกรมอ่านหน้าจอจะประกาศบทบาท ชื่อ และองค์ประกอบ สถานะ และค่า ใช้องค์ประกอบทางความหมาย บทบาท สถานะ และค่าที่ถูกต้อง จะต้องครอบคลุม แต่เราต้องตรวจสอบด้วยว่าได้ตั้งชื่อองค์ประกอบแล้ว ค้นพบได้
ชื่อโดยทั่วไปมีด้วยกัน 2 ประเภท ได้แก่
- ป้ายกำกับที่มองเห็นได้ ซึ่งใช้โดยผู้ใช้ทั้งหมดเพื่อเชื่อมโยงความหมายกับ องค์ประกอบ และ
- ข้อความสำรอง ซึ่งจะใช้เมื่อไม่จำเป็นต้องมีภาพเท่านั้น ป้ายกำกับ
สำหรับองค์ประกอบระดับข้อความ เราไม่ต้องทำอะไรเลย เพราะตามคำจำกัดความแล้ว จะมีเนื้อหาที่เป็นข้อความ แต่สำหรับองค์ประกอบอินพุตหรือการควบคุม และ เนื้อหาอย่างรูปภาพ เราจำเป็นต้องระบุชื่อด้วย ในความเป็นจริงแล้ว การให้ข้อความสำรองสำหรับเนื้อหาที่ไม่ใช่ข้อความ รายการแรกในรายการตรวจสอบ WebAIM
วิธีหนึ่งที่ทำได้คือทําตามคําแนะนําที่ "ข้อมูลในฟอร์ม ที่เกี่ยวข้อง" การเชื่อมโยงป้ายกำกับกับแบบฟอร์มทำได้ 2 วิธี เช่น ช่องทำเครื่องหมาย วิธีการใดวิธีการหนึ่งจะทำให้ข้อความของป้ายกำกับ เป็นเป้าหมายการคลิกสำหรับช่องทำเครื่องหมาย ซึ่งจะเป็นประโยชน์สำหรับเมาส์หรือ ผู้ใช้หน้าจอสัมผัส หากต้องการเชื่อมโยงป้ายกำกับกับองค์ประกอบ ให้ทำดังนี้
- วางองค์ประกอบอินพุตไว้ในองค์ประกอบป้ายกำกับ
<label>
<input type="checkbox">Receive promotional offers?
</label>
หรือ
- ใช้แอตทริบิวต์
forของป้ายกำกับและอ้างอิงถึงidขององค์ประกอบ
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
เมื่อช่องทำเครื่องหมายติดป้ายกำกับอย่างถูกต้องแล้ว โปรแกรมอ่านหน้าจอจะรายงานว่า องค์ประกอบมีบทบาทของช่องทำเครื่องหมาย อยู่ในสถานะที่ทำเครื่องหมายแล้ว และมีชื่อว่า "รับ ข้อเสนอโปรโมชัน"
