HTMLTabs là ví dụ điển hình của widget mà ARIA bắt buộc vì HTML không có phần tử tương đương. Ba lớp phải làm đủ:
1. Cấu trúc role:
<div role="tablist" aria-label="Cài đặt">
<button role="tab" id="t1" aria-selected="true" aria-controls="p1" tabindex="0">Hồ sơ</button>
<button role="tab" id="t2" aria-selected="false" aria-controls="p2" tabindex="-1">Bảo mật</button>
</div>
<div role="tabpanel" id="p1" aria-labelledby="t1" tabindex="0">...</div>
<div role="tabpanel" id="p2" aria-labelledby="t2" hidden>...</div>2. Bàn phím — dùng roving tabindex: cả tablist chỉ là một điểm dừng Tab; ArrowLeft/ArrowRight (hoặc Up/Down khi dọc) đổi tab, Home/End nhảy đầu/cuối. Tab từ tab đang chọn đi thẳng vào panel, không lướt qua từng tab.
3. Trạng thái: aria-selected chỉ đặt trên tab đang chọn; panel không hiển thị dùng hidden (hoặc display: none) chứ không chỉ ẩn bằng opacity/visibility — ẩn bằng CSS "nửa vời" vẫn để nội dung nằm trong accessibility tree và tab order.
Quyết định thiết kế cần nêu: activation tự động (mũi tên tới đâu đổi panel tới đó, hợp khi panel nhẹ) hay thủ công (mũi tên chỉ di chuyển, phải Enter/Space mới đổi, hợp khi panel tốn dữ liệu). Sai hay gặp nhất: dùng <a href="#"> làm tab, không có role, không hỗ trợ mũi tên, và mỗi tab là một điểm dừng Tab riêng.