ข้อมูลเบื้องต้นเกี่ยวกับ ARIA และความหมายของ HTML ที่ไม่ใช่เนทีฟ
จนถึงตอนนี้ เราแนะนำให้ใช้องค์ประกอบ HTML แบบเนทีฟเพราะองค์ประกอบเหล่านี้มีจุดโฟกัส การรองรับแป้นพิมพ์ และอรรถศาสตร์ในตัว แต่ก็มีบางครั้งที่เลย์เอาต์อย่างง่ายและ HTML แบบเนทีฟจะไม่สามารถทำงานได้ เช่น ปัจจุบันยังไม่มีองค์ประกอบ HTML ที่เป็นมาตรฐานสำหรับโครงสร้าง UI ที่ใช้กันทั่วไป ซึ่งก็คือเมนูป๊อปอัป และไม่มีองค์ประกอบ HTML ที่มีลักษณะเชิงความหมาย เช่น "ผู้ใช้ต้องทราบเกี่ยวกับเรื่องนี้โดยเร็วที่สุด"
ในบทเรียนนี้ เราจะมาดูวิธีแสดงความหมายที่ HTML แสดงไม่ได้ด้วยตัวเอง
ข้อกำหนดเกี่ยวกับ Accessible Rich Internet Applications ของ Web Accessibility Initiative (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 มาตรฐาน
![แผนผังการช่วยเหลือพิเศษ DOM มาตรฐาน](https://web.dev/static/articles/semantics-aria/image/the-standard-dom-accessib-f1377436c8cbd.jpg?authuser=5&hl=th)
![โครงสร้างการช่วยเหลือพิเศษใน ARIA Augmented Accessibility](https://web.dev/static/articles/semantics-aria/image/the-aria-augmented-access-a0705fd66fc51.jpg?authuser=5&hl=th)
แม้ว่า 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 ที่ใช้ได้ทั้งหมด](https://web.dev/static/articles/semantics-aria/image/a-list-all-available-ar-64bce9c9d6.jpg?authuser=5&hl=th)
แต่ข้อมูลจำเพาะนั้นหนาแน่นมาก จุดเริ่มต้นที่เข้าถึงได้มากกว่าคือเอกสารแนวทางปฏิบัติในการเขียน ARIA ซึ่งจะสำรวจแนวทางปฏิบัติแนะนำในการใช้บทบาทและพร็อพเพอร์ตี้ ARIA ที่มี
นอกจากนี้ ARIA ยังมีบทบาทสำคัญที่ขยายตัวเลือกที่มีอยู่ใน HTML5 ด้วย ดูข้อมูลเพิ่มเติมได้ในข้อกำหนดรูปแบบการออกแบบบทบาทในจุดสังเกต