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

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

อลิซ บ็อกซ์ฮอลล์

เดฟ แกช

Meggin Kearney

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