ตัวสร้างแท็บส์ CSS

มาร์กอัปที่เข้าถึงได้อย่างถูกต้อง

<div class="tabs">
  <div role="tablist" aria-label="Product info">
    <button role="tab" id="tab-1" aria-selected="true"  aria-controls="panel-1" tabindex="0">Overview</button>
    <button role="tab" id="tab-2" aria-selected="false" aria-controls="panel-2" tabindex="-1">Specs</button>
    <button role="tab" id="tab-3" aria-selected="false" aria-controls="panel-3" tabindex="-1">Reviews</button>
  </div>
  <section role="tabpanel" id="panel-1" aria-labelledby="tab-1">...</section>
  <section role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>...</section>
  <section role="tabpanel" id="panel-3" aria-labelledby="tab-3" hidden>...</section>
</div>

คุณสมบัติสำคัญ:

• role="tablist" ใช้ห่อปุ่มต่าง ๆ
• ปุ่มแต่ละตัวมี role="tab" พร้อม aria-selected และ aria-controls
• tabindex ใช้รูปแบบ roving tabindex: มีเพียงแท็บที่กำลังทำงานเท่านั้นที่เป็น 0 ส่วนแท็บอื่น ๆ เป็น -1 โดยปุ่มลูกศรจะเลื่อนโฟกัสระหว่างแท็บเหล่านี้
• แต่ละแผงมี role="tabpanel" โดย aria-labelledby จะชี้ไปยังแท็บของมัน
• hidden บนแผงที่ไม่ได้ใช้งาน (ไม่ใช่เพียง display: none เท่านั้น, เทคโนโลยีสิ่งอำนวยความสะดวกใช้แอตทริบิวต์นี้)

ข้อกำหนดการใช้คีย์บอร์ด

การเปิดใช้งานอัตโนมัติ (แท็บจะเปลี่ยนเมื่อโฟกัสเคลื่อนที่) เทียบกับการเปิดใช้งานด้วยตนเอง (เมื่อโฟกัสเคลื่อนที่ แท็บจะเปิดขึ้นเมื่อกด Enter), WAI-ARIA รองรับทั้งสองวิธี การใช้งานแบบอัตโนมัติเหมาะกว่าสำหรับผู้ใช้ที่มองเห็นได้ปกติ ในขณะที่การใช้งานแบบด้วยตนเองเหมาะสมกว่าเมื่อเนื้อหาในแท็บมีปริมาณมากและต้องแสดงผลอย่างละเอียด

สไตล์เส้นใต้

[role="tablist"] {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}
[role="tab"] {
  padding: 0.75rem 1rem;
  background: transparent;
  border: 0;
  color: #6b7280;
  position: relative;
  cursor: pointer;
}
[role="tab"][aria-selected="true"] {
  color: #111827;
}
[role="tab"][aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: -1px;
  height: 2px;
  background: #2563eb;
}

สไตล์แคปซูล

[role="tab"] {
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  border: 0;
  background: transparent;
}
[role="tab"][aria-selected="true"] {
  background: #2563eb;
  color: #fff;
}

โฟกัสที่มองเห็นได้

เมื่อโฟกัสมาจากคีย์บอร์ด ควรวาดวงแหวนโฟกัสเสมอ:

[role="tab"]:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

JavaScript

คร่าว ๆ:

const tabs = document.querySelectorAll('[role="tab"]');
tabs.forEach(tab => {
  tab.addEventListener('click', () => activate(tab));
  tab.addEventListener('keydown', e => {
    const i = [...tabs].indexOf(tab);
    if (e.key === 'ArrowRight') tabs[(i + 1) % tabs.length].focus();
    if (e.key === 'ArrowLeft')  tabs[(i - 1 + tabs.length) % tabs.length].focus();
    if (e.key === 'Home') tabs[0].focus();
    if (e.key === 'End')  tabs[tabs.length - 1].focus();
  });
});

function activate(tab) {
  tabs.forEach(t => {
    const panel = document.getElementById(t.getAttribute('aria-controls'));
    const active = t === tab;
    t.setAttribute('aria-selected', active);
    t.setAttribute('tabindex', active ? '0' : '-1');
    panel.hidden = !active;
  });
  tab.focus();
}

รวมทั้งหมด 30 บรรทัด ไม่มีการพึ่งพาไลบรารีใด ๆ

แท็บกับแอคคอร์เดียน

บนหน้าจอแคบ แถวแท็บจะดูอึดอัด รูปแบบที่พบบ่อยคือ: ใช้แท็บบนเดสก์ท็อป และใช้แอคคอร์เดียนบนมือถือ ควรใช้ container query หรือ media query เพื่อเปลี่ยนรูปแบบการแสดงผลโดยไม่ต้องเปลี่ยนบทบาท ARIA