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 を使用すると、各コード変更（たとえば、新しいプルリクエストごと）で ng lint を実行して、特定のユーザー補助ルールやその他のプラクティスを簡単に適用できます。
これにより、コードレビューに進む前に、CI でアクセシビリティ違反があるかどうかを確認できます。
まとめ
Angular アプリのアクセシビリティを改善するには:
- codelyzer でテスト用のユーザー補助ルールを有効にします。
- Angular CLI を使用して、プロジェクト全体でアクセシビリティの lint を実行します。
- codelyzer によって報告されたすべてのアクセシビリティの問題を修正します。
- 実行時にアクセシビリティ監査を行うには、Lighthouse の使用を検討してください。