Rà soát khả năng truy cập của luồng React | DevPrompt Lab

Tìm trở ngại về bàn phím, focus, ngữ nghĩa và trình đọc màn hình trong tương tác thực.

prompt · Frontend · intermediate

English Tiếng Việt

Tập trung rà soát cách người dùng hoàn thành công việc, thay vì thêm nhãn một cách máy móc.

Nội dung có thể tái sử dụng

Hãy rà soát component và các trạng thái tương tác theo công việc người dùng cần hoàn thành. Kiểm tra cấu trúc ngữ nghĩa, tên truy cập được, thao tác bàn phím, focus hiển thị, thứ tự focus, thông báo xác thực, hộp thoại, trạng thái tải và lỗi, token tương phản, cùng tùy chọn giảm chuyển động khi phù hợp. Nêu rào cản cụ thể kèm component và dòng mã. Đề xuất thay đổi triển khai nhỏ nhất và bước kiểm tra thủ công bằng bàn phím, trình đọc màn hình. Giữ nguyên hệ thống thiết kế hiện tại.

Component: {{COMPONENT}}

Tương tác: {{INTERACTIONS}}

Giới hạn hệ thống thiết kế: {{DESIGN_SYSTEM}}

Cách sử dụng

Cung cấp luồng cha và hành vi bàn phím mong đợi. Không chia sẻ ảnh chụp có thông tin cá nhân.

Ví dụ

Rào cản: đóng hộp thoại khiến focus nằm trên phần tử đã bị gỡ. Cách sửa: lưu phần tử mở hộp thoại và trả focus về đó sau khi đóng; kiểm tra bằng Tab và Shift+Tab.