適切なユーザー補助機能が備わった Angular アプリを作成する

1. 始める前に

ユーザー補助機能はウェブ開発の不可欠な要素であり、ユーザーがアプリを認識、理解、ナビゲート、操作できるようにするものです。実際のところ、米国では成人の 4 人に 1 人が生活に支障をきたす障がいを抱えています。全世界では人口の約 15%、つまり 10 億人以上がなんらかの障がいを抱えていて、約 2～4% が大きな困難を経験しています。

個人のウェブの利用に影響する一般的な状態としては、目の見えない状態やロービジョン、聴覚障がいや難聴、運動機能の障がい、認知障がい、色覚異常などがありますが、これらは一部にすぎません。

このコースでは、a11y は accessibility（ユーザー補助）の略語です。a の後に 11 文字が続き末尾が y であるためこのように略します。

適切なユーザー補助機能が備わったアプリを設計する際の問題やテクニックについて詳しくは、ユーザー補助をご覧ください。

作成するアプリの概要

ダンプリング料理店の Angular アプリをデモとして取り上げ、ベストプラクティスと組み込み済みの手法を使用してウェブのユーザー補助の一般的な問題に取り組みます。
ユーザー補助のすべてのガイドライン（WCAG 2.0 と ARIA 1.2）を満たし、axe と Lighthouse のユーザー補助の監査に合格するようにします。

学習内容

Angular アプリでユーザーに影響する 8 つの一般的なユーザー補助の問題と、それらの特定方法と解決方法について学習します。具体的には、次の作業を行います。

Google Chrome デベロッパーツール、Lighthouse、axe を使用して、アプリのユーザー補助を監査する
固有のページタイトルを使用することによって、シングルページアプリ（SPA）で陥りがちな問題を解決する
ロービジョンのユーザー向けに低コントラストの問題を修正する
セマンティック HTML を使用して、スクリーンリーダーでページを正しく移動できるようにする
Angular Material やネストしていないコントロールを使用して、スクリーンリーダーですべてのコントロールにアクセスできるようにする
スクリーンリーダー用の ARIA サポートを追加する
Angular CDK a11y パッケージをインポートして使用する
カスタムコンポーネントのスクリーンリーダーナビゲーション用に FocusTrap を使用する
CDK LiveAnnouncer を使用して通知を音声で案内する
HighContrast モードを使用しているユーザーを検出して、ハイコントラストテーマを実装する

必要なもの

Angular、SCSS、Typescript、git、Chrome デベロッパーツールに関する知識

2. 準備

コードを取得する

このプロジェクトに必要なすべてのコードは GitHub リポジトリにあります。まず、コードをクローンし、お好みの開発環境で開きます。

リポジトリをクローンし、アプリ用のサーバーを起動する

この Codelab での作業には、VSCode またはローカルの IDE を使用することをおすすめします。

新しいブラウザタブを開き、https://github.com/googlecodelabs/angular-accessibility にアクセスします。
リポジトリのフォークとクローンを行い、リポジトリ内で cd angular-accessibility/ を実行します。
git checkout get-started を実行して、スターターコードブランチをチェックアウトします。
VSCode またはお好みの IDE でコードを開きます。
npm install を実行して、サーバーの実行に必要な依存関係をインストールします。
ng serve を実行してサーバーを実行します。
ブラウザタブを開いて http://localhost:4200 にアクセスします。

3. ベースラインを確立する

出発点の概要

出発点は、この Codelab 用に設計された基本的なレストランアプリです。コードは、この Codelab のコンセプトを示すために簡略化されており、機能はほとんどありません。

デモを試してみる

まず、アプリの 3 つの機能を使ってみます。

ナビゲーションバーで [Our Shop]、[Our Story]、[Find Us] のルートを表示し、このダンプリング料理会社の詳細情報を参照します。
テーマを変更して、ライトモードとダークモードを切り替えます。
注文するダンプリングの具材、数量、色をカスタマイズします。
[Purchase] を選択して、カスタマイズした注文をコンソールに出力します。

Angular を使用してウェブのユーザー補助の一般的な問題に対処する

この Codelab では、このアプリの既存機能のユーザー補助について重点的に見ていきます。まず、アプリの a11y の問題を特定し、解決策を実装することで 🛑 を ✅ にします。

修正すべき問題を確認する方法

まず、各サンプルで手動テストと自動テストを組み合わせて使用することで、ユーザー補助の問題を把握します。

ウェブの現在の状況を考えると、ユーザー補助の手動テストは必須です。

ユーザー補助の問題を特定できるツールはありますが、アプリのユーザー補助が完全であることを保証できるツールはありません。手動テストを行うことにより、コンテンツの論理的な順序や機能の同等性など、さまざまな a11y のコンセプトのテストが網羅できます。

手動テスト

このコースでユーザー補助を手動でテストするには、コンピュータに組み込まれているスクリーンリーダーをオンにして、キーボードナビゲーションを使用してアプリ内を移動します。詳細については、セマンティクスとスクリーンリーダーをご覧ください。

スクリーンリーダーをオンにして画面内を移動し、実際に操作します。

macOS 内蔵の VoiceOver を使用することもできます。[システム環境設定] > [アクセシビリティ] > [VoiceOver] > [VoiceOver を有効にする] の順にクリックします。VoiceOver を切り替えるには、Command キーを押したまま Touch ID をすばやく 3 回押します。

このコースでは主に手動で問題をテストします。また、自動化ツールを使用して特定の自動化可能な機能のチェックを支援します。

自動テスト

複数の開発ツールを使用して、テストを自動化してアプリを監査することもできます。これらのツールを使用すると、画像に代替テキストがあるかどうかや、テキストの色のコントラスト比などを確認できます。これらのツールは linter のようなものです。代替テキストが存在するかどうかは認識できますが、その内容が論理的であり価値を提供するものであるかの確認は手動で行う必要があります。

Lighthouse と Chrome デベロッパーツール

Chrome デベロッパーツールを開きます。
[Lighthouse] タブを選択し、[Accessibility] チェックボックスをオンにします。
[Generate report] をクリックして a11y Lighthouse 監査を実行します。

axe

axe DevTools 拡張機能をインストールします。拡張機能を表示するには、ブラウザの再起動が必要な場合があります。
Chrome デベロッパーツールを開きます。
[axis DevTools] タブを選択し、[Scan all of my page] を選択して axe DevTools スキャンを実行します。

lint

Angular ESLint ルールを使用して、コードの自動化可能な a11y 属性に対して lint チェックを行うことができます。

eslint.json に、ユーザー補助に適用される以下のコードを追加します。

"@angular-eslint/template/accessibility-alt-text": 2,
"@angular-eslint/template/accessibility-elements-content": 2,
"@angular-eslint/template/accessibility-label-for": 2,
"@angular-eslint/template/no-positive-tabindex": 2,
"@angular-eslint/template/accessibility-table-scope": 2,
"@angular-eslint/template/accessibility-valid-aria": 2,
"@angular-eslint/template/click-events-have-key-events": 2,
"@angular-eslint/template/mouse-events-have-key-events": 2,
"@angular-eslint/template/no-autofocus": 2,
"@angular-eslint/template/no-distracting-elements": 2

詳細については、GitHub で最新の ESLint ルールをご覧ください。

出発点

新しいテスト方法では、Lighthouse と axe の監査、手動の VoiceOver を使用して、アプリ内の次の問題を特定できます。

ユーザー補助の監査:

🛑 すべてのページのタイトルが同じである
🛑 要素には十分な色のコントラストが必要である
🛑 HTML には論理的な順序、名前、役割が必要である
🛑 ネストしたチェックボックスはスクリーンリーダーでは選択できない
🛑 スクリーンリーダーがスライダーの値を読み上げない
🛑 カラー選択ツールでスクリーンリーダーのフォーカスがダイアログ外に出てしまう
🛑 変更、エラー、通知が音声で案内されない
🛑 HighContrast モードが有効になっていない

4.一意のページタイトルを定義する

固有の簡潔なページタイトルを使用すると、a11y サービスを使用するユーザーは、ウェブページのコンテンツと目的をすばやく理解できます。視覚障がいのあるユーザーにはページタイトルが非常に重要です。なぜなら、スクリーンリーダーソフトウェアが音声で案内する最初のページ要素がページタイトルであるためです。

Angular はシングルページアプリであるため、新しいページへの移動など、大部分の変遷ではページの再読み込みは行われません。つまり、最近まで各ページには同じページタイトルが付けられており、ページのコンテンツや目的を把握するための情報は提供されていませんでした。

Angular v14 では、追加の設定なしで固有のページタイトルを定義できる組み込みのメソッドが Router に追加されました。これにより、効率的なアプローチが可能になり、デベロッパーはページタイトルのベストプラクティスを実践しやすくなります。

このセクションを終了した時点で、アプリは次の監査で合格になります。

🛑 すべてのページのタイトルが同じである

これらの各ステップは「TODO: #4. Define unique page titles.」のコメントの下にあります。

問題を特定する

この問題を特定するには、スクリーンリーダーをオンにして、[Our Shop] タブ、[Our Story] タブ、[Find Us] タブ間を移動してページタイトルを確認します。

VoiceOver をオンにします。
タブナビゲーションを使用してページ間を移動します。
Angular でページタイトルが常に a11y であることを確認します。

ユーザーがページ内をすべて移動しなくてもページの内容をすぐに理解できるようにするには、ページタイトルが一意である必要があります。そのため、この点が問題になります。

意味のあるページタイトルを追加する

ページまたはビューが変更された場合は、ページタイトルを適切に管理する必要があります。この問題を解決するには、Angular の組み込みの Router.title プロパティを使用して、各ページに固有のタイトルを定義します。

3 つの定義済みルートのそれぞれに固有のタイトルを追加します。

src/app/app-routing.module.ts

const routes: Routes = [
  { path: 'shop', component: ShopComponent, title: 'Our Shop – a11y in Angular' },
  { path: 'about', component: AboutComponent, title: 'Our Story - a11y in Angular' },
  { path: 'locate', component: LocationComponent, title: 'Find Us - a11y in Angular' },
  { path: '',   redirectTo: '/shop', pathMatch: 'full' },
  { path: '**', component: ShopComponent },
];

これにより、内部で Router's Title Service が自動的にインポートされ、移動時にページタイトルが、ルートで定義されているタイトルプロパティと一致するように変更されます。カスタムの TitleStrategy を使用して、より複雑なページタイトルを管理することもできます。

変更の確認

スクリーンリーダーを再びオンにして、変更内容を確認します。ページに固有のタイトルが設定されているはずです。

ユーザー補助の監査:

✅ すべてのページに固有のページタイトルがある
🛑 要素には十分な色のコントラストが必要である
🛑 HTML には論理的な順序、名前、役割が必要である
🛑 ネストしたフルーツのチェックボックスはスクリーンリーダーでは選択できない
🛑 スクリーンリーダーがスライダーの値を読み上げない
🛑 カラー選択ツールでスクリーンリーダーのフォーカスがダイアログ外に出てしまう
🛑 変更、エラー、通知が音声で案内されない
🛑 HighContrast モードが有効になっていない

5. 適切な色のコントラストを確保する

「クール」なデザインを作成したとしても、色覚異常などの視覚障がいのあるユーザーがコンテンツを読み取れなければ、それはクールであるとは言えません。Web Content Accessibility Guidelines（WCAG 2.0）は、コンテンツがユーザー補助の条件を満たすための、一連の色のコントラスト比を定義しています。Angular とウェブで、コンポーネントがこれらの基準を満たし、ロービジョンや色覚異常のユーザーでも見やすいようにカラーパレットを定義できます。

このセクションを終了した時点で、アプリは次の監査で合格になります。

🛑 要素には十分な色のコントラストが必要である

これらの各ステップは「TODO: #5. Ensure adequate color contrast.」のコメントの下にあります。

Chrome デベロッパーツールを使用して低コントラストの問題を特定する

この問題を特定するには、Chrome デベロッパーツールを使用してアプリ内の要素を調べます。

検査ツールを使用してメニューアイコンのボタンを表示します。コントラストが 1.85 であり、WCAG の要件を大きく下回っていることがわかります。

Lighthouse または axe のスキャンでユーザー補助監査を実行して、これらのコントラスト比の問題を確認します。

Material テーマの色を変更する

コンポーネントのカラースキームは、カスタムの Material テーマで定義されます。色コントラスト比のガイドラインを満たすようにテーマの値を更新します。

Material テーマを更新して、使用するテキストの色を暗くし、アイコンのコントラスト比を高めます。

src/styles.scss

$light-primary: mat.define-palette(mat.$pink-palette, $default: A100, $lighter: 100, $text: 900);

また、Chrome デベロッパーツールの組み込みのユーザー補助ツールを使用して、標準に合致する色を見つけたり、Sass で個別の色の値を更新したりすることもできます。

変更の確認

要素を再度調べ、変更内容を確認します。ページに固有のタイトルが設定されているはずです。

ユーザー補助の監査

✅ すべてのページに固有のページタイトルがある
✅ 色のコントラスト比が十分である
🛑 HTML には論理的な順序、名前、役割が必要である
🛑 ネストしたフルーツのチェックボックスはスクリーンリーダーでは選択できない
🛑 スクリーンリーダーがスライダーの値を読み上げない
🛑 カラー選択ツールでスクリーンリーダーのフォーカスがダイアログ外に出てしまう
🛑 変更、エラー、通知が音声で案内されない
🛑 HighContrast モードが有効になっていない

6 セマンティック HTML を使用する

ネイティブの HTML 要素では、ユーザー補助にとって重要ないくつかの標準的な操作パターンがキャプチャされます。段落は span としてスタイル設定でき、div はボタンとしてスタイル設定できますが、セマンティック HTML 要素を使用することによって、スクリーンリーダーとキーボードナビゲーションは HTML の操作とコントロールを理解できるようになります。

Angular コンポーネントを作成する際は、可能であれば、十分にサポートされている動作を再実装するのではなく、これらのネイティブ要素を直接再利用してください。これにより、ページには適切なコンテンツ構成と自然なコンテンツフローが存在するようになり、タブの順序が論理的になるため、ユーザーはキーボードを効率的に使用してウェブサイト内を移動できるようになります。

このセクションを終了した時点で、アプリは次の監査で合格になります。

🛑 HTML には論理的な順序、名前、役割が必要である

これらの各ステップは「TODO: #6. Use Semantic HTML.」のコメントの下にあります。

問題を特定する

VoiceOver をオンにします。
タブナビゲーションを使用して、[Our Story] タブをクリックして表示します。
タブが正しい順序になっていないことに注意します。
[Purchase] をクリックします。
ボタンがボタンとして認識されていないことに注意します。

<div> を <button> に変更する

カスタムの <div> を Material ボタンに置き換えます。

src/app/shop/shop.component.html

<button mat-flat-button
  color="primary"
  class="purchase-button"
  (click)="fauxPurchase()">
  Purchase
</button>

見出し要素を正しい順序で使用する

セマンティック HTML が使用されるようにテキストの順序を変更し、Angular Material タイポグラフィを使用してスタイルを適用します。

src/app/about/about.component.html

<h2>Who are we?</h2>
<p class="mat-subheading-2">Have you ever thought, "wow, I love dumplings"?</p>
<p class="right mat-subheading-1">Who hasn't.</p>
<p class="center mat-subheading-1">We took it one step further and created Dumpling Dumpling,</p>
<p class="center mat-subheading-1">double the dumpling, double the fun.</p>
<div class="spacer"></div>
<h2>How are we different?</h2>
<p class="mat-subheading-2">Handmade in San Francisco, California, we craft fully customizable dumplings. Glitter? Rainbows? Vegan? We do it all.</p>
<p class="right mat-subheading-2">This shop is concept only.</p>

変更の確認

スクリーンリーダーを再びオンにして、変更内容を確認します。VoiceOver はボタンを認識するようになり、テキストは論理的な順序で読み上げられるようになります。

ユーザー補助の監査:

✅ すべてのページに固有のページタイトルがある
✅ 色のコントラスト比が十分である
✅ セマンティック HTML によって論理的な操作ができる
🛑 ネストしたサイズのチェックボックスはスクリーンリーダーでは選択できない
🛑 スクリーンリーダーがスライダーの値を読み上げない
🛑 カラー選択ツールでスクリーンリーダーのフォーカスがダイアログ外に出てしまう
🛑 変更、エラー、通知が音声で案内されない
🛑 HighContrast モードが有効になっていない

7. Angular Material を使用して選択可能なコントロールを作成する

ユーザー補助サービスの複雑な操作パターンの 1 つに、ネストしたコントロールがあります。メニューのサブアイテムやネストしたチェックボックスについて考えてみましょう。オプションのサブグループを選択できることや親メニュー項目に移動できることをユーザーに示すにはどうすればよいでしょうか？

Angular ではメニューとコントロールが単純化されます。コントロールをできる限り単純化することで、操作しやすいコンポーネントを作成します。この例では、Angular Material のリストボックスを使用して、この操作パターンの例を 1 つ作成します。

このセクションを終了した時点で、アプリは次の監査で合格になります。

🛑 ネストしたサイズのチェックボックスはスクリーンリーダーでは選択できない

これらの各ステップは「TODO: #7. Create selectable controls with Angular Material.」のコメントの下にあります。

問題を特定する

この問題を特定するには、スクリーンリーダーをオンにして、ネストしたチェックボックスをオンにする操作を試みます。

VoiceOver をオンにします。
さまざまな具材のフレーバーを選択します。
VoiceOver で読み上げる際に、親のチェックボックスで子は指定されないことに注意してください。[Bok Choy] チェックボックスをオフにしたときに [Vegan] チェックボックスがオフになっていることは、どうすればわかるでしょうか？

セマンティックチェックボックスを、Angular Material チェックボックスに置き換えます。Material チェックボックスには、この操作パターンの方法論が組み込まれています。ただし、コンポーネントを Material に置き換えることでユーザー補助が保証されるわけではないことに注意してください。他のコンポーネントと同様に、ユーザー補助の方法論にそぐわない形で Material を実装してしまうことも数多くあるため、手動でテストする必要があります。

チェックボックスを Material チェックボックスに置き換える

まず、具材の新しいリストと、選択した具材のフレーバーを格納する変数を追加します。

src/app/shop/shop.component.ts

@Component(...)
export class ShopComponent implements OnInit {
  fillings: string[] = ['Bok Choy & Chili Crunch', 'Tofu & Mushroom', 'Chicken & Ginger', 'Impossible Meat & Spinach'];
  selectedFillings: string[] = [];

  fauxPurchase(): void {
    let flavor = '';
    this.selectedFillings.forEach(filling => {
      flavor = flavor + " " + filling
    })
  }
}

<mat-selection-list> を追加して、この乱雑な HTML チェックボックスのグループを置き換えます。

src/app/shop/shop.component.html

<mat-selection-list [(ngModel)]="selectedFillings"
  aria-label="Dumpling fillings">
  <mat-list-option *ngFor="let flavor of fillings"
    [value]="flavor"
    color="primary">
    {{ flavor }}
  </mat-list-option>
</mat-selection-list>

TODO のコメントには、src/app/shop/shop.component.scss の中で使用されていない Sass を削除できる場所も示されています。不要な Sass を削除することによって、スタイルをクリーンアップできます。

変更の確認

スクリーンリーダーを再びオンにして、変更内容を確認します。スクリーンリーダーを使用してチェックボックスを選択できるようになり、より直感的に要素間を移動できるようになりました。

ユーザー補助の監査:

✅ すべてのページに固有のページタイトルがある
✅ 色のコントラスト比が十分である
✅ セマンティック HTML によって論理的な操作ができる
✅ スクリーンリーダーによってすべてのコントロールにアクセスできる
🛑 スクリーンリーダーがスライダーの値を読み上げない
🛑 カラー選択ツールでスクリーンリーダーのフォーカスがダイアログ外に出てしまう
🛑 変更、エラー、通知が音声で案内されない
🛑 HighContrast モードが有効になっていない

8. ARIA を使用してコントロールラベルを提供する

Angular アプリのセマンティック HTML と Material コンポーネントを変更しましたが、スクリーンリーダーによって完全にアクセスできるようにするには、一部のコンポーネントで特定の属性が必要になります。

Web Accessibility Initiative の Accessible Rich Internet Applications 仕様（WAI-ARIA または ARIA）は、ネイティブ HTML では管理できない問題の解決に役立ちます。この仕様を活用することによって、ユーザー補助ツリーの中で要素が扱われる方法を変更するための属性を指定できます。

このセクションを終了した時点で、アプリは次の監査で合格になります。

🛑 スクリーンリーダーがスライダーの値を読み上げない

これらの各ステップは「TODO: #8. Provide control labels with ARIA.」のコメントの下にあります。

問題を特定する

この問題を特定するには、スクリーンリーダーをオンにしてスライダーを動かします。

VoiceOver をオンにします。
数量のスライダーに移動して、値を変更します。
値のラベルがないことに注意してください。

ARIA 属性を使用する

<mat-slider> で aria-label を使用したラベルコントロール:

src/app/shop/shop.component.html

<mat-slider
  aria-label="Dumpling order quantity slider"
  id="quantity"
  name="quantity"
  color="primary"
  class="quantity-slider"
  [max]="13"
  [min]="1"
  [step]="1"
  [tickInterval]="1"
  thumbLabel
  [(ngModel)]="quantity">
</mat-slider>

変更の確認

スクリーンリーダーを再びオンにして、変更内容を確認します。スライダーを動かせるようになりました。

ユーザー補助の監査:

✅ すべてのページに固有のページタイトルがある
✅ 色のコントラスト比が十分である
✅ セマンティック HTML によって論理的な操作ができる
✅ スクリーンリーダーによってすべてのコントロールにアクセスできる
✅ スライダーで ARIA 属性を使用してラベルを提供している
🛑 カラー選択ツールでスクリーンリーダーのフォーカスがダイアログ外に出てしまう
🛑 変更、エラー、通知が音声で案内されない
🛑 HighContrast モードが有効になっていない

9. @angular/cdk/a11y の機能を追加する

これまでは、一般的な a11y の問題の解決に、組み込みの Angular ツールを使用してきました。これからは、CDK の a11y モジュールの概要と、このモジュールがより複雑で Angular に固有の問題を解決する方法について説明します。

このセクションを終了するまで、Angular a11y モジュールツールを使用してこのコースを継続します。

これらのステップは「TODO: #9. Add the power of @angular/cdk/a11y.」のコメントの下にあります。

モジュールをインポートする

アプリにモジュールを追加します。

src/app/app.module.ts

import { A11yModule } from '@angular/cdk/a11y';

@NgModule({
  declarations: [...],
  imports: [
    A11yModule
  ],
  providers: [...],
  bootstrap: [...]
})

`'@angular/cdk/a11y'` の機能

a11y モジュールはユーザー補助の改善に役立つ複数のツールを提供し、コンポーネント作成者にとって特に有用です。

以降のセクションでは、FocusTrap、LiveAnnouncer、HighContrast の 3 つの一般的なサービスを追加します。

@angular/cdk/a11y が提供する他のすべてのサービスの詳細については、ユーザー補助をご覧ください。

10. FocusTrap を使用してフォーカスをコントロールする

ダイアログまたはモーダルが開かれている場合、ユーザーが操作する場所はその内部に限られます。フォーカスがダイアログの外に移動できるようにすると、コンテキストが混在するため、ユーザーがページ上のどの部分を操作しているのかわからない状態になります。

Angular では、cdkTrapFocus ディレクティブを使用して、要素内の tab- キーによるフォーカスをトラップします。その使用目的は、フォーカスに制約を設ける必要があるモーダルダイアログのようなコンポーネントのためのユーザー補助エクスペリエンスを実現することです。

このセクションを終了した時点で、アプリは次の監査で合格になります。

🛑 カラー選択ツールでスクリーンリーダーのフォーカスがダイアログ外に出てしまう

これらのステップは「TODO: #10. Control focus with FocusTrap.」のコメントの下にあります。

問題を特定する

この問題を特定するには、スクリーンリーダーをオンにして、カラー選択ツールのダイアログを開きます。

VoiceOver をオンにします。
タブナビゲーションを使用して色を変更します。
直感的なフォーカス順序になっているか、カラー選択ツール内にフォーカスがトラップされるかを確認します。

FocusTrap を追加する

cdkFocusTrap を使用すると、カスタムコンポーネントのフォーカスのトラップとフォーカス順序の制御を行うことができます。ただし、ほとんどの問題は mat-dialog-content を使用してダイアログ内にフォーカスをトラップすることで解決できます。属性 cdkFocusInitial を追加して、カラー選択ダイアログ内で、ダンプリングの皮の色に関する <mat-selection-list> に初期フォーカスが当たるようにします。

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.html

<mat-selection-list #colors aria-label="Dumpling wrapper color" multiple="false" cdkFocusInitial>
  ...
</mat-selection-list>

変更の確認

スクリーンリーダーを再びオンにして、変更内容を確認します。これで、ダイアログ内の [Change Color] に初期フォーカスが設定されるようになりました。

ユーザー補助の監査:

✅ すべてのページに固有のページタイトルがある
✅ 色のコントラスト比が十分である
✅ セマンティック HTML によって論理的な操作ができる
✅ スクリーンリーダーによってすべてのコントロールにアクセスできる
✅ スライダーで ARIA 属性を使用してラベルを提供している
✅ カラー選択ツールに適切なフォーカストラップが設定されている
🛑 変更、エラー、通知が音声で案内されない
🛑 HighContrast モードが有効になっていない

11. LiveAnnouncer を使用して変更を音声で案内する

ページ上でなんらかの変化が起こった場合は、スクリーンリーダーへの通知が必要です。フォームを送信するとき、または購入を完了しようとするときに、エラーがポップアップ表示されてフォームを送信できないことがあります。ユーザーがその状況を把握できないと、大きなフラストレーションを感じます。

LiveAnnouncer は、スクリーンリーダーのユーザー向けに aria-live 領域を使用してメッセージを音声で案内するのに使用されます。この機能により、スクリーンリーダーは通知やライブページの変更を認識することができます。aria-live 領域の詳細については、W3C の WAI-ARIA をご覧ください。Angular では、aria-live 属性を使用するよりも、LiveAnnouncer をサービスとして呼び出す方がテストしやすいソリューションになります。

このセクションを終了した時点で、アプリは次の監査で合格になります。

🛑 変更、エラー、通知が音声で案内されない

これらのステップは「TODO: #11. Announce changes with LiveAnnouncer.」のコメントの下にあります。

問題を特定する

この問題を特定するには、スクリーンリーダーをオンにして、フォームの項目に入力することなく [Purchase] を選択します。

VoiceOver をオンにします。
タブナビゲーションを使用して色を変更し、購入します（実際に購入が行われることはありません）。
ダイアログの終了時にどの色が選択されていたかを示すものはないこと、購入は読み上げられないことに注意します。

コードに LiveAnnouncer を追加する

LiveAnnouncer を追加し、色の選択と購入の両方を文字列として音声で案内します。実際の実装では、サードパーティの支払いシステムに移動するときや、フォームでエラーが発生したときに読み上げが行われることがあります。

色が選択されたときの音声案内を追加します。

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ColorPickerDialogComponent implements OnInit {
  constructor(
    public dialogRef: MatDialogRef<ColorPickerDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: ColorDialogData,
    private liveAnnouncer: LiveAnnouncer) { }

  public changeColor(color: string): void {
    this.liveAnnouncer.announce(`Select color: ${color}`);
    this.dialogRef.close();
  }
}

購入が行われたときの音声案内を追加します。

src/app/shop/shop.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ShopComponent implements OnInit {

  constructor(private liveAnnouncer: LiveAnnouncer) { }

  fauxPurchase(): void {
    let flavor = '...';
    const fakePurchase = `Purchase ${this.quantity} ${flavor}dumplings in the color ${this.color}!`;

    this.liveAnnouncer.announce(fakePurchase);
  }
}

変更の確認

スクリーンリーダーを再びオンにして、変更内容を確認します。エラーが通知されるようになりました。

ユーザー補助の監査:

✅ すべてのページに固有のページタイトルがある
✅ 色のコントラスト比が十分である
✅ セマンティック HTML によって論理的な操作ができる
✅ スクリーンリーダーによってすべてのコントロールにアクセスできる
✅ スライダーで ARIA 属性を使用してラベルを提供している
✅ カラー選択ツールに適切なフォーカストラップが設定されている
✅ 変更、エラー、通知が音声で案内される
🛑 HighContrast モードが有効になっていない

12. HighContrast モードを有効にする

Microsoft Windows は、ハイコントラストモードと呼ばれるユーザー補助機能をサポートしています。このモードでは、ウェブアプリを含むすべてのアプリの外観が変更され、コントラストが大幅に強くなります。Angular では、アプリでのユーザーの設定を考慮する必要があります。

HighContrastModeDetector を使用すると、ブラウザが現在ハイコントラストモード環境であるかどうかを判断できます。

Internet Explorer、Microsoft Edge、Firefox はこのモードをサポートしています。Google Chrome は Windows のハイコントラストモードをサポートしていません。このサービスは、Chrome の High Contrast ブラウザ拡張機能により追加されたハイコントラストモードを検出しません。

このセクションを終了した時点で、アプリは次の監査で合格になります。

🛑 HighContrast モードが有効になっていない

これらのステップは「TODO: #12. Enable HighContrast mode.」のコメントの下にあります。

問題を特定する

この問題を特定するには、Internet Explorer、Microsoft Edge、または Firefox でアプリを開き、ハイコントラストモードをオンにして、変化がないことを確認します。

Internet Explorer、Microsoft Edge、または Firefox でアプリを開きます。
ハイコントラストモードを有効にします。
アプリケーションに変化がないことに注意してください。

ハイコントラストモードのサポートを追加する

styles.scss で、@angular/cdk/a11y にある cdk-high-contrast ミックスインを使用して、ボタンにハイコントラストモードのアウトラインを追加します。

src/app/shop/shop.component.scss

@import '~@angular/cdk/a11y';

.purchase-button {
    border-radius: 5px;
    background-color: mat.get-color-from-palette(mat.$pink-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$pink-palette, 50);
    }
}

:host-context(.dark-theme) {
  .purchase-button {
    background-color: mat.get-color-from-palette(mat.$light-green-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$light-green-palette, 50);
    }
  }
}

変更の確認

アプリを更新して、変更内容を確認します。ボタンにハイコントラストモードのアウトラインが追加されました。

ユーザー補助の監査:

✅ すべてのページに固有のページタイトルがある
✅ 色のコントラスト比が十分である
✅ セマンティック HTML によって論理的な操作ができる
✅ スクリーンリーダーによってすべてのコントロールにアクセスできる
✅ スライダーで ARIA 属性を使用してラベルを提供している
✅ カラー選択ツールに適切なフォーカストラップが設定されている
✅ 変更、エラー、通知が音声で案内される
✅ ハイコントラストモードが有効である

13. 演習の完了

おつかれさまでした。Angular アプリにおけるウェブのユーザー補助の一般的な問題への対応が完了しました。🎉

すべてのソリューションを確認するには、main ブランチをチェックアウトしてください。

これで、Angular アプリケーションで 8 つの一般的な a11y の問題を解決するのに必要な主要な手順を理解しました。

その他の情報

次の Codelab をご覧ください。

次の資料をご覧ください。

適切なユーザー補助機能が備わった Angular アプリを作成する

1. 始める前に

作成するアプリの概要

学習内容

必要なもの

2. 準備

コードを取得する

リポジトリをクローンし、アプリ用のサーバーを起動する

3. ベースラインを確立する

出発点の概要

デモを試してみる

Angular を使用してウェブのユーザー補助の一般的な問題に対処する

修正すべき問題を確認する方法

手動テスト

自動テスト

Lighthouse と Chrome デベロッパー ツール

axe

lint

出発点

4.一意のページタイトルを定義する

問題を特定する

意味のあるページタイトルを追加する

src/app/app-routing.module.ts

変更の確認

5. 適切な色のコントラストを確保する

Chrome デベロッパー ツールを使用して低コントラストの問題を特定する

Material テーマの色を変更する

src/styles.scss

変更の確認

6 セマンティック HTML を使用する

問題を特定する

<div> を <button> に変更する

src/app/shop/shop.component.html

見出し要素を正しい順序で使用する

src/app/about/about.component.html

変更の確認

7. Angular Material を使用して選択可能なコントロールを作成する

問題を特定する

Angular Material の a11y

チェックボックスを Material チェックボックスに置き換える

src/app/shop/shop.component.ts

src/app/shop/shop.component.html

変更の確認

8. ARIA を使用してコントロール ラベルを提供する

問題を特定する

ARIA 属性を使用する

src/app/shop/shop.component.html

変更の確認

9. @angular/cdk/a11y の機能を追加する

モジュールをインポートする

src/app/app.module.ts

'@angular/cdk/a11y' の機能

10. FocusTrap を使用してフォーカスをコントロールする

FocusTrap を追加する

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.html

変更の確認

11. LiveAnnouncer を使用して変更を音声で案内する

コードに LiveAnnouncer を追加する

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.ts

src/app/shop/shop.component.ts

変更の確認

12. HighContrast モードを有効にする

ハイ コントラスト モードのサポートを追加する

src/app/shop/shop.component.scss

変更の確認

13. 演習の完了

その他の情報

Lighthouse と Chrome デベロッパーツール

Chrome デベロッパーツールを使用して低コントラストの問題を特定する

8. ARIA を使用してコントロールラベルを提供する

`'@angular/cdk/a11y'` の機能

ハイコントラストモードのサポートを追加する