Aksesibilitas untuk tim

Cara menggabungkan aksesibilitas ke dalam proses tim Anda.

Rob Dodson

Membuat situs Anda lebih mudah diakses bisa jadi tugas yang berat. Jika Anda baru pertama kali mempelajari aksesibilitas, cakupan topik yang luas dapat membuat Anda bingung harus memulai dari mana. Lagi pula, bekerja untuk mengakomodasi berbagai kemampuan berarti ada berbagai masalah yang harus dipertimbangkan.

Ingat, aksesibilitas adalah upaya tim. Setiap orang memiliki peran penting. Artikel ini menguraikan kriteria untuk setiap disiplin utama (project manager, UX designer, dan developer) sehingga mereka dapat bekerja untuk menerapkan praktik terbaik aksesibilitas ke dalam proses mereka.

Project manager

Sasaran utama bagi setiap project manager adalah mencoba menyertakan pekerjaan aksesibilitas dalam setiap pencapaian; memastikannya sama pentingnya dengan topik lain seperti performa, dan pengalaman pengguna. Berikut adalah beberapa item checklist yang perlu diingat saat menjalankan proses Anda.

  • Sediakan pelatihan aksesibilitas untuk tim.
  • Identifikasi perjalanan penting pengguna di situs atau aplikasi.
  • Coba sertakan checklist aksesibilitas ke dalam proses tim.
  • Jika memungkinkan, evaluasi situs atau aplikasi dengan studi pengguna.

Pelatihan aksesibilitas

Ada sejumlah referensi gratis yang bagus untuk mempelajari aksesibilitas web. Menyediakan waktu bagi tim Anda untuk mempelajari topik dapat mempermudah penyertaan aksesibilitas di awal proses.

Beberapa referensi yang disediakan oleh Google meliputi:

Aksesibilitas Web oleh Google — kursus pelatihan interaktif berlangsung beberapa minggu.

Dasar-Dasar Aksesibilitas — panduan aksesibilitas tertulis dan praktik terbaik.

Panduan Material: Aksesibilitas — serangkaian praktik terbaik UX untuk desain inklusif.

Mengidentifikasi perjalanan penting pengguna

Setiap aplikasi memiliki beberapa tindakan utama yang perlu dilakukan pengguna. Misalnya, jika Anda membuat aplikasi e-commerce, setiap pengguna harus dapat menambahkan item ke keranjang belanja mereka.

Perjalanan pengguna utama: Pengguna dapat menambahkan item ke keranjang belanja mereka.

Beberapa tindakan mungkin memiliki tingkat kepentingan sekunder, dan mungkin hanya dilakukan sesekali. Misalnya, mengubah foto avatar adalah fitur yang bagus, tetapi mungkin tidak penting untuk setiap pengalaman.

Mengidentifikasi tindakan utama dan sekunder dalam aplikasi akan membantu Anda memprioritaskan pekerjaan aksesibilitas di masa mendatang. Kemudian, Anda dapat menggabungkan tindakan ini dengan checklist aksesibilitas untuk melacak progres dan menghindari regresi.

Menyertakan checklist aksesibilitas

Topik aksesibilitas cukup luas, jadi memiliki checklist area penting yang perlu dipertimbangkan dapat membantu Anda memastikan bahwa Anda telah mencakup semua dasar.

Ada sejumlah checklist aksesibilitas, beberapa contoh industri meliputi:

Checklist WCAG WebAIM Panduan Aksesibilitas Vox

Dengan checklist di tangan, Anda dapat meninjau tindakan utama dan sekunder untuk mulai melakukan prioritas terhadap pekerjaan yang masih perlu dilakukan. Anda dapat melakukan proses ini dengan cukup taktis dan bahkan membuat matriks tindakan utama dan sekunder serta menentukan untuk setiap langkah dalam proses tersebut, apakah ada bit aksesibilitas yang hilang.

Tabel dengan kasus penggunaan utama sebagai baris dan item checklist sebagai kolom.

Mengevaluasi dengan studi pengguna

Tidak ada yang lebih baik daripada duduk bersama pengguna sebenarnya dan mengamati mereka saat mencoba menggunakan aplikasi Anda. Jika Anda menambahkan aksesibilitas ke dalam pengalaman yang sudah ada, proses ini dapat membantu Anda mengidentifikasi dengan cepat area yang perlu ditingkatkan. Selain itu, jika Anda memulai project baru, studi awal pengguna dapat membantu Anda menghindari menghabiskan terlalu banyak waktu untuk mengembangkan fitur yang sulit digunakan.

Usahakan untuk menyertakan masukan dari populasi pengguna yang beragam. Pertimbangkan pengguna yang terutama menavigasi dengan keyboard, atau mengandalkan teknologi bantuan seperti pembaca layar atau pembesar layar.

UX designer

Karena orang cenderung mendesain menggunakan bias mereka sendiri, jika Anda tidak memiliki disabilitas dan tidak memiliki rekan kerja yang memiliki disabilitas, Anda mungkin tidak sengaja mendesain hanya untuk sebagian pengguna. Saat bekerja, tanyakan kepada diri sendiri "apa saja jenis pengguna yang mungkin mengandalkan desain ini?" Berikut beberapa teknik yang dapat Anda coba untuk membuat proses Anda lebih inklusif.

  • Konten memiliki kontras warna yang memadai.
  • Urutan tab ditentukan.
  • Kontrol memiliki label yang mudah diakses.
  • Ada beberapa cara untuk berinteraksi dengan UI.

Konten memiliki kontras warna yang baik

Tujuan utama sebagian besar situs adalah menyampaikan beberapa informasi kepada pengguna, baik melalui teks tertulis maupun gambar. Namun, jika konten ini memiliki kontras rendah, beberapa pengguna (terutama pengguna dengan gangguan penglihatan) mungkin akan kesulitan membacanya. Hal ini dapat memengaruhi pengalaman pengguna mereka secara negatif. Untuk mengatasi masalah ini, usahakan semua teks dan gambar memiliki kontras warna yang memadai.

Kontras diukur dengan membandingkan luminans warna latar depan dan latar belakang. Untuk teks yang lebih kecil (di bawah 18 pt atau 14 pt tebal), rasio minimum 4,5:1 direkomendasikan. Untuk teks yang lebih besar, rasio ini dapat disesuaikan menjadi 3:1.

Pada gambar di bawah, teks di sebelah kiri memenuhi kontras minimum ini, sedangkan teks di sebelah kanan memiliki kontras rendah.

Contoh teks berdampingan. Satu memiliki kontras yang memadai, satu lagi memiliki kontras rendah.

Ada sejumlah alat untuk mengukur kontras warna, seperti Alat Warna Material Google, aplikasi Rasio Kontras Lea Verou, dan aXe Deque.

Urutan tab ditentukan

Urutan tab adalah urutan elemen yang menerima fokus saat pengguna menekan tombol tab. Bagi pengguna yang terutama menggunakan keyboard untuk menavigasi, tombol tab adalah cara utama mereka untuk menjangkau semua hal di layar. Anggap saja seperti kursor mouse mereka.

Idealnya, urutan tab harus mengikuti urutan pembacaan dan mengalir dari bagian atas halaman ke bawah, dengan item yang lebih penting muncul lebih tinggi dalam urutan. Hal ini membuat siapa saja yang menggunakan keyboard dapat menjangkau item ini dengan lebih efisien.

Komposisi desain dengan kontrol interaktif yang diberi nomor.

Antarmuka tiruan di atas diberi nomor untuk menampilkan urutan tab. Membuat tiruan seperti ini dapat membantu dengan mengidentifikasi urutan tab yang diinginkan. Kemudian, hal ini dapat dibagikan kepada developer dan penguji QA untuk memastikannya diterapkan dan diuji dengan benar.

Kontrol memiliki label yang dapat diakses

Bagi pengguna teknologi pendukung seperti pembaca layar, label memberikan informasi yang hanya bersifat visual. Misalnya, tombol penelusuran yang hanya berupa ikon kaca pembesar dapat memiliki label "Telusuri" yang mudah diakses untuk membantu mengisi kemampuan visual yang hilang.

Berikut beberapa saran sederhana yang harus diikuti saat mendesain label yang mudah diakses:

  • Singkat - Mendengarkan deskripsi yang panjang bisa jadi membosankan.
  • Cobalah untuk tidak menyertakan jenis atau status kontrol - Jika kontrol dienkode dengan benar, pembaca layar akan mengumumkannya secara otomatis.
  • Berfokuslah pada kata kerja tindakan - Gunakan "telusuri", bukan "kaca pembesar".
Komposisi desain dengan kontrol yang ditandai dengan label yang dapat diakses.

Anda dapat mempertimbangkan untuk membuat tiruan dengan semua kontrol yang diberi label. Hal ini dapat dibagikan kepada tim pengembangan dan tim Uji Mutu (QA) Anda untuk implementasi dan pengujian.

Beberapa cara untuk berinteraksi dengan dan memahami UI

Sangat mudah untuk mengasumsikan bahwa semua pengguna berinteraksi dengan halaman terutama menggunakan mouse. Saat mendesain, pertimbangkan cara seseorang berinteraksi dengan kontrol menggunakan keyboard.

Rencanakan status fokus Anda. Ini berarti menentukan tampilan kontrol saat pengguna memfokuskannya dengan tab atau menekan tombol panah. Sebaiknya rencanakan status ini lebih awal, daripada mencoba memasukkannya ke dalam desain nanti.

Terakhir, untuk setiap titik interaksi, Anda ingin memastikan bahwa pengguna memiliki beberapa cara untuk memahami konten. Cobalah untuk tidak menggunakan warna saja untuk menyampaikan informasi, karena isyarat halus ini mungkin terlewatkan oleh pengguna dengan gangguan penglihatan warna. Contoh klasiknya adalah kolom teks yang tidak valid. Selain garis bawah merah untuk menunjukkan masalah, pertimbangkan juga untuk menambahkan beberapa teks bantuan. Dengan begitu, Anda akan mencakup lebih banyak dasar dan meningkatkan kemungkinan pengguna akan melihat masalah tersebut.

Developer

Peran developer adalah tempat manajemen fokus dan semantik digabungkan untuk membentuk pengalaman pengguna yang andal. Berikut adalah beberapa item yang dapat diingat developer saat mereka mengerjakan situs atau aplikasi:

  • Urutan tab bersifat logis.
  • Fokus dikelola dan terlihat dengan benar.
  • Elemen interaktif memiliki dukungan keyboard.
  • Peran dan atribut ARIA diterapkan sesuai kebutuhan.
  • Elemen diberi label dengan benar.
  • Pengujian dilakukan secara otomatis.

Urutan tab logis

Elemen native seperti input, button, dan select diikutsertakan dalam urutan tab secara gratis dan dapat difokuskan secara otomatis dengan keyboard. Namun, tidak semua elemen menerima perilaku yang sama ini. Secara khusus, elemen umum seperti div, dan span, tidak diikutsertakan dalam urutan tab. Artinya, jika Anda menggunakan div untuk membuat kontrol interaktif, Anda harus melakukan pekerjaan tambahan agar keyboard dapat diakses.

Dua opsi tersebut adalah:

  • Berikan tabindex="0" ke kontrol. Tindakan ini setidaknya akan membuatnya dapat difokuskan, meskipun Anda mungkin perlu melakukan pekerjaan tambahan untuk menambahkan dukungan untuk penekanan tombol.
  • Jika memungkinkan, sebaiknya gunakan button, bukan div atau span untuk kontrol seperti tombol. Elemen button native sangat mudah ditata gayanya dan mendapatkan dukungan keyboard secara gratis.

Mengelola fokus

Saat Anda mengubah konten halaman, penting untuk mengarahkan perhatian pengguna dengan memindahkan fokus. Contoh klasik saat teknik ini berguna adalah saat membuka dialog modal. Jika pengguna yang mengandalkan keyboard menekan tombol untuk membuka dialog dan fokusnya tidak dipindahkan ke elemen dialog, satu-satunya tindakan yang dapat dilakukan adalah menekan tombol tab di seluruh situs hingga akhirnya menemukan kontrol baru. Dengan memindahkan fokus ke konten baru segera setelah muncul, Anda dapat meningkatkan efisiensi pengalaman pengguna ini.

Dukungan keyboard untuk elemen interaktif

Jika membuat kontrol kustom seperti carousel atau dropdown, Anda harus melakukan beberapa pekerjaan tambahan untuk menambahkan dukungan keyboard. Panduan Praktik Penulisan ARIA adalah referensi berguna yang mengidentifikasi berbagai pola UI dan jenis tindakan keyboard yang diharapkan untuk didukung.

Cuplikan dari panduan Praktik Penulisan ARIA yang menjelaskan cara membuat grup pilihan.

Untuk mempelajari lebih lanjut cara menambahkan dukungan keyboard ke elemen, lihat bagian tabindex keliling dalam dokumen Dasar-Dasar Aksesibilitas Google.

Peran dan atribut ARIA diterapkan sesuai kebutuhan

Kontrol kustom tidak hanya memerlukan dukungan keyboard yang tepat, tetapi juga memerlukan semantik yang tepat. Bagaimanapun, div, secara semantik, hanyalah penampung pengelompokan generik. Jika menggunakan div sebagai dasar untuk menu dropdown, Anda harus mengandalkan ARIA untuk menambahkan semantik tambahan sehingga jenis kontrol dapat disampaikan ke teknologi pendukung. Di sini lagi, Panduan Praktik Penulisan ARIA dapat membantu dengan mengidentifikasi peran, status, dan properti yang harus Anda gunakan. Sebagai bonus tambahan, banyak penjelasan dalam panduan ARIA juga dilengkapi dengan contoh kode.

Elemen pemberian label

Untuk memberi label pada input native, Anda dapat menggunakan elemen <label> bawaan seperti yang dijelaskan di MDN. Hal ini tidak hanya akan membantu Anda membuat affordance visual di layar, tetapi juga memberi input nama yang dapat diakses dalam hierarki aksesibilitas. Nama ini kemudian diambil oleh teknologi pendukung (seperti pembaca layar) dan diumumkan kepada pengguna.

Sayangnya, <label> tidak mendukung pemberian nama yang dapat diakses ke kontrol kustom (seperti yang dibuat menggunakan Elemen Kustom atau dari div dan span sederhana). Untuk jenis kontrol ini, Anda harus menggunakan atribut aria-label dan aria-labelledby.

Pengujian otomatis

Bersikap lambat bisa jadi hal yang baik, terutama dalam hal pengujian. Jika memungkinkan, coba otomatiskan pengujian aksesibilitas agar Anda tidak perlu melakukan semuanya secara manual. Ada sejumlah alat pengujian industri yang bagus yang ada saat ini untuk memudahkan dan mempercepat pemeriksaan masalah aksesibilitas umum:

aXe, yang dibuat oleh sistem Deque, tersedia sebagai ekstensi Chrome dan modul Node (cocok untuk lingkungan integrasi berkelanjutan). A11ycast singkat ini menjelaskan beberapa cara untuk memasukkan aXe ke dalam proses pengembangan Anda.

Lighthouse adalah project open source Google untuk mengaudit performa Progressive Web App Anda. Selain memeriksa apakah PWA Anda memiliki dukungan untuk hal-hal seperti Service Worker dan Manifes Aplikasi Web, Lighthouse juga akan menjalankan serangkaian pengujian praktik terbaik, termasuk pengujian untuk masalah aksesibilitas.

Kesimpulan

Aksesibilitas adalah upaya tim. Setiap orang memiliki peran penting. Panduan ini telah menjelaskan beberapa item utama yang dapat digunakan setiap anggota tim untuk meningkatkan pengetahuan tentang subjek dengan cepat dan semoga dapat meningkatkan pengalaman aplikasi mereka secara keseluruhan.

Untuk mempelajari aksesibilitas lebih lanjut, pastikan untuk melihat kursus Udacity gratis kami dan menjelajahi dokumen aksesibilitas yang tersedia di sini di web.dev.