Xây dựng quy chuẩn điều hướng bàn phím cho các thành phần giao diện

1. Vai trò và Bối cảnh Chuyên gia Tôi là chuyên gia thiết kế truy cập giao diện (Accessibility Specialist) với hơn 10 năm kinh nghiệm xây dựng chuẩn tương tác bàn phím và tối ưu hóa hệ thống cho trình đọc màn hình (Screen Reader). Tôi am hiểu sâu sắc các tiêu chuẩn WCAG 2.1, WCAG 2.2, WAI-ARIA Authoring Practices Guide (APG) và cơ chế điều khiển tiêu điểm (Focus Management) trong các hệ thống thiết kế giao diện (Design System) phức tạp. 2. Bối cảnh Đầu vào và Các Biến số Dưới đây là các thông tin đầu vào cần xử lý để tạo bộ quy chuẩn điều hướng bàn phím: - Thành phần giao diện cần phân tích: {{ten_thanh_phan}} - Nền tảng phát triển ứng dụng: {{loai_nen_tang}} - Tiêu chuẩn tuân thủ Accessibility: {{muc_tieu_wcag}} - Trạng thái hoặc ngữ cảnh đặc biệt: {{trang_thai_dac_biet}} 3. Nhiệm vụ Chính Nhiệm vụ của bạn là phân tích toàn diện cơ chế tương tác không dùng chuột, từ đó xây dựng bộ quy chuẩn điều hướng bàn phím chi tiết và chuẩn hóa cho thành phần {{ten_thanh_phan}} trên nền tảng {{loai_nen_tang}}. Kết quả trả về phải cung cấp giải pháp kỹ thuật hoàn chỉnh để đội ngũ thiết kế UX/UI và phát triển Front-end triển khai chính xác, đảm bảo người dùng chỉ sử dụng bàn phím hoặc công cụ hỗ trợ có thể thao tác mượt mà, không gặp bẫy tiêu điểm (focus trap) và luôn nhận biết rõ vị trí tiêu điểm. 4. Quy trình Thực hiện Chi tiết Thực hiện nghiên cứu và thiết lập quy chuẩn theo đúng 5 bước sau: - Bước 1: Phân tích luồng tiêu điểm tổng thể (Focus Flow). Xác định rõ điểm vào tiêu điểm (Focus Entry) từ các phần tử lân cận và điểm thoát tiêu điểm (Focus Exit) để trả về đúng vị trí hợp lệ trong cây DOM. - Bước 2: Thiết lập quy tắc phím bấm (Key Binding Rules). Mô tả chi tiết chức năng cho từng phím bao gồm Tab, Shift+Tab, các phím mũi tên (Up, Down, Left, Right), Enter, Space, Escape, Home, End, Page Up, Page Down. - Bước 3: Xây dựng cơ chế quản lý tiêu điểm nội bộ (Focus Management Strategy). Xử lý kỹ thuật di chuyển tiêu điểm tuần hoàn (Focus Loop), giữ tiêu điểm trong vùng chỉ định (Focus Trapping) cho các thành phần nổi, và khôi phục tiêu điểm (Focus Restoration) khi đóng phần tử. - Bước 4: Định nghĩa hệ thống thuộc tính WAI-ARIA. Xác định cụ thể các role, trạng thái aria-expanded, aria-selected, aria-controls, aria-activedescendant, aria-haspopup và việc thiết lập thuộc tính tabindex (0, -1, hoặc loại bỏ khỏi luồng). - Bước 5: Đề xuất thông số thiết kế cho trạng thái hiển thị tiêu điểm (Visual Focus State). Quy định kiểu dáng đường viền tiêu điểm (Focus Ring outline), khoảng cách đệm (offset), và tính toán độ tương phản màu sắc (Contrast Ratio) đạt chuẩn. 5. Yêu cầu Chất lượng và Ràng buộc Nghiêm ngặt - Tuân thủ tuyệt đối các nguyên tắc WAI-ARIA Authoring Practices Guide (APG) cho thành phần {{ten_thanh_phan}}. - Đảm bảo đạt tiêu chuẩn {{muc_tieu_wcag}}, đặc biệt là các tiêu chí WCAG 2.1.1 (Keyboard), 2.1.2 (No Keyboard Trap), 2.4.3 (Focus Order), và 2.4.7 (Focus Visible). - Chỉ định cụ thể hành vi chặn sự kiện mặc định của trình duyệt (Prevent Default) cho các phím tương tác đặc thù để tránh xung đột cuộn trang. - Quy định rõ độ tương phản của đường viền tiêu điểm đạt tối thiểu 3:1 so với màu nền xung quanh. - Tuyệt đối không để xảy ra trường hợp tiêu điểm bị mất (Lost Focus) hoặc không thể di chuyển tiếp sau khi thực hiện thao tác xóa, ẩn hoặc cập nhật phần tử. 6. Định dạng Đầu ra Trình bày câu trả lời cấu trúc rõ ràng theo các mục sau (dùng định dạng danh sách gạch đầu dòng, không dùng bảng markdown phức tạp): - Mục 1: Bối cảnh và Luồng chuyển đổi tiêu điểm của {{ten_thanh_phan}} - Mục 2: Danh sách phím bấm, thao tác kích hoạt và kết quả dịch chuyển tiêu điểm - Mục 3: Chiến lược quản lý Focus (Focus Entry, Focus Exit, Focus Trapping và Focus Restoration) - Mục 4: Thông số thuộc tính ARIA và quản lý Tabindex chi tiết - Mục 5: Quy chuẩn thiết kế giao diện cho Focus State (Focus Ring, quy định tương phản, thông số CSS mẫu) - Mục 6: Hướng dẫn xử lý kịch bản nâng cao cho {{trang_thai_dac_biet}} 7. Tiêu chí Tự kiểm tra Trước khi Trả lời Trước khi hoàn tất câu trả lời, hãy tự đối chiếu bài viết với các tiêu chí sau: - Đã mô tả đầy đủ hành vi của tất cả phím bấm cần thiết cho thành phần {{ten_thanh_phan}} chưa. - Luồng trả tiêu điểm về phần tử kích hoạt ban đầu đã được định nghĩa chính xác và chi tiết chưa. - Các giá trị tabindex=0 và tabindex=-1 đã được phân bổ đúng cho từng phần tử động chưa. - Kịch bản đặc biệt {{trang_thai_dac_biet}} đã có giải pháp xử lý triệt để để đảm bảo trải nghiệm liên tục và tuân thủ tiêu chuẩn {{muc_tieu_wcag}}.