Langkah Mudah untuk Memastikan Kebolehcapaian dalam Projek Sudut Anda

Apabila kami membina apl, kami biasanya menumpukan pada penghantaran dan bukannya meliputi aspek lain seperti Kebolehaksesan dan Ujian (tetapi ujian akan dibincangkan dalam siaran lain). Hari ini, saya ingin bercakap tentang Kebolehaksesan. Selalunya, kami berpendapat kebolehcapaian hanyalah untuk membantu orang kurang upaya menggunakan produk kami, tetapi ia sebenarnya meningkatkan pengalaman untuk semua pengguna.

Pada bulan Disember, saya meluangkan sedikit masa untuk mempelajari tentang Kebolehcapaian dan saya amat mengesyorkan untuk mengambil kursus percuma ini.

• Belajar Kebolehcapaian: https://web.dev/learn/accessibility

• Bina apl Sudut yang lebih mudah diakses https://codelabs.developers.google.com/angular-a11y#3

Hujung minggu ini, saya meluangkan masa untuk menguji kemahiran yang saya pelajari dengan membina bentuk kecil yang merangkumi kebolehaksesan dari awal, termasuk persediaan dan pengesahan borang. Jom buat!

Saya ingin membuat borang "Surat kepada Santa" di mana anak saya boleh menghantar nama, e-mel dan mesejnya kepada Santa Claus, tetapi saya ingin membina borang yang boleh diakses dengan pengesahan yang jelas dan boleh diakses serta pemberitahuan apabila mesej itu telah berjaya dihantar.

Akhirnya, saya mendapat borang seperti ini:

---

Matlamat utama borang adalah untuk mengumpul maklumat daripada pengguna. Jika borang tidak boleh diakses, kami mengecualikan sebahagian besar orang, seperti pengguna yang cacat penglihatan atau motor, atau mereka yang terjejas akibat kemalangan sementara atau tangan mereka sibuk.

Saya mula meningkatkan kebolehcapaian dengan menggunakan elemen HTML semantik seperti

,

dan

dan menyusun kandungan secara hierarki dengan tajuk (

hingga

). Ini membantu pembaca skrin menavigasi halaman dengan betul dan juga meningkatkan 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>

Matlamat utama borang adalah untuk mengumpul maklumat daripada pengguna. Jika borang tidak boleh diakses, kami mengecualikan sebahagian besar orang, seperti pengguna yang cacat penglihatan atau motor, atau mereka yang terjejas akibat kemalangan sementara atau tangan mereka sibuk.

Saya mula meningkatkan kebolehcapaian dengan menggunakan elemen HTML semantik seperti

,

dan

dan menyusun kandungan secara hierarki dengan tajuk (

hingga

). Ini membantu pembaca skrin menavigasi halaman dengan betul dan juga meningkatkan 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;
}

Ia membantu memastikan maklumat penting disampaikan kepada pengguna yang bergantung pada pembaca skrin tanpa menjejaskan reka letak visual.

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

Sempurna kita boleh membina borang kita sedia dengan kebolehaksesan!! Hey tunggu sekejap? Apa yang berlaku jika esok @Jörgen de Groot menambah ciri baharu , bagaimana saya boleh mengawal dia tidak melanggar kebolehaksesan ?

Es-lint ialah rakan anda, tambah dahulu menggunakan skema:

<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 menyediakan satu set peraturan kebolehaksesan seperti label kebolehcapaian-mempunyai-kawalan-kawalan untuk memastikan bahawa setiap elemen label mempunyai kawalan bentuk yang berkaitan (serupa dengan label kebolehaksesan-untuk tetapi lebih ketat).

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

Jangan ragu untuk membaca lebih lanjut tentang kebolehaksesan es-lint, tambahkan peraturan ini pada fail (.eslintrc.json), laraskan keterukan ("amaran", "ralat", dll.) mengikut keperluan:

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

Selepas lari npm lari lint tada!! kami mempunyai linter untuk kod kami!

Rekap

Saya harap apabila anda mula membuat projek anda yang seterusnya, ingat petua ini untuk memudahkan kebolehcapaian anda dan berhati-hati untuk menambah baik apl kami untuk semua pengguna.