Codelyzer を使用して Angular アプリのアクセシビリティを監査する

Angular サイトを誰もがアクセスできるようにするには、ここがいい場所だ！

Minko Gechev
Zama Khan Mohammed

アプリにユーザー補助機能を実装するとは、特別なニーズを持つすべてのユーザーを含め、すべてのユーザーがアプリを使用して内容を理解できるようにすることを意味します。世界保健報告書によると、10 億人以上（世界人口の約 15%）がなんらかの障がいを抱えています。そのため、アクセシビリティはあらゆる開発プロジェクトにおける優先事項です。

この投稿では、codelyzer のユーザー補助チェックを Angular アプリのビルドプロセスに追加する方法について説明します。この方法では、コードを記述しながらテキスト エディタで直接ユーザー補助のバグを検出できます。

Codelyzer を使用してアクセスできない要素を検出する

codelyzer は TSLint の一部で、Angular TypeScript プロジェクトが一連の lint チェック ルールに従っているかどうかを確認するツールです。Angular コマンドライン インターフェース（CLI）で設定されたプロジェクトには、デフォルトで Codelyzer が含まれています。

Codelyzer には、Angular アプリケーションがベスト プラクティスに従っているかどうかを確認するルールが 50 以上用意されています。そのうち、アクセシビリティ基準を適用するためのルールは 10 個ほどあります。Codelyzer で提供されるさまざまなユーザー補助チェックとその根拠については、Codelyzer の新しいユーザー補助ルールの記事をご覧ください。

現在、ユーザー補助ルールは試験運用版であり、デフォルトで無効になっています。有効にするには、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 は、一般的なテキスト エディタや IDE のすべてに対応しています。VSCode で使用するには、TSLint プラグインをインストールします。WebStorm では、TSLint がデフォルトで有効になっています。他のエディタについては、TSLint の README をご覧ください。

Codelyzer のユーザー補助機能チェックを設定すると、TypeScript ファイルやインライン テンプレートでコードを記述する際に、ユーザー補助機能のエラーを示すポップアップが表示されます。

<ph type="x-smartling-placeholder">
</ph> テキスト エディタに表示された Codelyzer のポップアップのスクリーンショット。
フォーム要素のラベル付けエラーを示す Codelyzer のポップアップ。

プロジェクト全体（外部テンプレートを含む）に対して lint チェックを実行するには、ng lint コマンドを使用します。

Angular CLI による lint チェック

Codelyzer の補完

Angular アプリケーションでユーザー補助の方針を適用するために使用できるもう 1 つのツールが Lighthouse です。Codelyzer と Lighthouse の主な違いは、チェックが実行されるタイミングです。Codelyzer は、アプリケーションを実行せずに、開発時にアプリケーションを静的に分析します。つまり、開発中にテキスト エディタやターミナルで直接フィードバックを得ることができます。一方、Lighthouse では実際にアプリケーションが実行され、動的分析により一連のチェックが行われます。

どちらのツールも開発フローで役立ちます。Lighthouse では実行するチェックから判断しやすくなる一方、Codelyzer ではテキスト エディタでフィードバックを継続的に取得することで、反復処理を高速化できます。

継続的インテグレーションでユーザー補助機能チェックを適用する

継続的インテグレーション（CI）に静的なユーザー補助チェックを導入すると、開発フローを大幅に強化できます。Codelyzer では、コードを変更するたびに（たとえば、新しい pull リクエストごとに）ng lint を実行することで、特定のユーザー補助ルールやその他の手法を簡単に適用できます。

これにより、コードレビューに進む前にも、ユーザー補助機能違反の有無を CI から確認できます。

まとめ

Angular アプリのユーザー補助機能を改善するには:

  1. Codelyzer で試験運用版のユーザー補助ルールを有効にします。
  2. Angular CLI を使用して、プロジェクト全体でユーザー補助 lint チェックを実行します。
  3. Codelyzer から報告されたユーザー補助の問題をすべて修正します。
  4. Lighthouse を使用して、ランタイムのユーザー補助機能の監査を行うことを検討してください。