การซ่อนเนื้อหาจากเทคโนโลยีความช่วยเหลือพิเศษ
ซ่อน ARIA
เทคนิคสำคัญอีกอย่างในการปรับแต่งประสบการณ์แบบอำนวยความสะดวก ผู้ใช้เทคโนโลยีต่างๆ ในการตรวจสอบว่า มีเฉพาะส่วนที่เกี่ยวข้องของหน้าเว็บ ต้องเผชิญกับเทคโนโลยีความช่วยเหลือพิเศษ มีหลายวิธีที่จะทำให้มั่นใจได้ว่าส่วน ของ 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
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
และผู้ใช้
ใช้ตัวควบคุมขั้นตอนเพื่อเปลี่ยนค่าของเฉพาะเดือน เนื้อหาทั้งหมด
ของวิดเจ็ตวันที่จะอ่านออกเสียงอีกครั้ง ค่าของ aria-atomic
อาจเป็น true
หรือ false
(ค่าเริ่มต้น)
aria-relevant
จะระบุประเภทการเปลี่ยนแปลงที่ควรแสดงต่อผู้ใช้
ทั้งนี้ มีตัวเลือกบางรายการที่ใช้แยกต่างหากหรือเป็นรายการโทเค็นได้
- การเพิ่ม หมายความว่าองค์ประกอบใดๆ ที่ถูกเพิ่มลงในพื้นที่ที่มีการเผยแพร่อยู่นั้น
มีนัยสำคัญ ตัวอย่างเช่น การเพิ่มระยะเวลาต่อท้ายบันทึกสถานะที่มีอยู่
ข้อความจะหมายถึงระยะเวลาที่มีการประกาศแก่ผู้ใช้ (โดยสมมติว่า
aria-atomic
นั้นคือfalse
) - text ซึ่งหมายความว่าเนื้อหาข้อความที่เพิ่มลงในโหนดสืบทอดใดก็ตามจะ
ที่เกี่ยวข้อง เช่น การแก้ไขพร็อพเพอร์ตี้
textContent
ของฟิลด์ข้อความที่กําหนดเอง จะอ่านข้อความที่แก้ไขแล้วให้แก่ผู้ใช้ - removals หมายความว่า การนำข้อความหรือโหนดสืบทอดออกควร แสดงต่อผู้ใช้
- all ซึ่งหมายความว่าการเปลี่ยนแปลงทั้งหมดมีความเกี่ยวข้อง อย่างไรก็ตาม ค่าเริ่มต้นของ
aria-relevant
เท่ากับadditions text
ซึ่งหมายความว่าหากคุณไม่ระบุaria-relevant
ระบบจะอัปเดตผู้ใช้สำหรับการเพิ่มองค์ประกอบ นั่นคือสิ่งที่คุณต้องการมากที่สุด
สุดท้าย aria-busy
ให้คุณแจ้งเทคโนโลยีความช่วยเหลือพิเศษที่ควร
เพิกเฉยต่อการเปลี่ยนแปลงองค์ประกอบชั่วคราว เช่น เมื่อโหลดสิ่งต่างๆ ครั้งเดียว
ทุกอย่างพร้อมแล้ว ควรตั้งค่า aria-busy
เป็น "เท็จ" เพื่อทำให้ฟังก์ชันเป็นปกติ
การทำงานของผู้อ่าน