การใช้ป้ายกำกับ ARIA เพื่อสร้างคำอธิบายองค์ประกอบที่เข้าถึงได้
ป้ายกำกับ
ARIA มีกลไกหลายอย่างในการเพิ่มป้ายกำกับและคำอธิบายให้กับองค์ประกอบ อันที่จริง ARIA เป็นเพียงวิธีเดียวในการเพิ่มความช่วยเหลือหรือข้อความอธิบายที่เข้าถึงได้ มาดูพร็อพเพอร์ตี้ที่ ARIA ใช้ในการสร้างป้ายกำกับการช่วยเหลือพิเศษกัน
ป้ายกำกับ ARIA
aria-label
ช่วยให้เราระบุสตริงที่จะใช้เป็นป้ายกำกับที่เข้าถึงได้
ซึ่งจะลบล้างกลไกการติดป้ายกำกับแบบเนทีฟอื่นๆ เช่น องค์ประกอบ label
เช่น หาก button
มีทั้งเนื้อหาข้อความและ aria-label
ระบบจะใช้เฉพาะค่า aria-label
เท่านั้น
คุณอาจใช้แอตทริบิวต์ aria-label
เมื่อมีสิ่งที่บ่งชี้ภาพได้เกี่ยวกับวัตถุประสงค์ขององค์ประกอบ เช่น ปุ่มที่ใช้กราฟิกแทนข้อความ แต่ยังต้องอธิบายวัตถุประสงค์ดังกล่าวสำหรับผู้ที่ไม่สามารถเข้าถึงตัวบ่งชี้ด้วยภาพได้ เช่น ปุ่มที่ใช้เพียงรูปภาพเพื่อระบุวัตถุประสงค์ขององค์ประกอบนั้น
ARIA-labelledby
aria-labelledby
ช่วยให้เราระบุรหัสขององค์ประกอบอื่นใน DOM เป็นป้ายกำกับขององค์ประกอบได้
วิธีนี้คล้ายกับการใช้องค์ประกอบ label
โดยมีความแตกต่างที่สำคัญบางอย่าง
aria-labelledby
อาจใช้ในองค์ประกอบใดก็ได้ ไม่ใช่แค่องค์ประกอบที่ติดป้ายกำกับได้- แม้ว่าองค์ประกอบ
label
จะหมายถึงสิ่งที่ติดป้ายกำกับ แต่ความสัมพันธ์จะย้อนกลับในกรณีของaria-labelledby
โดยสิ่งที่ติดป้ายกำกับจะหมายถึงสิ่งที่ติดป้ายกำกับ - เชื่อมโยงองค์ประกอบป้ายกำกับได้เพียงรายการเดียวกับองค์ประกอบที่ติดป้ายกำกับได้ แต่
aria-labelledby
สามารถรวบรวมรายการ IDREF เพื่อสร้างป้ายกำกับจากหลายองค์ประกอบได้ ป้ายกำกับจะต่อกันตามลำดับที่ระบุ IDREF - คุณใช้
aria-labelledby
เพื่ออ้างถึงองค์ประกอบที่ซ่อนไว้ได้ และหากไม่มีอยู่ในโครงสร้างการช่วยเหลือพิเศษ เช่น คุณอาจเพิ่มspan
ที่ซ่อนอยู่ไว้ข้างองค์ประกอบที่ต้องการติดป้ายกำกับ และอ้างอิงถึงaria-labelledby
- แต่เนื่องจาก ARIA ส่งผลต่อโครงสร้างการช่วยเหลือพิเศษเท่านั้น
aria-labelledby
จึงไม่แสดงพฤติกรรมการคลิกป้ายกำกับที่คุ้นเคยซึ่งคุณได้รับจากการใช้องค์ประกอบlabel
ที่สำคัญ aria-labelledby
จะลบล้างแหล่งที่มาของชื่ออื่นๆ ทั้งหมดสำหรับองค์ประกอบ ตัวอย่างเช่น หากองค์ประกอบมีทั้ง aria-labelledby
และ aria-label
หรือ aria-labelledby
และ HTML แบบเนทีฟ label
ป้ายกำกับ aria-labelledby
จะมีลำดับความสำคัญเหนือกว่าเสมอ
ความเกี่ยวข้อง
aria-labelledby
คือตัวอย่างของแอตทริบิวต์ความสัมพันธ์ แอตทริบิวต์ความสัมพันธ์สร้างความสัมพันธ์เชิงความหมายระหว่างองค์ประกอบในหน้า โดยไม่คำนึงถึงความสัมพันธ์ DOM ในกรณีของ aria-labelledby
ความสัมพันธ์ดังกล่าวคือ "องค์ประกอบนี้มีป้ายกำกับโดยองค์ประกอบนั้น"
ข้อกำหนด ARIA แสดงแอตทริบิวต์ความสัมพันธ์ 8 รายการ
ทั้ง 6 อย่าง ได้แก่ aria-activedescendant
, aria-controls
, aria-describedby
, aria-labelledby
และ aria-owns
อ้างอิงองค์ประกอบอย่างน้อย 1 รายการเพื่อสร้างลิงก์ใหม่ระหว่างองค์ประกอบในหน้า ความแตกต่างในแต่ละกรณีคือความหมายของลิงก์
และวิธีที่ลิงก์นั้นแสดงต่อผู้ใช้
อาเรียเป็นเจ้าของ
aria-owns
เป็นหนึ่งในความสัมพันธ์ ARIA ที่ใช้กันอย่างแพร่หลายมากที่สุด แอตทริบิวต์นี้ช่วยให้เราบอกเทคโนโลยีความช่วยเหลือพิเศษว่าควรปฏิบัติต่อองค์ประกอบที่แยกอยู่ใน DOM เสมือนเป็นองค์ประกอบย่อยขององค์ประกอบปัจจุบัน หรือจัดเรียงองค์ประกอบย่อยที่มีอยู่ใหม่ตามลำดับอื่น ตัวอย่างเช่น หากเมนูย่อยป๊อปอัปวางตําแหน่งไว้ใกล้กับเมนูระดับบนสุด แต่ต้องไม่เป็นรายการย่อย DOM ของเมนูหลัก เนื่องจากจะส่งผลต่อการนําเสนอภาพ คุณสามารถใช้ aria-owns
เพื่อนําเสนอเมนูย่อยเป็นรายการย่อยของเมนูระดับบนสุดแก่โปรแกรมอ่านหน้าจอได้
แอกทีฟที่มีแอกทีฟ
aria-activedescendant
มีบทบาทที่เกี่ยวข้อง เช่นเดียวกับองค์ประกอบที่ใช้งานอยู่ของหน้าเว็บ คือองค์ประกอบที่มีการโฟกัส การตั้งค่าองค์ประกอบสืบทอดที่มีการใช้งานขององค์ประกอบหนึ่งๆ จะช่วยให้เราบอกเทคโนโลยีความช่วยเหลือพิเศษได้ว่าควรนำเสนอองค์ประกอบหนึ่งๆ แก่ผู้ใช้ว่าเป็นองค์ประกอบที่มีการโฟกัส เมื่อองค์ประกอบหลักมีโฟกัสจริงๆ เช่น ในช่องรายการ คุณอาจต้องการให้หน้าเว็บโฟกัสอยู่ในคอนเทนเนอร์กล่องรายการ แต่อัปเดตแอตทริบิวต์ aria-activedescendant
เป็นลิสต์ที่เลือกไว้ในปัจจุบันอยู่เสมอ ซึ่งทำให้รายการที่เลือกในปัจจุบันดูเหมือนเทคโนโลยีความช่วยเหลือ
เสมือนว่าเป็นรายการที่โฟกัส
อธิบายโดย ARIA
aria-describedby
จะให้คำอธิบายที่เข้าถึงได้ในลักษณะเดียวกับที่ aria-labelledby
ติดป้ายกำกับไว้ เช่นเดียวกับ aria-labelledby
aria-describedby
อาจอ้างอิงองค์ประกอบที่มองไม่เห็น ไม่ว่าจะซ่อนจาก DOM หรือซ่อนจากผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษก็ตาม นี่เป็นเทคนิคที่มีประโยชน์เมื่อมีข้อความอธิบายเพิ่มเติมที่ผู้ใช้อาจต้องการ ไม่ว่าจะมีผลกับผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษเท่านั้นหรือกับผู้ใช้ทุกคนก็ตาม
ตัวอย่างที่พบบ่อยคือช่องป้อนรหัสผ่านที่มาพร้อมกับข้อความอธิบายที่อธิบายถึงข้อกำหนดขั้นต่ำของรหัสผ่าน คำอธิบายนี้ต่างจากป้ายกำกับตรงที่อาจแสดงหรือไม่แสดงให้ผู้ใช้เห็นเลย พวกเขาอาจมีทางเลือกว่าจะเข้าถึงหรือไม่ หรืออาจมาจากข้อมูลอื่นๆ ทั้งหมด หรืออาจมีอย่างอื่นจองไว้แล้ว เช่น หากผู้ใช้ป้อนข้อมูล ข้อมูลที่ป้อนจะถูกสะท้อนกลับและอาจรบกวนคำอธิบายขององค์ประกอบ ดังนั้น คำอธิบายจึงเป็นวิธีที่ยอดเยี่ยมในการสื่อสารข้อมูลเพิ่มเติม แต่ไม่เป็นสิ่งจำเป็น และไม่ขัดขวางข้อมูลสำคัญเพิ่มเติม เช่น บทบาทขององค์ประกอบ
aria-posinset และ aria-setsize
แอตทริบิวต์ความสัมพันธ์ที่เหลือจะแตกต่างออกไปเล็กน้อย ซึ่งทำงานร่วมกันได้
aria-posinset
("ตำแหน่งในชุด") และ aria-setsize
("ขนาดของเซต") เกี่ยวข้องกับการกำหนดความสัมพันธ์ระหว่างองค์ประกอบระดับข้างเคียงในชุด เช่น ลิสต์
เมื่อองค์ประกอบที่แสดงใน DOM กำหนดขนาดของชุดไม่ได้ เช่น เมื่อมีการใช้การแสดงผลแบบ Lazy Loading เพื่อหลีกเลี่ยงรายการขนาดใหญ่ทั้งหมดใน DOM พร้อมกัน aria-setsize
สามารถระบุขนาดชุดจริงได้ และ aria-posinset
จะระบุตำแหน่งขององค์ประกอบในชุดได้ ตัวอย่างเช่น ในชุดที่อาจมี 1,000 องค์ประกอบ คุณอาจบอกว่าองค์ประกอบหนึ่งๆ มี aria-posinset
เท่ากับ 857 แม้ว่าองค์ประกอบนั้นจะปรากฏเป็นลำดับแรกใน DOM จากนั้นใช้เทคนิค HTML แบบไดนามิกเพื่อให้แน่ใจว่าผู้ใช้จะสำรวจรายการทั้งหมดตามคำขอได้