ข้อมูลเบื้องต้นเกี่ยวกับแผนผังการช่วยเหลือพิเศษ
ลองจินตนาการว่าคุณกำลังสร้างอินเทอร์เฟซผู้ใช้สำหรับผู้ใช้โปรแกรมอ่านหน้าจอเท่านั้น ในส่วนนี้ คุณไม่จำเป็นต้องสร้าง UI แบบภาพเลย แต่เพียงให้ข้อมูลเพียงพอที่โปรแกรมอ่านหน้าจอจะใช้ได้
สิ่งที่คุณกำลังสร้างคือ API ประเภทหนึ่งที่อธิบายโครงสร้างหน้าเว็บ คล้ายกับ DOM API แต่คุณสามารถหลีกเลี่ยงได้ด้วยข้อมูลน้อยลงและโหนดน้อยลง เพราะข้อมูลจำนวนมากนั้นมีประโยชน์สำหรับการนำเสนอด้วยภาพเท่านั้น ซึ่งอาจมีลักษณะดังนี้
ซึ่งโดยพื้นฐานแล้วคือสิ่งที่เบราว์เซอร์แสดงต่อโปรแกรมอ่านหน้าจอ เบราว์เซอร์จะนำแผนผัง DOM มาแก้ไขให้อยู่ในรูปแบบที่เป็นประโยชน์ในการช่วยสนับสนุนเทคโนโลยี เราเรียกต้นไม้ที่แก้ไขแล้วนี้ว่าต้นไม้การช่วยเหลือพิเศษ
คุณอาจแสดงภาพแผนผังการช่วยเหลือพิเศษที่ดูคล้ายกับหน้าเว็บเก่าจากยุค 90 เช่น รูปภาพ 2-3 ลิงก์ ลิงก์จำนวนมาก อาจมีช่องข้อมูลและปุ่มต่างๆ
การสแกนหน้าลงแบบเห็นภาพเหมือนเคสนี้จะทำให้ประสบการณ์การใช้งานคล้ายกับที่ผู้ใช้โปรแกรมอ่านหน้าจอจะได้รับ อินเทอร์เฟซอยู่ในนั้น แต่เรียบง่ายและตรงไปตรงมา คล้ายๆ กับอินเทอร์เฟซโครงสร้างการช่วยเหลือพิเศษ
เทคโนโลยีความช่วยเหลือพิเศษส่วนใหญ่จะโต้ตอบกับแผนผังการช่วยเหลือพิเศษ ขั้นตอนมีดังนี้
- แอปพลิเคชัน (เบราว์เซอร์หรือแอปอื่นๆ) แสดง UI เวอร์ชันเชิงความหมายต่อเทคโนโลยีความช่วยเหลือพิเศษผ่าน API
- เทคโนโลยีความช่วยเหลือพิเศษอาจใช้ข้อมูลที่อ่านผ่าน API เพื่อสร้างการแสดงอินเทอร์เฟซผู้ใช้ทางเลือกให้แก่ผู้ใช้ เช่น โปรแกรมอ่านหน้าจอสร้างอินเทอร์เฟซที่ผู้ใช้จะได้ยินคำพูดเป็นตัวแทนของแอป
- เทคโนโลยีความช่วยเหลือพิเศษยังอาจช่วยให้ผู้ใช้โต้ตอบกับแอปด้วยวิธีอื่นได้อีกด้วย ตัวอย่างเช่น โปรแกรมอ่านหน้าจอส่วนใหญ่มีตะขอสำหรับให้ผู้ใช้จำลองการคลิกเมาส์หรือแตะนิ้วได้ง่ายๆ
- เทคโนโลยีความช่วยเหลือพิเศษจะถ่ายทอดความตั้งใจของผู้ใช้ (เช่น "คลิก") กลับไปยังแอปผ่าน API การช่วยเหลือพิเศษ จากนั้นแอปมีหน้าที่รับผิดชอบในการตีความการดําเนินการอย่างเหมาะสมในบริบทของ UI เดิม
สําหรับเว็บเบราว์เซอร์ จะมีขั้นตอนเพิ่มเติมในแต่ละทิศทาง เนื่องจากเบราว์เซอร์เป็นแพลตฟอร์มสําหรับเว็บแอปที่ทํางานภายใน เบราว์เซอร์จึงต้องแปลเว็บแอปเป็นแผนผังการช่วยเหลือพิเศษ และต้องตรวจสอบว่าเหตุการณ์ที่เหมาะสมเริ่มทำงานใน JavaScript โดยอิงตามการกระทำของผู้ใช้ที่มาจากเทคโนโลยีความช่วยเหลือพิเศษ
แต่ทั้งหมดนี้เป็นหน้าที่ของเบราว์เซอร์ งานของเราในฐานะนักพัฒนาเว็บคือตระหนักถึงการเปลี่ยนแปลงนี้ และสร้างหน้าเว็บที่ใช้ประโยชน์จากกระบวนการนี้เพื่อสร้างประสบการณ์ที่เข้าถึงได้ให้แก่ผู้ใช้
โดยตรวจสอบว่าเราแสดงความหมายของหน้าเว็บอย่างถูกต้อง กล่าวคือองค์ประกอบสำคัญในหน้ามีบทบาท สถานะ และพร็อพเพอร์ตี้ที่เข้าถึงได้ที่ถูกต้อง รวมถึงระบุชื่อและรายละเอียดที่เข้าถึงได้แล้ว จากนั้นเบราว์เซอร์จะอนุญาตให้เทคโนโลยีความช่วยเหลือพิเศษเข้าถึงข้อมูลดังกล่าวเพื่อสร้างประสบการณ์การใช้งานที่ปรับแต่งได้
ความหมายใน HTML แบบเนทีฟ
เบราว์เซอร์สามารถเปลี่ยนรูปแบบแผนผัง DOM เป็นแผนผังการช่วยเหลือพิเศษได้ เนื่องจาก DOM ส่วนใหญ่มีความหมายเชิงความหมายที่โดยนัย กล่าวคือ DOM ใช้องค์ประกอบ HTML เนทีฟที่เบราว์เซอร์รู้จักและทำงานบนแพลตฟอร์มต่างๆ ได้อย่างคาดการณ์ ระบบจึงจัดการการช่วยเหลือพิเศษสำหรับองค์ประกอบ HTML เดิม เช่น ลิงก์หรือปุ่ม โดยอัตโนมัติ เราใช้ประโยชน์จากการช่วยเหลือพิเศษในตัวนั้นได้ด้วยการเขียน HTML ที่แสดงความหมายขององค์ประกอบหน้าเว็บ
อย่างไรก็ตาม บางครั้งเราใช้องค์ประกอบที่ดูเหมือนองค์ประกอบของแพลตฟอร์มแต่ไม่ใช่ ตัวอย่างเช่น "ปุ่ม" นี้ไม่ใช่ปุ่มเลย
แท็กอาจสร้างขึ้นใน HTML ด้วยวิธีใดก็ตาม ด้านล่างนี้แสดงวิธีใดวิธีหนึ่งดังนี้
<div class="button-ish">Give me tacos</div>
เมื่อเราไม่ใช้องค์ประกอบปุ่มจริง โปรแกรมอ่านหน้าจอจะไม่ทราบสิ่งที่กำลังดูอยู่ นอกจากนี้ เรายังต้องทํางานเพิ่มเติมในการเพิ่ม tabbedindex เพื่อให้ผู้ใช้ที่ใช้แป้นพิมพ์เท่านั้นใช้งานได้ เนื่องจากตอนนี้มีการเขียนโค้ดไว้ให้ใช้กับเมาส์เท่านั้น
เราแก้ไขเรื่องนี้ได้ง่ายๆ โดยใช้องค์ประกอบ 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>
เมื่อติดป้ายกำกับช่องทําเครื่องหมายอย่างถูกต้องแล้ว โปรแกรมอ่านหน้าจอจะรายงานว่าองค์ประกอบมีบทบาทเป็นช่องทําเครื่องหมาย อยู่ในสถานะ "เลือกแล้ว" และมีชื่อว่า "รับข้อเสนอโปรโมชันไหม"
