Khả năng tiếp cận (a11y)

thl-ui hướng tới chuẩn WCAG 2.1 AA. Mọi trang của ba playground đều được kiểm tra bằng axe-core: 75 route × React / Vue / Angular, ở cả chế độ sáng và tối. Không trang nào còn lỗi mức serious hoặc critical.

node scripts/a11y.mjs http://localhost:5181          # React; báo lỗi khi có vi phạm serious/critical
node scripts/a11y.mjs http://localhost:5182 --dark   # Vue, dark mode

Component tự lo những gì

• Màu: mọi cặp chữ/nền đạt ≥ 4.5:1. Token --thl-on-{màu} dùng cho chữ đặt trên nền màu; --thl-color-{màu}-text dùng khi chính màu đó làm màu chữ. Unit test kiểm tra điều này cho mọi skin.
• Form:
  • Field tự gắn label for, aria-describedby (trỏ tới help/lỗi) và aria-invalid cho control bên trong.
  • Lỗi dùng role="alert" và được dịch theo ngôn ngữ hiện tại.
• Select, DatePicker, Slider, Tabs: theo đúng pattern WAI-ARIA, điều khiển đầy đủ bằng bàn phím.
• Modal / Drawer: giữ focus bên trong, trả focus về chỗ cũ khi đóng, đóng bằng Esc. Drawer đang đóng được đặt inert.
• Dropdown / Popover: thuộc tính aria-expanded được gắn trên chính nút bạn truyền vào, không phải trên thẻ bọc ngoài.
• Layout: có skip link, đủ các landmark header / nav / main / footer, aria-current="page" trong menu, và tiêu đề trang là h1.

Phần của bạn

• Nút chỉ có icon phải có aria-label.
• Mỗi control nên nằm trong Field có label, hoặc có aria-label riêng.
• Vùng cuộn tự làm cần tabindex="0" và một nhãn.
• Khi đổi màu, đổi cả cặp --thl-color-x và --thl-on-x để giữ độ tương phản.