ป้ายกำกับและความสัมพันธ์ ARIA

การใช้ป้ายกำกับ ARIA เพื่อสร้างคำอธิบายองค์ประกอบที่เข้าถึงได้

อลิซ บ็อกฮอลล์
อลิซ บ็อกซ์ฮอลล์
เดฟ แกช
เดฟ แกช
เมกกิน เคียร์นี่
Meggin Kearney

ป้ายกำกับ

ARIA มีกลไกหลายอย่างในการเพิ่มป้ายกำกับและคำอธิบายให้กับองค์ประกอบ อันที่จริง ARIA เป็นเพียงวิธีเดียวในการเพิ่มความช่วยเหลือหรือข้อความอธิบายที่เข้าถึงได้ มาดูพร็อพเพอร์ตี้ที่ ARIA ใช้ในการสร้างป้ายกำกับการช่วยเหลือพิเศษกัน

ป้ายกำกับ ARIA

aria-label ช่วยให้เราระบุสตริงที่จะใช้เป็นป้ายกำกับที่เข้าถึงได้ ซึ่งจะลบล้างกลไกการติดป้ายกำกับแบบเนทีฟอื่นๆ เช่น องค์ประกอบ label เช่น หาก button มีทั้งเนื้อหาข้อความและ aria-label ระบบจะใช้เฉพาะค่า aria-label เท่านั้น

คุณอาจใช้แอตทริบิวต์ aria-label เมื่อมีสิ่งที่บ่งชี้ภาพได้เกี่ยวกับวัตถุประสงค์ขององค์ประกอบ เช่น ปุ่มที่ใช้กราฟิกแทนข้อความ แต่ยังต้องอธิบายวัตถุประสงค์ดังกล่าวสำหรับผู้ที่ไม่สามารถเข้าถึงตัวบ่งชี้ด้วยภาพได้ เช่น ปุ่มที่ใช้เพียงรูปภาพเพื่อระบุวัตถุประสงค์ขององค์ประกอบนั้น

การใช้ป้ายกำกับ aria เพื่อระบุปุ่มรูปภาพเท่านั้น

ARIA-labelledby

aria-labelledby ช่วยให้เราระบุรหัสขององค์ประกอบอื่นใน DOM เป็นป้ายกำกับขององค์ประกอบได้

การใช้ aria-labelledby เพื่อระบุกลุ่มตัวเลือก

วิธีนี้คล้ายกับการใช้องค์ประกอบ label โดยมีความแตกต่างที่สำคัญบางอย่าง

  1. aria-labelledby อาจใช้ในองค์ประกอบใดก็ได้ ไม่ใช่แค่องค์ประกอบที่ติดป้ายกำกับได้
  2. แม้ว่าองค์ประกอบ label จะหมายถึงสิ่งที่ติดป้ายกำกับ แต่ความสัมพันธ์จะย้อนกลับในกรณีของ aria-labelledby โดยสิ่งที่ติดป้ายกำกับจะหมายถึงสิ่งที่ติดป้ายกำกับ
  3. เชื่อมโยงองค์ประกอบป้ายกำกับได้เพียงรายการเดียวกับองค์ประกอบที่ติดป้ายกำกับได้ แต่ aria-labelledby สามารถรวบรวมรายการ IDREF เพื่อสร้างป้ายกำกับจากหลายองค์ประกอบได้ ป้ายกำกับจะต่อกันตามลำดับที่ระบุ IDREF
  4. คุณใช้ aria-labelledby เพื่ออ้างถึงองค์ประกอบที่ซ่อนไว้ได้ และหากไม่มีอยู่ในโครงสร้างการช่วยเหลือพิเศษ เช่น คุณอาจเพิ่ม span ที่ซ่อนอยู่ไว้ข้างองค์ประกอบที่ต้องการติดป้ายกำกับ และอ้างอิงถึง aria-labelledby
  5. แต่เนื่องจาก 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 เพื่อสร้างความสัมพันธ์ระหว่างเมนูและเมนูย่อย

แอกทีฟที่มีแอกทีฟ

aria-activedescendant มีบทบาทที่เกี่ยวข้อง เช่นเดียวกับองค์ประกอบที่ใช้งานอยู่ของหน้าเว็บ คือองค์ประกอบที่มีการโฟกัส การตั้งค่าองค์ประกอบสืบทอดที่มีการใช้งานขององค์ประกอบหนึ่งๆ จะช่วยให้เราบอกเทคโนโลยีความช่วยเหลือพิเศษได้ว่าควรนำเสนอองค์ประกอบหนึ่งๆ แก่ผู้ใช้ว่าเป็นองค์ประกอบที่มีการโฟกัส เมื่อองค์ประกอบหลักมีโฟกัสจริงๆ เช่น ในช่องรายการ คุณอาจต้องการให้หน้าเว็บโฟกัสอยู่ในคอนเทนเนอร์กล่องรายการ แต่อัปเดตแอตทริบิวต์ aria-activedescendant เป็นลิสต์ที่เลือกไว้ในปัจจุบันอยู่เสมอ ซึ่งทำให้รายการที่เลือกในปัจจุบันดูเหมือนเทคโนโลยีความช่วยเหลือ เสมือนว่าเป็นรายการที่โฟกัส

การใช้ aria-activedescendant เพื่อสร้างความสัมพันธ์ในกล่องรายการ

อธิบายโดย ARIA

aria-describedby จะให้คำอธิบายที่เข้าถึงได้ในลักษณะเดียวกับที่ aria-labelledby ติดป้ายกำกับไว้ เช่นเดียวกับ aria-labelledby aria-describedby อาจอ้างอิงองค์ประกอบที่มองไม่เห็น ไม่ว่าจะซ่อนจาก DOM หรือซ่อนจากผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษก็ตาม นี่เป็นเทคนิคที่มีประโยชน์เมื่อมีข้อความอธิบายเพิ่มเติมที่ผู้ใช้อาจต้องการ ไม่ว่าจะมีผลกับผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษเท่านั้นหรือกับผู้ใช้ทุกคนก็ตาม

ตัวอย่างที่พบบ่อยคือช่องป้อนรหัสผ่านที่มาพร้อมกับข้อความอธิบายที่อธิบายถึงข้อกำหนดขั้นต่ำของรหัสผ่าน คำอธิบายนี้ต่างจากป้ายกำกับตรงที่อาจแสดงหรือไม่แสดงให้ผู้ใช้เห็นเลย พวกเขาอาจมีทางเลือกว่าจะเข้าถึงหรือไม่ หรืออาจมาจากข้อมูลอื่นๆ ทั้งหมด หรืออาจมีอย่างอื่นจองไว้แล้ว เช่น หากผู้ใช้ป้อนข้อมูล ข้อมูลที่ป้อนจะถูกสะท้อนกลับและอาจรบกวนคำอธิบายขององค์ประกอบ ดังนั้น คำอธิบายจึงเป็นวิธีที่ยอดเยี่ยมในการสื่อสารข้อมูลเพิ่มเติม แต่ไม่เป็นสิ่งจำเป็น และไม่ขัดขวางข้อมูลสำคัญเพิ่มเติม เช่น บทบาทขององค์ประกอบ

การใช้ aria-describedby เพื่อสร้างความสัมพันธ์กับช่องรหัสผ่าน

aria-posinset และ aria-setsize

แอตทริบิวต์ความสัมพันธ์ที่เหลือจะแตกต่างออกไปเล็กน้อย ซึ่งทำงานร่วมกันได้ aria-posinset ("ตำแหน่งในชุด") และ aria-setsize ("ขนาดของเซต") เกี่ยวข้องกับการกำหนดความสัมพันธ์ระหว่างองค์ประกอบระดับข้างเคียงในชุด เช่น ลิสต์

เมื่อองค์ประกอบที่แสดงใน DOM กำหนดขนาดของชุดไม่ได้ เช่น เมื่อมีการใช้การแสดงผลแบบ Lazy Loading เพื่อหลีกเลี่ยงรายการขนาดใหญ่ทั้งหมดใน DOM พร้อมกัน aria-setsize สามารถระบุขนาดชุดจริงได้ และ aria-posinset จะระบุตำแหน่งขององค์ประกอบในชุดได้ ตัวอย่างเช่น ในชุดที่อาจมี 1,000 องค์ประกอบ คุณอาจบอกว่าองค์ประกอบหนึ่งๆ มี aria-posinset เท่ากับ 857 แม้ว่าองค์ประกอบนั้นจะปรากฏเป็นลำดับแรกใน DOM จากนั้นใช้เทคนิค HTML แบบไดนามิกเพื่อให้แน่ใจว่าผู้ใช้จะสำรวจรายการทั้งหมดตามคำขอได้

การใช้ aria-posinset และ aria-setsize เพื่อสร้างความสัมพันธ์ในรายการ