Mem-build aplikasi Angular yang lebih mudah diakses

1. Sebelum memulai

Aksesibilitas adalah bagian penting dari pengembangan web, yang memastikan pengguna dapat mengenali, memahami, menjelajahi, dan berinteraksi dengan aplikasi. Faktanya, 1 dari 4 orang dewasa di AS memiliki disabilitas yang memengaruhi sebagian besar aktivitas kehidupan mereka. Sekitar 15 persen populasi dunia—lebih dari 1 miliar orang—menyandang beberapa bentuk disabilitas, dengan sekitar 2 hingga 4 persen mengalami kesulitan yang signifikan.

Kondisi umum yang memengaruhi penggunaan web seseorang mencakup kebutaan atau gangguan penglihatan, ketulian atau gangguan pendengaran, keterampilan motorik terbatas, gangguan kognitif, dan kebutaan warna—dan ini hanyalah sebagian saja.

Dalam kursus ini, a11y adalah singkatan untuk accessibility (aksesibilitas). Perhatikan bahwa a diikuti oleh 11 karakter dan y.

Untuk pengenalan mendalam tentang masalah dan teknik untuk mendesain aplikasi yang dapat diakses, lihat Aksesibilitas.

Yang akan Anda build

• Menggunakan praktik terbaik dan teknik bawaan untuk mengatasi masalah aksesibilitas web umum dalam demo aplikasi Angular untuk Toko Dumpling
• Memenuhi semua pedoman aksesibilitas, WCAG 2.0, dan ARIA 1.2, serta lulus audit aksesibilitas axe dan Lighthouse.

Yang akan Anda pelajari

Anda akan mempelajari tentang delapan masalah aksesibilitas umum dalam aplikasi Angular yang memengaruhi pengguna, cara mengidentifikasinya, dan cara memperbaikinya. Lebih jelasnya, Anda akan:

• Menggunakan Google Chrome Developer Tools, Lighthouse, dan axe untuk mengaudit aksesibilitas aplikasi Anda
• Memecahkan kesulitan aplikasi satu halaman (SPA) dengan judul halaman yang unik
• Memperbaiki masalah kontras warna rendah untuk pengguna yang memiliki gangguan penglihatan
• Menggunakan HTML semantik untuk memastikan pembaca layar dapat menjelajahi halaman dengan benar
• Menggunakan Material Angular dan kontrol tidak bertingkat untuk memastikan pembaca layar dapat mengakses semua kontrol
• Menambahkan dukungan ARIA untuk pembaca layar
• Mengimpor dan menggunakan paket a11y CDK Angular
• Menggunakan FocusTrap untuk navigasi pembaca layar komponen kustom
• Mengumumkan notifikasi dengan LiveEnroller CDK
• Mendeteksi pengguna dengan mode HighContrast dan menerapkan tema kontras tinggi

Yang akan Anda perlukan

• Pengetahuan tentang Angular, SCSS, Typescript, git, dan Chrome Developer Tools

2. Memulai persiapan

Mendapatkan kode

Semua yang Anda perlukan untuk project ini ada di repositori GitHub. Untuk memulai, clone kode dan buka di lingkungan pengembangan favorit Anda.

Meng-clone repositori dan menayangkan aplikasi

VSCode atau IDE lokal adalah metode yang disarankan untuk bekerja dengan codelab ini.

1. Buka tab browser baru dan buka https://github.com/googlecodelabs/angular-accessibility.
2. Lakukan fork dan clone repositori, lalu jalankan cd angular-accessibility/ ke dalam repositori.
3. Lihat cabang kode starter git checkout get-started.
4. Buka kode di VSCode atau IDE yang Anda inginkan.
5. Jalankan npm install untuk menginstal dependensi yang diperlukan untuk menjalankan server.
6. Jalankan ng serve untuk menjalankan server.
7. Buka tab browser di http://localhost:4200.

3. Menetapkan dasar pengukuran

Apa titik awal Anda?

Titik awal Anda adalah aplikasi restoran dasar yang didesain untuk codelab ini. Kode telah disederhanakan untuk menunjukkan konsep dalam codelab ini dan memiliki sedikit fungsi.

Menjelajahi demo

Untuk memulai, telusuri tiga fungsi aplikasi Anda:

1. Gunakan menu navigasi untuk melihat rute Toko Kami, Kisah Kami, dan Temukan Kami, lalu lihat detail tentang perusahaan dumpling ini.
2. Ubah tema untuk beralih antara mode terang dan gelap.
3. Sesuaikan isian, jumlah, dan warna dumpling pesanan Anda.
4. Pilih Beli untuk mencatat pesanan khusus Anda di konsol.

Menggunakan Angular untuk mengatasi masalah aksesibilitas web yang umum

Dalam codelab ini, Anda berfokus pada aksesibilitas fitur yang ada dari aplikasi ini. Anda akan memulai dengan mengidentifikasi masalah a11y di aplikasi, kemudian mengubah 🛑 menjadi ✅ dengan menerapkan solusi.

Bagaimana Anda tahu apa saja yang harus diperbaiki?

Mulai setiap contoh dengan mengenali masalah aksesibilitas menggunakan kombinasi pengujian manual dan otomatis.

Dalam status web saat ini, pengujian aksesibilitas secara manual wajib dilakukan.

Anda memiliki alat yang dapat mengidentifikasi masalah aksesibilitas, namun tidak ada alat yang dapat menyatakan bahwa aplikasi dapat diakses sepenuhnya. Pengujian manual memastikan bahwa Anda menguji berbagai konsep a11y yang mencakup urutan konten yang logis dan paritas fitur.

Pengujian manual

Untuk menguji aksesibilitas dalam kursus ini secara manual, aktifkan pembaca layar bawaan komputer kami dan jelajahi aplikasi Anda dengan navigasi keyboard. Untuk informasi selengkapnya, lihat Semantik dan pembaca layar.

Berlatihlah dengan mengaktifkan pembaca layar dan menjelajahi layar.

Anda dapat menggunakan VoiceOver bawaan MacOS. Klik System Preferences > Accessibility > VoiceOver > Enable VoiceOver untuk mengaktifkannya. Untuk beralih dalam VoiceOver, tekan TouchID tiga kali dengan cepat sambil menahan kunci Command.

Dalam kursus ini, Anda terutama menguji masalah secara manual, dan menggunakan alat otomatis untuk membantu memeriksa fitur tertentu yang dapat diotomatiskan.

Pengujian otomatis

Anda juga menggunakan beberapa alat pengembangan untuk mengotomatiskan dan mengaudit aplikasi Anda. Alat ini memungkinkan Anda untuk memeriksa berbagai hal seperti adanya teks alternatif pada gambar atau rasio kontras warna teks. Anda dapat menganggap alat ini sebagai alat lint. Alat ini dapat mendeteksi keberadaan teks alternatif, tetapi Anda harus memeriksa secara manual bahwa konten tersebut logis dan memberikan nilai.

Lighthouse dan Chrome Developer Tools

1. Buka Chrome Developer Tools.
2. Pilih tab Lighthouse dan centang kotak Aksesibilitas.
3. Klik Buat laporan untuk menjalankan audit a11y Lighthouse.

Axe

1. Instal ekstensi DevTools axe. Anda mungkin perlu memulai ulang browser untuk melihat ekstensi.
2. Buka Chrome Developer Tools.
3. Pilih tab axe DevTools dan pilih Scan all of my page untuk menjalankan pemindaian axe DevTools.

Analisis lint

Anda dapat menggunakan aturan ESLint Angular untuk melakukan analisis lint pada kode Anda untuk atribut a11y yang dapat diotomatiskan.

Di eslint.json, tambahkan hal berikut, yang berlaku untuk aksesibilitas:

"@angular-eslint/template/accessibility-alt-text": 2,
"@angular-eslint/template/accessibility-elements-content": 2,
"@angular-eslint/template/accessibility-label-for": 2,
"@angular-eslint/template/no-positive-tabindex": 2,
"@angular-eslint/template/accessibility-table-scope": 2,
"@angular-eslint/template/accessibility-valid-aria": 2,
"@angular-eslint/template/click-events-have-key-events": 2,
"@angular-eslint/template/mouse-events-have-key-events": 2,
"@angular-eslint/template/no-autofocus": 2,
"@angular-eslint/template/no-distracting-elements": 2

Untuk informasi selengkapnya, lihat aturan ESLint terbaru di GitHub.

Titik awal Anda

Dengan metode pengujian baru, Anda dapat mengidentifikasi masalah berikut pada aplikasi menggunakan audit Lighthouse dan axe, serta VoiceOver manual:

Audit Aksesibilitas:

• 🛑 Semua halaman memiliki judul halaman yang sama
• 🛑 Elemen harus memiliki kontras warna yang memadai
• 🛑 HTML harus memiliki urutan, nama, dan peran yang logis
• 🛑 Kotak centang bertingkat tidak dapat dipilih untuk pembaca layar
• 🛑 Pembaca layar tidak membaca nilai penggeser
• 🛑 Fokus pembaca layar pada pemilih warna keluar dari dialog
• 🛑 Perubahan, error, dan notifikasi tidak diumumkan
• 🛑 Mode HighContrast tidak diaktifkan

4. Menentukan judul halaman yang unik

Memberikan judul halaman yang unik dan singkat membantu pengguna layanan a11y cepat memahami konten dan tujuan halaman web. Judul halaman sangat penting bagi pengguna yang memiliki gangguan penglihatan karena merupakan elemen halaman pertama yang diumumkan oleh software pembacaan layar.

Angular merupakan aplikasi satu halaman, dan karenanya, sebagian besar transisi, seperti berpindah ke halaman baru, tidak melibatkan pemuatan ulang halaman. Artinya, hingga baru-baru ini, setiap halaman memiliki judul halaman yang sama dan tidak memberikan nilai untuk memahami konten atau tujuan halaman.

Di Angular v14, Router menambahkan metode bawaan untuk menentukan judul halaman yang unik dan siap pakai. Hal ini memberikan pendekatan sederhana untuk memastikan developer mengikuti praktik terbaik judul halaman.

Pada akhir bagian ini, aplikasi Anda akan lulus audit berikut:

• 🛑 Semua halaman memiliki judul halaman yang sama

Anda dapat menemukan setiap langkah ini di bagian komentar: TODO: #4. Define unique page titles.

Mengidentifikasi masalah

Untuk mengidentifikasi masalah ini, aktifkan pembaca layar dan berpindah antara tab Toko Kami, Kisah Kami, dan Temukan Kami untuk melihat judul halaman:

1. Aktifkan VoiceOver.
2. Gunakan navigasi tab untuk berpindah antarhalaman.
3. Pastikan judul halaman selalu a11y dalam Angular.

Ini menjadi masalah karena judul halaman Anda harus unik sehingga pengguna dapat cepat memahami isi halaman tanpa harus menjelajahinya.

Menambahkan judul halaman yang bermakna

Jika halaman atau tampilan berubah, kelola judul halaman dengan benar. Untuk memperbaikinya, gunakan properti Router.title Angular bawaan untuk menentukan judul yang unik dari setiap halaman.

1. Tambahkan judul yang unik ke masing-masing dari tiga rute yang ditentukan:

src/app/app-routing.module.ts

const routes: Routes = [
  { path: 'shop', component: ShopComponent, title: 'Our Shop – a11y in Angular' },
  { path: 'about', component: AboutComponent, title: 'Our Story - a11y in Angular' },
  { path: 'locate', component: LocationComponent, title: 'Find Us - a11y in Angular' },
  { path: '',   redirectTo: '/shop', pathMatch: 'full' },
  { path: '**', component: ShopComponent },
];

Ini akan otomatis mengimpor dan menggunakan Router's Title Service di balik layar untuk mengelola perubahan judul halaman di navigasi agar cocok dengan properti judul yang ditentukan dalam rute kami. Anda juga dapat mengelola judul halaman yang lebih rumit menggunakan TitleStrategy kustom.

Memverifikasi perubahan

Aktifkan pembaca layar lagi dan verifikasi perubahan Anda. Sekarang halaman sudah memiliki judul yang unik.

Audit Aksesibilitas:

• ✅ Semua halaman memiliki judul halaman yang unik
• 🛑 Elemen harus memiliki kontras warna yang memadai
• 🛑 HTML harus memiliki urutan, nama, dan peran yang logis
• 🛑 Kotak centang buah bertingkat tidak dapat dipilih untuk pembaca layar
• 🛑 Pembaca layar tidak membaca nilai penggeser
• 🛑 Fokus pembaca layar pada pemilih warna keluar dari dialog
• 🛑 Perubahan, error, dan notifikasi tidak diumumkan
• 🛑 Mode HighContrast tidak diaktifkan

5. Memastikan kontras warna memadai

Desain Anda mungkin tampak keren, tetapi akan sia-sia jika pengguna penyandang gangguan penglihatan, seperti kebutaan warna, tidak dapat membaca konten Anda. Pedoman Aksesibilitas Konten Web (WCAG 2.0) menentukan serangkaian rasio kontras warna, yang memastikan konten dapat diakses. Di Angular dan di web, Anda dapat menentukan palet warna yang memastikan komponen Anda memenuhi standar ini dan terlihat oleh pengguna yang memiliki gangguan penglihatan dan kebutaan warna.

Pada akhir bagian ini, aplikasi Anda akan lulus audit berikut:

• 🛑 Elemen harus memiliki kontras warna yang memadai

Anda dapat menemukan setiap langkah ini di bagian komentar: TODO: #5. Ensure adequate color contrast.

Menggunakan Chrome Developer Tools untuk mengidentifikasi masalah kontras rendah

Untuk mengidentifikasi masalah ini, gunakan Chrome Developer Tools untuk memeriksa elemen di aplikasi Anda.

1. Gunakan alat periksa untuk melihat tombol ikon menu. Anda dapat melihat kontrasnya bernilai 1,85, jauh di bawah persyaratan WCAG.

2. Jalankan audit Aksesibilitas di pemindaian Lighthouse atau axe untuk melihat masalah rasio kontras ini.

Mengubah warna tema Material

Skema warna komponen Anda ditentukan dalam tema Material kustom. Anda memperbarui nilai tema agar memenuhi pedoman rasio kontras warna.

Perbarui tema Material Anda untuk menggunakan warna teks yang lebih gelap, dengan meningkatkan rasio kontras ikon Anda:

src/styles.scss

$light-primary: mat.define-palette(mat.$pink-palette, $default: A100, $lighter: 100, $text: 900);

Anda juga dapat menggunakan alat aksesibilitas bawaan Chrome Developer Tools untuk menemukan warna yang memenuhi standar, atau memperbarui nilai warna individual di Sass.

Memverifikasi perubahan

Periksa lagi elemen Anda dan verifikasi perubahan. Sekarang halaman sudah memiliki judul halaman yang unik.

Audit Aksesibilitas

• ✅ Semua halaman memiliki judul halaman yang unik
• ✅ Warna memiliki rasio kontras yang memadai
• 🛑 HTML harus memiliki urutan, nama, dan peran yang logis
• 🛑 Kotak centang buah bertingkat tidak dapat dipilih untuk pembaca layar
• 🛑 Pembaca layar tidak membaca nilai penggeser
• 🛑 Fokus pembaca layar pada pemilih warna keluar dari dialog
• 🛑 Perubahan, error, dan notifikasi tidak diumumkan
• 🛑 Mode HighContrast tidak diaktifkan

6. Menggunakan HTML Semantik

Elemen HTML native menangkap sejumlah pola interaksi standar yang penting untuk aksesibilitas. Meskipun paragraf dapat diberi gaya sebagai rentang dan div dapat diberi gaya sebagai tombol, elemen HTML semantik memastikan bahwa pembaca layar dan navigasi keyboard memahami interaksi dan kontrol HTML Anda.

Saat membuat komponen Angular, Anda harus menggunakan kembali elemen native ini secara langsung jika memungkinkan, daripada menerapkan ulang perilaku yang didukung dengan baik. Hal ini memastikan bahwa halaman memiliki struktur konten yang baik serta alur konten yang natural, dan tab dalam urutan logis untuk membantu pengguna menjelajahi situs dengan penggunaan keyboard yang efektif.

Pada akhir bagian ini, aplikasi Anda akan lulus audit berikut:

• 🛑 HTML harus memiliki urutan, nama, dan peran yang logis

Anda dapat menemukan setiap langkah ini di bagian komentar: TODO: #6. Use Semantic HTML.

Mengidentifikasi masalah

1. Aktifkan VoiceOver.
2. Gunakan navigasi tab untuk mengklik tab Kisah kami.
3. Perhatikan bahwa urutan tab tidak berurutan.
4. Klik Beli.
5. Perhatikan bahwa tombol tidak dikenali sebagai tombol.

Mengubah <div> menjadi <button>

Ganti <div> kustom dengan tombol Material:

src/app/shop/shop.component.html

<button mat-flat-button
  color="primary"
  class="purchase-button"
  (click)="fauxPurchase()">
  Purchase
</button>

Menggunakan elemen judul secara berurutan

Susun ulang teks untuk menggunakan HTML semantik dan terapkan gaya menggunakan tipografi Material Angular:

src/app/about/about.component.html

<h2>Who are we?</h2>
<p class="mat-subheading-2">Have you ever thought, "wow, I love dumplings"?</p>
<p class="right mat-subheading-1">Who hasn't.</p>
<p class="center mat-subheading-1">We took it one step further and created Dumpling Dumpling,</p>
<p class="center mat-subheading-1">double the dumpling, double the fun.</p>
<div class="spacer"></div>
<h2>How are we different?</h2>
<p class="mat-subheading-2">Handmade in San Francisco, California, we craft fully customizable dumplings. Glitter? Rainbows? Vegan? We do it all.</p>
<p class="right mat-subheading-2">This shop is concept only.</p>

Memverifikasi perubahan

Aktifkan pembaca layar lagi dan verifikasi perubahan Anda. VoiceOver kini mengenali tombol tersebut dan teks dibaca dalam urutan yang logis!

Audit Aksesibilitas:

• ✅ Semua halaman memiliki judul halaman yang unik
• ✅ Warna memiliki rasio kontras yang memadai
• ✅ HTML semantik memastikan interaksi logis
• 🛑 Kotak centang ukuran bertingkat tidak dapat dipilih untuk pembaca layar
• 🛑 Pembaca layar tidak membaca nilai penggeser
• 🛑 Fokus pembaca layar pada pemilih warna keluar dari dialog
• 🛑 Perubahan, error, dan notifikasi tidak diumumkan
• 🛑 Mode HighContrast tidak diaktifkan

7. Membuat kontrol yang dapat dipilih dengan Material Angular

Salah satu pola interaksi yang rumit untuk layanan aksesibilitas adalah kontrol bertingkat. Pikirkan tentang subitem menu atau kotak centang bertingkat. Bagaimana cara Anda menunjukkan kepada pengguna bahwa Anda dapat memilih subgrup opsi atau membuka item menu induk?

Di Angular, sederhanakan menu dan kontrol untuk membuat komponen yang dapat dinavigasi dengan menyederhanakan kontrol sebanyak mungkin. Dalam contoh ini, Anda menggunakan kotak daftar Material Angular untuk membuat satu contoh pola interaksi ini.

Pada akhir bagian ini, aplikasi Anda akan lulus audit berikut:

• 🛑 Kotak centang ukuran bertingkat tidak dapat dipilih untuk pembaca layar

Anda dapat menemukan setiap langkah ini di bagian komentar: TODO: #7. Create selectable controls with Angular Material.

Mengidentifikasi masalah

Untuk mengidentifikasi masalah ini, kami akan mengaktifkan pembaca layar dan mencoba memilih kotak centang bertingkat.

1. Aktifkan VoiceOver.
2. Pilih rasa isian yang berbeda.
3. Perhatikan bahwa kotak centang induk tidak menyebutkan anak-anak saat dibaca oleh VoiceOver. Bagaimana Anda tahu bahwa kotak centang Vegan tidak dicentang setelah Anda menghapus centang kotak Bok Choy?

A11y dalam Material Angular

Anda mengganti kotak centang semantik dengan kotak centang Material Angular, yang berisi pengetahuan bawaan dari pola interaksi ini. Penting untuk diperhatikan bahwa mengganti komponen dengan Material tidak menjamin aksesibilitas. Seperti komponen lainnya, Anda perlu menguji secara manual karena ada banyak cara untuk menerapkan Material tanpa akses.

Mengganti kotak centang dengan kotak centang Material

1. Pertama, tambahkan daftar isian baru dan variabel untuk menyimpan rasa isian yang dipilih:

src/app/shop/shop.component.ts

@Component(...)
export class ShopComponent implements OnInit {
  fillings: string[] = ['Bok Choy & Chili Crunch', 'Tofu & Mushroom', 'Chicken & Ginger', 'Impossible Meat & Spinach'];
  selectedFillings: string[] = [];

  fauxPurchase(): void {
    let flavor = '';
    this.selectedFillings.forEach(filling => {
      flavor = flavor + " " + filling
    })
  }
}

2. Tambahkan <mat-selection-list> untuk mengganti pengelompokan kotak centang HTML yang berantakan ini:

src/app/shop/shop.component.html

<mat-selection-list [(ngModel)]="selectedFillings"
  aria-label="Dumpling fillings">
  <mat-list-option *ngFor="let flavor of fillings"
    [value]="flavor"
    color="primary">
    {{ flavor }}
  </mat-list-option>
</mat-selection-list>

Komentar TODO Anda juga menunjukkan tempat Anda dapat menghapus beberapa Sass yang tidak digunakan di src/app/shop/shop.component.scss untuk membersihkan gaya Anda.

Memverifikasi perubahan

Aktifkan pembaca layar lagi dan verifikasi perubahan Anda. Kotak centang Anda kini dapat dipilih dan dinavigasikan secara lebih intuitif dengan pembaca layar!

Audit Aksesibilitas:

• ✅ Semua halaman memiliki judul halaman yang unik
• ✅ Warna memiliki rasio kontras yang memadai
• ✅ HTML semantik memastikan interaksi logis
• ✅ Semua kontrol dapat dijangkau oleh pembaca layar
• 🛑 Pembaca layar tidak membaca nilai penggeser
• 🛑 Fokus pembaca layar pada pemilih warna keluar dari dialog
• 🛑 Perubahan, error, dan notifikasi tidak diumumkan
• 🛑 Mode HighContrast tidak diaktifkan

8. Menyediakan label kontrol dengan ARIA

Anda memodifikasi komponen Material dan HTML semantik pada aplikasi Angular Anda, namun beberapa komponen memerlukan atribut tertentu agar dapat dinavigasi sepenuhnya oleh pembaca layar.

Spesifikasi Web Accessibility Initiative's Accessible Rich Internet Applications (WAI-ARIA atau ARIA) membantu menjembatani berbagai masalah yang tidak dapat dikelola dengan HTML native. Hal ini memungkinkan Anda menetapkan atribut yang memodifikasi cara elemen diterjemahkan ke dalam pohon aksesibilitas.

Pada akhir bagian ini, aplikasi Anda akan lulus audit berikut:

• 🛑 Pembaca layar tidak membaca nilai penggeser

Anda dapat menemukan setiap langkah ini di bagian komentar: TODO: #8. Provide control labels with ARIA.

Mengidentifikasi masalah

Untuk mengidentifikasi masalah ini, aktifkan pembaca layar dan gerakkan penggeser:

1. Aktifkan VoiceOver.
2. Buka penggeser kuantitas dan ubah nilainya.
3. Perhatikan bahwa label nilai tidak ada.

Menggunakan atribut ARIA

Kontrol label menggunakan aria-label ke <mat-slider>:

src/app/shop/shop.component.html

<mat-slider
  aria-label="Dumpling order quantity slider"
  id="quantity"
  name="quantity"
  color="primary"
  class="quantity-slider"
  [max]="13"
  [min]="1"
  [step]="1"
  [tickInterval]="1"
  thumbLabel
  [(ngModel)]="quantity">
</mat-slider>

Memverifikasi perubahan

Aktifkan pembaca layar lagi dan verifikasi perubahan Anda. Sekarang Anda dapat menggerakkan penggeser!

Audit Aksesibilitas:

• ✅ Semua halaman memiliki judul halaman yang unik
• ✅ Warna memiliki rasio kontras yang memadai
• ✅ HTML semantik memastikan interaksi logis
• ✅ Semua kontrol dapat dijangkau oleh pembaca layar
• ✅ Penggeser menggunakan atribut ARIA untuk memberikan label
• 🛑 Fokus pembaca layar pada pemilih warna keluar dari dialog
• 🛑 Perubahan, error, dan notifikasi tidak diumumkan
• 🛑 Mode HighContrast tidak diaktifkan

9. Menambahkan kecanggihan @angular/cdk/a11y

Hingga sekarang, Anda telah mengandalkan alat Angular bawaan untuk memperbaiki masalah umum a11y. Sekarang, mari kita lihat modul a11y CDK dan bagaimana modul tersebut dapat membantu kami menyelesaikan masalah yang lebih rumit dan spesifik terkait Angular.

Pada akhir bagian ini, Anda akan melanjutkan kursus dengan alat modul a11y Angular.

Anda dapat menemukan langkah-langkah ini di bagian komentar: TODO: #9. Add the power of @angular/cdk/a11y.

Mengimpor modul

Tambahkan modul ke aplikasi Anda:

src/app/app.module.ts

import { A11yModule } from '@angular/cdk/a11y';

@NgModule({
  declarations: [...],
  imports: [
    A11yModule
  ],
  providers: [...],
  bootstrap: [...]
})

Apa fungsi '@angular/cdk/a11y'?

Modul a11y menyediakan sejumlah alat untuk meningkatkan aksesibilitas dan secara khusus berguna bagi penulis komponen.

Di bagian berikut, Anda akan menambahkan tiga layanan umum: FocusTrap, LiveAnnouncer, dan HighContrast.

Untuk informasi selengkapnya tentang semua layanan lain yang disediakan @angular/cdk/a11y, lihat Aksesibilitas.

10. Mengontrol fokus dengan FocusTrap

Saat dialog atau modal terbuka, pengguna hanya berinteraksi di dalamnya. Mengizinkan fokus keluar di luar dialog akan mencampurkan konteks dan menciptakan keadaan di mana pengguna tidak mengetahui di halaman mana mereka berada.

Di Angular, perintah cdkTrapFocus menangkap fokus utama tab- di dalam suatu elemen. Ini dimaksudkan untuk membuat pengalaman yang bisa diakses untuk berbagai komponen seperti dialog modal, di mana fokus harus dibatasi.

Pada akhir bagian ini, aplikasi Anda akan lulus audit berikut:

• 🛑 Fokus pembaca layar pada pemilih warna keluar dari dialog

Anda dapat menemukan langkah-langkah ini di bagian komentar: TODO: #10. Control focus with FocusTrap.

Mengidentifikasi masalah

Untuk mengidentifikasi masalah ini, aktifkan pembaca layar dan buka dialog pemilih warna.

1. Aktifkan VoiceOver.
2. Gunakan navigasi tab untuk mengubah warna.
3. Centang untuk melihat urutan fokus intuitif dan penangkapan fokus di pemilih warna.

Menambahkan FocusTrap

cdkFocusTrap dapat digunakan untuk menangkap dan mengontrol urutan fokus dalam komponen kustom. Penggunaan mat-dialog-content sudah cukup untuk menyelesaikan sebagian besar masalah dengan menangkap fokus pada dialog. Tambahkan atribut cdkFocusInitial untuk menentukan daerah fokus awal pada warna pembungkus dumpling <mat-selection-list> dalam dialog pemilih warna.

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.html

<mat-selection-list #colors aria-label="Dumpling wrapper color" multiple="false" cdkFocusInitial>
  ...
</mat-selection-list>

Memverifikasi perubahan

Aktifkan pembaca layar lagi dan verifikasi perubahan Anda. Fokus kini awalnya ditetapkan pada Ubah Warna dalam dialog.

Audit Aksesibilitas:

• ✅ Semua halaman memiliki judul halaman yang unik
• ✅ Warna memiliki rasio kontras yang memadai
• ✅ HTML semantik memastikan interaksi logis
• ✅ Semua kontrol dapat dijangkau oleh pembaca layar
• ✅ Penggeser menggunakan atribut ARIA untuk memberikan label
• ✅ Pemilih warna memiliki tangkapan fokus yang benar
• 🛑 Perubahan, error, dan notifikasi tidak diumumkan
• 🛑 Mode HighContrast tidak diaktifkan

11. Mengumumkan perubahan dengan LiveAnnouncer

Pembaca layar harus diberi tahu saat ada perubahan di halaman. Bayangkan jika Anda mencoba mengirimkan formulir atau menyelesaikan pembelian, dan tidak tahu bahwa muncul error yang mencegah pengiriman formulir. Itu mengesalkan!

LiveAnnouncer digunakan untuk mengumumkan pesan bagi pengguna pembaca layar menggunakan aria-live region untuk memastikan pembaca layar diberi tahu tentang notifikasi dan perubahan halaman aktif. Untuk informasi selengkapnya tentang aria-live region, lihat WAI-ARIA W3C. Di Angular, memanggil LiveAnnouncer sebagai layanan adalah solusi yang lebih dapat diuji daripada atribut aria-live.

Pada akhir bagian ini, aplikasi Anda akan lulus audit berikut:

• 🛑 Perubahan, error, dan notifikasi tidak diumumkan

Anda dapat menemukan langkah-langkah ini di bagian komentar: TODO: #11. Announce changes with LiveAnnouncer.

Mengidentifikasi masalah

Untuk mengidentifikasi masalah ini, aktifkan pembaca layar dan pilih Beli tanpa melengkapi kolom formulir:

1. Aktifkan VoiceOver.
2. Gunakan navigasi tab untuk mengubah warna dan melakukan pembelian palsu.
3. Perhatikan bahwa tidak ada indikasi warna apa yang dipilih saat keluar dari dialog dan pembelian tidak dibaca.

Menambahkan LiveAnnouncer ke kode Anda

Tambahkan LiveAnnouncer, dan umumkan pemilihan warna dan pembelian palsu sebagai string. Dalam penerapan yang sebenarnya, ini dapat dibaca saat Anda membuka sistem pembayaran pihak ketiga atau untuk kesalahan formulir.

1. Tambahkan pengumuman saat warna dipilih:

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ColorPickerDialogComponent implements OnInit {
  constructor(
    public dialogRef: MatDialogRef<ColorPickerDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: ColorDialogData,
    private liveAnnouncer: LiveAnnouncer) { }

  public changeColor(color: string): void {
    this.liveAnnouncer.announce(`Select color: ${color}`);
    this.dialogRef.close();
  }
}

2. Tambahkan pengumuman saat pembelian palsu dilakukan:

src/app/shop/shop.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ShopComponent implements OnInit {

  constructor(private liveAnnouncer: LiveAnnouncer) { }

  fauxPurchase(): void {
    let flavor = '...';
    const fakePurchase = `Purchase ${this.quantity} ${flavor}dumplings in the color ${this.color}!`;

    this.liveAnnouncer.announce(fakePurchase);
  }
}

Memverifikasi perubahan

Aktifkan pembaca layar lagi dan verifikasi perubahan Anda. Sekarang Anda telah mendapat notifikasi terkait error yang ada.

Audit Aksesibilitas:

• ✅ Semua halaman memiliki judul halaman yang unik
• ✅ Warna memiliki rasio kontras yang memadai
• ✅ HTML semantik memastikan interaksi logis
• ✅ Semua kontrol dapat dijangkau oleh pembaca layar
• ✅ Penggeser menggunakan atribut ARIA untuk memberikan label
• ✅ Pemilih warna memiliki tangkapan fokus yang benar
• ✅ Perubahan, error, dan notifikasi diumumkan
• 🛑 Mode HighContrast tidak diaktifkan

12. Mengaktifkan mode HighContrast

Microsoft Windows mendukung fitur aksesibilitas yang disebut Mode Kontras Tinggi. Mode ini mengubah tampilan semua aplikasi, termasuk aplikasi web, untuk meningkatkan kontras secara drastis. Di Angular, Anda ingin menghargai preferensi pengguna di aplikasi.

HighContrastModeDetector memungkinkan Anda menentukan apakah browser saat ini berada dalam lingkungan mode kontras tinggi.

Internet Explorer, Microsoft Edge, dan Firefox mendukung mode ini. Google Chrome tidak mendukung Mode Kontras Tinggi Windows. Layanan ini tidak mendeteksi mode kontras tinggi seperti yang ditambahkan oleh ekstensi browser Kontras Tinggi Chrome.

Pada akhir bagian ini, aplikasi Anda akan lulus audit berikut:

• 🛑 Mode HighContrast tidak diaktifkan

Anda dapat menemukan langkah-langkah ini di bagian komentar: TODO: #12. Enable HighContrast mode.

Mengidentifikasi masalah

Untuk mengidentifikasi masalah ini, buka aplikasi di Internet Explorer, Microsoft Edge, atau Firefox, aktifkan Mode Kontras Tinggi, dan amati kurangnya perubahan:

1. Buka aplikasi Anda di Internet Explorer, Microsoft Edge, atau Firefox.
2. Aktifkan Mode Kontras Tinggi.
3. Perhatikan bahwa aplikasi tidak berubah.

Menambahkan dukungan untuk mode kontras tinggi

Di styles.scss, gunakan mixin cdk-high-contrast yang disediakan di @angular/cdk/a11y untuk menambahkan outline ke tombol dalam mode Kontras Tinggi:

src/app/shop/shop.component.scss

@import '~@angular/cdk/a11y';

.purchase-button {
    border-radius: 5px;
    background-color: mat.get-color-from-palette(mat.$pink-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$pink-palette, 50);
    }
}

:host-context(.dark-theme) {
  .purchase-button {
    background-color: mat.get-color-from-palette(mat.$light-green-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$light-green-palette, 50);
    }
  }
}

Memverifikasi perubahan

Muat ulang aplikasi Anda dan verifikasi perubahan. Anda menambahkan outline ke tombol dalam mode Kontras Tinggi!

Audit Aksesibilitas:

• ✅ Semua halaman memiliki judul halaman yang unik
• ✅ Warna memiliki rasio kontras yang memadai
• ✅ HTML semantik memastikan interaksi logis
• ✅ Semua kontrol dapat dijangkau oleh pembaca layar
• ✅ Penggeser menggunakan atribut ARIA untuk memberikan label
• ✅ Pemilih warna memiliki tangkapan fokus yang benar
• ✅ Perubahan, error, dan notifikasi diumumkan
• ✅ Mode kontras tinggi diaktifkan

13. Selamat!

Selamat, Anda telah mengatasi masalah aksesibilitas web umum di aplikasi Angular! 🎉

Untuk melihat semua solusi, lihat cabang main.

Sekarang, Anda telah mengetahui langkah-langkah penting yang diperlukan untuk menyelesaikan delapan kesulitan umum a11y dalam aplikasi Angular.

Pelajari lebih lanjut

Lihat codelab ini:

• Mem-build aplikasi web dengan Angular dan Firebase
• Menemukan dan memperbaiki teks kontras rendah dengan Chrome DevTools

Baca materi ini:

• Angular.io
• a11y Material Angular
• Dasar-Dasar Aksesibilitas
• https://web.dev/accessible/