Angular サイトを誰でも利用できるようにするには、ここが正解です。
アプリのユーザー補助機能を強化するということは、特別なニーズのあるユーザーを含め、すべてのユーザーがアプリを使ってコンテンツを理解できるということです。世界保健レポートによると、10 億人以上（世界人口の約 15%）がなんらかの障がいを抱えています。そのため、ユーザー補助機能はどの開発プロジェクトでも優先事項です。
この投稿では、Angular アプリのビルドプロセスに codelyzer のユーザー補助機能チェックを追加する方法について説明します。このアプローチにより、コーディング中にテキスト エディタで直接ユーザー補助のバグを検出できます。
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 ファイルまたはインライン テンプレートのユーザー補助エラーを示すポップアップが表示されます。
プロジェクト全体（外部テンプレートを含む）に対して lint チェックを実行するには、ng lint コマンドを使用します。
Codelyzer の補完
Lighthouse も、Angular アプリケーションでユーザー補助の方針を適用するために使用できるツールです。Codelyzer と Lighthouse の主な違いは、チェックが実行されるタイミングです。Codelyzer は、開発時にアプリケーションを実行せずに静的に分析します。つまり、開発中にテキスト エディタやターミナルで直接フィードバックを得ることができます。一方、Lighthouse では実際にアプリケーションを実行し、動的分析を使用してさまざまなチェックを行います。
どちらのツールも開発フローで役立ちます。Lighthouse では、実行するチェックの対象範囲が広くなっています。一方、Codelyzer では、テキスト エディタに常にフィードバックが表示されるため、反復処理を高速化できます。
継続的インテグレーションでユーザー補助機能チェックを適用する
継続的インテグレーション（CI）に静的なユーザー補助機能チェックを導入すると、開発フローが大幅に強化されます。Codelyzer を使用すると、コード変更のたびに（たとえば、新しい pull リクエストごとに）ng lint を実行することで、特定のユーザー補助ルールやその他のプラクティスを簡単に適用できます。
これにより、コードレビューに進む前に、ユーザー補助の違反の有無を CI で通知できます。
おわりに
Angular アプリのユーザー補助機能を向上させるには:
- Codelyzer で試験運用版のユーザー補助ルールを有効にします。
- Angular CLI を使用して、プロジェクト全体に対してユーザー補助 lint チェックを実行します。
- Codelyzer によって報告されるすべてのユーザー補助の問題を修正。
- 実行時のユーザー補助の監査に Lighthouse を使用することをご検討ください。