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-associated-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 を実行した後、lint tada を実行します!!コード用のリンターがあります!

要約

次のプロジェクトの作成を開始する際には、アクセシビリティを簡素化するためのこれらのヒントを念頭に置き、すべてのユーザー向けにアプリを改善するよう注意していただければ幸いです。