Đặc tả giao diện và trợ năng — T09/T12 chuẩn bị
Ngày: 26/09/2026. Phạm vi: trình diễn ngoại tuyến nội bộ, không phục vụ sức khỏe thật.
1. Bố cục
Nhận diện chính là dự án nghiên cứu CXK. Công ty Vaga chỉ xuất hiện ở phần bảo trợ.
| Nội dung | Thành phần | Lý do |
|---|---|---|
| Ranh giới sử dụng | Tiêu đề và lời nhắc đầu trang | Đọc trước khi chọn mẫu |
| Điều chỉnh chữ | Hai nút và thông báo mức chữ | Không cần nhập hoặc lưu lựa chọn |
| Ba tình huống | Nhóm nút có trạng thái chọn | Thao tác trực tiếp, không cần menu |
| Kết quả | Vùng thông báo và danh sách thuộc tính | Không giả dạng hội thoại |
| Giới hạn | Danh sách cuối trang | Giữ phụ thuộc nghiên cứu rõ ràng |
Không cần biểu đồ hoặc thư viện biểu tượng. Phông hệ thống tránh tải font ngoài.
Màu và bề mặt dùng biến CSS riêng của CXK.
2. Hành vi hiện có
Khi mở trang, chưa chọn tình huống. Không kiểm tra trạng thái máy chủ.
Chọn nút thay thế kết quả hiện tại, không thêm lịch sử.
Nút đặt lại trả kết quả về trạng thái rỗng; không đặt lại mức chữ.
Tải lại trang xóa lựa chọn và trả cỡ chữ về mức đầu.
Không có chờ giả, hoạt ảnh, tự chuyển tiêu điểm hoặc cuộn tự động.
| Tình huống | Mẫu cố định | Kết quả mô phỏng |
|---|---|---|
| Chưa sẵn sàng | GET /api/readiness |
503, OFFLINE_NOT_READY |
| Yêu cầu bị từ chối | POST /api/chat, {"text":"SYNTHETIC_ALPHA"} |
503, OFFLINE_SERVICE_UNAVAILABLE |
| Sai cấu trúc | POST /api/chat, {} |
422, INVALID_REQUEST, trường text, INVALID_FIELD |
Đường dẫn là văn bản tham chiếu, không phải liên kết hay lời gọi.
Thông báo readiness là diễn giải giao diện, không phải JSON thực nhận.
Thông báo 503/422 đối chiếu hợp đồng backend 0.1.0-offline.
Hàm chọn mẫu không xác thực yêu cầu tùy ý. Mã ngoài danh sách trả null.
Không mô phỏng HTTP 200, tránh nhầm tiến trình phản hồi với sẵn sàng tư vấn.
3. Ranh giới dữ liệu
- Không nhập văn bản, tải tệp hoặc dùng nội dung sức khỏe tổng hợp.
- Không gọi mạng, mô hình, backend hoặc có chế độ chuyển sang API thật.
- Không dùng localStorage, sessionStorage, IndexedDB, cookie hoặc lịch sử hội thoại.
- Không có camera, micro, phân tích sử dụng hoặc nguồn y khoa.
- Trạng thái chỉ nằm trong bộ nhớ của thành phần Vue.
connect-src 'none'chặn kết nối từ trang; đây không phải môi trường cách ly hoàn chỉnh.
Máy phục vụ vẫn phải chuyển tệp HTML/JS/CSS khi tải trang qua loopback.
Không có CDN, font từ xa, ảnh ngoài hoặc service worker.
Cài gói npm cần mạng; việc đó khác hành vi của ứng dụng đã dựng.
Không triển khai, xuất bản hoặc thử dữ liệu bệnh nhân trong phạm vi này.
4. Trợ năng đã thiết kế
lang="vi", một tiêu đề cấp một, vùng main và tiêu đề từng mục.- Liên kết bỏ qua đầu trang trỏ đến main có thể nhận tiêu điểm.
- Nút HTML có nhãn; mẫu đang chọn có
aria-pressedvà viền dày. - Kết quả dùng
role="status",aria-live="polite",aria-atomic="true". - Tiêu điểm có viền rõ. Không dùng màu làm dấu hiệu chọn duy nhất.
- Nút cao tối thiểu 48 pixel; chữ cơ sở 18 pixel khi trình duyệt mặc định 16 pixel.
- Ba mức chữ: 100%, 115%, 130% của cỡ cơ sở; không thay thế zoom trình duyệt.
- Không khóa phóng to hoặc đặt chiều cao nội dung cố định.
- Dưới 55rem, hai cột chuyển thành một cột. Chuỗi mã dài được xuống dòng.
- Màu tối theo
prefers-color-scheme; dấu chọn hỗ trợforced-colors.
Đây là lựa chọn triển khai, chưa phải chứng nhận WCAG AA.
jsdom không đo bố cục thực, tương phản hay trải nghiệm trình đọc màn hình.
5. Kiểm thử tự động
tests/demo.test.js kiểm tra dữ liệu bất biến, mã mô phỏng, lỗi trường và giới hạn chữ.
tests/App.test.js kiểm tra trạng thái đầu, từng mẫu, thay thế kết quả, đặt lại và không lưu mức chữ.
Kiểm thử kiểm tra liên kết bỏ qua, tiêu đề, nút và thuộc tính vùng thông báo.
Lời gọi mạng, lưu trữ và camera/micro thông dụng bị chặn khi kiểm thử giao diện.
Bộ chặn không chứng minh mọi khả năng kết nối của trình duyệt đã được kiểm toán.
Nhấn nút trong jsdom không thay thế thử Enter/Space trên trình duyệt thật.
6. Kiểm tra trình duyệt có phạm vi
Nhánh chính đã kiểm bản dựng bằng trình duyệt tự động tại loopback ngày 26/09/2026.
Ba nút trả đúng mã mẫu; tăng chữ dừng ở mức ba; đặt lại xóa lựa chọn.
Ghi nhận tải HTML/JS/CSS từ loopback, không gọi API/URL ngoài, không lỗi JavaScript, không dữ liệu localStorage/sessionStorage.
Tab đầu đến liên kết bỏ qua; Enter chuyển tiêu điểm đến main. Enter trên nút tăng chữ hoạt động.
Đã kiểm chiều rộng 375 pixel ở chế độ tối và 1280 pixel ở chế độ sáng; không cuộn ngang toàn trang.
Tăng cỡ chữ gốc CSS gấp đôi ở 1280 pixel không gây cuộn ngang; phép này không thay zoom trình duyệt thật.
21 test Vitest đạt và build Vite thành công trên bản sao nguồn ở ổ cục bộ.
Phần còn chờ
- [ ] Mở bản dựng bằng loopback; console không lỗi.
- [ ] Network chỉ có tệp ứng dụng nội bộ, không gọi API hoặc dịch vụ ngoài.
- [ ] Tab/Shift+Tab, Enter/Space; liên kết bỏ qua chuyển đúng tiêu điểm.
- [ ] Thông báo với NVDA không đọc lặp hoặc mất ngữ cảnh.
- [ ] Bố cục tại 320, 360, 390, 430, 768, 1366 và 1920 pixel.
- [ ] Zoom 200%/400% với mức chữ lớn nhất; không che nút hoặc cuộn ngang toàn trang.
- [ ] Đo tương phản chữ, nút, viền và tiêu điểm ở cả sáng/tối.
- [ ] Windows High Contrast và chế độ giảm chuyển động.
- [ ] Tải lại trang; kho lưu trữ không có dữ liệu ứng dụng.
- [ ] Thử với người cao tuổi chỉ sau khi đủ điều kiện nghiên cứu và phê duyệt.
Danh sách còn chờ giữ nguyên vì phép thử tự động có phạm vi không hoàn thành kiểm thủ công hoặc NVDA.
Không đánh dấu T12 hoàn thành. T10/T11 và các phụ thuộc y khoa chưa được giải quyết ở đây.