Tổng quan khả năng tiếp cận
Yugen UI được xây để mặc định đã tiếp cận được: ngữ nghĩa ARIA từ Radix, điều hướng bàn phím đầy đủ, focus rõ ràng và tương phản đạt WCAG 2.1 AA.
Nguyên tắc
Component lo phần cơ chế (role, phím, focus); bạn lo phần nội dung (nhãn, tiêu đề, alt, thứ tự trang). Cả hai cần đủ thì giao diện mới tiếp cận được.
Ngữ nghĩa trước
Phần tử gốc đúng (button, a, input, table) và role ARIA từ Radix. Không dựng nút bằng div.
Bàn phím ngang chuột
Mọi thao tác bằng chuột đều làm được bằng bàn phím, theo mẫu tương tác của WAI-ARIA APG.
Thấy được trạng thái
Focus 2px tương phản cao; chữ ≥ 4.5:1, viền control ≥ 3:1; không dùng màu làm tín hiệu duy nhất.
Nghe được thay đổi
Lỗi, thông báo và kết quả bất đồng bộ được đọc qua live region với mức độ phù hợp.
Tôn trọng tuỳ chọn người dùng
prefers-reduced-motion tắt animation lặp; theme sáng / tối theo hệ điều hành; bố cục reflow khi phóng to.
Bàn phím
Tab chỉ dừng một lần ở mỗi nhóm (roving tabindex); bên trong nhóm dùng phím mũi tên. Trong RTL, ← / → được đảo theo chiều đọc.
| Component | Phím | Hành vi |
|---|---|---|
| Mọi control | TabShift+Tab | Tới / lùi control kế tiếp theo thứ tự DOM. |
| Button, ToggleButton, Link | EnterSpace | Kích hoạt (Link chỉ Enter). ToggleButton đổi aria-pressed. |
| Checkbox, Switch | Space | Đổi trạng thái. |
| RadioGroup, ToggleGroup, Toolbar | ←→↑↓HomeEnd | Di chuyển trong nhóm (RadioGroup chọn luôn mục mới). |
| Tabs | ←→HomeEnd | Chuyển tab và hiện panel tương ứng; ↑ / ↓ khi tab dọc. |
| Menu, ContextMenu, Menubar | Enter↓↑→Esc | Mở, di chuyển giữa item, → mở menu con, Esc đóng và trả focus; gõ chữ để nhảy tới item. |
| Dropdown | EnterSpace↑↓Esc | Mở listbox, chọn option, gõ chữ để nhảy (typeahead). |
| Combobox, TagPicker, Command | ↑↓EnterEscBackspace | Gõ để lọc, ↑ / ↓ highlight, Enter chọn; Backspace ở ô trống xoá tag cuối (TagPicker). |
| Slider | ←→PageUpPageDownHomeEnd | Giảm / tăng một bước, bước lớn, về min / max. |
| Dialog, Drawer | EscTab | Focus bị giữ trong bề mặt; Esc đóng (trừ modalType="alert"); đóng xong focus về trigger. |
| Popover, HoverCard, Tooltip | Esc | Đóng. Tooltip mở khi trigger nhận focus bàn phím. |
| Accordion | EnterSpace↑↓HomeEnd | Mở / đóng panel, di chuyển giữa các header. |
| Tree | ↑↓→←HomeEnd | → mở nhánh / vào con, ← đóng nhánh / về cha. |
| List (navigationMode) | ↑↓→← | Di chuyển giữa item; chế độ composite: → / ← vào / ra nội dung tương tác trong item. |
| Toast | F8 | Nhảy tới vùng thông báo; Tab tới nút hành động / đóng. |
Ngữ nghĩa cho trình đọc màn hình
Phần lớn do Radix cung cấp; Yugen bổ sung nhãn mặc định tiếng Việt cho nút đóng, phân trang, breadcrumb.
| Component | Role / thuộc tính |
|---|---|
| Dialog / DialogSurface | role="dialog" hoặc alertdialog, aria-modal, tên từ DialogTitle, mô tả từ DialogDescription. |
| Menu | menu, menuitem, menuitemcheckbox, menuitemradio, aria-expanded trên trigger. |
| Tabs | tablist, tab (aria-selected, aria-controls), tabpanel. |
| Checkbox, Switch, Radio | checkbox (aria-checked="mixed" khi indeterminate), switch, radiogroup / radio. |
| Slider | slider với aria-valuenow / min / max; tên từ label hoặc aria-label. |
| Dropdown, Combobox | combobox + listbox / option, aria-expanded, aria-activedescendant. Trong Field, listbox của Combobox / TagPicker lấy tên từ nhãn (aria-labelledby). |
| Breadcrumb, Pagination | nav có aria-label, trang hiện tại aria-current="page". |
| Table | th scope="col", cột sắp xếp có aria-sort; TableSelectionCell có nhãn “Chọn hàng”. |
| MessageBar | role="alert" cho error / warning, role="status" cho info / success. |
| Toast | Vùng thông báo của Radix: toast lỗi / cảnh báo đọc ngay (assertive), còn lại đọc lịch sự (polite). |
| Spinner, ProgressBar | role="progressbar", Spinner mặc định aria-label="Đang tải". |
| Avatar, Persona | role="img" với tên người; chấm trạng thái có nhãn. |
| Field, Input | label for, aria-describedby trỏ tới hint / validation, aria-invalid khi lỗi. |
Checklist trước khi phát hành
Đánh dấu khi kiểm tra — danh sách chỉ lưu trong phiên xem này.
Đã hoàn thành 0 / 10
Công cụ & trang liên quan
- Kiểm tra tự động: axe DevTools, Accessibility Insights for Web, Lighthouse (phát hiện khoảng 30–40% lỗi — phần còn lại cần kiểm thử tay).
- Trình đọc màn hình: NVDA (Windows, miễn phí), Narrator, VoiceOver (macOS / iOS), TalkBack (Android).
- Chrome DevTools › Rendering: giả lập
prefers-reduced-motion,prefers-color-scheme,forced-colorsvà các dạng mù màu.
Đọc tiếp: