กฎข้อแรก: ไม่มี ARIA ยังดีกว่าใช้ ARIA ผิด
เหตุใด HTML ดั้งเดิมจึงเป็นตัวเลือกที่ดีกว่าเกือบทุกครั้ง
กฎข้อแรก: ไม่มี ARIA ยังดีกว่าใช้ ARIA ผิด เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
ARIA คืออะไรกันแน่
ARIA คือชุดแอตทริบิวต์ของ HTML ที่บอกเทคโนโลยีช่วยเหลือว่าองค์ประกอบหนึ่งคืออะไรและทำอะไรได้ เมื่อมาร์กอัปเพียงอย่างเดียวไม่สามารถบอกข้อมูลนั้นได้
ARIA ไม่เปลี่ยนพฤติกรรม
ข้อควรรู้คือ ARIA เปลี่ยนเฉพาะสิ่งที่มีการประกาศเท่านั้น โดยตัวมันเองไม่เพิ่มการคลิก โฟกัส หรือการรองรับแป้นพิมพ์
<div role="button">Save</div>
<!-- looks like a button, does nothing -->กฎข้อแรกของ ARIA
กฎข้อแรกอย่างเป็นทางการคือ หากองค์ประกอบ HTML ดั้งเดิมทำงานนั้นได้ ให้ใช้มัน แทนการสร้างองค์ประกอบขึ้นใหม่ด้วย ARIA
องค์ประกอบดั้งเดิมมีความสามารถครบ
ปุ่มจริงสามารถรับโฟกัส ทำงานเมื่อกด Enter และ Space และประกาศบทบาทของตนเองได้โดยไม่ต้องเพิ่มอะไร คุณไม่ต้องเขียนสิ่งเหล่านี้เอง
<button>Save</button>
<!-- focus, keyboard, role: all built in -->เหตุใด ARIA ที่ไม่ถูกต้องจึงแย่กว่า
บทบาทที่ผิดจะให้ข้อมูลเท็จแก่ผู้ใช้อย่างชัดเจน ARIA ที่ไม่ดีดีกว่าไม่มี ARIA เพียงในแง่ของการสร้างความเสียหาย เพราะมันอาจซ่อนเนื้อหาหรืออธิบายเนื้อหาไม่ถูกต้อง
กับดักจากการแทนที่
ARIA override ความหมายโดยธรรมชาติ หากใส่ role=presentation ให้กับหัวข้อ โปรแกรมอ่านหน้าจอจะไม่ถือว่าสิ่งนั้นเป็นหัวข้ออีกต่อไป
<h2 role="presentation">Pricing</h2>
<!-- no longer a heading to AT -->ข้อมูลสามอย่างที่ ARIA มีให้
ARIA ให้ข้อมูลแก่คุณอยู่สามประเภทพอดี ได้แก่ บทบาท (สิ่งนั้นคืออะไร) สถานะ และคุณสมบัติ นี่คือเครื่องมือทั้งหมดที่มี
ARIA ไม่แตะต้อง CSS
การตั้งค่า aria-hidden ให้กับองค์ประกอบจะซ่อนองค์ประกอบนั้นจากโปรแกรมอ่านหน้าจอ แต่ยังคงมองเห็นได้อย่างเต็มที่บนหน้าจอ ทั้งสองชั้นแยกจากกัน
<span aria-hidden="true">decorative star</span>
<!-- seen, not heard -->เมื่อใดควรเลือกใช้ ARIA
เลือกใช้ ARIA เมื่อไม่มีองค์ประกอบโดยธรรมชาติที่เหมาะสม เช่น tablist หรือแถบเลื่อนแบบกำหนดเอง จากนั้นใช้อย่างแม่นยำและทดสอบ
ใช้ ARIA ควบคู่กับ JavaScript
หากจำเป็นต้องสร้างวิดเจ็ตแบบกำหนดเอง ARIA กับ JavaScript ต้องทำงานร่วมกัน ARIA ใช้ระบุชื่อ ส่วน JS จัดการตรรกะการโฟกัสและแป้นพิมพ์
ยิ่งน้อยยิ่งดี
หน้าเว็บที่เข้าถึงได้ดีที่สุดมักใช้ ARIA น้อยมาก ให้ใช้ HTML เชิงความหมายก่อน แล้วใช้ ARIA เฉพาะเพื่อเติมส่วนที่ยังขาด
ตรวจสอบอย่างรวดเร็ว
คุณต้องสร้างตัวควบคุมบันทึกข้อมูลที่คลิกได้ ตัวเลือกใดเข้าถึงได้ดีที่สุด
สรุป: ใช้ ARIA อย่างรอบคอบ
คุณได้เรียนรู้ว่า ARIA ใช้บรรยาย ไม่ได้กำหนดพฤติกรรม ควรเลือกใช้ HTML โดยธรรมชาติ เติม ARIA เฉพาะจุดที่ขาดจริง และทดสอบทุกครั้ง 🎯
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “กฎข้อแรก: ไม่มี ARIA ยังดีกว่าใช้ ARIA ผิด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “กฎข้อแรก: ไม่มี ARIA ยังดีกว่าใช้ ARIA ผิด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “กฎข้อแรก: ไม่มี ARIA ยังดีกว่าใช้ ARIA ผิด”
เหตุใด HTML ดั้งเดิมจึงเป็นตัวเลือกที่ดีกว่าเกือบทุกครั้ง คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “กฎข้อแรก: ไม่มี ARIA ยังดีกว่าใช้ ARIA ผิด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- กฎข้อแรก: ไม่มี ARIA ยังดีกว่าใช้ ARIA ผิด
- บทบาทกำหนดว่าสิ่งนั้นคืออะไร
- สถานะและคุณสมบัติ: ขยาย เลือกแล้ว ปิดใช้งาน
- อ่านแผนผังการเข้าถึงเพื่อแก้ไขปัญหา ARIA