Trình tạo nút CSS

Mã được tạo gồm những gì

HTML dùng phần tử <button type="button"> thật và đặt nhãn hiển thị trong một span. CSS bao gồm sáu trạng thái hữu ích:

• Mặc định cho giao diện bình thường khi chưa tương tác
• Rê chuột khi dùng thiết bị trỏ
• Lấy nét bằng bàn phím qua :focus-visible
• Đang nhấn trong lúc người dùng nhấn nút
• Vô hiệu hóa qua thuộc tính disabled gốc
• Đang tải qua aria-busy="true"

Ứng dụng của bạn vẫn phải quyết định khi nào nút bị vô hiệu hóa hoặc bận. Trình tạo chỉ cung cấp quy tắc trình bày, không tự tạo trạng thái ứng dụng hay gắn hành động nhấp.

Hướng dẫn về độ tương phản không phải chứng nhận tuân thủ

Trình chỉnh sửa tính độ tương phản chữ thấp nhất giữa màu nền cơ bản, điểm cuối chuyển màu, màu rê chuột và màu đang nhấn. Mức 4.5:1 được dùng làm mục tiêu cho chữ cỡ thường. Công cụ cũng so sánh đường viền lấy nét với nền xem trước sáng và dùng 3:1 làm mục tiêu cho thành phần không phải chữ.

Các con số này giúp phát hiện lỗi phổ biến, nhưng trang hoàn chỉnh có thể đặt nút trên một nền khác. Hãy kiểm tra lại độ tương phản của lấy nét và đường viền trong bố cục thật. Thành phần vô hiệu hóa được giảm độ mờ và cần lời giải thích gần đó nếu mục đích không rõ ràng.

Kích thước vùng bấm và chuyển động

Quy tắc xuất ra áp dụng kích thước tối thiểu theo cả chiều nội tuyến và chiều khối là 44 px. Đây là vùng bấm thoải mái cho nhiều giao diện cảm ứng và lớn hơn mức tối thiểu 24 CSS px trong Tiêu chí thành công 2.5.8 của WCAG 2.2. Sản phẩm cuối vẫn phải xét bố cục, khoảng cách, ngoại lệ và hướng dẫn của nền tảng.

Chuyển động khi rê và nhấn sẽ bị loại bỏ nếu người dùng yêu cầu giảm chuyển động. Chỉ báo tải quay chậm lại thay vì biến mất, vì vậy trạng thái bận vẫn nhìn thấy được.

Ranh giới đầu ra an toàn

Nhãn hiển thị được chuẩn hóa, giới hạn ở 120 cụm ký tự, loại bỏ ký tự điều khiển hướng vô hình và thoát HTML trong đoạn mã lẫn tệp tải xuống. Màu phải là giá trị thập lục phân sáu chữ số. Mọi thiết lập số đều được làm tròn và giới hạn trong khoảng ghi bên cạnh điều khiển.

Trình chỉnh sửa đầy đủ hoạt động trong bộ nhớ trình duyệt. Trong quy trình bốn trang tùy chọn, thiết kế có phiên bản được giữ trong sessionStorage của thẻ hiện tại. Nhãn và giá trị thiết kế không được đưa vào URL của quy trình hoặc gửi qua Livewire.

Sử dụng trạng thái đang tải

Đặt và xóa thuộc tính bận trong mã ứng dụng:

<button type="button" class="generated-button" aria-busy="true" disabled>
  <span class="generated-button__label">Đang lưu</span>
</button>

aria-busy cho biết một bản cập nhật đang diễn ra. Thêm disabled nếu cần ngăn kích hoạt lặp lại. Khi thao tác hoàn tất, hãy xóa cả hai thuộc tính và đưa thông báo thành công hoặc lỗi quan trọng vào vùng trạng thái phù hợp.