Radix UI Primitives กับ Compliance Automation — วิธีสร้าง Accessible UI ที่ผ่านมาตรฐาน Compliance อัตโนมัติ

Radix UI Primitives คืออะไร

Radix UI Primitives เป็น Low-level, Unstyled Component Library สำหรับ React ที่ให้ Behavior, Accessibility และ Interaction Patterns มาพร้อมใช้งาน โดยไม่บังคับ Style ทำให้สามารถ Customize UI ได้เต็มที่ด้วย CSS Framework ที่ต้องการ เช่น Tailwind CSS, CSS Modules หรือ Styled Components

จุดเด่นคือทุก Component ผ่านมาตรฐาน WAI-ARIA มีการจัดการ Keyboard Navigation, Focus Management, Screen Reader Support อย่างถูกต้อง เป็นพื้นฐานของ shadcn/ui ที่นิยมมากในปัจจุบัน การใช้ Radix UI ช่วยให้ผ่าน Accessibility Compliance ได้ง่ายขึ้นมาก

เนื้อหาเกี่ยวข้อง — CircleCI Orbs Capacity Planning

Compliance Automation Pipeline

# .github/workflows/accessibility-compliance.yml
# GitHub Actions — Accessibility Compliance Check

name: Accessibility Compliance
on:
 push:
 branches: [main, develop]
 pull_request:
 branches: [main]

jobs:
 axe-scan:
 name: Axe Accessibility Scan
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4

 - name: Setup Node.js
 uses: actions/setup-node@v4
 with:
 node-version: 20
 cache: npm

 - name: Install Dependencies
 run: npm ci

 - name: Build
 run: npm run build

 - name: Start Server
 run: npm run preview &
 env:
 PORT: 3000

 - name: Wait for Server
 run: npx wait-on http://localhost:3000 --timeout 30000

 - name: Run Axe Accessibility Tests
 run: |
 npx @axe-core/cli http://localhost:3000 \
 --tags wcag2a, wcag2aa, wcag21aa \
 --exit \
 --save results/axe-report.json

 - name: Upload Report
 if: always()
 uses: actions/upload-artifact@v4
 with:
 name: accessibility-report
 path: results/

 playwright-a11y:
 name: Playwright Accessibility Tests
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4

 - name: Setup Node.js
 uses: actions/setup-node@v4
 with:
 node-version: 20

 - name: Install Dependencies
 run: |
 npm ci
 npx playwright install --with-deps chromium

 - name: Run Accessibility Tests
 run: npx playwright test tests/accessibility/

 - name: Upload Report
 if: always()
 uses: actions/upload-artifact@v4
 with:
 name: playwright-a11y-report
 path: playwright-report/

 lighthouse:
 name: Lighthouse Accessibility Audit
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4

 - name: Setup Node.js
 uses: actions/setup-node@v4
 with:
 node-version: 20

 - name: Build
 run: npm ci && npm run build

 - name: Lighthouse CI
 uses: treosh/lighthouse-ci-action@v11
 with:
 configPath: .lighthouserc.json
 uploadArtifacts: true

---
# .lighthouserc.json
{
 "ci": {
 "assert": {
 "assertions": {
 "categories:accessibility": ["error", {"minScore": 0.95}],
 "categories:performance": ["warn", {"minScore": 0.90}],
 "categories:best-practices": ["warn", {"minScore": 0.90}]
 }
 },
 "collect": {
 "startServerCommand": "npm run preview",
 "url": ["http://localhost:3000", "http://localhost:3000/about"]
 }
 }
}

WCAG 2.1 Checklist

• Color Contrast: Text ต้องมี Contrast Ratio 4.5:1 สำหรับ Normal Text, 3:1 สำหรับ Large Text ใช้ Radix Colors ที่ออกแบบมาให้ผ่าน
• Keyboard Navigation: ทุก Interactive Element ต้องใช้ Keyboard ได้ Radix UI จัดการ Tab Order, Arrow Keys, Enter/Space ให้
• Focus Indicators: ต้องมี Visual Focus Indicator ที่ชัดเจน ใช้ CSS outline หรือ ring ของ Tailwind
• ARIA Labels: ทุก Icon Button ต้องมี aria-label ทุก Form Input ต้องมี Label ที่เชื่อมโยง
• Screen Reader: Content ต้องอ่านได้ด้วย Screen Reader ใช้ Semantic HTML และ ARIA Roles ที่ถูกต้อง
• Motion: Animation ต้อง Respect prefers-reduced-motion ให้ผู้ใช้ที่มีอาการเวียนศีรษะ
• Responsive: Content ต้องใช้งานได้ทุกขนาดหน้าจอ ไม่มี Horizontal Scroll ที่ 320px

Radix UI Primitives คืออะไร

Radix UI เป็น Unstyled Accessible Component Library สำหรับ React ให้ Behavior และ Accessibility มาพร้อม เช่น Keyboard Navigation, Focus Management, ARIA Attributes Customize Style ได้เต็มที่ เป็นพื้นฐานของ shadcn/ui

สรุป

Radix UI Primitives ช่วยให้สร้าง Accessible UI ได้ง่ายและถูกต้องตาม WCAG 2.1 เมื่อรวมกับ Compliance Automation ใน CI/CD Pipeline ใช้ Axe, Playwright และ Lighthouse ตรวจสอบทุก Commit อัตโนมัติ ทำให้มั่นใจว่า UI ผ่านมาตรฐาน Accessibility ตลอดเวลา ไม่ต้องตรวจสอบ Manual ทุกครั้ง

เนื้อหาเกี่ยวข้อง — ทำความเข้าใจ ดูว่าใครโอนเงินให้เรากสิกร