การซ่อนและการอัปเดตเนื้อหา

การซ่อนเนื้อหาจากเทคโนโลยีความช่วยเหลือพิเศษ

Alice Boxhall

Dave Gash

Meggin Kearney

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