ข้อมูลเบื้องต้นเกี่ยวกับ ARIA และความหมายของ HTML ที่ไม่ใช่เนทีฟ
สำหรับตอนนี้ เราสนับสนุนให้ใช้องค์ประกอบ HTML แบบดั้งเดิม เพราะองค์ประกอบเหล่านี้จะช่วย แป้นพิมพ์ และความหมายในตัว แต่ก็มีบางครั้งที่ การออกแบบและ HTML เนทีฟจะไม่ทำงาน เช่น ตอนนี้ยังไม่มี เอลิเมนต์ HTML มาตรฐานสำหรับโครงสร้าง UI ที่ใช้กันทั่วไปอย่างเมนูป๊อปอัป นอร์ มีองค์ประกอบ HTML ที่มีลักษณะทางความหมาย เช่น "องค์ประกอบ" ผู้ใช้ต้องการทราบเรื่องนี้โดยเร็วที่สุด"
ในบทเรียนนี้ เราจะสำรวจวิธีแสดงความหมายซึ่ง HTML ทำไม่ได้ แสดงออกด้วยตัวเอง
แอปพลิเคชันอินเทอร์เน็ตที่เข้าใจง่ายเกี่ยวกับการเข้าถึงได้ของโครงการริเริ่ม Web Accessibility (WAI-ARIA หรือเพียงแค่ ARIA) เหมาะสำหรับการเชื่อมพื้นที่ที่มีปัญหาการช่วยเหลือพิเศษที่จัดการไม่ได้ ด้วย HTML เนทีฟ เครื่องมือนี้ทำงานได้โดยให้คุณระบุแอตทริบิวต์ที่แก้ไขแอตทริบิวต์ วิธีการแปลองค์ประกอบเป็นแผนผังการช่วยเหลือพิเศษ เรามาดู
ในข้อมูลโค้ดต่อไปนี้ เราใช้รายการเป็นช่องทำเครื่องหมายที่กำหนดเองประเภทหนึ่ง "ช่องทำเครื่องหมาย" ของ CSS จะให้ลักษณะการแสดงผลที่จำเป็นแก่องค์ประกอบ
<li tabindex="0" class="checkbox" checked>
Receive promotional offers
</li>
แม้ว่าวิธีนี้จะทำงานได้ดีสำหรับผู้ใช้ที่มองเห็นได้ แต่โปรแกรมอ่านหน้าจอจะไม่ได้แสดงสิ่งบ่งชี้ใดๆ องค์ประกอบนั้นควรเป็นช่องทำเครื่องหมาย ดังนั้นผู้ใช้ที่มีสายตาเลือนรางอาจมองข้าม องค์ประกอบทั้งหมด
อย่างไรก็ตาม การใช้แอตทริบิวต์ ARIA ทำให้เราสามารถให้ข้อมูลที่ขาดหายไป
เพื่อให้โปรแกรมอ่านหน้าจอตีความได้อย่างถูกต้อง ในส่วนนี้ เราได้เพิ่ม role และ
aria-checked เพื่อระบุองค์ประกอบเป็นช่องทำเครื่องหมายอย่างชัดแจ้ง
เพื่อระบุว่าเลือกไว้โดยค่าเริ่มต้น ระบบจะเพิ่มรายการใน
โครงสร้างการช่วยเหลือพิเศษและโปรแกรมอ่านหน้าจอจะรายงานเป็นช่องทำเครื่องหมายอย่างถูกต้อง
<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
Receive promotional offers
</li>
ARIA ทำงานโดยการเปลี่ยนแปลงและเพิ่มโครงสร้างการช่วยเหลือพิเศษ DOM มาตรฐาน
แม้ว่า ARIA จะช่วยให้เราสามารถแก้ไข สำหรับองค์ประกอบใดๆ ในหน้าเว็บ ซึ่งจะเป็นสิ่งเดียวที่มีการเปลี่ยนแปลง ARIA ไม่ได้เพิ่มลักษณะการทํางานตามปกติขององค์ประกอบ ไม่ได้ทำให้ ที่โฟกัสได้หรือให้ Listener เหตุการณ์บนแป้นพิมพ์ ซึ่งยังคงเป็นส่วนหนึ่งของ งานการพัฒนา
คุณควรเข้าใจว่าไม่จำเป็นต้องกำหนดค่าเริ่มต้นใหม่
อรรถศาสตร์ ไม่ว่าจะใช้งานด้วยวิธีใด HTML มาตรฐาน <input type="checkbox">
องค์ประกอบนี้ไม่จำเป็นต้องมีแอตทริบิวต์ ARIA role="checkbox" เพิ่มเติม
ได้ถูกต้อง
นอกจากนี้ โปรดสังเกตว่าองค์ประกอบ HTML บางอย่างมีข้อจำกัดเกี่ยวกับ ARIA
บทบาทและแอตทริบิวต์ได้ เช่น องค์ประกอบ <input
type="text"> มาตรฐานอาจไม่มีบทบาท/แอตทริบิวต์เพิ่มเติมใดๆ ที่ใช้กับองค์ประกอบนั้น
โปรดดูข้อกำหนดของ ARIA ใน HTML เพื่อดูข้อมูลเพิ่มเติม
มาดูกันว่า ARIA มีความสามารถอื่นใดอีกบ้าง
ARIA ทำอะไรได้บ้าง
ตามที่คุณเห็นกับตัวอย่างช่องทำเครื่องหมาย ARIA สามารถแก้ไขความหมายขององค์ประกอบที่มีอยู่ได้ หรือเพิ่มอรรถศาสตร์ลงในองค์ประกอบที่ไม่มีความหมายดั้งเดิม นอกจากนี้ยังสามารถ แสดงรูปแบบทางความหมายที่ไม่มีอยู่ใน HTML เช่น เมนูหรือแท็บ แผง บ่อยครั้งที่ ARIA ให้เราสร้างองค์ประกอบประเภทวิดเจ็ตที่ไม่สามารถทำได้ ด้วย HTML ธรรมดา
- ตัวอย่างเช่น ARIA สามารถเพิ่มป้ายกำกับและข้อความคำอธิบายที่
ผ่าน API ของเทคโนโลยีความช่วยเหลือพิเศษ
<button aria-label="screen reader only label"></button>
- ARIA สามารถแสดงความสัมพันธ์เชิงความหมายระหว่างองค์ประกอบที่ขยาย การเชื่อมต่อผู้เผยแพร่โฆษณาหลัก/ย่อยแบบมาตรฐาน เช่น แถบเลื่อนแบบกำหนดเองที่ควบคุม ภูมิภาคที่เฉพาะเจาะจง
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- และ ARIA สามารถทำให้ส่วนต่างๆ ของหน้า "สด" พวกเขาจึงแจ้งทันที เทคโนโลยีความช่วยเหลือพิเศษเมื่อมีการเปลี่ยนแปลง
<div aria-live="polite">
<span>GOOG: $400</span>
</div>
แง่มุมสำคัญอย่างหนึ่งของระบบ ARIA คือการรวบรวมบทบาท บทบาท
ในข้อตกลงการช่วยเหลือพิเศษจะเหมือนกับตัวบ่งชี้ชวเลขสำหรับ UI หนึ่งๆ
รูปแบบ ARIA ให้คำศัพท์เกี่ยวกับรูปแบบที่เราใช้ได้ผ่าน role
ในองค์ประกอบ HTML ใดก็ได้
ตอนใช้ role="checkbox" ในตัวอย่างก่อนหน้านี้ เราบอก
เทคโนโลยีความช่วยเหลือพิเศษที่องค์ประกอบควรอยู่ต่อจาก "ช่องทำเครื่องหมาย" รูปแบบ นั่น
เรารับประกันว่าวิดีโอจะมีสถานะ "ตรวจสอบแล้ว" (ไม่ว่าจะตรวจสอบหรือไม่
และตรวจสอบว่าสถานะสามารถสลับได้โดยใช้เมาส์หรือแป้นเว้นวรรค
เช่นเดียวกับองค์ประกอบช่องทำเครื่องหมาย HTML มาตรฐาน
เนื่องจากการโต้ตอบกับแป้นพิมพ์นั้นโดดเด่นในโปรแกรมอ่านหน้าจอ
คุณต้องแน่ใจว่า เมื่อสร้างวิดเจ็ตที่กำหนดเอง
ระบบนำแอตทริบิวต์ role ไปใช้ในตำแหน่งเดียวกับ tabindex เสมอ
แอตทริบิวต์; วิธีนี้ช่วยให้มั่นใจได้ว่าเหตุการณ์ของแป้นพิมพ์จะไปยังตําแหน่งที่ถูกต้อง
มุ่งเน้นไปยังองค์ประกอบที่ถ่ายทอดบทบาทได้อย่างถูกต้อง
ข้อกำหนด ARIA อธิบายถึง
การจัดหมวดหมู่ของค่าที่เป็นไปได้สำหรับแอตทริบิวต์ role และ ARIA ที่เกี่ยวข้อง
ที่ใช้ร่วมกับบทบาทเหล่านั้นได้ ดีที่สุด
แหล่งข้อมูลที่ชัดเจนเกี่ยวกับวิธีการทำงานของบทบาทและแอตทริบิวต์ ARIA
ร่วมกันอย่างไรและนำมาใช้ในลักษณะที่เบราว์เซอร์สนับสนุน
เทคโนโลยีความช่วยเหลือพิเศษ
อย่างไรก็ตาม ข้อมูลจำเพาะมีความหนาแน่นสูง จุดเริ่มต้นที่เข้าถึงได้ง่ายกว่าคือ ARIA การเขียนเอกสารแนวทางปฏิบัติ ซึ่งสำรวจแนวทางปฏิบัติแนะนำในการใช้บทบาท ARIA ที่มีอยู่และ พร็อพเพอร์ตี้
นอกจากนี้ ARIA ยังมีบทบาทสำคัญที่ขยายตัวเลือกที่มีอยู่ใน HTML5 ด้วย โปรดดู การออกแบบบทบาทจุดสังเกต ลาย ข้อกำหนดสำหรับข้อมูลเพิ่มเติม