Khả năng tiếp cận

Tương phản, focus, vùng chạm và giảm chuyển động đã có sẵn trong token và component, nên đúng với mọi theme. Nhãn, alt text và ý nghĩa của màn hình vẫn do bạn lo.

Tương phản được kiểm tra cho mọi theme

Bộ tạo theme kiểm tra mọi cặp chữ và đường viền ở cả hai chế độ, bằng tỷ lệ WCAG 2 và APCA, và từ chối build theme không đạt. Một số mức tối thiểu:

Tiền cảnh	Trên	Tối thiểu
color-text-primary	color-background-surface	7:1
color-text-secondary	color-background-surface	4.5:1
color-text-tertiary	color-background-surface	3:1
color-text-on-accent	color-accent	4.5:1
color-accent, color-focus-ring	color-background-page	3:1
color-border-control	Nền page, surface, raised và sunken	3:1

color-text-tertiary chỉ đạt AA với chữ lớn. Dùng nó cho placeholder và mốc thời gian, không bao giờ cho thông tin người dùng cần để hoàn thành việc. Danh sách đầy đủ ở trang Màu sắc.

Focus luôn nhìn thấy

Mọi component tương tác hiện vòng 2px màu color-focus-ring, cách mép 2px, chỉ khi focus bằng bàn phím. Với phần tử focus được của riêng bạn, dùng focus-visible:focus-ring, và không dùng transition-colors hay transition-all vì chúng làm vòng focus hiện dần.

<a href="/settings" className="rounded-element transition-control duration-fast ease-standard focus-visible:focus-ring">
  Settings
</a>

Vùng chạm

Trên màn hình cảm ứng, control đạt vùng chạm 44px: md, lg và xl to lên, còn control sm, checkbox và nút icon giữ nguyên hình nhưng mở rộng vùng chạm. Ô nhập chữ không mở rộng được, nên hãy dùng Input lg hoặc xl trên màn hình ưu tiên cảm ứng. Chữ trong input là 16px trên cảm ứng để iOS Safari không phóng to trang.

Không bao giờ chỉ dùng màu

Trạng thái cần chữ hoặc icon, không chỉ nền đỏ hay xanh.
Link luôn có gạch chân, vì accent có thể trùng màu chữ.
Biểu đồ có hơn bốn chuỗi dữ liệu cần nhãn trực tiếp hoặc hoa văn.
Control bị vô hiệu hóa cũng phải không tương tác được (disabled hoặc aria-disabled), không chỉ có màu xám.

Giảm chuyển động

Chuyển động nằm sau motion-safe:. Khi người dùng yêu cầu giảm chuyển động, hiệu ứng trượt và thu nhỏ khi nhấn dừng lại, chỉ còn mờ dần và đổi màu. Vòng lặp như nhịp của Skeleton không chạy.

<button className="transition-control duration-fast ease-standard motion-safe:active:scale-pressed">

Bàn phím và trình đọc màn hình

Lớp phủ, menu, select, tab và các component tương tác khác theo đúng cách dùng bàn phím quen thuộc. Dialog và sheet đưa focus vào trong khi mở và trả lại khi đóng. Spec của mỗi component ghi vai trò và lưu ý tiếp cận trên trang component.

Phần của bạn

Mỗi ô nhập có nhãn nhìn thấy được, dùng Field với FieldLabel hoặc Label.
Mỗi nút chỉ có icon cần aria-label (kiểu của Button bắt buộc) và icon trang trí đánh dấu aria-hidden.
Viết alt text cho ảnh có nghĩa và để alt rỗng cho ảnh trang trí.
Không bao giờ làm chữ nhạt bằng opacity; dùng token chữ secondary hoặc tertiary.
Mỗi trang một h1 và tiêu đề theo đúng thứ tự.

<Button iconOnly aria-label="Close" variant="ghost">
  <IconX size={16} aria-hidden />
</Button>