Alat Ujian Kebolehcapaian

Alat Ujian Automatik

Alat ujian kebolehcapaian automatik membantu mengesan masalah lebih awal dalam proses pembangunan. Walaupun ia tidak dapat menggantikan ujian manual, ia menyediakan barisan pertahanan pertama terhadap masalah kebolehcapaian yang biasa.

Plugin ESLint: jsx-a11y

Plugin jsx-a11y ESLint menyediakan analisis statik untuk peraturan kebolehcapaian pada elemen JSX, mengesan masalah sebelum kod anda dijalankan.

Ciri Utama

• Pemeriksaan AST statik untuk peraturan kebolehcapaian
• Disepadukan ke dalam konfigurasi ESLint kami
• Menguatkuasakan amalan terbaik pada masa pembangunan

Implementasi

// Dalam konfigurasi ESLint anda
module.exports = {
  extends: [
    // ... lanjutan lain
    'plugin:jsx-a11y/recommended', 
  ],
  plugins: [
    // ... plugin lain
    'jsx-a11y', 
  ],
  rules: {
    // Anda boleh menyesuaikan peraturan tertentu
    'jsx-a11y/aria-role': 'error',
    'jsx-a11y/img-redundant-alt': 'warn',
  }
};

Storybook: a11y-addon

Untuk komponen yang didokumentasikan, kami menggunakan addon kebolehcapaian Storybook untuk melakukan ujian kebolehcapaian semasa masa larian.

Ciri Utama

• Mengintegrasikan axe-core untuk ujian komprehensif
• Menyediakan maklum balas visual dalam UI Storybook
• Menguji komponen dalam keadaan dan varian yang berbeza

VS Code: axe Accessibility Linter

Sambungan axe Accessibility Linter untuk VS Code membantu mengenal pasti masalah kebolehcapaian semasa pembangunan dengan maklum balas masa nyata.

Ciri Utama

• Menyediakan maklum balas masa nyata dalam editor anda
• Menyerlahkan isu kebolehcapaian dengan penerangan terperinci
• Melengkapi ESLint dengan panduan yang lebih terperinci

Tip Ujian

• Pasang sambungan melalui pasaran VS Code
• Cari isu yang diserlahkan dalam fail JSX/TSX anda
• Letakkan tetikus di atas isu untuk penerangan terperinci dan cadangan pembaikan

Sumber & Rujukan