Audit aksesibilitas aplikasi Angular Anda dengan codelyzer

Ingin membuat situs Angular Anda dapat diakses oleh semua orang? Anda berada di tempat yang tepat.

Minko Gechev
Zama Khan Mohammed

Membuat aplikasi Anda dapat diakses berarti semua pengguna, termasuk pengguna dengan kebutuhan khusus, dapat menggunakannya dan memahami kontennya. Menurut World Health Report, lebih dari satu miliar orang—sekitar 15% populasi dunia—memiliki disabilitas tertentu. Jadi, aksesibilitas adalah prioritas untuk setiap project pengembangan.

Dalam postingan ini, Anda akan mempelajari cara menambahkan pemeriksaan aksesibilitas codelyzer ke proses build untuk aplikasi Angular. Dengan pendekatan ini, Anda dapat menemukan bug aksesibilitas langsung di editor teks saat Anda membuat kode.

Menggunakan codelyzer untuk mendeteksi elemen yang tidak dapat diakses

codelyzer adalah alat yang berada di atas TSLint dan memeriksa apakah project TypeScript Angular mengikuti serangkaian aturan linting. Project yang disiapkan dengan Angular command line interface (CLI) menyertakan codelyzer secara default.

codelyzer memiliki lebih dari 50 aturan untuk memeriksa apakah aplikasi Angular mengikuti praktik terbaik. Dari jumlah tersebut, ada sekitar 10 aturan untuk menerapkan kriteria aksesibilitas. Untuk mempelajari berbagai pemeriksaan aksesibilitas yang disediakan oleh codelyzer dan alasannya, lihat artikel Aturan Aksesibilitas Baru di Codelyzer.

Saat ini, semua aturan aksesibilitas bersifat eksperimental dan dinonaktifkan secara default. Anda dapat mengaktifkannya dengan menambahkannya ke file konfigurasi TSLint (tslint.json):

{
  "rulesDirectory": [
    "codelyzer"
  ],
  "rules": {
    ...,
    "template-accessibility-alt-text": true,
    "template-accessibility-elements-content": true,
    "template-accessibility-label-for": true,
    "template-accessibility-tabindex-no-positive": true,
    "template-accessibility-table-scope": true,
    "template-accessibility-valid-aria": true,
    "template-click-events-have-key-events": true,
    "template-mouse-events-have-key-events": true,
    "template-no-autofocus": true,
    "template-no-distracting-elements": true
  }
}

TSLint berfungsi dengan semua editor teks dan IDE populer. Untuk menggunakannya dengan VSCode, instal plugin TSLint. Di WebStorm, TSLint diaktifkan secara default. Untuk editor lain, lihat README TSLint.

Dengan penyiapan pemeriksaan aksesibilitas codelyzer, Anda akan mendapatkan pop-up yang menampilkan error aksesibilitas dalam file TypeScript atau template inline saat Anda membuat kode:

Screenshot pop-up codelyzer di editor teks.
Pop-up codelyzer yang menampilkan error pelabelan elemen formulir.

Untuk melakukan linting di seluruh project (termasuk template eksternal), gunakan perintah ng lint:

Melakukan linting dengan Angular CLI

Melengkapi codelyzer

Lighthouse adalah alat lain yang dapat Anda gunakan untuk menerapkan praktik aksesibilitas di aplikasi Angular Anda. Perbedaan utama antara codelyzer dan Lighthouse adalah waktu pemeriksaan yang dilakukan. Codelyzer menganalisis aplikasi secara statis pada waktu pengembangan, tanpa menjalankannya. Artinya, selama pengembangan, Anda bisa mendapatkan masukan langsung di editor teks atau di terminal. Sebaliknya, Lighthouse benar-benar menjalankan aplikasi Anda dan melakukan serangkaian pemeriksaan menggunakan analisis dinamis.

Kedua alat ini dapat menjadi bagian yang berguna dalam alur pengembangan Anda. Lighthouse memiliki cakupan yang lebih baik mengingat pemeriksaan yang dilakukannya, sementara codelyzer memungkinkan Anda melakukan iterasi lebih cepat dengan mendapatkan masukan konstan di editor teks.

Menerapkan pemeriksaan aksesibilitas dalam continuous integration

Memperkenalkan pemeriksaan aksesibilitas statis dalam continuous integration (CI) dapat menjadi peningkatan yang signifikan untuk alur pengembangan Anda. Dengan codelyzer, Anda dapat dengan mudah menerapkan aturan aksesibilitas tertentu atau praktik lainnya dengan menjalankan ng lint pada setiap modifikasi kode (misalnya untuk setiap permintaan penarikan baru).

Dengan begitu, bahkan sebelum Anda melanjutkan ke peninjauan kode, CI Anda dapat memberi tahu Anda jika ada pelanggaran aksesibilitas.

Kesimpulan

Untuk meningkatkan aksesibilitas aplikasi Angular Anda:

  1. Aktifkan aturan aksesibilitas eksperimental di codelyzer.
  2. Lakukan linting aksesibilitas di seluruh project Anda menggunakan Angular CLI.
  3. Perbaiki semua masalah aksesibilitas yang dilaporkan oleh codelyzer.
  4. Pertimbangkan penggunaan Lighthouse untuk audit aksesibilitas saat runtime.