Test Automation for Accessibility part 2
Tools yang membutuhkan bantuan manusia untuk pengujian Web Accessibility Testing
- Keyboard
Alat pengujian pertama yang dapat membantu Anda menguji aksesibilitas adalah keyboard Anda sendiri
Berikut ini beberapa pintasan umum yang dapat Anda mulai gunakan, dan Anda mungkin sudah mengetahui beberapa di antaranya.
ctrl atau cmd, jika Anda pengguna Mac, + L akan memfokuskan pada bilah alamat browser Anda, sehingga Anda dapat menavigasi ke situs mana pun yang Anda suka. tab digunakan untuk menuju ke elemen tertentu, seperti tautan atau tombol.Menekan shift sebelum tab hanya akan membalikkan arah, sehingga Anda dapat kembali ke tautan atau tombol sebelumnya. Tombol panah, tentu saja, untuk menggulir ke area pandang tertentu.Dan Anda juga dapat menggunakan bilah spasi untuk mencentang atau menghapus centang pada kotak centang atau tombol radio. tombol enter juga dapat digunakan untuk mengaktifkan tombol atau tautan yang sedang difokuskan.
2. Screen Readers
Pembaca layar memungkinkan penyandang disabilitas — khususnya mereka yang memiliki gangguan penglihatan — untuk menggunakan komputer.
Ini menerjemahkan semua yang biasanya dilihat pengguna di layar mereka menjadi ucapan.
Ada banyak pembaca layar di luar sana yang dapat Anda gunakan untuk pengujian, tetapi berikut ini beberapa yang populer.
Jika Anda pengguna Mac dan iPhone, VoiceOver sudah terpasang dan Anda hanya perlu mengaktifkannya.
NVDA dan JAWS adalah dua pembaca layar paling populer di luar sana untuk Windows. NVDA adalah alat gratis, sedangkan JAWS adalah alat komersial.
Dan terakhir, Anda juga memiliki pembaca layar TalkBack untuk ponsel Android. Untuk mengaktifkan VoiceOver, cukup buka Preferensi Sistem dan pilih ikon Aksesibilitas.Dari sana, klik VoiceOver dan aktifkan saja.
Setelah diaktifkan, Anda harus mulai mendengar suara yang membacakan deskripsi elemen di halaman. Atau, Anda juga dapat menekan cmd + F5 untuk mengaktifkan dan menonaktifkan VoiceOver. Setelah diaktifkan, Anda dapat mengatur pintasan keyboard Anda untuk menggunakan keyboard VoiceOver. Dalam kasus saya, ini adalah tombol Control + Option. Saat Anda ingin merujuk kembali ke perintah keyboard yang akan Anda gunakan, cukup tekan ctrl + option + H, dan ini akan memunculkan Bantuan VoiceOver.
Dari sini, Anda dapat mengakses Panduan Pengguna, Perintah Umum, dan Bantuan Keyboard.Jadi, jika Anda bertanya-tanya pintasan apa yang akan digunakan, luncurkan saja Bantuan VoiceOver, dan temukan perintah yang Anda perlukan.Setelah selesai, cukup tekan tombol esc.
Untuk menunjukkan kepada Anda demo singkat, saya telah membuka situs web Deque, dan memperhatikan bahwa setiap kali saya fokus pada suatu elemen, deskripsi sedang dibaca.
Anda tidak dapat mendengarnya di video ini, tetapi bayangkan suara yang membacakan deskripsi yang dapat Anda lihat di sini di kiri bawah layar.
Inilah sebabnya mengapa penting untuk menggunakan struktur tajuk yang benar, label yang benar, dan deskripsi, karena inilah yang akan dibacakan oleh pembaca layar. Dampak dari tidak adanya teks alternatif adalah deskripsi tidak masuk akal bagi orang yang menggunakan pembaca layar.
Dalam contoh khusus ini, gambar Tanya Jawab Publik tidak berlabel, dan Anda dapat melihat bahwa deskripsi di pembaca layar sulit untuk dipahami.
Jika pengguna Anda memiliki penglihatan yang buruk, mereka juga akan menggunakan fitur zoom untuk memperbesar konten, sehingga mereka dapat membacanya dengan lebih baik.
Saat mereka memperbesar konten situs web Anda, Anda perlu memastikan bahwa elemen-elemennya menumpuk dengan baik, dan tidak di atas satu sama lain, dan semuanya mengalir dengan baik.
Dalam beberapa kasus, ketika Anda memperbesar terlalu banyak, jika sebuah situs web dirancang dengan buruk, itu bisa menjadi tidak dapat dibaca, dan oleh karena itu sangat tidak dapat diakses.
Untuk mendemonstrasikan fitur zoom, saya menggunakan situs web Deque lagi.Dan karena saya pengguna Mac, untuk memperbesar ukuran konten, saya perlu menekan cmd dan tombol +.Ini akan sama dengan ctrl dan + key, jika Anda menggunakan Windows.Menu telah menciut setelah saya memperbesar lebih dekat.
Kemudian setelah diperluas, navigasi masih dapat diakses sepenuhnya. Melihat ini, Anda dapat melihat bahwa semua elemen menumpuk dengan baik, dan konten masih sangat mudah dibaca.
Alat Semi Automation untuk pengujian Web Accessibility Testing
1. Axe
The axe browser extension adalah salah satu alat yang didasarkan pada pustaka axe, yang saat ini didukung oleh Deque Systems.
Ini memungkinkan Anda untuk mendeteksi masalah aksesibilitas dengan cepat hanya dengan menjalankan ekstensi, apakah Anda menggunakan Chrome, Firefox, atau Edge.
Saya telah menambahkan tautan unduhan ekstensi Chrome ke bagian sumber daya di bawah ini, jika Anda ingin menambahkan sebagai ekstensi browser. Setelah terinstal, cukup klik kanan, klik Inspect, lalu klik tab “ax”. Kemudian, klik tombol Analisis, dan setelah itu Anda diperlihatkan laporan aksesibilitas ini.
Coba Implementasi
Sekarang, mari pilih situs web yang berbeda seperti Stack Overflow, lalu jalankan audit ax lagi.
Setelah berada pada suatu situs , lalu klik kana inspect dan pilih mene axe dev tools. Setelah itu , silahkan anda melakukan pengujian. Anda dapat memilih scan seluruh page atau masing masing page.
Setelah melakukan pengujian , secara otomatis akan menampilkan total issue yang terdapat pada situs web tersebut dan mengetahui issue apa saja yang telah ditemukan.
2. Wave
Mirip dengan Axe, Anda juga dapat menggunakan WAVE, yang merupakan alat gratis lain yang dapat Anda gunakan yang memungkinkan Anda menjalankan pemeriksaan aksesibilitas dengan Chrome dan ekstensi browser mereka.
Sekali lagi, jangan ragu untuk mengunduh ekstensi, yang juga saya tautkan di bawah untuk referensi Anda.
Saat terinstal, klik kanan lalu pilih WAVE.
Laporan akan dibuat, yang menunjukkan perincian error aksesibilitas, jika ada, fitur aksesibilitasnya, elemen struktural, dan juga menyertakan berapa banyak label ARIA yang dimiliki halaman.
Coba Implementasi
Sekarang, mari pilih situs web yang berbeda seperti Stack Overflow, lalu jalankan wave.
Kemudian pada halaman sebenarnya itu sendiri, itu akan dianotasi dengan ikon berbeda yang menyoroti di mana masalah dan fitur aksesibilitas berada.
Saya hanya mengklik tombol Lihat Detail, dan kemudian jika Anda mengklik salah satu ikon, itu akan menyoroti elemen mana yang memiliki kesalahan.
Dengan mengklik referensi, ini akan menunjukkan detail tentang apa kesalahan itu dan mengapa penting untuk mengatasi masalah tersebut.
Ada juga opsi untuk memilih kode — Anda cukup mengeklik kodenya dan ini akan menyorot kode itu sendiri, jadi Anda tahu di mana harus menambahkan teks alternatif untuk contoh ini.
Anda juga dapat memeriksa masalah kontras warna dalam WAVE.
3. Google Lighthouse
Terakhir, Google Lighthouse, yang sudah ada di dalamnya jika versi Chrome Anda adalah yang terbaru, juga termasuk pemeriksaan aksesibilitas.
Fitur aksesibilitas mereka sebenarnya menggunakan ax-core sebagai mesinnya, tetapi yang hebat adalah Anda juga dapat mengukur metrik lain seperti kinerja, praktik terbaik, dan SEO.
Coba Implementasi
Sekarang, mari pilih situs web yang berbeda seperti Stack Overflow, lalu jalankan lighthouse.
Untuk menjalankan Lighthouse, cukup buka alat pengembang Anda dan kemudian temukan tab Lighthouse.
Setelah Anda berada di sini, Anda dapat memilih untuk menjalankannya di versi desktop atau seluler.
Mari klik Generate Report lalu tunggu Lighthouse memindai seluruh halaman.Setelah selesai, ini memberi Anda skor yang berbeda ini dan mengklik aksesibilitas akan mengarahkan Anda ke bagian aksesibilitas.
Saya suka bahwa mereka telah menyebutkan bahwa hanya sebagian dari masalah yang dapat dideteksi secara otomatis, jadi ini mendorong pentingnya untuk tidak mengandalkan sepenuhnya.
Saat Anda memperluas salah satu pelanggaran, ini akan menunjukkan kepada Anda apa saja elemen yang gagal.
Lalu , Bagaimana dengan Tools Automation for Accessibility ? yuk lanjut pada part 3 https://medium.com/@nikenarra/test-automation-for-accessibility-part-3-66f4ba51ee97
Kunjungi Github Test Automation for Accessibility apabila ingin coba langsung test yaa
https://github.com/Nikenarra0816/Test-Automation-for-Accessibility.git
