AngularAngular xây accessible component qua: semantic HTML, ARIA attributes, và @angular/cdk/a11y (stable) — bộ utility a11y dùng phổ biến trong production.
Các tool chính của CDK a11y:
- FocusTrap (cdkTrapFocus) — giữ focus trong modal/dialog, không cho tab ra ngoài.
- LiveAnnouncer — đọc thông báo động cho screen reader (announce("Đã lưu")).
- FocusMonitor — theo dõi focus đến từ chuột/bàn phím/programmatic để style khác nhau.
- cdkAriaLive, A11yModule cho keyboard navigation list (ListKeyManager).
constructor(private announcer: LiveAnnouncer) {}
save() { this.announcer.announce("Đã lưu thành công", "polite") }Lưu ý 2026: Angular đang phát triển package @angular/aria (experimental) — headless directives cho WAI-ARIA pattern (toolbar, tabs, listbox...) — đáng theo dõi nhưng production hiện vẫn dùng CDK a11y + semantic HTML.
Angular builds accessible components via: semantic HTML, ARIA attributes, and @angular/cdk/a11y (stable) — the a11y utility set widely used in production.
Key CDK a11y tools:
- FocusTrap (cdkTrapFocus) — keeps focus inside a modal/dialog, preventing tabbing out.
- LiveAnnouncer — announces dynamic messages to screen readers (announce("Saved")).
- FocusMonitor — tracks whether focus came from mouse/keyboard/programmatic to style differently.
- cdkAriaLive, A11yModule for keyboard list navigation (ListKeyManager).
constructor(private announcer: LiveAnnouncer) {}
save() { this.announcer.announce("Saved successfully", "polite") }2026 note: Angular is developing the @angular/aria package (experimental) — headless directives for WAI-ARIA patterns (toolbar, tabs, listbox...) — worth watching, but production still uses CDK a11y + semantic HTML today.