ตารางต้นไม้และรูปแบบขั้นสูงอื่น ๆ
จัดการวิดเจ็ตแบบองค์ประกอบรวมที่ยากที่สุดอย่างมั่นใจ
ตารางต้นไม้และรูปแบบขั้นสูงอื่น ๆ เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
เข้าสู่โหมดยาก
วิดเจ็ตบางประเภทมีความซับซ้อนอย่างแท้จริง เช่น ตารางต้นไม้ ตาราง และต้นไม้ ซึ่งรวมแถว คอลัมน์ และโหนดที่ขยายได้ไว้พร้อมกัน 🌳
ตารางต้นไม้คืออะไร
ตารางต้นไม้คือตารางที่แถวสามารถขยายและยุบได้เหมือนต้นไม้ เหมาะอย่างยิ่งสำหรับโปรแกรมเรียกดูไฟล์ที่มีโฟลเดอร์ซ้อนกันและคอลัมน์รายละเอียด
บทบาทหลัก
ใช้ role="treegrid" กับคอนเทนเนอร์ ใช้ role="row" กับแต่ละแถว และใช้ role="gridcell" กับเซลล์ โครงสร้างนี้สอดคล้องกับตารางจริง
<div role="treegrid">
<div role="row">
<span role="gridcell">src</span>
</div>
</div>แถวที่ขยายได้
แถวที่สามารถเปิดได้จะมี aria-expanded เป็น true เมื่อแถวลูกแสดงอยู่ และเป็น false เมื่อยุบอยู่ ส่วนแถวปลายสุดให้ละเว้นแอตทริบิวต์นี้ทั้งหมด
<div role="row" aria-expanded="false"
aria-level="1">Folder</div>ระบุระดับด้วย aria-level
ใช้ aria-level เพื่อบอกผู้ใช้ว่าแถวอยู่ลึกลงไปในต้นไม้กี่ระดับ ระดับ 1 คือระดับบนสุด และแถวที่ซ้อนอยู่แต่ละชั้นจะเพิ่มขึ้นอีกหนึ่งระดับ
การเคลื่อนที่สองแกน
ในตารางต้นไม้ ปุ่มลูกศรจะเคลื่อนที่ได้บนทั้งสองแกน: ปุ่มขึ้นและลงใช้เปลี่ยนแถว ส่วนปุ่มซ้ายและขวาใช้ย้ายระหว่างเซลล์ หรือยุบและขยายแถว
ปุ่มสำหรับขยายและยุบ
ในแถวแม่ ปุ่มลูกศรขวาจะขยายแถว และปุ่มลูกศรซ้ายจะยุบแถว ซึ่งสอดคล้องกับวิธีทำงานของต้นไม้ไฟล์บนเดสก์ท็อปที่ใช้กันมาโดยตลอด
จุดหยุดแท็บเดียว
ตารางต้นไม้ทั้งชุดเป็นจุดหยุดแท็บเพียงจุดเดียว roving tabindex จะย้ายโฟกัสจริงไปมาระหว่างเซลล์ ทำให้วิดเจ็ตมีลักษณะเหมือนตัวควบคุมแบบประกอบชิ้นเดียว
กำหนดขนาดและตำแหน่ง
สำหรับแถวแบบไดนามิกหรือแถวที่แสดงผลเสมือน ให้ใช้ aria-setsize และ aria-posinset เพื่อให้ผู้ใช้ได้ยินจำนวนตำแหน่ง แม้จะไม่ได้แสดงผลทุกแถว
Home, End และการกระโดด
ตารางขั้นสูงจะเพิ่ม Home และ End เพื่อกระโดดไปยังเซลล์แรกหรือเซลล์สุดท้าย และใช้ Ctrl ร่วมกับ Home หรือ End เพื่อกระโดดไปยังจุดเริ่มต้นหรือจุดสิ้นสุดของข้อมูลโดยตรง
อ้างอิง APG
รูปแบบเหล่านี้ไม่ยอมให้ผิดพลาด ดังนั้นให้ทำตามตัวอย่าง APG อย่างใกล้ชิดและทดสอบด้วยโปรแกรมอ่านหน้าจอจริง ข้อผิดพลาดเล็กน้อยอาจทำให้วิดเจ็ตทั้งชุดใช้งานไม่ได้
ตรวจสอบความเข้าใจ
คุณกำลังสร้างโปรแกรมเรียกดูไฟล์ที่แถวต่าง ๆ เปิดเพื่อแสดงแถวที่ซ้อนอยู่ภายในตาราง บทบาทใดจึงเหมาะสม
ทบทวน
ตารางต้นไม้ผสานคุณสมบัติของตารางและต้นไม้เข้าด้วยกัน โดยมีแถวที่ใช้ aria-expanded และ aria-level ปุ่มลูกศรสองแกน และจุดหยุดแท็บเดียวผ่าน roving tabindex ให้อ้างอิง APG และทดสอบอย่างละเอียด ✅
คำถามที่พบบ่อย
บทเรียน “ตารางต้นไม้และรูปแบบขั้นสูงอื่น ๆ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตารางต้นไม้และรูปแบบขั้นสูงอื่น ๆ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตารางต้นไม้และรูปแบบขั้นสูงอื่น ๆ”
จัดการวิดเจ็ตแบบองค์ประกอบรวมที่ยากที่สุดอย่างมั่นใจ คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ตารางต้นไม้และรูปแบบขั้นสูงอื่น ๆ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- อ่าน APG: รูปแบบ ปุ่ม และตัวอย่าง
- คอมโบบ็อกซ์และการเติมข้อความอัตโนมัติอย่างถูกต้อง
- เมนู แถบเมนู และปุ่มเมนู
- ตารางต้นไม้และรูปแบบขั้นสูงอื่น ๆ