Membangun aplikasi yang dapat diakses

Artikel
05/24/2023

Di atas 20% pengguna internet memiliki kebutuhan untuk aplikasi web yang dapat diakses. Dengan demikian, penting untuk memastikan aplikasi Anda dirancang sedemikian rupa sehingga setiap pengguna dapat dengan mudah menggunakannya. Daripada memikirkan aksesibilitas sebagai set tugas untuk diselesaikan, anggap saja sebagai bagian dari pengalaman pengguna Anda secara keseluruhan. Semakin aplikasi Anda mudah diakses, semakin banyak orang yang dapat menggunakannya.

Ketika ada konten interaktif yang kaya seperti peta, beberapa pertimbangan aksesibilitas umum adalah:

Dukung pembaca layar untuk pengguna yang kesulitan melihat aplikasi web.
Memiliki beberapa metode untuk berinteraksi dengan dan menavigasi aplikasi web seperti mouse, sentuhan, dan papan ketik.
Pastikan kontras warna sedemikian rupa sehingga warna tidak menyatu dan menjadi sulit untuk membedakan satu sama lain.

Azure Maps Web SDK telah dibangun sebelumnya dengan fitur aksesibilitas seperti:

Deskripsi pembaca layar saat peta bergerak dan saat pengguna berfokus pada kontrol atau sembul.
Dukungan mouse, sentuhan, dan papan ketik.
Dukungan kontras warna yang dapat diakses dalam gaya peta jalan.
Dukungan kontras tinggi.

Untuk detail kesesuaian aksesibilitas untuk semua produk Microsoft, lihat Laporan Kesesuaian Aksesibilitas. Cari "Web Azure Maps" untuk menemukan dokumen khusus untuk SDK Azure Maps Web.

Mengarahkan peta

Ada beberapa cara berbeda di mana peta dapat diperbesar tampilannya, digeser, diputar, dan digerakkan. Berikut ini merinci semua cara berbeda untuk mengarahkan peta.

Perbesar tampilan peta

Menggunakan mouse, klik ganda peta untuk perbesar tampilan satu tingkat.
Dengan menggunakan mouse, gulir roda untuk memperbesar tampilan peta.
Gunakan layar sentuh, sentuh peta dengan dua jari dan cubit bersama-sama untuk memperkecil atau membentangkan jari-jari untuk memperbesar tampilan.
Menggunakan layar sentuh, ketuk ganda peta untuk memperbesar tampilan satu tingkat.
Dengan peta yang difokuskan, gunakan tanda Plus (+) atau Tanda sama dengan (=) untuk memperbesar tampilan satu tingkat.
Dengan peta yang difokuskan, gunakan tanda Minus, Penghubung (-), atau Garis bawah (_) untuk memperkecil satu tingkat.
Menggunakan kontrol perbesar tampilan dengan mouse, sentuhan, atau tombol tab/masukkan pada papan ketik.
Tekan dan tahan tombol Shift dan tekan tombol kiri mouse ke bawah pada peta dan seret untuk menggambar area untuk memperbesar tampilan peta.
Menggunakan beberapa bantalan multi-sentuh, seret dua jari ke atas untuk memperkecil, atau ke bawah untuk memperbesar tampilan.

Menggeser peta

Menggunakan mouse, tekan ke bawah dengan tombol mouse kiri di peta dan seret ke arah sembarang arah.
Menggunakan layar sentuh, sentuh peta dan seret ke sembarang arah.
Dengan peta yang difokuskan, gunakan tombol panah untuk memindahkan peta.

Memutar peta

Menggunakan mouse, tekan ke bawah dengan tombol mouse kiri di peta dan seret ke kiri atau kanan.
Jika menggunakan layar sentuh, sentuh peta dengan dua jari dan putar.
Dengan fokus pada peta, gunakan tombol shift dan tombol panah kiri atau kanan.
Menggunakan kontrol memutar dengan mouse, sentuhan, atau tombol tab/masukkan pada papan ketik.

Menggerakkan peta

Menggunakan mouse, tekan ke bawah dengan tombol mouse kiri di peta dan seret ke atas atau bawah.
Jika menggunakan layar sentuh, sentuh peta dengan dua jari lalu tarik ke atas atau ke bawah secara bersamaan.
Dengan fokus pada peta, gunakan tombol shift dan tombol panah atas atau bawah.
Menggunakan kontrol menggerakkan dengan mouse, sentuhan, atau tombol tab/masukkan pada papan ketik.

Mengubah Gaya Peta

Tidak semua pengembang ingin semua gaya peta yang mungkin tersedia dalam aplikasi mereka. Jika pengembang menampilkan kontrol memilih gaya peta, maka pengguna dapat mengubah gaya peta menggunakan mouse, sentuhan, atau papan ketik dengan tombol tab atau memasukkan. Pengembang dapat menentukan gaya peta mana yang ingin mereka sediakan dalam kontrol memilih gaya peta. Selain itu, pengembang dapat secara terprogram mengatur dan mengubah gaya peta.

Gunakan kontras tinggi

Ketika kontrol peta dimuat, ia memeriksa untuk melihat apakah kontras tinggi diaktifkan dan browser mendukungnya.
Kontrol peta tidak memantau mode kontras tinggi perangkat. Jika mode perangkat berubah, peta tidak akan berubah. Dengan demikian, pengguna perlu memuat ulang peta dengan merefresh halaman.
Ketika kontras tinggi terdeteksi, gaya peta secara otomatis beralih ke kontras tinggi, dan semua kontrol bawaan menggunakan gaya kontras tinggi. Misalnya, ZoomControl, PitchControl, CompassControl, StyleControl, dan kontrol bawaan lainnya, menggunakan gaya kontras tinggi.
Ada dua jenis kontras tinggi, terang dan gelap. Jika jenis kontras tinggi dapat dideteksi oleh kontrol peta, maka perilaku peta menyesuaikannya. Jika terang, maka gaya peta grayscale_light dimuat. Jika jenis tidak dapat dideteksi atau gelap, maka gaya high_contrast_dark dimuat.
Jika membuat kontrol kustom, penting untuk mengetahui apakah kontrol bawaan menggunakan gaya kontras tinggi. Pengembang dapat menambahkan kelas css pada div kontainer peta untuk memeriksa. Kelas css yang akan ditambahkan adalah high-contrast-dark dan high-contrast-light. Untuk memeriksa menggunakan JavaScript, gunakan:

map.getMapContainer().classList.contains("high-contrast-dark")

atau, gunakan:

map.getMapContainer().classList.contains("high-contrast-light")

Pintasan papan ketik

Peta memiliki pintasan keyboard bawaan yang memudahkan penggunaan peta. Pintasan papan ketik ini berfungsi saat peta memiliki fokus.

Kunci	Tindakan
`Tab`	Navigasikan di seluruh kontrol dan sembul di peta.
`ESC`	Pindahkan fokus dari setiap elemen di peta ke elemen peta tingkat teratas.
`Ctrl` + `Shift` + `D`	Mengalihkan tingkat detail pembaca layar.
Tombol panah kiri	Geser peta ke kiri 100 piksel
Tombol panah kanan	Geser peta ke kanan 100 piksel
Tombol panah bawah	Menggeser peta ke bawah 100 piksel
Tombol panah atas	Geser peta ke atas 100 piksel
`Shift` + panah atas	Menambah gerakan peta sebesar 10 derajat
`Shift` + panah bawah	Menurunkan gerakan peta sebesar 10 derajat
`Shift` + panah kanan	Memutar peta 15 derajat searah jarum jam
`Shift` + panah kiri	Memutar peta 15 derajat berlawanan arah jarum jam
Tanda Plus (`+`) atau ^* tanda Sama Dengan (`=`)	Perbesar tampilan
Tanda minus, Penghubung (`-`), atau ^* Garis bawah (`_`)	Perkecil
`Shift` + seret mouse di peta untuk menggambar area	Perbesar tampilan ke area

^* Pintasan kunci ini biasanya memiliki tombol yang sama pada papan ketik. Pintasan ini ditambahkan untuk meningkatkan pengalaman pengguna. Tidak masalah juga apakah pengguna menggunakan tombol shift atau tidak untuk pintasan ini.

Pengguna dapat menavigasi peta menggunakan papan ketik. Jika pembaca layar berjalan, peta akan memberi tahu pengguna tentang perubahan pada statusnya. Misalnya, pengguna diberi tahu tentang perubahan peta saat peta digeser atau diperbesar tampilannya. Secara default, peta menyediakan deskripsi yang disederhanakan yang mengecualikan tingkat perbesar tampilan dan koordinat pusat peta. Pengguna dapat beralih ke tingkat detail deskripsi ini dengan menggunakan pintasan papan ketik Ctrl + Shift + D.

Setiap informasi tambahan yang ditempatkan di peta dasar harus memiliki informasi tekstual yang sesuai untuk pengguna pembaca layar. Pastikan untuk menambahkan Aplikasi Kaya Internet yang Dapat Diakses (ARIA), alt, dan atribut judul jika sesuai.

Membuat papan ketik sembul dapat diakses

Penanda atau simbol sering digunakan untuk mewakili lokasi di peta. Informasi tambahan tentang lokasi biasanya ditampilkan dalam sembulan saat pengguna berinteraksi dengan penanda. Di sebagian besar aplikasi, popup muncul saat pengguna memilih penanda. Namun, mengeklik dan mengetuk mengharuskan pengguna untuk menggunakan mouse dan layar sentuh secara berurutan. Praktik yang baik adalah membuat sembulan dapat diakses saat menggunakan papan ketik. Fungsi ini dapat dicapai dengan membuat sembulan untuk setiap poin data dan menambahkannya ke peta.

Contoh popup yang dapat diakses memuat titik minat pada peta menggunakan lapisan simbol dan menambahkan popup ke peta untuk setiap tempat menarik. Referensi ke setiap sembulan disimpan di properti setiap poin data. Ini juga dapat diambil untuk penanda, seperti ketika penanda dipilih. Saat berfokus pada peta, menekan tombol tab memungkinkan pengguna untuk menelusuri setiap popup di peta. Untuk kode sumber untuk sampel ini, lihat Kode sumber popup yang dapat diakses.

Cuplikan layar memperlihatkan peta dengan popup yang dapat diakses.

Tips aksesibilitas lainnya

Berikut adalah beberapa tips lainnya untuk membuat aplikasi pemetaan web Anda lebih mudah diakses.

Jika menampilkan banyak poin data interaktif di peta, pertimbangkan untuk mengurangi kekusutan dan menggunakan pengklusteran.
Pastikan rasio kontras warna antara teks/simbol dan warna latar belakang adalah 4,5:1 atau lebih.
Buat pesan pembaca layar Anda (atribut ARIA, alt, dan judul) singkat, deskriptif, dan bermakna. Hindari jargon dan akronim yang tidak perlu.
Cobalah untuk mengoptimalkan pesan yang dikirim ke pembaca layar untuk memberikan informasi bermakna singkat yang mudah dicerna oleh pengguna. Misalnya, jika Anda ingin memperbarui pembaca layar pada frekuensi tinggi, seperti saat peta bergerak, pertimbangkan untuk melakukan poin berikut ini:
- Tunggu hingga peta selesai bergerak untuk memperbarui pembaca layar.
- Batasi pembaruan untuk sekali setiap beberapa detik.
- Gabungkan pesan bersama-sama dengan cara yang logis.
Hindari menggunakan warna sebagai satu-satunya cara untuk menyampaikan informasi. Gunakan teks, ikon, atau pola untuk melengkapi atau mengganti warna. Beberapa pertimbangan:
- Jika menggunakan lapisan gelembung untuk menunjukkan nilai relatif antara poin data, pertimbangkan untuk penskalaan radius setiap gelembung, mewarnai gelembung, atau keduanya.
- Pertimbangkan untuk menggunakan lapisan simbol dengan ikon yang berbeda untuk kategori metrik yang berbeda, seperti segitiga, bintang, dan kotak. Lapisan simbol juga mendukung penskalaan ukuran ikon. Label teks juga dapat ditampilkan.
- Jika menampilkan data garis, lebarnya dapat digunakan untuk mewakili berat atau ukuran. Pola garis larik dapat digunakan untuk mewakili kategori garis yang berbeda. Lapisan simbol dapat digunakan dalam kombinasi dengan garis untuk overlay ikon di sepanjang garis. Menggunakan ikon panah berguna untuk memperlihatkan alur atau arah garis.
- Jika menampilkan data poligon, pola, seperti garis-garis, dapat digunakan sebagai alternatif warna.
Beberapa visualisasi seperti peta panas, lapisan petak peta, dan lapisan gambar tidak dapat diakses oleh pengguna dengan gangguan penglihatan. Beberapa pertimbangan:
- Meminta pembaca layar menjelaskan apa lapisan ditampilkan ketika ditambahkan ke peta. Misalnya, jika radar cuaca lapisan petak peta ditampilkan, maka minta pembaca layar mengatakan, "Data radar cuaca dioverlay pada peta."
Batasi jumlah fungsionalitas yang memerlukan untuk melayangkan mouse. Fungsionalitas ini tidak dapat diakses oleh pengguna yang menggunakan keyboard atau perangkat sentuh untuk berinteraksi dengan aplikasi Anda. Catatan, masih merupakan praktik yang baik untuk memiliki gaya melayangkan untuk konten interaktif seperti ikon, tautan, dan tombol yang dapat diklik.
Coba navigasikan aplikasi Anda menggunakan papan ketik. Pastikan urutan tab-nya logis.
Jika membuat pintasan papan ketik, coba batasi menjadi dua tombol atau kurang.