打造更容易使用的 Angular 應用程式

1. 事前準備

無障礙設計是網頁開發中的重要一環，可確保使用者能察覺、瞭解、瀏覽並與應用程式互動。事實上，美國每 4 名成人中，就有 1 名患有身心障礙，會影響他們的主要生活活動。全球約有 15% 的人口 (超過 10 億人) 具有某些形式的身心障礙，約 2% 至 4% 則受嚴重困難。

影響使用者使用網路的常見狀況包括失明或低視能、失聰或聽障、受限動作技能、認知障礙和色盲 - 而這只是部分範例。

在本課程中，a11y 是無障礙功能的簡寫。請注意，a 後面會接 11 個字元和 y。

如要深入瞭解如何設計無障礙應用程式的問題和技巧，請參閱無障礙設計。

建構項目

• 透過 Dumpling Shop Angular 示範應用程式，採用最佳做法和內建技術解決常見的網頁無障礙功能問題
• 符合所有無障礙規範 (WCAG 2.0 和 ARIA 1.2)，並通過軸線和 Lighthouse 無障礙稽核措施。

課程內容

您將瞭解 Angular 應用程式的八大常見無障礙功能問題會影響使用者，以及如何找出及修正這些問題。具體來說，你是：

• 使用 Google Chrome 開發人員工具、Lighthouse 和 axe，稽核應用程式的無障礙功能
• 解決含有不重複頁面標題的單頁應用程式 (SPA) 問題
• 修正適合低視能使用者的低色彩對比問題
• 使用語意 HTML，確保螢幕閱讀器正確瀏覽網頁
• 使用 Angular Material 和解除巢狀結構控制項，確保螢幕閱讀器能夠存取所有控制項
• 為螢幕閱讀器新增 ARIA 支援
• 匯入及使用 Angular CDK a11y 套件
• 使用 FocusTrap 自訂元件的螢幕閱讀器導覽功能
• 透過 CDK LiveAnnouncer 廣播通知
• 使用高對比模式偵測使用者，並實作高對比主題設定

軟硬體需求

• 瞭解 Angular、SCSS、Typescript、git 和 Chrome 開發人員工具

2. 做好準備

取得程式碼

這項專案所需的資訊都位於 GitHub 存放區。如要開始使用，請複製程式碼，然後在慣用的開發環境中開啟。

複製存放區並提供應用程式

如要使用本程式碼研究室，建議您使用 VSCode 或本機 IDE。

1. 開啟新的瀏覽器分頁，然後前往 https://github.com/googlecodelabs/angular-accessibility。
2. 建立分支並將存放區分支，並將 cd angular-accessibility/ 複製到存放區。
3. 請查看範例程式碼分支 git checkout get-started。
4. 在 VSCode 或偏好的 IDE 中開啟程式碼。
5. 執行 npm install 以安裝執行伺服器所需的依附元件。
6. 執行 ng serve 以執行伺服器。
7. 開啟瀏覽器分頁並前往 http://localhost:4200。

3. 建立基準

從哪裡開始？

你的起點是專為本程式碼研究室所設計的基本餐廳應用程式。程式碼經過簡化，以便顯示本程式碼研究室中的概念，但功能有限。

探索示範模式

首先，請逐步瞭解應用程式的三項功能：

1. 請使用導覽列查看 Our Shop、Our Story 和 Find Us 的路線，以及餃子公司的詳細資料。
2. 變更主題即可切換淺色和深色模式。
3. 自訂訂單的餃子填充數量、數量和顏色。
4. 選取「Purchase」(購買) 即可在控制台中記錄您的自訂訂單。

使用 Angular 解決常見的網頁無障礙功能問題

在本程式碼研究室中，我們會著重說明這個應用程式現有功能的無障礙功能。首先，您需要先確認應用程式中的 11y 個問題，再實作解決方案，將 🛑? 變成 ✅。

如何知道哪些地方需要修正？

首先，請同時執行手動和自動測試，從中找出無障礙功能問題。

在網路的現行狀態下，你必須手動測試 Google 的無障礙程度。

有些工具可以找出無障礙功能，但沒有任何工具可證明應用程式完全可供存取。手動測試可確保您測試包含邏輯內容順序和功能一致性的 11y 概念。

手動測試

如要手動測試本課程中的無障礙功能，您需要開啟電腦內建的螢幕閱讀器，並透過鍵盤導覽瀏覽應用程式。詳情請參閱「語意和螢幕閱讀器」。

試著開啟螢幕閱讀器並瀏覽畫面。

您可以使用 MacOS 內建的 VoiceOver。按一下「系統偏好設定」>無障礙功能 >VoiceOver >啟用 VoiceOver 即可啟用這項功能。如要切換 VoiceOver，請按住 Command 鍵並快速按下 Touch ID 三次。

在本課程中，您主要要以人工方式測試問題，並使用自動化工具協助檢查特定 Automatable 功能。

自動化測試

此外，您也可以使用幾種開發工具來自動化及稽核應用程式。您可使用這些工具檢查圖片中是否有替代文字，或是文字色彩的對比度。這些工具就像是 Linter可辨識替代文字，但您必須手動檢查內容是否具有邏輯，並提供價值。

Lighthouse 和 Chrome 開發人員工具

1. 開啟 Chrome 開發人員工具。
2. 勾選「Lighthouse」分頁標籤，然後勾選「無障礙設定」核取方塊。
3. 按一下「產生報表」，執行 11y Lighthouse 稽核。

斧頭

1. 安裝 axe DevTools 擴充功能。您可能需要重新啟動瀏覽器才能看到擴充功能。
2. 開啟 Chrome 開發人員工具。
3. 選取「axe DevTools」分頁標籤，然後選取「Scan all my page」執行 axe 開發人員工具掃描。

程式碼檢查

您可以使用 Angular ESLint 規則，檢查程式碼的 automatable a11y 屬性。

在 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 應有邏輯順序、名稱和角色
• 🛑? 螢幕閱讀器無法選取巢狀核取方塊
• 🛑? 螢幕閱讀器不會讀取滑桿值
• 🛑? 顏色挑選器的螢幕閱讀器焦點會離開對話方塊
• 🛑? 不會發布變更、錯誤和通知
• 🛑? 高對比模式未啟用

4. 定義獨特網頁標題

提供獨特且簡明的網頁標題，可協助 11y 服務使用者快速瞭解網頁的內容和用途。網頁標題對於視覺障礙使用者至關重要，因為這是螢幕閱讀軟體朗讀的第一個網頁元素。

Angular 是單頁應用程式，因此大部分轉換 (例如移至新頁面) 都不需要重新載入頁面。直到不久前，這是因為每個網頁都有相同的網頁標題，對於網頁內容或用途的瞭解並無價值。

在 Angular v14 中，路由器會加入內建方法，以便立即定義獨特的網頁標題。輕鬆確保開發人員遵循網頁標題最佳做法。

完成本節後，應用程式就會通過下列稽核：

• 🛑? 所有頁面都具有相同標題

你可以在註解下方找到以下各個步驟：TODO: #4. Define unique page titles.

找出問題

如要找出這個問題，請開啟螢幕閱讀器，並在「我們的商店」、「我們的故事」和「尋找我們」分頁之間查看網頁標題：

1. 開啟「旁白」。
2. 請使用分頁導覽功能切換頁面。
3. 確認網頁標題在 Angular 中一律為 11y。

這個問題的原因是網頁標題不得重複，這樣使用者就能快速瞭解網頁內容，不必繼續瀏覽。

新增有意義的網頁標題

如果您希望管理頁面標題或檢視變更，就必須妥善管理頁面標題。如要修正這個問題，請使用 Angular 內建的 Router.title 屬性，為每個網頁定義不重複的標題。

1. 為三個已定義的路徑分別新增標題：

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 應有邏輯順序、名稱和角色
• 🛑? 螢幕閱讀器無法選取巢狀核取方塊
• 🛑? 螢幕閱讀器不會讀取滑桿值
• 🛑? 顏色挑選器的螢幕閱讀器焦點會離開對話方塊
• 🛑? 不會發布變更、錯誤和通知
• 🛑? 高對比模式未啟用

5. 確保色彩對比充足

您的設計也許看起來很酷，但這並不適合視障人士 (例如色盲) 使用者閱讀您的內容。《網路內容無障礙指南》(WCAG 2.0) 定義了一系列色彩對比度，確保內容可供存取。在 Angular 和網頁版中，您可以定義調色盤，確保元件符合這些標準，當低視能和色盲使用者都能看到。

完成本節後，應用程式就會通過下列稽核：

• 🛑? 元素必須有充足的色彩對比

你可以在留言下方找到以下各項步驟：TODO: #5. Ensure adequate color contrast.

使用 Chrome 開發人員工具找出低對比問題

如要找出這個問題，請使用 Chrome 開發人員工具檢查應用程式中的元素。

1. 使用檢查工具查看選單圖示按鈕。您可以看到對比度低於 WCAG 規定，為 1.85。

2. 在 Lighthouse 或軸的掃描中執行無障礙功能稽核，查看這些對比度問題。

變更 Material Design 主題顏色

自訂 Material 主題中定義了元件的色彩配置。您將根據色彩對比度規範更新主題值。

更新 Material Design 主題，使用顏色較深的文字顏色，提高圖示的對比度：

src/styles.scss

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

此外，您也可以使用 Chrome 開發人員工具內建的無障礙工具，尋找符合標準的顏色，或是在 Sass 中更新個別色彩值。

驗證變更

請再次檢查元素並驗證變更，我們的主題現在應具備充足的色彩對比度！

無障礙稽核

• ✅ 所有網頁都有不重複的網頁標題
• ✅ 顏色的對比度充足
• 🛑? HTML 應有邏輯順序、名稱和角色
• 🛑? 螢幕閱讀器無法選取巢狀核取方塊
• 🛑? 螢幕閱讀器不會讀取滑桿值
• 🛑? 顏色挑選器的螢幕閱讀器焦點會離開對話方塊
• 🛑? 不會發布變更、錯誤和通知
• 🛑? 高對比模式未啟用

6. 使用語意 HTML

原生 HTML 元素會擷取幾種與無障礙功能相關的重要標準互動模式。雖然段落的樣式可設為 Span，而 div 的樣式則可設為按鈕，但語意 HTML 元素可確保螢幕閱讀器和鍵盤導覽功能瞭解 HTML 的互動方式和控制項。

編寫 Angular 元件時，請盡可能直接重複使用這些原生元素，而非重新實作系統支援的行為。這可確保網頁的內容結構良好且自然的內容流程，而且分頁有邏輯的順序，以協助使用者有效運用鍵盤瀏覽網站。

完成本節後，應用程式就會通過下列稽核：

• 🛑? HTML 應有邏輯順序、名稱和角色

你可以在留言下方找到以下各項步驟：TODO: #6. Use Semantic HTML.

找出問題

1. 開啟「旁白」。
2. 使用分頁導覽前往「我們的故事」分頁。
3. 請注意，分頁順序不會依序。
4. 按一下「購買」。
5. 請注意，系統並未將該按鈕視為按鈕。

變更 <div><button>

將自訂 <div>例如：

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 可確保邏輯互動
• 🛑? 螢幕閱讀器無法選取巢狀核取方塊
• 🛑? 螢幕閱讀器不會讀取滑桿值
• 🛑? 顏色挑選器的螢幕閱讀器焦點會離開對話方塊
• 🛑? 不會發布變更、錯誤和通知
• 🛑? 高對比模式未啟用

7. 使用 Angular Material 建立可選取的控制項

巢狀控制項，是無障礙服務的一種複雜互動模式。建議您考慮選單子項目或巢狀核取方塊，如何指示使用者選取子選項群組或前往上層選單項目？

在 Angular 中，盡可能簡化控制項，以便建立可供瀏覽的元件。在這個範例中，您會使用 Angular Material 的 listbox 建立一個互動模式的範例。

完成本節後，應用程式就會通過下列稽核：

• 🛑? 螢幕閱讀器無法選取巢狀核取方塊

你可以在留言下方找到以下各項步驟：TODO: #7. Create selectable controls with Angular Material.

找出問題

為了找出這個問題，我們會開啟螢幕閱讀器，並嘗試勾選巢狀核取方塊。

1. 開啟「旁白」。
2. 選擇各種填充口味。
3. 請注意，當 VoiceOver 讀取時，父項核取方塊不會指定子項。您是否知道，先前未勾選「Bok Choy」核取方塊，但未勾選「Vegan」核取方塊？

Angular Material 中的 A11y

接著將語意核取方塊替換為 Angular Material 核取方塊，該核取方塊包含此互動模式的內建知識。請注意，將元件替換為 Material Design 無法保證無障礙功能。如同任何其他元件，您必須手動測試，因為無錯導入 Material 的方法有很多種。

以 Material 核取方塊取代核取方塊

1. 首先，請新增新的填入清單和變數，以儲存所選填入口味：

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
    })
  }
}

2. 新增 <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，輕鬆調整樣式。

驗證變更

重新開啟螢幕閱讀器，並驗證變更。核取方塊現在可供選取，螢幕閱讀器使用起來更加直覺！

無障礙稽核：

• ✅ 所有網頁都有不重複的網頁標題
• ✅ 顏色的對比度充足
• ✅ 語意 HTML 可確保邏輯互動
• ✅ 可透過螢幕閱讀器存取所有控制項
• 🛑? 螢幕閱讀器不會讀取滑桿值
• 🛑? 顏色挑選器的螢幕閱讀器焦點會離開對話方塊
• 🛑? 不會發布變更、錯誤和通知
• 🛑? 高對比模式未啟用

8. 使用 ARIA 提供控制項標籤

您已修改 Angular 應用程式的語意 HTML 和 Material 元件，但某些元件需要特定屬性，才能透過螢幕閱讀器完整瀏覽。

Web Accessibility Initiative 的可存取多媒體應用程式規格 (WAI-ARIA 或 ARIA) 可協助您解決無法透過原生 HTML 管理的問題。它可讓您指定屬性，以修改元素轉換為無障礙樹狀結構的方式。

完成本節後，應用程式就會通過下列稽核：

• 🛑? 螢幕閱讀器不會讀取滑桿值

你可以在留言下方找到以下各項步驟：TODO: #8. Provide control labels with ARIA.

找出問題

如要找出這個問題，請開啟螢幕閱讀器並移動滑桿：

1. 開啟「旁白」。
2. 前往「數量」滑桿並變更值。
3. 請注意，缺少值標籤。

使用 ARIA 屬性

使用 aria-label 來控制標籤：<mat-slider>

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 屬性提供標籤
• 🛑? 顏色挑選器的螢幕閱讀器焦點會離開對話方塊
• 🛑? 不會發布變更、錯誤和通知
• 🛑? 高對比模式未啟用

9. 將 @angular/cdk/a11y 的力量相加

截至目前，您仰賴內建的 Angular 工具修正常見的 a11y 問題。接下來，我們來看看 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。

如要進一步瞭解 @angular/cdk/a11y 提供的所有其他服務，請參閱「無障礙」一文。

10. 使用 FocusTrap 控管焦距

開啟對話方塊或互動視窗時，使用者只會在其中互動。讓焦點在對話方塊以外的位置逸出，且會混合使用不同情境，讓使用者不知道他們在網頁上的位置。

在 Angular 中，cdkTrapFocus 指令會在元素中抵禦 tab- 鍵焦點。此為使用意味著，為必須限制焦點的強制回應對話方塊等元件提供無障礙體驗。

本節結束時，應用程式就會通過下列稽核：

• 🛑? 顏色挑選器的螢幕閱讀器焦點會離開對話方塊

您可以在留言下方找到相關步驟：TODO: #10. Control focus with FocusTrap.

找出問題

如要找出這個問題，請開啟螢幕閱讀器，並開啟顏色挑選器對話方塊。

1. 開啟「旁白」。
2. 請使用分頁瀏覽選項變更顏色。
3. 勾選這個選項，即可在顏色挑選器中輕鬆查看焦點順序和對焦錯覺。

新增 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>

驗證變更

重新開啟螢幕閱讀器，並驗證變更。對話方塊中的「焦點」選項現已設為「變更顏色」！

無障礙稽核：

• ✅ 所有網頁都有不重複的網頁標題
• ✅ 顏色的對比度充足
• ✅ 語意 HTML 可確保邏輯互動
• ✅ 可透過螢幕閱讀器存取所有控制項
• ✅ 滑桿會使用 ARIA 屬性提供標籤
• ✅ 顏色挑選器的焦點糾紛正確
• 🛑? 不會發布變更、錯誤和通知
• 🛑? 高對比模式未啟用

11. 透過 LiveAnnouncer 宣布變更消息

網頁內容變更時，螢幕閱讀器需要通知。想像一下，嘗試提交表單或完成購買，卻不知道彈出式視窗為何導致無法提交表單。這太讓人困擾了！

LiveAnnouncer 可用於向使用 aria 上線地區的螢幕閱讀器使用者宣告訊息，確保螢幕閱讀器能夠收到通知和即時頁面變更。如要進一步瞭解 Aria 直播區域，請參閱 W3C 的 WAI-ARIA。在 Angular 中，呼叫 LiveAnnouncer 即服務是比 aria-live 屬性更可測試的解決方案。

本節結束時，應用程式就會通過下列稽核：

• 🛑? 不會發布變更、錯誤和通知

您可以在留言下方找到相關步驟：TODO: #11. Announce changes with LiveAnnouncer.

找出問題

如要找出這個問題，請開啟螢幕閱讀器，然後在表單欄位內選取「購買」：

1. 開啟「旁白」。
2. 使用分頁瀏覽方式變更顏色，即可進行虛假交易。
3. 請注意，離開對話方塊時，系統沒有指出使用者選取的顏色，系統也不會讀取購買交易。

在程式碼中加入 LiveAnnouncer

新增 LiveAnnouncer，然後以字串宣告顏色選項和假購買交易。在實際導入過程中，系統可能會在您前往第三方付款系統或表單發生錯誤時讀取這項資訊。

1. 在選取顏色時新增公告：

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();
  }
}

2. 在進行偽造交易時加上公告：

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 屬性提供標籤
• ✅ 顏色挑選器的焦點糾紛正確
• ✅ 會發布變更、錯誤和通知
• 🛑? 高對比模式未啟用

12. 啟用高對比模式

Microsoft Windows 支援「高對比模式」無障礙功能，這個模式會變更所有應用程式 (包括網頁應用程式) 的外觀，以大幅提高對比度。在 Angular 中，我們希望尊重使用者在應用程式中的偏好。

HighContrastModeDetector 可讓您判斷瀏覽器目前是否處於高對比模式。

Internet Explorer、Microsoft Edge 和 Firefox 支援這個模式。Google Chrome 不支援 Windows 高對比模式。這項服務未偵測 Chrome 高對比瀏覽器擴充功能新增的高對比模式。

本節結束時，應用程式就會通過下列稽核：

• 🛑? 高對比模式未啟用

您可以在留言下方找到相關步驟：TODO: #12. Enable HighContrast mode.

找出問題

如要找出這個問題，請在 Internet Explorer、Microsoft Edge 或 Firefox 中開啟應用程式，開啟高對比模式，看看是否有變化：

1. 在 Internet Explorer、Microsoft Edge 或 Firefox 中開啟應用程式。
2. 開啟高對比模式。
3. 請注意，應用程式並未變更。

新增高對比模式支援功能

在 styles.scss 中，使用 @angular/cdk/a11y 提供的 cdk-high-contrast 混合功能，以高對比模式為按鈕新增外框：

src/app/shop/shop.component.scss

@use '@angular/cdk';

.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 應用程式中的八個常見 a11y 錯誤所需的重要步驟。

瞭解詳情

請參閱下列程式碼研究室：

• 使用 Angular 和 Firebase 建構網頁應用程式
• 使用 Chrome 開發人員工具找出低對比度的文字並加以修正

請詳閱以下資料：

• Angular.io
• Angular Material 無障礙功能
• 無障礙功能基礎知識
• https://web.dev/accessible/