การซ่อนเนื้อหาจากเทคโนโลยีความช่วยเหลือพิเศษ
aria-hidden
เทคนิคสำคัญอีกอย่างในการปรับแต่งประสบการณ์สำหรับผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษคือการทำให้เทคโนโลยีความช่วยเหลือพิเศษเห็นเฉพาะส่วนที่เกี่ยวข้องของหน้าเท่านั้น มีหลายวิธีในการตรวจสอบว่าส่วนของ DOM ไม่ได้ถูกเปิดเผยกับ API การช่วยเหลือพิเศษ
อย่างแรก สิ่งที่ซ่อนจาก DOM อย่างชัดเจนจะไม่รวมอยู่ในโครงสร้างการช่วยเหลือพิเศษเช่นกัน ดังนั้นทุกอย่างที่มีรูปแบบ CSS เป็น visibility:
hidden
หรือ display: none
หรือใช้แอตทริบิวต์ HTML5 hidden
จะถูกซ่อนจากผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษด้วย
อย่างไรก็ตาม องค์ประกอบที่ไม่แสดงด้วยภาพแต่ไม่ได้ซ่อนอย่างชัดเจนจะยังคงอยู่ในโครงสร้างการช่วยเหลือพิเศษ เทคนิคหนึ่งที่ใช้กันทั่วไปคือการใส่ "ข้อความสำหรับโปรแกรมอ่านหน้าจอเท่านั้น" ไว้ในองค์ประกอบที่อยู่ในตำแหน่งสัมบูรณ์นอกหน้าจอ
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
นอกจากนี้ ยังเห็นแล้วว่าโปรแกรมอ่านหน้าจอสามารถส่งเฉพาะข้อความผ่านแอตทริบิวต์ aria-label
, aria-labelledby
หรือ aria-describedby
ที่อ้างอิงองค์ประกอบที่ซ่อนอยู่ได้
ดูบทความ WebAIM นี้เกี่ยวกับเทคนิคการซ่อนข้อความสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการสร้างข้อความ "โปรแกรมอ่านหน้าจอเท่านั้น"
สุดท้าย ARIA มีกลไกในการยกเว้นเนื้อหาจากเทคโนโลยีความช่วยเหลือพิเศษที่ไม่ได้ซ่อนภาพไว้โดยใช้แอตทริบิวต์ aria-hidden
การใช้แอตทริบิวต์นี้กับองค์ประกอบจะนำแอตทริบิวต์และองค์ประกอบสืบทอดทั้งหมดออกจากแผนผังการช่วยเหลือพิเศษได้อย่างมีประสิทธิภาพ ข้อยกเว้นเพียงอย่างเดียวคือองค์ประกอบ
ที่กล่าวถึงโดยแอตทริบิวต์ aria-labelledby
หรือ aria-describedby
<div class="deck">
<div class="slide" aria-hidden="true">
Sales Targets
</div>
<div class="slide">
Quarterly Sales
</div>
<div class="slide" aria-hidden="true">
Action Items
</div>
</div>
ตัวอย่างเช่น คุณอาจใช้ aria-hidden
หากคุณกำลังสร้าง UI โมดัลบางอย่างที่บล็อกการเข้าถึงหน้าหลัก ในกรณีนี้ ผู้ใช้ที่มองเห็นอาจจะเห็นการวางซ้อนกึ่งโปร่งใสที่ระบุว่าไม่สามารถใช้หน้าเว็บส่วนใหญ่ได้ในขณะนี้ แต่ผู้ใช้โปรแกรมอ่านหน้าจออาจยังสำรวจส่วนอื่นๆ ของหน้าเว็บได้ ในกรณีนี้ เช่นเดียวกับการสร้างกับดักแป้นพิมพ์ที่อธิบายไปก่อนหน้านี้ คุณต้องตรวจสอบว่าส่วนต่างๆ ของหน้าเว็บที่ไม่ได้อยู่ในขอบเขตนั้นรวมถึง aria-hidden
ด้วย
ตอนนี้คุณเข้าใจพื้นฐานของ ARIA รวมถึงวิธีการเล่นกับความหมายของ HTML แบบเนทีฟและวิธีใช้งานในการผ่าตัดที่สำคัญค่อนข้างใหญ่ในโครงสร้างการช่วยเหลือพิเศษ รวมถึงการเปลี่ยนความหมายขององค์ประกอบเดียวแล้ว มาดูกันว่าเราจะใช้องค์ประกอบดังกล่าวเพื่อสื่อถึงข้อมูลที่ขึ้นอยู่กับเวลาได้อย่างไร
aria-live
aria-live
ให้นักพัฒนาซอฟต์แวร์ทำเครื่องหมายส่วนหนึ่งของหน้าเว็บเป็น "เผยแพร่อยู่" ในลักษณะที่ว่าควรแจ้งให้ผู้ใช้ทราบทันทีโดยไม่คำนึงถึงตำแหน่งของหน้า ไม่ใช่ในกรณีที่ผู้ใช้เพิ่งสำรวจส่วนนั้นของหน้าไป เมื่อองค์ประกอบมีแอตทริบิวต์ aria-live
ส่วนของหน้าที่มีองค์ประกอบนั้นและองค์ประกอบสืบทอดจะเรียกว่าภูมิภาคที่เผยแพร่อยู่
เช่น ภูมิภาคที่เผยแพร่อยู่อาจเป็นข้อความสถานะที่ปรากฏขึ้นจากการดำเนินการของผู้ใช้ หากข้อความสำคัญพอที่จะดึงดูดความสนใจของผู้ใช้ที่เห็น ก็สำคัญพอที่จะดึงดูดความสนใจของผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษด้วยการตั้งค่าแอตทริบิวต์ aria-live
เปรียบเทียบ div
ธรรมดานี้
<div class="status">Your message has been sent.</div>
กับรูปแบบที่ "สด"
<div class="status" aria-live="polite">Your message has been sent.</div>
aria-live
มีค่าที่อนุญาต 3 ค่า ได้แก่ polite
, assertive
และ off
aria-live="polite"
จะบอกให้เทคโนโลยีความช่วยเหลือพิเศษแจ้งเตือนผู้ใช้เกี่ยวกับการเปลี่ยนแปลงนี้เมื่อดำเนินการเสร็จสิ้น กรณีที่มีสิ่งที่สำคัญแต่ไม่เร่งด่วนและมักเป็นผลดีต่อaria-live
การใช้งานส่วนใหญ่aria-live="assertive"
จะบอกให้เทคโนโลยีความช่วยเหลือพิเศษรบกวนสิ่งที่กำลังทำอยู่และแจ้งเตือนผู้ใช้เกี่ยวกับการเปลี่ยนแปลงนี้ทันที อีเมลนี้ใช้เพื่ออัปเดตที่สำคัญและเร่งด่วนเท่านั้น เช่น ข้อความสถานะเช่น "มีข้อผิดพลาดเกี่ยวกับเซิร์ฟเวอร์และระบบไม่ได้บันทึกการเปลี่ยนแปลงของคุณ โปรดรีเฟรชหน้านี้" หรือการอัปเดตช่องป้อนข้อมูลอันเป็นผลจากการดำเนินการของผู้ใช้โดยตรง เช่น ปุ่มในวิดเจ็ต Stepperaria-live="off"
บอกให้เทคโนโลยีความช่วยเหลือพิเศษระงับ การรบกวนaria-live
ชั่วคราว
เรามีกลเม็ดเคล็ดลับในการตรวจสอบว่าภูมิภาคที่เผยแพร่อยู่ทำงานอย่างถูกต้อง
ก่อนอื่น คุณควรตั้งค่าภูมิภาค aria-live
ในการโหลดหน้าเว็บเริ่มต้น
นี่ไม่ใช่กฎเกณฑ์ตายตัว แต่หากคุณพบปัญหากับภูมิภาค aria-live
นี่อาจเป็นปัญหา
อย่างที่ 2 โปรแกรมอ่านหน้าจอแต่ละแบบจะตอบสนองต่างกัน
ต่อการเปลี่ยนแปลงแต่ละประเภท เช่น คุณอาจทริกเกอร์การแจ้งเตือนในโปรแกรมอ่านหน้าจอบางโปรแกรมได้โดยสลับรูปแบบ hidden
ขององค์ประกอบสืบทอดจากจริงเป็นเท็จ
แอตทริบิวต์อื่นๆ ที่ทำงานร่วมกับ aria-live
ได้จะช่วยให้คุณปรับแต่งสิ่งที่สื่อสารกับผู้ใช้ได้เมื่อภูมิภาคที่เผยแพร่อยู่มีการเปลี่ยนแปลง
aria-atomic
จะระบุว่าทั้งภูมิภาคควรได้รับการพิจารณาเป็นทั้งภูมิภาคเมื่อสื่อสารอัปเดตหรือไม่ ตัวอย่างเช่น หากวิดเจ็ตวันที่ที่ประกอบด้วยวัน เดือน และปีมี aria-live=true
และ aria-atomic=true
และผู้ใช้ใช้ตัวควบคุมแบบ Stepper เพื่อเปลี่ยนค่าเฉพาะเดือน ระบบจะอ่านเนื้อหาทั้งหมดของวิดเจ็ตวันที่อีกครั้ง ค่าของ aria-atomic
อาจเป็น true
หรือ false
(ค่าเริ่มต้น)
aria-relevant
จะระบุประเภทของการเปลี่ยนแปลงที่ควรแสดงต่อผู้ใช้
มีตัวเลือกบางอย่างที่ใช้แยกต่างหากหรือใช้เป็นรายการโทเค็นได้
- การเพิ่ม ซึ่งหมายความว่าองค์ประกอบใดก็ตามที่เพิ่มลงในภูมิภาคที่เผยแพร่อยู่จะมีนัยสำคัญ ตัวอย่างเช่น การเพิ่มสแปนต่อท้ายบันทึกที่มีอยู่ของข้อความสถานะหมายความว่าจะมีการประกาศระยะเวลาแก่ผู้ใช้ (สมมติว่า
aria-atomic
คือfalse
) - text หมายความว่าเนื้อหาข้อความที่เพิ่มลงในโหนดสืบทอดมาจะมีความเกี่ยวข้อง เช่น การแก้ไขพร็อพเพอร์ตี้
textContent
ของช่องข้อความที่กำหนดเองจะอ่านข้อความที่แก้ไขต่อผู้ใช้ - removals กล่าวคือ จะต้องมีการแจ้งผู้ใช้ถึงการนำข้อความหรือโหนดที่สืบทอดมาออก
- all หมายความว่าการเปลี่ยนแปลงทั้งหมดมีความเกี่ยวข้อง อย่างไรก็ตาม ค่าเริ่มต้นของ
aria-relevant
คือadditions text
ซึ่งหมายความว่าหากคุณไม่ระบุaria-relevant
ระบบจะอัปเดตผู้ใช้เมื่อมีการเพิ่มองค์ประกอบ ซึ่งเป็นสิ่งที่คุณน่าจะต้องการมากที่สุด
สุดท้าย aria-busy
ให้คุณแจ้งเตือนเทคโนโลยีความช่วยเหลือพิเศษว่าควรเพิกเฉยต่อการเปลี่ยนแปลงองค์ประกอบเป็นการชั่วคราว เช่น เมื่อมีการโหลดสิ่งต่างๆ เมื่อทุกอย่างพร้อมแล้ว ควรตั้งค่า aria-busy
เป็น "เท็จ" เพื่อทำให้การดำเนินการของผู้อ่านเป็นปกติ