รูปแบบแท็บ: tablist, tab, tabpanel
เชื่อมสามบทบาทที่ชุดแท็บต้องใช้
รูปแบบแท็บ: tablist, tab, tabpanel เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
ชุดแท็บคืออะไรจริง ๆ
ชุดแท็บ จะแสดงแผงทีละแผงและให้ผู้ใช้สลับไปมาระหว่างแผงได้ สำหรับเทคโนโลยีสิ่งอำนวยความสะดวก ชุดนี้ต้องดูเป็นวิดเจ็ตเดียว ไม่ใช่ลิงก์ที่แยกจากกัน
สามบทบาททำงานร่วมกัน
รูปแบบนี้อาศัยบทบาท ARIA สามบทบาท ได้แก่ tablist ที่เก็บแท็บ แท็บแต่ละรายการ และแผงที่แท็บแต่ละรายการเปิดขึ้นมา ต้องกำหนดทั้งสามให้ถูกต้อง
คอนเทนเนอร์คือ tablist
ห่อแถวแท็บของคุณไว้ในองค์ประกอบที่มี role="tablist" วิธีนี้จะแจ้งโปรแกรมอ่านหน้าจอว่าองค์ประกอบลูกภายในเป็นชุดแท็บที่เกี่ยวข้องกัน
<div role="tablist">...</div>แท็บแต่ละรายการคือปุ่ม
สร้างแท็บแต่ละรายการจาก button จริงที่มี role="tab" ปุ่มสามารถรับโฟกัสและคลิกได้ในตัว จึงไม่ต้องเชื่อมการทำงานเพิ่มเติม
<button role="tab">Profile</button>แผงคือ tabpanel
เนื้อหาที่แท็บแต่ละรายการแสดงควรมี role="tabpanel" ซึ่งระบุว่าเนื้อหานั้นเป็นบริเวณที่แท็บที่เลือกอยู่ควบคุม
<div role="tabpanel">Profile details</div>ระบุแท็บที่เลือกอยู่
กำหนด aria-selected="true" ให้แท็บที่กำลังใช้งาน และกำหนดเป็น false ให้แท็บอื่น โปรแกรมอ่านหน้าจอจะประกาศว่าแท็บใดถูกเลือกอยู่
<button role="tab" aria-selected="true">Profile</button>เชื่อมแท็บกับแผงของแท็บ
ชี้แท็บแต่ละรายการไปยังแผงของตนด้วย aria-controls โดยกำหนดค่าเป็น id ของแผง ผู้ใช้จะทราบว่าแท็บนั้นเปิดบริเวณใด
<button role="tab" aria-controls="p1">Profile</button>ตั้งชื่อแผงจากแท็บ
กำหนด aria-labelledby ให้แผง โดยชี้กลับไปยังแท็บ จากนั้นแผงจะใช้ข้อความของแท็บเป็นชื่อที่เข้าถึงได้
<div role="tabpanel" aria-labelledby="tab1">...</div>ซ่อนแผงที่ไม่ได้ใช้งาน
ควรแสดงเพียงแผงเดียวในแต่ละครั้ง เพิ่มแอตทริบิวต์ hidden ให้แผงที่แท็บไม่ได้ถูกเลือก เพื่อให้แผงเหล่านั้นออกจากหน้า
<div role="tabpanel" hidden>...</div>กำหนดป้ายกำกับให้ tablist
tablist ควรมี aria-label ที่อธิบายจุดประสงค์ เช่น Account settings ผู้ใช้จะได้ทราบว่าชุดแท็บทั้งหมดนี้มีไว้ทำอะไร
<div role="tablist" aria-label="Account settings">...</div>เมื่อประกาศทั้งหมดรวมกัน
เมื่อนำทุกอย่างมารวมกัน โปรแกรมอ่านหน้าจอจะประกาศประมาณว่า Profile, tab, selected, 1 of 3 การบอกตำแหน่งเช่นนี้ทำให้แท็บใช้งานได้
ตรวจสอบอย่างรวดเร็ว
คุณกำลังเชื่อมการทำงานของคอนเทนเนอร์ที่เก็บแถวแท็บ บทบาทใดควรอยู่บนคอนเทนเนอร์นี้
สรุป: รูปแบบแท็บ
คุณได้เรียนรู้กลุ่ม tablist, tab, tabpanel ระบุแท็บที่เลือก เชื่อมแต่ละแท็บกับแผงของตน และซ่อนแผงที่ไม่ได้ใช้งาน
คำถามที่พบบ่อย
บทเรียน “รูปแบบแท็บ: tablist, tab, tabpanel” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “รูปแบบแท็บ: tablist, tab, tabpanel” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบแท็บ: tablist, tab, tabpanel”
เชื่อมสามบทบาทที่ชุดแท็บต้องใช้ คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “รูปแบบแท็บ: tablist, tab, tabpanel” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- รูปแบบแท็บ: tablist, tab, tabpanel
- การนำทางระหว่างแท็บด้วยปุ่มลูกศร
- แอคคอร์เดียนด้วยปุ่มและ aria-expanded
- ส่วนเปิดเผยกับแท็บ: เลือกให้เหมาะสม