อ่าน APG: รูปแบบ ปุ่ม และตัวอย่าง
ใช้คู่มือนี้เป็นข้อกำหนดสำหรับวิดเจ็ตทุกชนิด
อ่าน APG: รูปแบบ ปุ่ม และตัวอย่าง เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
ทำความรู้จัก APG
คู่มือแนวปฏิบัติสำหรับผู้เขียน ARIA คือแนวทางอย่างเป็นทางการของ W3C สำหรับสร้างวิดเจ็ตแบบกำหนดเองให้ถูกต้อง เมื่อไม่แน่ใจ ให้ยึดเอกสารข้อกำหนดนี้เป็นหลัก 📘
อย่าสร้างสิ่งที่มีอยู่แล้วใหม่
APG มอบ รูปแบบ ที่ผ่านการพิสูจน์แล้วสำหรับแท็บ เมนู กล่องโต้ตอบ และอื่น ๆ คุณคัดลอกแนวทางที่ผ่านการทดสอบแทนการคาดเดาบทบาทและปุ่มกดด้วยตนเอง
กายวิภาคของรูปแบบ
รูปแบบ APG ทุกแบบมี ส่วน เหมือนกัน ได้แก่ ภาพรวม การโต้ตอบด้วยแป้นพิมพ์ บทบาทและแอตทริบิวต์ ARIA ที่จำเป็น และตัวอย่างการทำงานให้ศึกษา
แป้นพิมพ์คือข้อกำหนด
ตาราง การโต้ตอบด้วยแป้นพิมพ์ บอกอย่างชัดเจนว่าปุ่มแต่ละปุ่มต้องทำอะไร ผู้ใช้คาดหวังให้ปุ่มเหล่านี้ทำงานดังกล่าว ดังนั้นให้ถือว่าตารางนี้เป็นข้อกำหนดที่ต้องปฏิบัติตาม
ตารางบทบาท
ตาราง บทบาท สถานะ และคุณสมบัติของ WAI-ARIA แสดงแอตทริบิวต์ทุกตัวที่วิดเจ็ตต้องใช้และเวลาที่แต่ละตัวเปลี่ยนแปลง อย่าข้ามแม้แต่รายการเดียว
ศึกษาตัวอย่าง
แต่ละรูปแบบมาพร้อม ตัวอย่าง ที่ใช้งานได้และมีซอร์สโค้ดครบถ้วน อ่านตัวอย่าง ทดสอบด้วยโปรแกรมอ่านหน้าจอ แล้วปรับมาร์กอัปให้เข้ากับส่วนติดต่อผู้ใช้ของคุณ
<div role="tablist" aria-label="Settings">
<button role="tab" aria-selected="true">General</button>
</div>ใช้ HTML แบบเนทีฟก่อนเสมอ
APG เริ่มต้นด้วยคำเตือนว่า ให้เลือกใช้ HTML แบบเนทีฟ เมื่อมีองค์ประกอบที่เหมาะสมอยู่แล้ว ควรใช้รูปแบบเหล่านี้เมื่อไม่มีองค์ประกอบจริงที่ทำงานนั้นได้เท่านั้น
สถานะเปลี่ยนระหว่างการทำงาน
รูปแบบจะแยกบทบาทที่คงที่ออกจาก สถานะ ที่เปลี่ยนแปลง คุณกำหนด aria-expanded หรือ aria-selected ด้วย JavaScript ขณะที่ผู้ใช้โต้ตอบ ไม่ใช่กำหนดเพียงครั้งเดียวใน HTML
โฟกัสเป็นส่วนหนึ่งของข้อกำหนด
รูปแบบจำนวนมากอธิบายอย่างชัดเจนว่า โฟกัส ต้องไปอยู่ที่ใดและเคลื่อนที่อย่างไร การทำตามลำดับการย้ายโฟกัสนี้สำคัญไม่แพ้ ARIA
ทดสอบตามรูปแบบ
เมื่อสร้างเสร็จแล้ว ให้ทดลองใช้วิดเจ็ตตาม ตารางแป้นพิมพ์ ของ APG ทีละปุ่ม หากผ่านทุกรายการ คุณก็ทำงานตรงตามพฤติกรรมที่ผ่านการพิสูจน์แล้ว
นี่คือคู่มือที่มีการพัฒนาอยู่เสมอ
APG มีการ กำหนดรุ่น และอัปเดตเมื่อ ARIA พัฒนา ดังนั้นให้ตรวจสอบฉบับปัจจุบันแทนการใช้บล็อกเก่าที่คัดลอกเนื้อหาไป
ตรวจสอบอย่างรวดเร็ว
คุณกำลังจะสร้างวิดเจ็ตแบบกำหนดเอง APG ควรชี้แนะแนวทางใดให้คุณทำเป็นอันดับแรก
สรุป
APG คือข้อกำหนดสำหรับวิดเจ็ตของคุณ: ใช้เนทีฟก่อน แล้วทำตามบทบาท สถานะ ปุ่ม และโฟกัสของแต่ละรูปแบบ ทดสอบตามตารางของ APG แล้วคุณจะได้พฤติกรรมที่ผู้ใช้คุ้นเคย ✅
คำถามที่พบบ่อย
บทเรียน “อ่าน APG: รูปแบบ ปุ่ม และตัวอย่าง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “อ่าน APG: รูปแบบ ปุ่ม และตัวอย่าง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “อ่าน APG: รูปแบบ ปุ่ม และตัวอย่าง”
ใช้คู่มือนี้เป็นข้อกำหนดสำหรับวิดเจ็ตทุกชนิด คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “อ่าน APG: รูปแบบ ปุ่ม และตัวอย่าง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- อ่าน APG: รูปแบบ ปุ่ม และตัวอย่าง
- คอมโบบ็อกซ์และการเติมข้อความอัตโนมัติอย่างถูกต้อง
- เมนู แถบเมนู และปุ่มเมนู
- ตารางต้นไม้และรูปแบบขั้นสูงอื่น ๆ