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 ファイルまたはインライン テンプレートのユーザー補助エラーを示すポップアップが表示されます。