確保 Angular 專案的可訪問性的簡單步驟

當我們建立應用程式時，我們通常專注於交付，而不是涵蓋其他方面，例如可訪問性和測試（但測試將在另一篇文章中介紹）。今天，我想談談輔助功能。大多數時候，我們認為輔助功能只是幫助殘障人士使用我們的產品，但它實際上改善了所有使用者的體驗。

12 月，我花了一些時間學習輔助功能，我強烈建議參加這些免費課程。

• 學習輔助功能：https://web.dev/learn/accessibility

• 建立更容易存取的 Angular 應用程式 https://codelabs.developers.google.com/angular-a11y#3

這個週末，我花時間測試了我透過建立一個小型表單所學到的技能，該表單從一開始就包含可訪問性，包括表單設定和驗證。讓我們開始吧！

我想創建「給聖誕老人的信」表單，我的兒子可以在其中向聖誕老人發送他的姓名、電子郵件和訊息，但我想建立一個可訪問的表單，其中包含清晰且可訪問的驗證以及訊息發送時的通知已成功發送。

最後，我得到了這樣的表格：

---

表單的主要目標是收集使用者資訊。如果表格無法訪問，我們會排除很大一部分人，例如有視覺或運動障礙的用戶，或者受到臨時事故影響或雙手忙碌的用戶。

我開始透過使用語意 HTML 元素（如

、

和

）來改進可訪問性，並使用標題分層組織內容（

到

）。這有助於螢幕閱讀器正確導航頁面並提高 SEO。

<header>
  <h1 id="Write-Your-Letter-to-Santa">Write Your Letter to Santa</h1>
</header>
<main>
  <h2 id="Fill-Out-the-Form">Fill Out the Form</h2>
</main>
<footer>
</footer>

表單的主要目標是收集使用者資訊。如果表格無法訪問，我們會排除很大一部分人，例如有視覺或運動障礙的用戶，或者受到臨時事故影響或雙手忙碌的用戶。

我開始透過使用語意 HTML 元素（如

、

和

）來改進可訪問性，並使用標題分層組織內容（

到

）。這有助於螢幕閱讀器正確導航頁面並提高 SEO。

<label for="name">Name</label>
<input>



<p>But forms are more than just input and label; they need validations or error messages that should only appear when relevant, such as after a field has been interacted with (touched) or when the form is submitted. But how do I notify the user with a message?</p>

<p>First, the notifications should be announced by screen readers using aria-live with a visually clear design for users who do not use assistive technologies and avoid unnecessarily interrupting the user.</p>

<blockquote>
<p>Learn more about aria-live and roles</p>
</blockquote>

<p>There are different ARIA roles to use with the notifications for specific scenarios, using role="alert" for critical or high-priority messages, such as errors. It automatically interrupts the user and announces the content immediately, or role="status" for non-critical updates, such as confirmations or status changes.<br>
</p>

<pre class="brush:php;toolbar:false">    <div>



<p>But how are those messages announced? You have assertive, which stops the current message, or polite, which waits to announce by screen readers without interruption.<br>
</p>

<pre class="brush:php;toolbar:false">@if ((nameCtrl.invalid && nameCtrl.touched) || (nameCtrl.invalid && isSubmitted)) {
  <div>



<p>For example, aria-live="polite" waits to announce the content after completing its current task. It is perfect for notifications like when a message has been sent:<br>
</p>

<pre class="brush:php;toolbar:false">    @if (messageSent) {
      <div>



<p>But what happens when I want content only for screen readers? We can create a utility class like .visually-hidden for content that is only meant to be accessible to screen readers and not visible to sighted users.<br>
</p>

<pre class="brush:php;toolbar:false">.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

它有助於確保在不影響視覺佈局的情況下向依賴螢幕閱讀器的使用者傳達重要訊息。

<span>



<p>Another key point is also is the color, with adequate contrast, the text should have sufficient contrast with its background according but most easy way is using the color-contrast-checker extension.<br>
</p>

<pre class="brush:php;toolbar:false">input.ng-invalid.ng-touched {
  border-color: #e74c3c; 
  background-color: #fdecea; 
}

完美，我們可以準備好可訪問的表單！ ！嘿，等一下？如果明天@Jörgen de Groot 添加一個新功能會發生什麼，我如何控制他不破壞可訪問性？

es-lint 是你的朋友，首先使用原理圖加入：

<header>
  <h1 id="Write-Your-Letter-to-Santa">Write Your Letter to Santa</h1>
</header>
<main>
  <h2 id="Fill-Out-the-Form">Fill Out the Form</h2>
</main>
<footer>
</footer>

es-lint 提供了一組可訪問性規則，例如accessibility-label-has-linked-control，以確保每個標籤元素都有關聯的表單控制項（類似於accessibility-label-for，但更嚴格）。

<label for="name">Name</label>
<input>



<p>But forms are more than just input and label; they need validations or error messages that should only appear when relevant, such as after a field has been interacted with (touched) or when the form is submitted. But how do I notify the user with a message?</p>

<p>First, the notifications should be announced by screen readers using aria-live with a visually clear design for users who do not use assistive technologies and avoid unnecessarily interrupting the user.</p>

<blockquote>
<p>Learn more about aria-live and roles</p>
</blockquote>

<p>There are different ARIA roles to use with the notifications for specific scenarios, using role="alert" for critical or high-priority messages, such as errors. It automatically interrupts the user and announces the content immediately, or role="status" for non-critical updates, such as confirmations or status changes.<br>
</p>

<pre class="brush:php;toolbar:false">    <div>



<p>But how are those messages announced? You have assertive, which stops the current message, or polite, which waits to announce by screen readers without interruption.<br>
</p>

<pre class="brush:php;toolbar:false">@if ((nameCtrl.invalid && nameCtrl.touched) || (nameCtrl.invalid && isSubmitted)) {
  <div>



<p>For example, aria-live="polite" waits to announce the content after completing its current task. It is perfect for notifications like when a message has been sent:<br>
</p>

<pre class="brush:php;toolbar:false">    @if (messageSent) {
      <div>



<p>But what happens when I want content only for screen readers? We can create a utility class like .visually-hidden for content that is only meant to be accessible to screen readers and not visible to sighted users.<br>
</p>

<pre class="brush:php;toolbar:false">.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

請隨意閱讀有關 es-lint 輔助功能的更多信息，將這些規則添加到文件 (.eslintrc.json)，根據需要調整嚴重性（“警告”、“錯誤”等）：

<span>



<p>Another key point is also is the color, with adequate contrast, the text should have sufficient contrast with its background according but most easy way is using the color-contrast-checker extension.<br>
</p>

<pre class="brush:php;toolbar:false">input.ng-invalid.ng-touched {
  border-color: #e74c3c; 
  background-color: #fdecea; 
}

運行 npm run lint tada 後！ ！我們的程式碼有一個 linter！

回顧

我希望當您開始建立下一個項目時，請記住這些提示，以簡化您的可訪問性，並注意為所有用戶改進我們的應用程式。