Angular 프로젝트의 접근성을 보장하는 간단한 단계

우리는 앱을 구축할 때 일반적으로 접근성 및 테스트와 같은 다른 측면을 다루기보다는 전달에 중점을 둡니다(단, 테스트에 대해서는 다른 게시물에서 다룹니다). 오늘은 접근성에 대해 이야기해보겠습니다. 대부분의 경우 접근성은 단지 장애가 있는 사람들이 제품을 사용하도록 돕기 위한 것이라고 생각하지만 실제로는 모든 사용자의 경험을 향상시킵니다.

12월에는 접근성에 대해 알아보는 시간을 가졌습니다. 무료 강좌 수강을 적극 권장합니다.

• 접근성 알아보기: https://web.dev/learn/accessibility

• 더욱 접근성이 뛰어난 Angular 앱 구축 https://codelabs.developers.google.com/angular-a11y#3

이번 주말에는 양식 설정 및 유효성 검사를 포함하여 처음부터 접근성이 포함된 작은 양식을 작성하면서 배운 기술을 테스트하는 시간을 가졌습니다. 해보자!

아들이 산타클로스에게 자신의 이름, 이메일, 메시지를 보낼 수 있는 "산타에게 보내는 편지" 양식을 만들고 싶었지만, 메시지가 도착하면 명확하고 접근 가능한 유효성 검사와 알림이 포함된 접근 가능한 양식을 만들고 싶습니다. 성공적으로 전송되었습니다.

드디어 다음과 같은 양식을 얻었습니다.

---

양식의 주요 목적은 사용자로부터 정보를 수집하는 것입니다. 양식에 접근할 수 없는 경우 시각 장애나 운동 장애가 있는 사용자, 일시적인 사고로 영향을 받거나 손이 바쁜 사용자 등 상당 부분의 사람들을 제외합니다.

저는

,

및

와 같은 의미론적 HTML 요소를 사용하고 제목(

~

)을 사용하여 콘텐츠를 계층적으로 구성하여 접근성을 개선하기 시작했습니다. 이는 스크린 리더가 페이지를 올바르게 탐색하는 데 도움이 되며 SEO도 향상시킵니다.

<header>
  <h1>Write Your Letter to Santa</h1>
</header>
<main>
  <h2>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>Write Your Letter to Santa</h1>
</header>
<main>
  <h2>Fill Out the Form</h2>
</main>
<footer>
</footer>

es-lint는 모든 레이블 요소에 연결된 양식 컨트롤이 있는지 확인하기 위해 내게 필요한 옵션 레이블이 있음과 같은 일련의 접근성 규칙을 제공합니다(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를 실행해보세요!! 우리 코드에 대한 린터가 있습니다!

요약

다음 프로젝트를 시작할 때 접근성을 단순화하고 모든 사용자를 위해 앱을 개선할 수 있도록 다음 팁을 명심하시기 바랍니다.

위 내용은 Angular 프로젝트의 접근성을 보장하는 간단한 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!