确保 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！

回顾

我希望当您开始创建下一个项目时，请记住这些提示，以简化您的可访问性，并注意为所有用户改进我们的应用程序。