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