Accessibility

1thay Design System cam kết xây dựng các sản phẩm số có thể tiếp cận được với mọi người dùng, bao gồm cả những người khiếm khuyết về thị giác, thính giác hay vận động. Chúng tôi tuân thủ nghiêm ngặt các tiêu chuẩn Web Content Accessibility Guidelines (WCAG) 2.1 cấp độ AA, lấy cảm hứng từ chuẩn mực của Salesforce Lightning Design System.

Tương phản màu sắc (Color Contrast)

Tất cả các màu chữ và màu nền trong 1thay (kể cả chế độ Dark Mode) đều được tính toán để đảm bảo độ tương phản đủ an toàn cho mắt. Tỷ lệ tương phản tối thiểu là 4.5:1 đối với văn bản thông thường và 3:1 đối với văn bản lớn (Heading).

Nên làm

Sử dụng chữ màu đen 90% trên nền trắng hoặc nền xám nhạt (Black-5) để đảm bảo độ nét tuyệt đối.

Không nên

Dùng chữ xám (Black-50) trên nền xám nhạt (Black-10) sẽ làm người có thị lực yếu không thể đọc được.

Trạng thái Focus (Focus States)

Focus Outline là yếu tố sống còn đối với người dùng sử dụng bàn phím (Keyboard Navigation). Trong 1thay, Focus Outline sử dụng viền dày rõ ràng để dễ nhận diện trên mọi loại nền. Không bao giờ vô hiệu hóa outline mặc định trừ khi bạn thay thế bằng một style focus-visible tốt hơn.

/* Ví dụ về Focus State chuẩn */
.hds-button:focus-visible {
  outline: 3px solid var(--color-brand-primary);
  outline-offset: 2px;
}

Gợi ý Thực hành (Best Practices)