ARIA (Accessible Rich Internet Applications) คือชุดของแอตทริบิวต์ที่เพิ่มความหมายของการเข้าถึงได้ — บทบาท สถานะ และคุณสมบัติ — ที่ HTML ดั้งเดิมไม่สามารถแสดงออกได้ แต่กฎ ARIA ที่สำคัญที่สุดคือ: ชอบ HTML ดั้งเดิมก่อน
Save
Save
องค์ประกอบดั้งเดิมมาพร้อมกับบทบาท พฤติกรรมแป้นพิมพ์ และโฟกัสแบบฟรี เพียงแต่เลือก ARIA เมื่อไม่มีองค์ประกอบดั้งเดิมใดทำงาน
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
นี่คือ ARIA ที่มีประโยชน์จริง ๆ: บอกให้ screen reader ทราบเกี่ยวกับเนื้อหาที่เปลี่ยนแปลงโดยไม่ต้องโหลดหน้าใหม่ (ผลการค้นหา toast ข้อผิดพลาดในการตรวจสอบ)
ARIA ที่ไม่ถูกต้องคือ แย่กว่าไม่มีเลย — ให้ข้อมูลที่ผิดแก่ผู้ใช้ screen reader และ ARIA เปลี่ยนแปลงความหมายเท่านั้น ไม่ใช่พฤติกรรม: role="button" บน <div> ไม่ทำให้มันสามารถมีโฟกัสหรือคลิกได้ คุณต้องเพิ่ม tabindex และ key handler ด้วยตนเอง
ใช้ HTML ที่มีความหมายสำหรับกรณี 95% ใช้ ARIA เพื่อเติมช่องว่างสำหรับ custom widget (แท็บ combobox เมนู) และประกาศการอัพเดตแบบไดนามิกผ่าน live region
ปฏิบัติตามกฎ — ชอบดั้งเดิม อย่าเปลี่ยนความหมายดั้งเดิมโดยไม่จำเป็น ให้สถานะอยู่ในการซิงค์ และไม่ต้องใช้บทบาทที่คุณไม่ได้นำไปใช้อย่างเต็มที่