Angular Accessibility (a11y): สร้าง App ที่ทุกคนใช้ได้

Accessibility คืออะไร

Accessibility (a11y) คือการทำให้ app ใช้งานได้สำหรับทุกคน รวมถึงผู้พิการ เช่น ผู้ที่ใช้ screen reader หรือ keyboard navigation

ARIA Attributes

<!-- Button ที่มีความหมายชัดเจน -->
<button aria-label="ปิดหน้าต่าง" (click)="close()">
  <mat-icon>close</mat-icon>
</button>

<!-- Loading state -->
<div role="status" aria-live="polite">
  @if (loading()) {
    <span>กำลังโหลด...</span>
  }
</div>

<!-- Form error -->
<input
  [attr.aria-invalid]="form.get('email')?.invalid"
  [attr.aria-describedby]="'email-error'"
/>
<span id="email-error" role="alert">
  @if (form.get('email')?.hasError('required')) {
    กรุณากรอก email
  }
</span>

Focus Management

import { FocusTrap, FocusTrapFactory } from '@angular/cdk/a11y';

@Component({ ... })
export class DialogComponent implements AfterViewInit, OnDestroy {
  @ViewChild('dialogContent') dialogContent!: ElementRef;
  private focusTrap?: FocusTrap;

  constructor(private focusTrapFactory: FocusTrapFactory) {}

  ngAfterViewInit() {
    // กักดัก focus ไว้ใน dialog
    this.focusTrap = this.focusTrapFactory.create(this.dialogContent.nativeElement);
    this.focusTrap.focusInitialElement();
  }

  ngOnDestroy() {
    this.focusTrap?.destroy();
  }
}

Keyboard Navigation

@Component({
  template: `
    <ul role="listbox">
      @for (item of items; track item.id) {
        <li
          role="option"
          tabindex="0"
          [attr.aria-selected]="selectedId() === item.id"
          (click)="select(item)"
          (keydown.enter)="select(item)"
          (keydown.space)="select(item)"
        >
          {{ item.name }}
        </li>
      }
    </ul>
  `
})

Color Contrast

/* ✅ contrast ratio >= 4.5:1 สำหรับ normal text */
.text { color: #1a1a1a; background: #ffffff; }

/* ❌ contrast ต่ำเกินไป */
.text { color: #aaaaaa; background: #ffffff; }

ทดสอบ Accessibility

npm install -D @axe-core/angular

import { axe } from '@axe-core/angular';
// ใช้ใน development เท่านั้น

สรุป

การทำ accessibility ไม่ยากอย่างที่คิด เริ่มจาก semantic HTML, ARIA labels และ keyboard navigation ก็ช่วยได้มากแล้วครับ