# GoodGo Platform Kiểm Toán Khả Năng Tiếp Cận - Tài Liệu Tham Khảo Nhanh **Ngày:** 10 tháng 4 năm 2026 | **Trạng thái:** Tuân thủ WCAG 2.1 AA ở mức 70–75% --- ## 📊 Chỉ Số Chính | Chỉ số | Số lượng | Trạng thái | |--------|----------|------------| | Tổng số tệp đã phân tích | 90+ | ✅ | | Thuộc tính ARIA tìm thấy | 75 | ✅ | | Tệp sử dụng ARIA | 14 | ✅ | | Vấn đề nghiêm trọng | 2 | 🔴 | | Vấn đề lớn | 3 | 🟡 | | Vấn đề nhỏ | 2 | 🟢 | --- ## 🔴 VẤN ĐỀ NGHIÊM TRỌNG (Phải Sửa) ### 1. Thành Phần Dialog Thiếu Khả Năng Tiếp Cận **Tệp:** `apps/web/components/ui/dialog.tsx` **Vấn đề:** - Thiếu `role="dialog"` - Thiếu `aria-modal="true"` - Không có bẫy tiêu điểm (focus trap) - Không xử lý phím Escape - Phần nền không bị ẩn khỏi trình đọc màn hình **Thời gian sửa:** 2–3 giờ | **Ưu tiên:** 1 **Danh sách kiểm tra sửa nhanh:** - [ ] Thêm role="dialog" vào vùng chứa dialog - [ ] Thêm aria-modal="true" - [ ] Triển khai trình lắng nghe phím Escape - [ ] Thêm aria-hidden="true" vào lớp phủ nền - [ ] Kiểm tra với trình đọc màn hình NVDA --- ### 2. Nút Hình Thu Nhỏ Trong Thư Viện Ảnh Thiếu Nhãn **Tệp:** `apps/web/components/listings/image-gallery.tsx:69-84` **Vấn đề:** Các nút hình thu nhỏ thiếu aria-label **Thời gian sửa:** 15–30 phút | **Ưu tiên:** 2 **Sửa nhanh:** ```tsx // Thêm vào mỗi nút hình thu nhỏ: aria-label={`Select image ${index + 1}${img.caption ? ': ' + img.caption : ''}`} aria-pressed={index === selectedIndex} ``` --- ## 🟡 VẤN ĐỀ LỚN (Nên Sửa) ### 1. Tiêu Đề Layout Admin Thiếu Vai Trò Banner **Tệp:** `apps/web/app/[locale]/(admin)/layout.tsx:134` **Sửa nhanh:** ```tsx // Đổi từ:
// Sang:
``` **Thời gian sửa:** 2 phút | **Ưu tiên:** 3 --- ### 2. Độ Tương Phản Màu Chưa Được Kiểm Tra **Vấn đề:** Các biến CSS đã được định nghĩa nhưng tỷ lệ tương phản chưa được kiểm tra **Tác động:** Có thể vi phạm WCAG 1.4.3 **Thời gian sửa:** 4–6 giờ kiểm tra **Danh sách kiểm tra:** - [ ] Trích xuất giá trị biến CSS từ globals.css - [ ] Kiểm tra bằng WebAIM Contrast Checker - [ ] Xác minh tỷ lệ 4.5:1 cho văn bản thông thường (WCAG AA) - [ ] Xác minh tỷ lệ 7:1 cho tuân thủ AAA - [ ] Kiểm tra ở cả chế độ sáng và tối --- ### 3. Ô Nhập Tìm Kiếm Trang Đầu Thiếu Nhãn Hiển Thị **Tệp:** `apps/web/app/[locale]/(public)/page.tsx:87-92` **Sửa nhanh:** ```tsx
setSearchQuery(e.target.value)} />
``` **Thời gian sửa:** 30 phút | **Ưu tiên:** 4 --- ## 🟢 VẤN ĐỀ NHỎ (Nên Có) ### 1. aria-label Thừa Trên Văn Bản Đã Hiển Thị **Tệp:** `apps/web/app/[locale]/(dashboard)/layout.tsx:125` **Vấn đề:** Các liên kết có aria-label trong khi văn bản đã hiển thị **Khuyến nghị:** Xóa các aria-label thừa — văn bản hiển thị sẵn tốt hơn cho khả năng tiếp cận --- ## ✅ NHỮNG GÌ ĐANG HOẠT ĐỘNG TỐT ### Biểu Mẫu Xác Thực - ✅ Tất cả các ô nhập có nhãn hiển thị với `