Angular CDK (Component Development Kit) là bộ công cụ chính thức của Angular, cung cấp các dịch vụ và chỉ thị thiết yếu để xây dựng ứng dụng web đáp ứng tiêu chuẩn truy cập. Với sự hỗ trợ tích hợp sẵn cho WCAG 2.1, CDK giúp nhà phát triển tập trung vào logic ứng dụng mà không lo lắng về các chi tiết phức tạp của tính khả dụng.

Tại sao Tính Truy Cập là Yêu Cầu Không Thể Thiếu

Theo Tổ chức Y tế Thế giới, khoảng 1 tỷ người trên thế giới có một dạng khiếm khuyết, khiến việc thiết kế web đạt tiêu chuẩn truy cập trở thành điều bắt buộc. Không chỉ giúp người dùng có khuyết tật, tính truy cập còn cải thiện trải nghiệm người dùng chung, tối ưu hóa SEO và đáp ứng các quy định pháp lý toàn cầu.

Các Module Hỗ Trợ Tính Truy Cập Chính

Module A11y

Module @angular/cdk/a11y cung cấp các chỉ thị và dịch vụ hỗ trợ quản lý tập trung, điều hướng bàn phím và thuộc tính ARIA:

import { FocusMonitor } from '@angular/cdk/a11y';

constructor(private focusTracker: FocusMonitor) {
  this.focusTracker.monitor(elementRef)
    .subscribe(focusState => {
      console.log('Trạng thái tập trung:', focusState);
    });
}

Module Tương Tác

Các module như drag-drop và listbox tích hợp sẵn hỗ trợ truy cập, đảm bảo các thành phần tương tác thân thiện với trình đọc màn hình:

import { DragDropModule } from '@angular/cdk/drag-drop';
import { CdkListboxModule } from '@angular/cdk/listbox';

Thực Hành Cơ Bản

Quản Lý Tập Trung

Sử dụng FocusMonitor để theo dõi trạng thái tập trung của phần tử:

import { FocusMonitor } from '@angular/cdk/a11y';

constructor(private focusTracker: FocusMonitor) {
  this.focusTracker.monitor(elementRef)
    .subscribe(focusState => {
      // Xử lý thay đổi trạng thái tập trung
    });
}

Quản Lý Thuộc Tính ARIA

Các thành phần CDK tự động xử lý thuộc tính ARIA, ví dụ như menu tự động cập nhật aria-expanded:

<mat-menu [opened]="isMenuOpen" cdkMenuTrigger>
  <button mat-menu-item>Menu Item</button>
</mat-menu>

Liên Kết Nhãn và Thành Phần

Đảm bảo nhãn và thành phần form được liên kết chính xác:

<mat-form-field>
  <mat-label>Tên đăng nhập</mat-label>
  <input matInput aria-describedby="user-name-guide">
  <mat-hint id="user-name-guide">Vui lòng nhập tên người dùng</mat-hint>
</mat-form-field>

Hỗ Trợ Điều Hướng Bàn Phím

Tích hợp module keyboard để hỗ trợ điều hướng bằng bàn phím:

import { KeyboardModule } from '@angular/cdk/keyboard';

Độ tương phản Màu

Sử dụng hệ thống chủ đề của Angular Material để đảm bảo độ tương phản văn bản với nền đạt tiêu chuẩn WCAG 2.1, tránh phụ thuộc vào màu sắc để truyền đạt thông tin.