Xây dựng các nút điều khiển dễ tiếp cận

Tính năng web: <input type="checkbox" switch> accent-color

Sử dụng thuộc tính switch HTML trên <input type="checkbox" switch> có <label> liên kết để tạo nút bật/tắt nhị phân giúp duy trì việc gửi biểu mẫu gốc, thao tác bằng bàn phím và ngữ nghĩa của trình đọc màn hình (xem phần Tạo kiểu cho hộp đánh dấu và Biểu mẫu).

Markup (note: đây là tên ứng dụng)

Thêm thuộc tính boolean switch vào một mục nhập hộp đánh dấu chuẩn:

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>
  • Nhãn có thể bao bọc dữ liệu đầu vào hoặc được liên kết với for/id. Tất cả kiểu đều nhắm đến dữ liệu đầu vào, vì vậy, kiểu không phụ thuộc vào cấu trúc nhãn.
  • Khi được đánh dấu, dữ liệu đầu vào sẽ gửi giá trị hộp đánh dấu chuẩn. Trong JavaScript, hãy theo dõi các sự kiện change (hoặc input) và đọc .checked thay vì .value.

Định kiểu

Tuỳ chỉnh màu đánh dấu của thành phần điều khiển bằng accent-color (xem phần Biểu mẫu nhất quán với thương hiệu) và đảm bảo kiểu lấy tiêu điểm hiển thị rõ ràng:

input[type="checkbox"][switch] {
  accent-color: var(--accent-color, #1769e0);
  margin: 0;
  cursor: pointer;
}

input[type="checkbox"][switch]:focus-visible {
  outline: 3px solid var(--focus-color, #ff8c00);
  outline-offset: 4px;
}

Chiến lược dự phòng

Tính năng dự phòng và hỗ trợ trình duyệt cho switch-control

Nếu mục tiêu Baseline của bạn không hỗ trợ <input type="checkbox" switch>, hãy chỉ tải input-switch-polyfill khi 'switch' in HTMLInputElement.prototype là false. Không tải polyfill vô điều kiện. Polyfill cải thiện các hộp đánh dấu bằng thuộc tính switch bằng cách đặt role="switch", áp dụng kiểu nút chuyển (appearance: none), đồng bộ hoá accent-color được tính toán và hỗ trợ thao tác kéo con trỏ.

Sử dụng phương pháp tải gói phù hợp với dự án của bạn. Ví dụ dưới đây giả định rằng chế độ thiết lập của bạn có thể phân giải các thông số mô-đun:

if (!('switch' in HTMLInputElement.prototype)) {
  import('input-switch-polyfill');
}

Dự phòng và hỗ trợ trình duyệt cho màu nhấn

Thuộc tính accent-color là cải tiến tăng dần. Những trình duyệt không hỗ trợ thuộc tính này sẽ bỏ qua thuộc tính này và sử dụng màu giao diện người dùng mặc định.