Setiap ruang usaha memiliki karakter sendiri, tetapi tetap dibangun dengan informasi yang mudah dipahami dan langkah yang dapat ditelusuri.
01
Kejelasan
Informasi, ketersediaan, ruang lingkup, dan langkah berikutnya dibahas sebelum keputusan.
02
Relevansi
Pilihan dimulai dari kebutuhan pengguna, bukan dari dorongan untuk menawarkan semuanya.
03
Perkembangan
Produk dan layanan digital dipandang sebagai ruang yang terus dapat dipelajari dan ditingkatkan.
Identitas operator
Website ini dioperasikan oleh PT DIRAC INOVASI NUSANTARA.
PT DIRAC INOVASI NUSANTARA berkembang dari perjalanan usaha CV Multi Usaha Mandiri sebagai tahap pertumbuhan dalam satu keluarga bisnis yang sama. CV Multi Usaha Mandiri tetap menjadi partner dalam ekosistem bisnis sesuai ruang lingkup kerja sama.
Penawaran, komunikasi layanan, dan transaksi melalui website ini menggunakan identitas PT DIRAC INOVASI NUSANTARA sesuai dokumen perusahaan dan ketentuan yang berlaku.
Legalitas & kepatuhan
Setiap dokumen dijelaskan sesuai fungsi dan batasnya.
PT DIRAC INOVASI NUSANTARA menjalankan kegiatan berdasarkan dokumen badan hukum, identitas usaha, administrasi perpajakan, dan kewajiban sektoral yang berlaku.
AHU
Status badan hukum
Status badan hukum Perseroan dibuktikan oleh dokumen pendaftaran atau pengesahan yang diterbitkan melalui Direktorat Jenderal Administrasi Hukum Umum, sesuai bentuk perseroan dan ketentuan yang berlaku.
Kanal resmi AHU
OSS
Identitas dan perizinan usaha
Nomor Induk Berusaha diterbitkan melalui OSS. Sertifikat Standar atau izin sektoral mengikuti KBLI dan tingkat risiko masing-masing kegiatan.
Kanal resmi OSS
DJP
Administrasi perpajakan
Administrasi perpajakan Perseroan dilaksanakan melalui Direktorat Jenderal Pajak. NPWP merupakan identitas perpajakan, bukan izin atau jaminan atas seluruh kegiatan usaha.
Kanal resmi DJP
PSE
Sistem elektronik
Pendaftaran PSE Lingkup Privat ditampilkan hanya apabila kewajiban dan tanda daftarnya telah terpenuhi serta dapat diverifikasi.
Portal resmi PSE
BPOM
Notifikasi produk parfum
Status notifikasi kosmetika diperiksa per produk. Notifikasi BPOM bukan sertifikasi perusahaan atau seluruh toko.
Cek Produk BPOM
06
Bukan tanda dukungan pemerintah
Dokumen administrasi memiliki fungsi masing-masing dan tidak berarti dukungan, rekomendasi, atau jaminan pemerintah terhadap seluruh produk dan layanan.
Arsitektur layanan
Empat ruang yang dapat dijelajahi secara mandiri.
Pengunjung dapat langsung menuju kebutuhan yang relevan tanpa harus memahami seluruh portofolio lebih dahulu.
Mengenal ruang usaha PT DIRAC INOVASI NUSANTARA melalui satu film singkat.
Film singkat ini menyatukan visual korporat, fragrance, domain, website, dan layanan digital dari aset yang memang digunakan oleh PT DIRAC INOVASI NUSANTARA.
Tanpa autoplay suaraMedia lokalMobile friendly
Cara Kerja
Dari konteks menuju keputusan yang dapat ditindaklanjuti.
Alur ini tidak menambahkan sejarah atau pencapaian yang belum dapat diverifikasi; ia merangkum pola kerja yang memang sudah digunakan di seluruh layanan PT DIRAC INOVASI NUSANTARA.
Pahami kebutuhan
Konteks, tujuan, dan data dasar dikumpulkan terlebih dahulu.
Pilih jalur
Kategori layanan disesuaikan dengan kebutuhan yang disampaikan.
Konfirmasi ruang lingkup
Ketersediaan, batas layanan, dan informasi penting dibahas dengan jelas.
Lanjut melalui kanal resmi
Konsultasi dan bantuan dilanjutkan melalui WhatsApp resmi. Pembelian dilakukan melalui akun pelanggan.
PT DIRAC INOVASI NUSANTARA
Temukan ruang layanan yang relevan.
Jelajahi kategori yang Anda perlukan, lalu masuk atau daftar untuk membeli melalui akun pelanggan. WhatsApp tersedia untuk bantuan konsultasi.
Sistem login menghubungkan permintaan dengan akun melalui autentikator, misalnya kata sandi atau kunci keamanan. Keberhasilan pemeriksaan menunjukkan bahwa bukti yang diminta telah diberikan. Nama pada profil, alamat pengiriman, dan kewenangan mewakili perusahaan tetap merupakan informasi berbeda yang memerlukan pemeriksaan sesuai kebutuhan layanan.
Saat tindakan menjadi sensitif
Perubahan alamat surel, kata sandi, atau pengaturan keamanan dapat memerlukan autentikasi ulang. Tujuannya memastikan sesi yang sedang terbuka tidak menjadi satu-satunya dasar perubahan penting. Pemeriksaan tambahan harus dilakukan oleh server, bukan sekadar menampilkan dialog konfirmasi yang dapat dilewati di antarmuka.
Membatasi kesimpulan
Tulisan “berhasil masuk” lebih tepat daripada “identitas pasti terverifikasi” apabila layanan hanya memeriksa kredensial. Dokumentasikan apa yang benar-benar diperiksa dan hindari menjadikan status login sebagai pengganti pemeriksaan transaksi, izin pengguna, atau proses verifikasi identitas yang memang dibutuhkan.
Intisari
Pisahkan status masuk, identitas profil, dan izin tindakan.
Gunakan autentikasi ulang untuk perubahan akun yang sensitif.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Mengaktifkan HSTS memerlukan kesiapan HTTPS pada cakupannya
Penjelasan konsep · Keamanan Digital ·
HTTP Strict Transport Security memberi tahu browser untuk menggunakan HTTPS pada kunjungan yang tercakup kebijakan. Cakupan dan masa berlakunya perlu dipahami.
Browser yang menerima kebijakan HSTS melalui HTTPS dapat mengingat kewajiban menggunakan koneksi aman selama masa yang ditentukan. Kebijakan ini bukan sertifikat bisnis dan tidak memperbaiki sertifikat TLS yang rusak. Tanpa kebijakan yang sudah dikenal atau pramuat, kunjungan pertama memiliki pertimbangan tersendiri.
Cakupan subdomain
Opsi includeSubDomains memperluas penerapan ke subdomain. Sebelum mengaktifkannya, pastikan layanan yang masuk cakupan benar-benar mendukung HTTPS dengan benar. Subdomain lama atau layanan terpisah yang terlewat dapat mengalami gangguan akses bagi browser yang telah menyimpan kebijakan tersebut.
Perubahan yang terencana
Penambahan ke daftar pramuat memiliki konsekuensi operasional yang berbeda dari perubahan satu respons server. Tinjau persyaratan, kepemilikan domain, dan prosedur pemulihan sebelum menerapkannya. Uji bertahap serta dokumentasikan layanan yang tercakup, bukan sekadar menyalin pengaturan dengan masa berlaku paling panjang.
Intisari
Periksa kesiapan seluruh subdomain sebelum memperluas cakupan HSTS.
Pahami dampak kebijakan yang disimpan browser dan mekanisme pramuat.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Parameter kueri memisahkan nilai data dari struktur perintah
Penjelasan konsep · Keamanan Digital ·
Kueri berparameter membantu aplikasi mengirim nilai sebagai data, bukan menggabungkannya langsung ke dalam teks perintah basis data.
Gunakan fasilitas parameterisasi dari pengandar atau pustaka basis data pada server. Struktur kueri dan nilai masukan diproses melalui mekanisme yang sesuai, bukan melalui penggabungan string mentah. Mengubah tampilan input pada browser tidak memberikan perlindungan yang sama karena permintaan dapat berasal dari jalur lain.
Batas parameter
Parameter nilai tidak selalu dapat menggantikan nama tabel, nama kolom, atau arah pengurutan. Bagian struktur yang memang harus dipilih secara dinamis memerlukan pilihan yang dibatasi dan dipetakan oleh aplikasi. Jangan menganggap semua bagian perintah dapat diamankan hanya dengan satu teknik penggantian teks.
Memeriksa penerapan
Tinjau semua jalur akses data, termasuk pencarian, laporan, impor, dan tugas administratif. Satu formulir yang menggunakan parameter tidak membuktikan seluruh aplikasi sudah mengikuti cara yang sama. Lengkapi dengan izin basis data minimum serta pengujian pada lingkungan yang diizinkan untuk memastikan perilaku yang diharapkan.
Intisari
Gunakan parameterisasi server untuk nilai dalam kueri.
Pilihan struktur dinamis membutuhkan pembatasan yang berbeda dari parameter nilai.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Memilih 308 untuk perpindahan permanen yang menjaga metode
Penjelasan konsep · Website ·
Respons 308 Permanent Redirect menggabungkan sifat perpindahan permanen dengan pemeliharaan metode dan badan permintaan. Keputusan ini perlu mempertimbangkan klien yang menyimpan tujuan baru serta kemampuan endpoint pengganti.
Sebelum memindahkan endpoint, pastikan tujuan menerima operasi yang sama dengan alamat lama. Permintaan PUT, misalnya, tidak boleh tiba pada rute yang hanya melayani halaman baca. Periksa juga bentuk respons, otorisasi, dan aturan validasi yang diharapkan oleh klien.
Perbedaan yang relevan
Berbeda dari alur 301 yang dapat mengubah metode tertentu, 308 dirancang mempertahankannya. Namun, status yang tepat tidak menggantikan pengujian kompatibilitas klien. Aplikasi yang memanggil endpoint mungkin memiliki kebijakan pengalihan atau pengiriman ulang yang perlu ditinjau tersendiri.
Bukti migrasi
Uji alamat lama, alamat baru, parameter penting, dan respons kesalahan pada lingkungan yang sesuai. Hindari lingkaran pengalihan antara konfigurasi aplikasi dan server depan. Simpan catatan bahwa perpindahan bersifat permanen agar pembaruan berikutnya tidak memperlakukan rute lama sebagai eksperimen sementara.
Intisari
Pilih tujuan permanen yang mempertahankan kontrak metode, data, dan respons.
Uji perilaku klien sebenarnya serta kemungkinan konflik antaraturan pengalihan.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menggunakan some untuk memeriksa setidaknya satu kecocokan
Penjelasan konsep · Website ·
Metode some menghasilkan nilai boolean yang menyatakan apakah setidaknya satu elemen memenuhi kondisi. Metode ini menjawab pertanyaan keberadaan, bukan mengembalikan daftar item atau jumlah kecocokan.
Pada daftar hasil validasi, some dapat memeriksa apakah ada item yang memiliki kesalahan. Ketika kondisi terpenuhi, pemeriksaan tidak perlu mencari seluruh kecocokan untuk menjawab pertanyaan tersebut. Jika aplikasi memerlukan rincian semua kesalahan, gunakan proses lain yang memang mengumpulkan hasilnya.
Array kosong
Pada array kosong, some menghasilkan false karena tidak ada elemen yang memenuhi kondisi. Arti ini perlu sesuai dengan kebutuhan aplikasi. Jangan menafsirkan false sebagai bukti seluruh data valid apabila kumpulan data sebenarnya belum berhasil dimuat atau belum diperiksa kelengkapannya.
Uji keputusan
Coba daftar tanpa kecocokan, satu kecocokan, dan beberapa kecocokan. Pastikan tindakan aplikasi hanya bergantung pada pertanyaan yang dijawab. Jika jumlah atau identitas item diperlukan untuk pesan kepada pengguna, jangan menebaknya dari hasil boolean yang hanya menyatakan ada atau tidak.
Intisari
Gunakan some untuk pertanyaan setidaknya satu, bukan untuk menghitung seluruh hasil.
Bedakan daftar kosong dari daftar lengkap yang tidak memiliki kecocokan.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menghindari tindakan penting saat penunjuk baru ditekan
Penjelasan konsep · Website ·
Pengguna dapat menyentuh sasaran yang salah lalu menggeser penunjuk untuk membatalkan. Menjalankan tindakan terlalu awal dapat menghilangkan kesempatan koreksi sebelum pengguna benar-benar menyelesaikan interaksi.
Untuk tombol biasa, eksekusi pada penyelesaian klik lebih mudah dibatalkan daripada tindakan langsung saat tombol penunjuk ditekan. Uji dengan menekan, menggeser keluar, lalu melepas. Perhatikan apakah operasi tetap terjadi meskipun pengguna berusaha meninggalkan sasaran sebelum menyelesaikan klik.
Ketentuan yang relevan
WCAG 2.5.2 menyediakan beberapa jalur, antara lain tidak mengeksekusi pada peristiwa turun, menyediakan pembatalan atau pemulihan, atau pembalikan pada peristiwa naik. Ada pengecualian ketika eksekusi saat turun memang esensial. Pilihan penerapan perlu mengikuti fungsi nyata, bukan kebiasaan kode.
Pengujian aman
Gunakan data percobaan untuk tindakan seperti menghapus item atau mengirim permintaan. Pastikan konfirmasi atau pemulihan bekerja bila digunakan. Jangan menilai hanya respons animasi tombol; yang perlu diperiksa adalah kapan perubahan data atau permintaan jaringan benar-benar dijalankan.
Intisari
Berikan kesempatan membatalkan interaksi sebelum tindakan yang tidak diinginkan terjadi.
Uji waktu eksekusi fungsi, bukan hanya keadaan visual tombol saat ditekan.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Mengutamakan teks asli daripada gambar berisi tulisan
Penjelasan konsep · Website ·
Tulisan yang ditanam sebagai gambar sulit menyesuaikan ukuran, warna, dan jarak baca. Teks asli biasanya lebih mudah dipilih, diperbesar, diterjemahkan, dan dipertahankan ketajamannya pada berbagai ukuran tampilan.
Pada banner layanan, pisahkan foto latar dari judul dan keterangan yang ditulis sebagai teks halaman. Dengan cara ini, judul dapat membungkus saat layar menyempit. Jangan mengandalkan gambar poster panjang sebagai satu-satunya tempat seluruh syarat layanan dan kontak dijelaskan.
Ketentuan dan pengecualian
WCAG 1.4.5 mengutamakan teks ketika teknologi yang digunakan dapat menghasilkan tampilan yang diperlukan. Terdapat pengecualian untuk tampilan yang dapat disesuaikan atau yang esensial, termasuk logotipe. Pengecualian logo tidak berarti semua paragraf pemasaran boleh dipindahkan menjadi gambar.
Pemeriksaan hasil
Coba memperbesar teks dan menonaktifkan gambar. Pastikan informasi penting tetap tersedia. Bila gambar tulisan memang diperlukan, sediakan alternatif yang sesuai dengan isi dan fungsi. Hindari menyalin semua teks panjang ke atribut alt ketika struktur paragraf di halaman akan lebih berguna.
Intisari
Pisahkan materi visual dari teks informasi yang perlu dibaca dan disesuaikan pengguna.
Gunakan pengecualian secara spesifik, bukan sebagai alasan menggambar seluruh isi halaman.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Menjaga hubungan informasi di luar tampilan visual
Penjelasan konsep · Website ·
Warna, jarak, dan posisi dapat menunjukkan hubungan antarbagian kepada pembaca yang melihat layar. Hubungan penting tersebut juga perlu tersedia melalui struktur yang dapat dikenali program atau penjelasan teks.
Pada tabel harga, sel angka perlu terkait dengan judul baris atau kolomnya. Pada formulir, petunjuk harus terkait dengan bidang yang dijelaskan. Meletakkan tulisan di dekat kontrol secara visual saja belum tentu membuat hubungan tersebut terbaca oleh teknologi pendukung.
Prinsip kriteria
WCAG 1.3.1 mencakup informasi, struktur, dan hubungan yang disampaikan melalui presentasi. Penggunaan elemen semantik yang tepat sering menyediakan dasar yang baik. Namun, mengganti semua pembungkus menjadi elemen semantik tanpa mempertimbangkan makna dapat menghasilkan hubungan yang keliru.
Pemeriksaan lintas tampilan
Periksa urutan dokumen, heading, daftar, tabel, serta label ketika gaya visual tidak dijadikan petunjuk utama. Gunakan pohon aksesibilitas untuk melihat hubungan yang benar-benar terbentuk. Bandingkan dengan makna yang ingin disampaikan agar implementasi tidak hanya terlihat rapi tetapi juga terstruktur secara tepat.
Intisari
Hubungan bermakna tidak boleh bergantung hanya pada jarak, warna, atau posisi visual.
Uji struktur yang dihasilkan peramban dan cocokkan dengan hubungan informasi sebenarnya.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Membedakan ukuran byte dari jumlah karakter respons
Penjelasan konsep · Website ·
Content-Length menyatakan ukuran badan pesan dalam byte. Angka ini bukan hitungan huruf yang terlihat, sehingga teks dengan karakter tertentu dapat mempunyai jumlah byte berbeda dari jumlah karakternya.
Teks yang menggunakan pengodean UTF-8 dapat memuat karakter yang membutuhkan lebih dari satu byte. Menghitung panjang string secara visual bukan cara yang tepat untuk menentukan ukuran pesan. Pustaka server yang digunakan sebaiknya menangani perhitungan sesuai badan yang benar-benar dikirim.
Batas informasi
Tidak semua respons harus menampilkan header ini pada setiap versi atau cara pengiriman HTTP. Konten yang dialirkan dapat menggunakan mekanisme pembingkaian lain. Ketiadaan Content-Length tidak otomatis membuktikan unduhan rusak atau server tidak mengetahui isi yang dilayaninya.
Pemeriksaan unduhan
Bandingkan ukuran yang diterima dengan mekanisme pengiriman yang digunakan, lalu periksa integritas berkas bila diperlukan. Jangan menimpa header ukuran secara manual dengan nilai lama setelah kompresi atau perubahan isi. Ketidakcocokan metadata ukuran dapat mengganggu pembacaan dan membuat diagnosis kesalahan menjadi lebih sulit.
Intisari
Hitung ukuran badan pesan sebagai byte, bukan jumlah huruf yang terlihat.
Pertimbangkan versi protokol dan cara pengiriman sebelum menilai ketiadaan header ukuran.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menjaga GET tetap berfungsi sebagai pembacaan data
Penjelasan konsep · Website ·
Metode GET digunakan untuk meminta representasi sumber. Tautan biasa dan pencarian yang dapat dibagikan sering memakai pola ini, tetapi tindakan yang mengubah keadaan tidak seharusnya disamarkan sebagai pembacaan biasa.
Halaman daftar artikel dapat menerima parameter kategori dan kata pencarian. Membuka alamat tersebut mengambil hasil yang sesuai, bukan membuat pesanan atau menghapus catatan. Pemisahan ini membantu pengguna memahami bahwa mengikuti tautan tidak menjalankan perubahan data yang tidak mereka minta.
Batas badan permintaan
Makna badan pada GET tidak ditentukan secara umum dan sebagian server dapat menolaknya. Untuk parameter baca sederhana, gunakan bentuk yang sesuai kontrak API atau URL. Jangan memasukkan rahasia ke alamat hanya karena metode yang dipakai adalah GET.
Pengujian perilaku
Buka, muat ulang, dan bagikan alamat pencarian menggunakan data percobaan. Pastikan tindakan tersebut tidak membuat perubahan bisnis berulang. Periksa bahwa parameter diterjemahkan dengan benar dan keadaan kosong dijelaskan. Nama metode yang tepat tetap memerlukan implementasi server yang mengikuti makna pembacaan tersebut.
Intisari
Gunakan GET untuk mengambil representasi, bukan menyembunyikan tindakan perubahan data.
Uji pemuatan ulang dan penggunaan ulang alamat tanpa efek bisnis yang tidak diharapkan.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Mengapa keberadaan di katalog tidak sama dengan ketersediaan stok
Wawasan konsep · Usaha & Layanan ·
Katalog menggambarkan produk yang menjadi referensi atau ruang penawaran; stok menggambarkan keadaan persediaan pada waktu tertentu.
Nama, deskripsi, dan halaman produk dapat tetap relevan selama produk masih menjadi bagian referensi usaha. Stok dapat berubah dalam hitungan jam atau hari karena penjualan dan pasokan. Menggabungkan keduanya membuat halaman cepat basi atau menimbulkan kesan ketersediaan yang tidak pernah dikonfirmasi.
Waktu adalah bagian dari informasi stok
Pernyataan tersedia perlu dibaca bersama waktu pemeriksaan, lokasi atau kanal persediaan, ukuran, dan jumlah. Produk dengan nama sama dapat mempunyai stok berbeda antarvarian. Karena itu, konfirmasi akhir dilakukan ketika pengguna benar-benar hendak memesan atau meminta penawaran.
Status kosong tidak selalu menghapus halaman
Halaman produk masih berguna untuk identitas, spesifikasi, dan alternatif walaupun stok sementara kosong. Menghapus URL setiap kali persediaan habis akan memutus tautan dan membuat pengguna kehilangan konteks. Status dapat ditampilkan terpisah dari identitas halaman.
Bahasa katalog perlu jelas
Gunakan frasa yang tidak menjanjikan stok real-time jika sistem memang tidak menyediakan sinkronisasi persediaan. Catatan konfirmasi stok membantu menetapkan ekspektasi tanpa mengurangi kegunaan katalog sebagai sumber informasi.
Intisari
Katalog adalah identitas/referensi; stok adalah keadaan waktu tertentu.
Konfirmasi varian, jumlah, dan waktu ketika memeriksa stok.
Jangan hapus URL hanya karena stok sementara berubah.
Memilih toSorted ketika urutan sumber perlu dipertahankan
Penjelasan konsep · Website ·
Metode toSorted menghasilkan array terurut baru tanpa mengubah urutan array sumber. Pilihan ini berguna ketika satu kumpulan data dipakai untuk beberapa tampilan yang membutuhkan urutan berbeda.
Daftar artikel dapat memiliki urutan editorial asli dan tampilan judul alfabetis. Dengan hasil terpisah, tampilan kedua tidak perlu mengubah urutan sumber. Pembanding tetap perlu sesuai kebutuhan, terutama ketika elemen berupa angka atau objek dengan beberapa bidang pengurutan.
Batas penyalinan
Array baru tidak berarti objek di dalamnya menjadi salinan mendalam. Referensi elemen tetap perlu diperhatikan jika aplikasi kemudian mengubah properti objek. Pertahankan pemisahan antara perubahan urutan dan perubahan isi agar pengembang memahami dampak setiap operasi.
Kompatibilitas
Periksa dukungan pada lingkungan yang benar-benar ditargetkan sebelum memakai metode dalam rilis. Jangan menganggap keberhasilan pada satu browser membuktikan semua perangkat pengguna mendukungnya. Jika diperlukan jalur alternatif, uji bahwa hasil dan aturan pembandingnya setara serta tidak mengubah data sumber secara tidak sengaja.
Intisari
Gunakan hasil terurut terpisah ketika urutan asli masih dibutuhkan.
Periksa dukungan lingkungan dan jangan menyamakan penyalinan array dengan penyalinan mendalam.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Memahami mengapa parseInt bukan pemeriksa seluruh teks bilangan bulat
Penjelasan konsep · Website ·
parseInt membaca bagian awal teks yang dapat ditafsirkan sebagai bilangan bulat menurut basis yang digunakan. Karena dapat berhenti sebelum akhir teks, keberhasilan menghasilkan angka tidak membuktikan seluruh masukan merupakan bilangan bulat yang valid.
Teks 12px dapat menghasilkan angka 12 ketika dibaca dengan basis sepuluh. Hasil tersebut mungkin berguna pada konteks tertentu, tetapi tidak sesuai jika formulir jumlah hanya mengizinkan digit bilangan bulat tanpa akhiran. Tetapkan aturan masukan sebelum memilih fungsi pembacaan.
Basis angka
Sebutkan basis yang sesuai kebutuhan agar maksud kode jelas. Jangan memakai hasil pembacaan untuk identitas yang harus mempertahankan nol awal atau bentuk teks aslinya. Kode produk bukan selalu nilai yang perlu dihitung meskipun seluruh karakternya berupa digit.
Uji batas
Periksa masukan kosong, akhiran teks, tanda negatif, dan angka sangat besar sesuai kebutuhan aplikasi. Setelah pembacaan, validasi batas yang diperbolehkan. Jangan mengganti pemeriksaan keseluruhan format dengan satu fungsi yang memang dirancang membaca awalan numerik.
Intisari
parseInt dapat menerima awalan angka tanpa memvalidasi seluruh teks.
Pisahkan pembacaan angka dari aturan format, rentang, dan identitas data.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Akun basis data aplikasi tidak perlu menjadi administrator
Penjelasan konsep · Keamanan Digital ·
Aplikasi sebaiknya menggunakan akun basis data dengan hak yang sesuai tugasnya. Kewenangan berlebihan memperbesar dampak apabila aplikasi mengalami masalah.
Bedakan hak membaca data, mengubah data, dan mengelola struktur basis data. Aplikasi layanan sehari-hari tidak selalu perlu memiliki kewenangan membuat akun atau mengubah seluruh konfigurasi. Pemetaan kebutuhan ini membantu menentukan izin minimum tanpa menghalangi operasi yang memang sah.
Memisahkan lingkungan
Gunakan pengelolaan kredensial dan akses yang membedakan pengembangan, pengujian, serta produksi. Salinan konfigurasi tidak boleh membocorkan kredensial produksi kepada pihak yang hanya membutuhkan data uji. Hindari menaruh koneksi rahasia pada berkas publik atau contoh proyek yang dibagikan ke luar lingkungan pengelolaan.
Memeriksa perubahan
Setelah izin dibatasi, uji alur yang digunakan aplikasi dan catat operasi yang ditolak. Jangan langsung mengembalikan hak administrator untuk menyelesaikan satu kegagalan tanpa mencari kebutuhan sebenarnya. Tinjau akun yang tidak digunakan lagi dan pastikan perubahan tugas atau pergantian pengelola diikuti penyesuaian akses.
Intisari
Tentukan izin basis data dari kebutuhan operasi yang nyata.
Pisahkan kredensial lingkungan dan tinjau akun yang sudah tidak diperlukan.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Mempertahankan metode pada pengalihan sementara 307
Penjelasan konsep · Website ·
Respons 307 Temporary Redirect mempertahankan metode dan badan permintaan ketika klien mengikuti pengalihan. Sifat ini penting ketika tujuan sementara harus menerima operasi yang sama, bukan berubah menjadi pembacaan biasa.
Jika endpoint percobaan menerima POST lalu mengalihkannya sementara, tujuan perlu mampu menangani POST dengan isi yang sama. Jangan mengarahkan operasi tersebut ke halaman informasi statis yang hanya menyediakan GET. Kesamaan tampilan alamat tidak menjamin kesamaan kemampuan endpoint.
Batas keamanan
Mempertahankan badan permintaan juga berarti data ikut diteruskan ke tujuan pengalihan. Validasi tujuan dan batasi sesuai rancangan aplikasi. Jangan membangun alamat tujuan langsung dari masukan bebas pengguna, terutama ketika permintaan memuat informasi yang seharusnya hanya diterima layanan tertentu.
Pemeriksaan hasil
Pada lingkungan yang berizin, rekam metode awal, status 307, tujuan, dan metode permintaan lanjutan. Gunakan data sintetis, bukan data pelanggan. Uji pula keadaan tujuan tidak tersedia agar aplikasi tidak menampilkan keberhasilan hanya karena respons pengalihan pertama berhasil diterima.
Intisari
Pastikan tujuan pengalihan sementara dapat menerima metode dan isi permintaan yang sama.
Validasi tujuan dan uji hasil akhir, bukan hanya status pengalihan pertama.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menangani kegagalan decodeURIComponent pada komponen alamat
Penjelasan konsep · Website ·
decodeURIComponent membaca pengodean persen pada sebuah komponen alamat. Masukan yang tidak membentuk pengodean valid dapat menyebabkan URIError, sehingga proses pembacaan perlu memiliki penanganan kesalahan yang sesuai.
Gunakan fungsi sesuai bagian data yang sedang diproses, bukan sebagai pengganti pembacaan seluruh struktur URL. Tanda pemisah alamat memiliki fungsi tersendiri. Jika komponen sudah dibaca oleh alat yang melakukan decoding, jangan langsung menjalankan decoding ulang tanpa mengetahui keadaan nilainya.
Masukan rusak
Tangani pengodean yang terpotong atau tidak valid sebagai keadaan yang mungkin terjadi. Halaman sebaiknya memberikan hasil yang terkontrol, bukan berhenti karena satu parameter rusak. Jangan memperbaiki masukan dengan tebakan yang dapat mengubah identitas artikel atau pilihan pengguna secara diam-diam.
Uji pembacaan
Gunakan contoh komponen valid, karakter non-ASCII, dan pengodean salah. Bandingkan hasil dengan teks yang diharapkan. Catat tahap encoding serta decoding agar alur tidak melakukan operasi yang sama berkali-kali dan menghasilkan karakter berbeda dari nilai sumber.
Intisari
Tangani URIError ketika komponen alamat tidak memiliki pengodean valid.
Hindari decoding berulang pada nilai yang sudah dibaca oleh alat lain.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menampilkan teks pengguna berbeda dari menyisipkan HTML
Penjelasan konsep · Keamanan Digital ·
Data yang berasal dari pengguna atau sumber luar sebaiknya ditampilkan sebagai teks ketika tidak ada kebutuhan untuk menerima markup.
Untuk menampilkan judul atau pesan biasa pada browser, penggunaan textContent menghindari penafsiran isi sebagai HTML. Sebaliknya, memasukkan data tidak tepercaya ke tempat yang menafsirkan markup memerlukan penanganan khusus. Perlindungan harus mengikuti konteks keluaran, bukan hanya mengandalkan pemeriksaan saat data pertama diterima.
Ketika membutuhkan teks kaya
Editor dengan format seperti paragraf atau daftar memerlukan sanitasi yang sesuai menggunakan pustaka terpelihara. Menyaring beberapa kata atau karakter secara manual bukan pengganti penanganan yang dirancang untuk markup. Batasi fitur yang benar-benar diperlukan daripada menerima seluruh kemampuan HTML tanpa alasan.
Lapisan tambahan
Validasi input dan CSP membantu, tetapi tidak menggantikan pengodean keluaran atau sanitasi yang tepat. Uji tampilan data tidak biasa menggunakan contoh yang aman pada lingkungan sendiri. Pastikan judul, hasil pencarian, dan pesan kesalahan mengikuti aturan yang sama, bukan hanya isi artikel utama.
Intisari
Gunakan keluaran teks untuk data yang memang hanya berupa teks.
Markup yang diizinkan memerlukan sanitasi khusus, bukan penyaringan ad hoc.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Membaca negosiasi kompresi melalui Accept-Encoding
Penjelasan konsep · Website ·
Accept-Encoding menyampaikan pengodean isi yang dapat dipahami pengirim. Dalam permintaan peramban, server dapat menggunakannya untuk memilih kompresi yang sesuai dan menyatakan pilihan melalui Content-Encoding pada respons.
Klien menyebut kemampuan, kemudian server memilih representasi yang didukung. Kesamaan dukungan tidak selalu berarti server wajib mengompresi setiap respons. Isi tertentu sudah terkompresi atau konfigurasi layanan dapat memilih mengirim representasi tanpa kompresi sesuai kondisi yang berlaku.
Pemeriksaan yang relevan
Lihat header permintaan dan respons sebagai pasangan. Ukuran berkas sumber tidak sama dengan ukuran transfer setelah kompresi. Jangan mengklaim penghematan tertentu tanpa mengukur sumber yang benar-benar dikirim, karena HTML, foto, dan video dapat mempunyai karakteristik pengurangan ukuran yang berbeda.
Uji hasil akhir
Pastikan klien dapat membaca isi setelah pengodean diterapkan. Jika cache menyimpan beberapa varian, periksa pemisahannya sesuai header pembeda yang relevan. Gunakan pengujian pada aset milik sendiri dan hindari mengubah header secara acak pada layanan yang kontraknya tidak diketahui.
Intisari
Periksa kemampuan yang diminta dan pengodean yang benar-benar dipilih server.
Ukur ukuran transfer aktual sebelum menyatakan besarnya penghematan kompresi.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Dua kata sandi belum tentu autentikasi multifaktor
Penjelasan konsep · Keamanan Digital ·
Autentikasi multifaktor menggabungkan faktor yang berbeda. Mengulang dua pertanyaan berbasis pengetahuan tidak otomatis memberikan keragaman faktor tersebut.
Kata sandi dan jawaban rahasia sama-sama termasuk sesuatu yang diketahui pengguna. Menggabungkannya tidak setara dengan menggabungkan pengetahuan dan kepemilikan autentikator. Saat memilih metode, periksa bagaimana masing-masing faktor dibuktikan dan apakah kegagalan satu saluran dapat sekaligus membuka faktor lainnya.
Pemulihan tetap penting
Alur penggantian perangkat, pengaturan ulang faktor, dan penggunaan kode pemulihan perlu dilindungi. Perlindungan login dapat kehilangan manfaat apabila faktor kedua mudah dihapus melalui dukungan pelanggan yang tidak memeriksa kewenangan. Pengguna juga memerlukan cara menyimpan kode pemulihan tanpa membagikannya kepada petugas.
Menyampaikan batasnya
Multifaktor menambah lapisan perlindungan, tetapi tidak berarti akun kebal terhadap semua serangan atau kesalahan. Berikan petunjuk penggunaan dan notifikasi perubahan yang mudah dipahami. Uji proses kehilangan perangkat dalam lingkungan sendiri agar jalur pemulihan tidak baru dipikirkan saat terjadi masalah.
Intisari
Periksa jenis faktor, bukan hanya jumlah langkah pada layar.
Lindungi penggantian faktor dan pemulihan setara dengan proses masuk.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Inventaris permukaan serangan perlu diperbarui setelah fitur berubah
Penjelasan konsep · Keamanan Digital ·
Permukaan serangan mencakup jalur tempat sistem dapat diakses atau dipengaruhi. Menambah fitur dapat mengubahnya meskipun halaman utama terlihat sama.
Inventaris dapat mencakup halaman masuk, antarmuka pemrograman, unggahan, panel pengelola, layanan pendukung, serta jalur masuk dan keluar data. Catat pihak yang dapat mengaksesnya dan pemeriksaan yang melindunginya. Jangan hanya menghitung halaman yang muncul pada menu publik.
Menghubungkan perubahan
Fitur impor, integrasi baru, atau subdomain tambahan dapat membawa batas kepercayaan yang berbeda. Tinjau apakah jalur tersebut memakai otorisasi, validasi, dan pencatatan yang sesuai. Layanan lama yang tidak lagi digunakan juga perlu diperiksa agar tidak tetap terbuka hanya karena terlupakan.
Menggunakan inventaris
Hubungkan setiap jalur dengan pemilik, tujuan, dan kebutuhan pengujian. Inventaris membantu menentukan cakupan pemeriksaan pada sistem yang memang dikelola atau diizinkan, bukan menjadi alasan menguji sistem pihak lain. Perbarui setelah perubahan arsitektur dan bandingkan dengan layanan yang benar-benar aktif agar dokumen tetap berguna.
Intisari
Catat jalur akses dan aliran data, bukan hanya menu website.
Tinjau tambahan fitur sekaligus layanan lama yang seharusnya dihentikan.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Menyediakan alternatif untuk audio atau video tanpa pasangan
Penjelasan konsep · Website ·
Rekaman audio tanpa gambar dan video tanpa suara mempunyai kebutuhan alternatif yang berbeda. Tujuannya adalah menjaga informasi tetap dapat diakses ketika saluran media utama tidak dapat digunakan.
Untuk penjelasan layanan berbentuk audio, sediakan alternatif teks yang memuat informasi setara. Cantumkan pembicara dan suara bermakna bila diperlukan untuk memahami isi. Ringkasan dua kalimat belum tentu setara dengan rekaman yang berisi syarat, langkah, dan rincian penting.
Video saja
Untuk demonstrasi tanpa suara, sediakan alternatif berbasis waktu atau jalur audio yang menjelaskan informasi visual yang relevan. WCAG 1.2.1 membedakan kebutuhan audio saja dan video saja, serta memiliki pengecualian untuk media yang jelas merupakan alternatif dari teks.
Pemeriksaan kesetaraan
Bandingkan setiap langkah pada rekaman dengan alternatifnya. Perhatikan perubahan yang hanya ditunjukkan melalui gerakan, posisi, atau tulisan singkat. Alternatif harus mengikuti versi video yang dipublikasikan; naskah lama dapat tertinggal setelah penyuntingan, pemotongan adegan, atau perubahan urutan demonstrasi.
Intisari
Pilih bentuk alternatif sesuai apakah informasi utama berada pada audio atau gambar bergerak.
Periksa kesetaraan isi terhadap berkas media akhir, bukan hanya naskah awal produksi.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Membaca beberapa nilai parameter yang memakai nama sama
Penjelasan konsep · Website ·
Satu nama parameter dapat muncul beberapa kali dalam query. Metode getAll mengembalikan seluruh nilai yang terkait dengan nama tersebut sebagai array, sehingga aplikasi dapat menangani pilihan ganda tanpa kehilangan nilai berikutnya.
Filter artikel dapat menerima beberapa kategori dengan nama parameter yang sama. Jika aplikasi hanya membaca satu nilai, sebagian pilihan pengguna dapat hilang. Tentukan sejak awal apakah parameter memang boleh berulang atau harus tunggal agar penanganannya tidak bergantung pada kebetulan urutan.
Keadaan kosong
Jika nama parameter tidak tersedia, hasil getAll berupa array kosong. Bedakan keadaan ini dari parameter yang tersedia dengan nilai teks kosong. Keduanya dapat memiliki arti berbeda sesuai rancangan filter dan perlu diuji sebelum menentukan pilihan bawaan.
Validasi nilai
Periksa setiap nilai terhadap kategori yang diizinkan dan tentukan penanganan duplikasi. Membaca seluruh nilai tidak berarti semua nilai harus diterima. Jangan membiarkan query mengubah tindakan di luar fungsi filter yang dimaksud hanya karena struktur parameter berhasil dibaca tanpa kesalahan sintaks.
Intisari
Gunakan pembacaan seluruh nilai ketika satu parameter memang dapat berulang.
Validasi isi dan bedakan parameter tidak ada dari nilai yang kosong.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Membedakan properti milik objek dari properti yang diwarisi
Penjelasan konsep · Website ·
Object.hasOwn memeriksa apakah suatu objek memiliki properti secara langsung. Pemeriksaan ini membantu membedakan bidang data milik objek dari properti yang berasal dari rantai prototipe.
Sebuah properti dapat ada secara langsung meskipun nilainya null atau undefined. Karena itu, memeriksa nilai dengan kondisi benar atau salah tidak selalu menjawab pertanyaan apakah bidang tersebut tersedia. Gunakan pemeriksaan keberadaan yang sesuai ketika skema membedakan bidang hilang dari bidang bernilai kosong.
Validasi lanjutan
Properti yang ada belum tentu memiliki tipe atau isi yang benar. Setelah keberadaan dipastikan, periksa nilai sesuai aturan aplikasi. Jangan menganggap semua objek yang memiliki bidang judul otomatis merupakan artikel valid tanpa memeriksa identitas, isi, dan kebutuhan lainnya.
Skenario uji
Coba objek tanpa bidang, bidang langsung bernilai kosong, dan properti yang hanya diwarisi. Pastikan pesan atau keputusan aplikasi membedakan keadaan yang penting. Periksa juga dukungan lingkungan yang ditargetkan agar metode yang dipilih tersedia pada browser atau runtime tempat kode dijalankan.
Intisari
Bedakan properti langsung, properti diwarisi, dan nilai yang kosong.
Keberadaan bidang tidak menggantikan pemeriksaan tipe serta isi datanya.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Membedakan fallback data dan sumber data utama pada halaman dinamis
Wawasan konsep · Website ·
Fallback dirancang untuk menjaga pengalaman ketika sumber utama gagal, tetapi tidak boleh berkembang menjadi sumber kedua yang diperbarui secara terpisah.
Dalam sistem berita, berkas data utama memuat seluruh artikel. Halaman memakainya untuk membangun daftar, detail, dan metadata. Keberadaan satu sumber utama memudahkan audit karena perubahan editorial dilakukan di tempat yang jelas.
Fallback hanya jalur darurat
Salinan fallback berguna ketika berkas eksternal gagal tersedia akibat deployment atau gangguan jaringan. Ia tidak seharusnya mengalahkan data utama ketika sumber utama berhasil dimuat. Status penggunaan fallback perlu dapat dikenali agar kegagalan aset tidak tersembunyi selamanya.
Risiko jika keduanya diedit manual
Jika artikel ditambahkan ke satu salinan tetapi lupa pada salinan lain, jumlah dan isi dapat berbeda. Pengguna yang mendapat jalur fallback kemudian melihat konten lama atau artikel hilang. Solusinya adalah membangun fallback dari data final secara otomatis pada proses paket, bukan mengedit dua sumber secara manual.
Validasi membandingkan ID dan jumlah
Pemeriksaan dapat membandingkan himpunan ID, jumlah item, dan beberapa checksum representasi. Perbedaan yang disengaja, seperti fallback berita hanya berisi jenis berita, tetap dapat didefinisikan sebagai aturan eksplisit.
Intisari
Sumber utama dipakai pada keadaan normal.
Fallback hanya aktif ketika data utama tidak tersedia.
Bangun fallback dari data final, jangan rawat dua sumber manual.
Memformat angka dengan Intl.NumberFormat tanpa mengubah nilai dasarnya
Penjelasan konsep · Website ·
Intl.NumberFormat membantu menampilkan angka sesuai pilihan lokal dan opsi format. Fungsinya adalah penyajian, bukan penentuan harga, konversi mata uang, atau pembuktian bahwa nilai sumber sudah benar.
Nilai numerik dapat ditampilkan dengan pemisah yang sesuai pembaca melalui lokal yang ditentukan. Opsi mata uang menambahkan bentuk penyajian mata uang yang dipilih, tetapi tidak mengambil kurs dan tidak mengubah nilai menjadi mata uang lain secara ekonomi.
Pembulatan tampilan
Jumlah digit yang ditampilkan dapat berbeda dari ketelitian nilai sumber sesuai opsi. Jangan membaca kembali teks tampilan sebagai satu-satunya data perhitungan jika pembulatan telah menghilangkan rincian. Simpan nilai dasar dan keputusan pembulatan dengan jelas agar total dapat dihitung secara konsisten.
Uji keluaran
Periksa nol, pecahan, angka besar, dan nilai negatif jika relevan. Pastikan label satuan atau mata uang cocok dengan data. Hasil yang rapi secara visual tidak menggantikan validasi nilai, sehingga pengujian perlu membedakan kebenaran angka dari kerapian formatnya.
Intisari
Gunakan Intl.NumberFormat untuk penyajian, bukan konversi kurs atau penentuan nilai.
Simpan nilai dasar terpisah dari teks tampilan yang sudah dibulatkan.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Skrip pihak ketiga perlu inventaris dan alasan penggunaan
Penjelasan konsep · Keamanan Digital ·
Skrip yang ditambahkan dari layanan lain dapat memengaruhi halaman tempatnya berjalan. Penambahan kecil pada kode dapat membawa kewenangan yang besar.
Buat daftar skrip, tujuan pemasangan, pemilik keputusan, data yang dapat diakses, dan halaman penggunaannya. Widget yang tidak lagi dipakai sebaiknya tidak terus dimuat tanpa peninjauan. Ketergantungan yang tidak tercatat menyulitkan penelusuran ketika muncul perubahan perilaku atau gangguan layanan.
Memeriksa perubahan
Tinjau cara versi dipilih dan bagaimana pembaruan masuk ke website. Subresource Integrity dapat membantu memeriksa kecocokan konten pada penggunaan yang mendukungnya, tetapi bukan pengganti penilaian atas fungsi skrip. Konten yang cocok dengan hash tetap dapat melakukan hal yang memang ditulis di dalamnya.
Mengurangi kebutuhan
Pertimbangkan apakah fungsi tersebut benar-benar memerlukan skrip eksternal pada semua halaman. Pembatasan cakupan dan penghapusan komponen yang tidak dibutuhkan mengurangi ketergantungan operasional. Uji pula perilaku ketika layanan pihak ketiga gagal agar fungsi utama tidak berhenti tanpa penjelasan kepada pengguna.
Intisari
Catat tujuan dan pemilik setiap skrip pihak ketiga.
Integritas berkas tidak sama dengan penilaian bahwa seluruh perilakunya sesuai kebutuhan.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Memeriksa status HTTP setelah fetch berhasil menghasilkan respons
Penjelasan konsep · Website ·
Promise dari fetch dapat terpenuhi meskipun server mengirim status HTTP seperti 404. Karena itu, penanganan kesalahan jaringan perlu dipisahkan dari pemeriksaan status respons serta pembacaan isi yang diterima.
Tangani penolakan permintaan, kemudian periksa respons sesuai kebutuhan aplikasi. Setelah itu, baca isi dengan format yang diharapkan dan validasi strukturnya. Keberhasilan pada satu lapisan tidak membuktikan lapisan berikutnya benar; respons dapat tersedia tetapi tidak berisi data yang dibutuhkan.
Contoh pemuatan
Daftar artikel yang meminta JSON tidak boleh langsung menganggap semua respons dapat dibaca sebagai daftar valid. Server dapat memberikan halaman kesalahan atau format lain. Pesan pengguna perlu membedakan kegagalan pemuatan dari hasil pencarian yang memang kosong.
Uji keadaan
Coba respons berhasil, status tidak berhasil, isi rusak, dan kegagalan jaringan pada lingkungan uji yang sah. Jangan hanya mengandalkan catch untuk semua jenis kegagalan HTTP. Catat hasil tiap keadaan agar antarmuka tidak menampilkan keberhasilan hanya karena koneksi menerima suatu respons.
Intisari
Periksa status HTTP meskipun fetch telah menghasilkan respons.
Pisahkan kesalahan jaringan, status, format isi, dan struktur data.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Persetujuan transaksi harus terikat pada rincian transaksi itu
Penjelasan konsep · Keamanan Digital ·
Status login saja tidak membuktikan bahwa pengguna menyetujui setiap transaksi. Konfirmasi perlu terkait dengan tindakan dan rincian yang sedang disahkan.
Tampilkan informasi penting yang diperlukan pengguna untuk memahami tindakan, seperti jenis operasi, nilai, dan tujuan yang relevan. Persetujuan yang diberikan untuk satu rincian tidak boleh diam-diam dipakai setelah rincian tersebut berubah. Hubungan antara konfirmasi dan transaksi harus dijaga oleh server.
Urutan pemeriksaan
Pastikan langkah otorisasi tidak dapat dilewati dengan langsung memanggil tahap akhir. Bukti persetujuan perlu memiliki penggunaan dan masa berlaku yang sesuai desain proses. Mengandalkan tombol yang dinonaktifkan atau status pada browser tidak cukup untuk mengendalikan permintaan yang diterima server.
Perubahan dan pengujian
Uji bahwa perubahan rincian penting membatalkan persetujuan sebelumnya atau memerlukan konfirmasi ulang sesuai kebijakan. Periksa pula penggunaan ulang bukti dan urutan langkah yang tidak benar pada lingkungan yang diizinkan. Catat hasil keputusan server, bukan hanya pesan sukses yang terlihat pada layar.
Intisari
Ikat persetujuan pada tindakan dan rincian yang spesifik.
Perubahan rincian penting membutuhkan pemeriksaan otorisasi yang baru.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Memeriksa tujuan pengalihan melalui header Location
Penjelasan konsep · Website ·
Header Location menyatakan alamat tujuan dalam konteks pengalihan atau lokasi sumber yang baru dibuat. Nilainya perlu dibaca bersama kode status karena tidak setiap kemunculan alamat mempunyai makna operasi yang sama.
Pada pengalihan, klien diarahkan menuju alamat yang disebutkan. Pada 201, Location dapat menunjukkan sumber baru agar dapat dibaca berikutnya. Jangan mencampurkan header ini dengan Content-Location yang berkaitan dengan representasi, karena keduanya melayani tujuan berbeda dalam HTTP.
Pemeriksaan jalur
Uji apakah alamat tujuan terselesaikan dengan benar dari konteks respons, termasuk ketika menggunakan jalur relatif. Pastikan tujuan tidak berputar kembali ke alamat awal. Pada perpindahan antarbagian website, periksa bahwa parameter penting tidak hilang dan tidak membawa data yang tidak diperlukan.
Pengamanan keputusan
Jangan menjadikan masukan alamat bebas sebagai tujuan pengalihan tanpa validasi. Untuk navigasi internal, batasi pada tujuan yang memang diizinkan aplikasi. Catat seluruh rantai respons saat mendiagnosis agar halaman akhir yang salah tidak disamarkan oleh keberhasilan pengalihan pertama.
Intisari
Tafsirkan Location bersama status respons dan kontrak endpoint yang bersangkutan.
Validasi tujuan serta ikuti rantai pengalihan sampai hasil akhir yang benar.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menggunakan HEAD untuk memeriksa metadata tanpa mengunduh isi
Penjelasan konsep · Website ·
Metode HEAD meminta metadata yang seharusnya dikirim pada GET, tetapi tanpa badan respons. Cara ini dapat membantu pemeriksaan awal berkas besar ketika yang dibutuhkan baru status dan headernya.
Sebelum mengunduh arsip, aplikasi dapat memeriksa jenis media dan ukuran bila header tersedia. Informasi tersebut membantu menentukan tampilan tombol atau kebutuhan ruang. Namun, pemeriksaan metadata tidak sama dengan membuka dan memvalidasi seluruh isi arsip yang akan diterima.
Perilaku yang diharapkan
Respons HEAD tidak membawa badan. Header representasi merujuk pada isi yang akan diterima melalui GET. Jika server menangani HEAD berbeda secara keliru, alat pemeriksaan dapat memberikan kesimpulan yang tidak sesuai dengan unduhan nyata melalui metode pembacaan biasa.
Validasi berpasangan
Bandingkan HEAD dengan GET pada contoh sumber yang sama di lingkungan uji. Periksa status, jenis media, dan metadata penting. Gunakan unduhan sebenarnya untuk membuktikan integritas berkas, karena respons header yang terlihat benar tidak dapat memastikan semua byte isi tersedia atau tidak rusak.
Intisari
HEAD berguna untuk metadata, tetapi tidak menggantikan validasi isi berkas.
Bandingkan perilakunya dengan GET agar pemeriksaan awal tidak menghasilkan kesimpulan keliru.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Memakai 302 ketika perpindahan alamat bersifat sementara
Penjelasan konsep · Website ·
Respons 302 Found menyampaikan pengalihan sementara. Alamat awal tetap mempunyai peran dalam alur kunjungan, sehingga pemilihannya berbeda dari keputusan memindahkan halaman secara permanen ke lokasi baru.
Sebuah halaman dapat sementara mengarahkan pengunjung ke informasi layanan saat pemeliharaan bagian tertentu. Tujuan harus tetap menjelaskan konteks, bukan membuat pengguna mengira artikel atau layanan telah hilang. Catat kondisi yang mengaktifkan dan mengakhiri pengalihan tersebut.
Hal yang perlu diperhatikan
Pengalihan 302 dapat menyebabkan POST diikuti sebagai GET dalam praktik klien. Jika metode harus dipertahankan, perilaku ini tidak boleh diabaikan. Status sementara tidak otomatis membuat semua jenis permintaan aman dialihkan tanpa pemeriksaan isi, tujuan, dan kontrak layanan.
Uji pemulihan
Periksa status dan header Location, kemudian ikuti pengalihan sampai tujuan akhir. Setelah kondisi sementara berakhir, pastikan alamat awal kembali berfungsi sesuai rancangan. Hindari rantai pengalihan panjang yang tertinggal karena setiap perubahan kecil ditambahkan tanpa meninjau keseluruhan jalur lama.
Intisari
Gunakan status sementara untuk kondisi yang memang direncanakan kembali berubah.
Uji metode permintaan dan jalur setelah pengalihan dinonaktifkan kembali.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Memeriksa pemisah desimal sebelum memakai parseFloat
Penjelasan konsep · Website ·
parseFloat membaca awalan teks sebagai angka desimal menurut sintaks yang didukungnya. Fungsi ini bukan pembaca angka untuk seluruh format lokal, sehingga koma desimal atau pemisah ribuan perlu ditangani dengan aturan yang jelas.
Teks 3,5 tidak dibaca sebagai tiga setengah oleh parseFloat; pembacaan dapat berhenti setelah angka 3. Jika aplikasi menerima format Indonesia, hasil tersebut dapat berbeda dari maksud pengguna. Jangan menganggap angka keluaran yang terlihat wajar berarti masukan telah dipahami dengan benar.
Aturan masukan
Tentukan format yang diterima dan bagaimana pemisah diperlakukan. Hindari mengganti semua koma atau titik tanpa mempertimbangkan apakah tanda itu merupakan desimal atau pemisah ribuan. Ambiguitas perlu diselesaikan melalui format yang jelas atau konfirmasi, bukan tebakan diam-diam.
Pemeriksaan hasil
Setelah konversi, periksa keberhinggaan dan rentang sesuai bidang. Uji beberapa format yang realistis serta masukan tidak valid. Simpan nilai numerik untuk perhitungan dan formatkan kembali untuk tampilan dengan aturan terpisah agar proses membaca dan menampilkan tidak saling tercampur.
Intisari
Jangan memakai parseFloat sebagai pembaca otomatis semua format angka lokal.
Tetapkan aturan pemisah sebelum konversi dan periksa hasilnya.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Header keamanan perlu diperiksa pada respons yang diterima pengguna
Penjelasan konsep · Keamanan Digital ·
Konfigurasi yang tertulis di server belum tentu sama dengan respons akhir setelah melewati proksi, cache, atau lapisan hosting lainnya.
Periksa halaman dan aset melalui jalur penyajian yang benar-benar digunakan pengguna. Catat status, jenis konten, dan header yang relevan. Pemeriksaan berkas konfigurasi saja dapat melewatkan aturan yang tidak aktif, tertimpa, atau hanya berlaku pada sebagian jalur aplikasi.
Contoh hubungan antarheader
X-Content-Type-Options dengan nilai nosniff membantu mencegah browser menafsirkan ulang jenis konten tertentu. Namun, server tetap harus mengirim Content-Type yang benar. Menambahkan header tanpa memahami jenis respons dapat menutupi penyebab kegagalan aset atau menghasilkan perilaku berbeda dari yang diharapkan.
Membatasi kesimpulan
Daftar header yang terlihat lengkap bukan sertifikat bahwa aplikasi bebas masalah. Perlindungan akses, validasi data, pembaruan komponen, dan pengujian tetap diperlukan. Simpan hasil pemeriksaan per lingkungan karena respons lokal, pratinjau, dan produksi dapat berbeda walaupun berasal dari sumber kode yang sama.
Intisari
Ukur konfigurasi dari respons akhir, bukan hanya niat konfigurasi.
Header keamanan melengkapi, bukan menggantikan, keamanan aplikasi.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Menggunakan 201 untuk hasil pembuatan sumber baru
Penjelasan konsep · Website ·
Respons 201 Created menyatakan permintaan berhasil menghasilkan sumber baru. Perbedaan ini berguna ketika aplikasi perlu membedakan pembuatan objek dari sekadar pembacaan atau perubahan informasi yang sudah ada.
Contohnya adalah pembuatan tiket layanan pada sistem yang menyediakan API. Setelah objek benar-benar tercipta, respons dapat memuat representasi objek dan alamatnya melalui Location. Jangan mengirim status ini untuk pekerjaan yang baru masuk antrean tetapi belum menghasilkan sumber yang dijanjikan.
Informasi untuk antarmuka
Antarmuka memerlukan identitas objek agar dapat menampilkan detail atau melanjutkan pekerjaan. Periksa bahwa ID pada respons sesuai dengan catatan yang tersimpan. Tanggal, nomor referensi, dan pesan keberhasilan harus berasal dari hasil yang sama agar pengguna tidak menerima kombinasi data berbeda.
Pengujian berulang
Gunakan data percobaan dan periksa keadaan sebelum serta sesudah permintaan. Uji pula pengiriman ulang akibat koneksi terputus. Status 201 tidak dengan sendirinya mencegah objek ganda; rancangan proses pembuatan tetap perlu menangani pengulangan sesuai kebutuhan sistem.
Intisari
Gunakan status pembuatan setelah sumber yang dimaksud benar-benar tersedia.
Cocokkan identitas pada respons dengan objek yang tersimpan dan dapat dibaca kembali.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Tujuan pengalihan perlu divalidasi sebelum pengguna dipindahkan
Penjelasan konsep · Keamanan Digital ·
Parameter tujuan setelah login atau setelah tindakan tertentu tidak seharusnya bebas menentukan ke mana pengguna dikirim tanpa pemeriksaan.
Apabila kebutuhan hanya berpindah di dalam aplikasi, gunakan pengenal tujuan atau daftar rute internal yang diperbolehkan. Pendekatan ini lebih terkendali daripada menerima alamat lengkap dari pengguna. Tujuan yang tidak dikenal dapat ditolak atau diarahkan ke halaman aman yang telah ditentukan.
Memeriksa alamat
Jika alamat perlu diproses, gunakan penguraian URL yang benar dan periksa komponen yang relevan. Kemiripan awalan teks bukan bukti bahwa hostname sesuai tujuan yang diizinkan. Aturan juga perlu mempertimbangkan protokol, jalur, dan konteks pemakaian sesuai kebutuhan layanan, bukan hanya penampilan alamat.
Menjaga alur akses
Pengalihan tidak boleh menjadi cara melewati pemeriksaan izin pada halaman tujuan. Uji rute yang sah, rute kosong, dan tujuan yang tidak diizinkan dalam lingkungan sendiri. Pesan kegagalan sebaiknya membantu pengguna kembali ke layanan tanpa menampilkan seolah-olah alamat luar tersebut merupakan bagian resmi aplikasi.
Intisari
Utamakan tujuan internal yang sudah dikenali oleh aplikasi.
Periksa izin halaman tujuan meskipun pengguna datang melalui pengalihan.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Menelusuri 404 tanpa menganggap semua kegagalan berasal dari server
Penjelasan konsep · Website ·
Respons 404 Not Found berarti server tidak menemukan sumber yang diminta. Penyebabnya dapat berada pada alamat, nama berkas, jalur penerbitan, atau aturan rute yang berbeda dari asumsi halaman pemanggil.
Bandingkan alamat yang diminta dengan lokasi berkas hasil deploy. Periksa kapitalisasi, ekstensi, folder, dan awalan jalur. Tautan relatif yang benar dari beranda dapat menjadi salah ketika dipakai dari subfolder karena dasar penyelesaian alamatnya berbeda.
Makna yang terbatas
Status 404 tidak menjelaskan sendiri apakah sumber hilang sementara atau permanen. Jangan menyimpulkan penghapusan sengaja hanya dari angka tersebut. Halaman kesalahan dapat menyediakan jalan kembali yang jelas tanpa mengubah semua permintaan tidak dikenal menjadi beranda berstatus 200.
Validasi perbaikan
Uji alamat yang sebelumnya gagal, tautan pemicunya, dan aset terkait. Periksa respons HTTP sekaligus isi halaman tujuan. Memunculkan halaman yang salah dengan status sukses bukan perbaikan rute; pengguna tetap perlu sampai pada sumber yang memang diminta melalui jalur tersebut.
Intisari
Cocokkan alamat permintaan dengan struktur penerbitan dan aturan rute sebenarnya.
Pastikan perbaikan mengarah ke isi yang benar, bukan sekadar menghilangkan angka 404.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Pemodelan ancaman dimulai dari aset dan batas kepercayaan
Penjelasan konsep · Keamanan Digital ·
Pemodelan ancaman membantu tim membahas apa yang perlu dilindungi, bagaimana sistem digunakan, dan di mana asumsi kepercayaan berubah.
Daftarkan aset penting, pihak yang berinteraksi, penyimpanan data, serta alur masuk dan keluar informasi. Tandai batas antara pengguna, aplikasi, layanan lain, dan pengelola. Gambar sederhana yang sesuai sistem nyata lebih berguna daripada diagram rumit yang tidak diperbarui setelah perubahan arsitektur.
Menghubungkan risiko dan tindakan
Untuk setiap bagian, bahas kejadian yang dapat mengganggu kerahasiaan, integritas, atau ketersediaan sesuai konteks. Catat pengendalian yang sudah ada dan hal yang belum ditangani. Tujuannya menghasilkan keputusan yang dapat dikerjakan, bukan sekadar daftar istilah ancaman tanpa pemilik atau tindak lanjut.
Memperbarui model
Ulangi pembahasan ketika fitur, integrasi, atau jenis data berubah. Pemodelan ancaman tidak menggantikan pengujian aplikasi dan tidak membuktikan semua masalah telah ditemukan. Simpan asumsi serta keterbatasannya agar tim berikutnya memahami dasar keputusan, termasuk bagian yang masih memerlukan konfirmasi teknis.
Intisari
Mulai dari aset, aliran data, dan batas kepercayaan sistem sendiri.
Hubungkan risiko dengan pemilik tindakan dan pemeriksaan berikutnya.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Memberi saran koreksi formulir tanpa membocorkan informasi
Penjelasan konsep · Website ·
Penjelasan bahwa masukan salah belum selalu cukup untuk memperbaikinya. Ketika sistem mengetahui bentuk koreksi yang tepat, petunjuk singkat dapat mengurangi percobaan berulang dan membuat tugas lebih jelas.
Untuk tanggal yang memerlukan format tertentu, tampilkan contoh yang sesuai dengan antarmuka. Untuk jumlah yang melewati batas pesanan yang telah dijelaskan, sebutkan rentang yang diperbolehkan. Hindari pesan samar seperti Coba Lagi jika sistem sebenarnya mengetahui penyebab dan langkah koreksinya.
Batas pemberian petunjuk
WCAG 3.3.3 meminta saran koreksi untuk kesalahan yang dideteksi ketika saran diketahui, kecuali hal itu mengganggu keamanan atau tujuan isi. Pada proses sensitif, jangan mengungkap informasi akun orang lain hanya demi membuat pesan terlihat lebih rinci.
Pemeriksaan penerapan
Bandingkan pesan dengan aturan validasi yang benar-benar dijalankan. Pastikan contoh tidak bertentangan dengan format yang diterima. Uji bahasa, rentang angka, dan keadaan setelah pengguna mengoreksi masukan. Petunjuk yang salah dapat lebih membingungkan daripada pesan pendek yang akurat.
Intisari
Berikan langkah koreksi yang diketahui dan relevan dengan aturan sebenarnya.
Batasi rincian ketika informasi tersebut dapat mengungkap keadaan sensitif pihak lain.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Memberi nilai awal pada reduce untuk menangani daftar kosong
Penjelasan konsep · Website ·
Metode reduce menggabungkan elemen menjadi satu hasil melalui fungsi akumulator. Nilai awal membantu menetapkan tipe serta keadaan dasar perhitungan, terutama ketika daftar dapat kosong.
Untuk menjumlahkan jumlah barang, gunakan nilai awal nol yang sesuai dengan tujuan penjumlahan. Daftar kosong kemudian dapat menghasilkan nol melalui aturan tersebut. Tanpa nilai awal, reduce pada array kosong tidak memiliki elemen awal untuk digunakan dan dapat melempar kesalahan.
Tipe akumulator
Nilai awal tidak harus angka; dapat berupa objek atau bentuk lain sesuai hasil yang diinginkan. Fungsi callback perlu mengembalikan akumulator yang benar pada setiap langkah. Jangan mencampurkan angka dan teks tanpa aturan karena hasil dapat berubah menjadi penggabungan teks alih-alih penjumlahan.
Pemeriksaan
Uji daftar kosong, satu elemen, dan beberapa elemen dengan tipe yang diharapkan. Validasi nilai setiap item sebelum menghitung total. Reduce tidak mengetahui apakah angka merupakan jumlah barang, harga, atau data yang salah, sehingga makna serta batas perhitungan tetap menjadi tanggung jawab aplikasi.
Intisari
Tetapkan nilai awal yang sesuai tipe dan tujuan akumulasi.
Uji daftar kosong serta pastikan callback selalu mengembalikan hasil yang benar.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Pesan kesalahan publik dan detail diagnostik perlu dipisahkan
Penjelasan konsep · Keamanan Digital ·
Pengguna memerlukan penjelasan yang dapat ditindaklanjuti. Mereka tidak memerlukan jalur berkas internal, kredensial, atau rincian basis data yang bocor melalui pesan kesalahan.
Sampaikan operasi yang belum berhasil dan langkah yang aman untuk dicoba, tanpa menjanjikan keberhasilan yang belum diketahui. Hindari menampilkan stack trace, isi konfigurasi, atau kueri internal. Pesan umum tetap dapat berguna apabila disertai konteks tindakan dan saluran bantuan yang jelas.
Catatan untuk pengelola
Rincian teknis yang diperlukan dapat disimpan pada log yang aksesnya dibatasi. Gunakan pengenal kejadian untuk menghubungkan laporan pengguna dengan catatan internal. Pengenal tersebut tidak perlu mengandung token sesi atau data pribadi yang justru memperbesar risiko saat pengguna mengirim tangkapan layar.
Menguji kegagalan
Periksa respons untuk data tidak valid, layanan yang tidak tersedia, dan operasi yang tidak diizinkan pada lingkungan pengujian. Jangan hanya memeriksa jalur sukses. Pastikan respons gagal tidak tetap menampilkan pesan “berhasil” dan informasi diagnostik tidak ikut masuk ke halaman publik.
Intisari
Buat pesan publik berguna tanpa membuka detail internal.
Hubungkan laporan dan log melalui pengenal kejadian yang tidak sensitif.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Hash CSP perlu berubah ketika skrip inline berubah
Penjelasan konsep · Keamanan Digital ·
Content Security Policy dapat membatasi skrip yang dijalankan browser. Kebijakan berbasis hash bergantung pada isi persis skrip yang diizinkan.
Hash dihitung dari isi skrip, bukan dari tujuan atau kemiripan perilakunya. Perubahan karakter, spasi, atau baris dapat membuat hash lama tidak cocok. Akibatnya, perbaikan antarmuka yang terlihat sederhana bisa menyebabkan fungsi tidak berjalan ketika kebijakan CSP tetap menggunakan nilai sebelumnya.
Memeriksa rilis
Setelah mengubah skrip inline, hitung kembali hash yang diperlukan dan periksa pesan pelanggaran pada browser. Uji fungsi yang bergantung pada skrip tersebut, bukan hanya keberhasilan memuat HTML. Kebijakan dalam mode pelaporan saja memberikan laporan, tetapi tidak sama dengan kebijakan yang benar-benar menegakkan pembatasan.
Menjaga batas perlindungan
CSP merupakan lapisan tambahan, bukan pengganti penanganan keluaran yang aman atau pemeriksaan server. Jangan melonggarkan kebijakan secara luas hanya untuk menghilangkan pesan kesalahan. Sebagian kemampuan kebijakan juga memerlukan header HTTP, sehingga konfigurasi melalui elemen meta tidak selalu setara.
Intisari
Perubahan isi skrip memerlukan pemeriksaan ulang hash CSP.
Periksa fungsi dan pelanggaran tanpa menghapus pembatasan secara sembarangan.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Mengurangi pengumpulan data juga mengurangi beban perlindungannya
Penjelasan konsep · Keamanan Digital ·
Perlindungan privasi dimulai dari pertanyaan apakah suatu data memang diperlukan, bukan baru dipikirkan setelah semua kolom berhasil dikumpulkan.
Hubungkan setiap bidang dengan tujuan layanan yang jelas. Informasi yang menarik bagi pengelola belum tentu diperlukan untuk menyelesaikan permintaan pengguna. Bedakan data wajib, data opsional, dan data yang tidak perlu disimpan setelah operasi selesai agar formulir tidak berkembang tanpa alasan.
Menjaga penggunaan
Batasi akses sesuai tugas dan hindari menyalin informasi pribadi ke log, tangkapan layar, atau dokumen dukungan yang dibagikan luas. Bila data digunakan untuk tujuan lain, tinjau dasar dan kewajiban yang relevan. Penjelasan privasi perlu sesuai praktik nyata, bukan hanya teks umum pada footer.
Mengelola akhir penggunaan
Tentukan proses penyimpanan, penghapusan, dan penanganan salinan sesuai kebutuhan serta ketentuan yang berlaku. Jangan menetapkan masa simpan universal tanpa meninjau jenis data dan konteksnya. Pengurangan data bukan sertifikasi kepatuhan, tetapi membantu membatasi jumlah informasi yang perlu dijaga oleh organisasi.
Intisari
Kumpulkan data berdasarkan tujuan yang dapat dijelaskan.
Pastikan akses, salinan, dan masa simpan mengikuti praktik yang nyata.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Mengapa respons 200 belum membuktikan seluruh fitur berhasil
Penjelasan konsep · Website ·
Status 200 menunjukkan keberhasilan permintaan menurut server. Angka tersebut perlu dibaca bersama isi respons dan tujuan operasi, bukan dijadikan satu-satunya bukti bahwa seluruh alur pengguna telah selesai.
Pada permintaan GET, server biasanya mengembalikan representasi sumber yang diminta. Pada POST, isi respons dapat menjelaskan hasil tindakan. Sebuah halaman yang berhasil dikirim tetap mungkin mempunyai kesalahan JavaScript atau aset yang gagal dimuat setelah dokumen utama diterima.
Contoh verifikasi
Saat memeriksa formulir, pastikan respons berisi jenis data yang diharapkan serta status bisnis yang benar. Jangan menampilkan Pesanan Berhasil hanya karena halaman login dikembalikan dengan 200 setelah pengalihan. Cocokkan hasil dengan kontrak layanan dan identitas permintaan percobaan.
Bukti yang disimpan
Catat metode, alamat lokal atau lingkungan uji, status, jenis isi, dan hasil yang diharapkan. Pisahkan pemeriksaan pengiriman dokumen dari pengujian tombol, penyimpanan, dan pesan pengguna. Kesimpulan pengujian menjadi lebih tepat ketika setiap lapisan memiliki bukti sendiri.
Intisari
Respons HTTP sukses tidak otomatis berarti seluruh tugas bisnis sudah selesai.
Periksa isi respons dan hasil operasi sebelum menampilkan notifikasi keberhasilan.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
HTTPS melindungi koneksi, bukan membuktikan semua klaim website
Penjelasan konsep · Keamanan Digital ·
TLS membantu melindungi data selama perjalanan antara titik koneksi. Keberadaannya tidak otomatis membuktikan mutu produk atau kejujuran pengelola website.
Gunakan HTTPS pada seluruh aplikasi, bukan hanya halaman masuk. Perpindahan ke halaman tanpa perlindungan dapat menimbulkan risiko yang tidak hilang hanya karena formulir login memakai koneksi aman. Konfigurasi sertifikat perlu sesuai nama domain dan dipelihara agar tidak kedaluwarsa.
Memeriksa lingkungan
Gunakan pengaturan TLS modern yang didukung platform dan tinjau kompatibilitas yang memang diperlukan. Periksa pengalihan dari HTTP, aset yang dimuat halaman, serta jalur proksi yang berada dalam pengelolaan sendiri. Perubahan konfigurasi perlu diuji, bukan disalin tanpa memahami layanan yang terdampak.
Menyampaikan arti ikon
Indikator koneksi aman berkaitan dengan koneksi dan sertifikat, bukan pengesahan atas seluruh isi website. Pelanggan tetap perlu menilai informasi kontak, rincian transaksi, dan bukti yang relevan. Bagi pengelola, TLS juga tidak menggantikan izin akses, perlindungan data tersimpan, atau pembaruan aplikasi.
Intisari
Lindungi seluruh jalur penggunaan dengan HTTPS yang terpelihara.
Jangan menyebut koneksi aman sebagai jaminan keabsahan semua klaim bisnis.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Menghormati pilihan pengurangan gerak pada antarmuka
Penjelasan konsep · Website ·
Animasi dekoratif tidak harus ditampilkan dengan intensitas yang sama kepada semua pengguna. Preferensi pengurangan gerak dapat digunakan untuk menyederhanakan tampilan tanpa menghilangkan informasi penting.
Prefers-reduced-motion mendeteksi pengaturan pengguna untuk mengurangi gerak yang tidak esensial. Nilai reduce menunjukkan preferensi tersebut. Tanggapan desain dapat berupa mengurangi, mengganti, atau menghapus animasi tertentu sambil mempertahankan fungsi dan keadaan antarmuka yang dapat dipahami.
Contoh pergantian panel
Panel yang biasanya meluncur jauh dapat muncul langsung dengan perubahan keadaan yang jelas ketika gerak dikurangi. Pesan berhasil tetap ditampilkan sebagai teks. Jangan menghapus seluruh notifikasi hanya karena animasinya dimatikan; pengguna masih perlu mengetahui hasil tindakan yang dilakukan.
Menguji kedua mode
Periksa mode biasa dan mode pengurangan gerak. Pastikan tidak ada elemen yang tetap transparan atau berada di luar layar karena kode menunggu animasi selesai. Informasi dan kontrol harus tetap tersedia meskipun transisi tidak dijalankan seperti pada rancangan awal.
Intisari
Kurangi gerak nonesensial tanpa menghilangkan pesan atau fungsi antarmuka.
Uji keadaan akhir komponen ketika animasi dilewati atau dipersingkat.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menangani 204 tanpa mencoba membaca badan JSON
Penjelasan konsep · Website ·
Respons 204 No Content menunjukkan keberhasilan tanpa badan respons. Antarmuka yang selalu mencoba menguraikan setiap jawaban sebagai JSON dapat keliru menampilkan kegagalan meskipun operasi server telah berhasil.
Contoh yang masuk akal adalah penyimpanan atau penghapusan yang tidak perlu mengirim representasi baru. Server menyampaikan keberhasilan melalui status dan header yang sesuai. Tidak adanya badan respons bukan berarti koneksi terputus atau server lupa mengirim data yang wajib ada.
Penanganan klien
Periksa status terlebih dahulu sebelum memilih cara membaca badan respons. Jika kontrak endpoint menggunakan 204, perbarui antarmuka berdasarkan keberhasilan tersebut tanpa memanggil pengurai JSON pada isi kosong. Pesan pengguna tetap perlu membedakan tindakan yang memang telah selesai dari tindakan yang masih diproses.
Pengujian kontrak
Uji respons 204, respons sukses berisi JSON, dan respons kesalahan secara terpisah. Pastikan server tidak mengirim badan pada 204. Dokumentasikan pilihan status agar pengembang antarmuka tidak mengandalkan asumsi bahwa seluruh jawaban API mempunyai bentuk dan isi yang identik.
Intisari
Respons tanpa badan dapat menjadi keberhasilan yang sah, bukan kesalahan pengiriman.
Selaraskan pengurai respons dengan status dan kontrak endpoint yang digunakan.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Mengapa jumlah ItemList structured data perlu sama dengan indeks yang terlihat
Wawasan konsep · Website ·
numberOfItems dan daftar ListItem sebaiknya menggambarkan koleksi yang benar-benar tampil agar metadata tidak menyampaikan keadaan lama.
JSON-LD bukan tempat untuk menambahkan item yang tidak ada pada halaman atau mengurangi item hanya karena daftar terlalu panjang. Ketika halaman menyebut 87 berita tetapi ItemList masih 71, alat otomatis menerima dua versi keadaan situs. Konsistensi lebih mudah dipelihara jika keduanya dibangun dari data yang sama.
Jumlah dan elemen perlu diperiksa bersama
Mengubah numberOfItems saja belum cukup jika itemListElement masih berhenti pada daftar lama. Audit perlu membandingkan jumlah elemen, posisi, nama, dan URL. Duplikasi ID atau URL dapat membuat hitungan numerik terlihat benar tetapi daftar tetap salah.
Perubahan inline harus mengikuti CSP
Jika JSON-LD berada di dalam script inline dan CSP menggunakan hash, perubahan teks dapat mengubah hash. Paket yang ketat perlu menghitung ulang hash untuk blok yang berubah tanpa menambahkan unsafe-inline. Hal ini merupakan konsekuensi teknis pemeliharaan, bukan alasan untuk menonaktifkan policy.
Tidak menjamin rich result
Structured data yang valid membantu mesin memahami isi, tetapi tidak menjamin fitur pencarian tertentu akan ditampilkan. Isi halaman, kebijakan fitur, dan keputusan mesin pencari tetap berpengaruh.
Intisari
Sinkronkan numberOfItems dan itemListElement.
Periksa nama, URL, posisi, dan duplikasi.
Perubahan JSON-LD inline harus tetap sesuai CSP.
Tinjauan kode keamanan perlu mengikuti aliran data
Penjelasan konsep · Keamanan Digital ·
Memeriksa baris yang tampak mencurigakan saja dapat melewatkan hubungan antara input, keputusan akses, penyimpanan, dan keluaran aplikasi.
Tentukan dari mana data berasal, kapan diperiksa, siapa yang berhak menggunakannya, dan di mana data ditampilkan atau disimpan. Tinjauan seperti ini membantu menemukan pemeriksaan yang terputus antarbagian. Fungsi yang aman secara terpisah belum tentu menghasilkan alur yang aman ketika digabungkan.
Menggabungkan metode
Pemindai otomatis dapat membantu menemukan pola tertentu, sedangkan peninjauan manusia diperlukan untuk memahami aturan bisnis dan konteks penggunaan. Keduanya saling melengkapi. Hasil alat bukan alasan menutup pemeriksaan terhadap otorisasi, penanganan kesalahan, atau asumsi kepercayaan yang tidak diketahui alat.
Menindaklanjuti temuan
Tuliskan lokasi, kondisi, dampak yang dapat dijelaskan, serta perubahan yang diperlukan. Setelah perbaikan, uji ulang kasus terkait dan risiko regresi. Bedakan dugaan yang masih perlu pembuktian dari masalah yang sudah direproduksi agar laporan tidak membesar-besarkan bukti ataupun mengabaikan ketidakpastian yang penting.
Intisari
Tinjau hubungan antarbagian, bukan hanya potongan kode secara terpisah.
Setiap temuan perlu status, tindakan, dan bukti pemeriksaan ulang.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Merencanakan pengalihan permanen dengan 301
Penjelasan konsep · Website ·
Pengalihan permanen memberi tahu klien bahwa sumber telah pindah ke alamat lain. Pemilihan tujuan harus dilakukan dengan hati-hati karena pengalihan permanen dapat disimpan dan memengaruhi kunjungan berikutnya.
Buat pasangan alamat lama dan halaman pengganti yang benar-benar setara. Artikel lama sebaiknya menuju artikel penggantinya, bukan otomatis ke beranda. Periksa parameter yang masih diperlukan agar pengguna tidak kehilangan konteks ketika berpindah melalui bookmark atau tautan yang sudah tersebar.
Perilaku metode
Pada 301, beberapa alur klien dapat mengubah POST menjadi GET. Karena itu, jangan memilihnya secara mekanis untuk endpoint yang harus mempertahankan metode dan badan permintaan. Kebutuhan halaman informasi berbeda dari kebutuhan operasi API yang membawa data.
Pengujian sebelum penerapan
Periksa satu lompatan ke tujuan akhir, tidak ada lingkaran pengalihan, dan halaman tujuan tersedia. Uji alamat dengan serta tanpa garis miring jika keduanya pernah digunakan. Catat keputusan permanen dan sediakan rencana pemulihan yang mempertimbangkan cache klien, bukan hanya perubahan konfigurasi server.
Intisari
Petakan setiap alamat lama ke tujuan yang relevan sebelum menerapkan pengalihan permanen.
Periksa kebutuhan metode permintaan dan kemungkinan penyimpanan pengalihan oleh klien.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Nama berkas saja tidak cukup untuk mengamankan unggahan
Penjelasan konsep · Keamanan Digital ·
Sistem unggah perlu memeriksa isi dan penggunaan berkas, bukan hanya menerima nama yang berakhiran seperti format yang diharapkan.
Tentukan jenis berkas yang dibutuhkan layanan, batasi ukuran, dan periksa karakteristik konten yang relevan. Ekstensi atau jenis konten yang dikirim pengguna tidak boleh menjadi satu-satunya dasar kepercayaan. Pemeriksaan tambahan, termasuk pemindaian bila sesuai, melengkapi aturan tersebut tanpa menjamin semua risiko hilang.
Lokasi dan penamaan
Gunakan nama penyimpanan yang dikelola server dan hindari menjadikan nama dari pengguna sebagai jalur berkas secara langsung. Simpan unggahan di lokasi yang tidak dapat menjalankan kode aplikasi. Bila berkas disajikan kembali, atur cara akses dan jenis respons sesuai fungsi sebenarnya.
Hak akses dan pengujian
Periksa siapa yang boleh mengunggah, membaca, mengganti, dan menghapus berkas. Uji penolakan berkas terlalu besar, tipe tidak didukung, serta nama yang bertabrakan dalam lingkungan yang diizinkan. Pesan kesalahan harus membantu pengguna memilih berkas yang benar tanpa mengungkap lokasi internal penyimpanan.
Intisari
Gabungkan pemeriksaan tipe, ukuran, konten, dan hak akses.
Jangan biarkan unggahan diperlakukan sebagai kode aplikasi yang dapat dijalankan.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Mengatur perilaku unduhan dengan Content-Disposition
Penjelasan konsep · Website ·
Header Content-Disposition membantu menyatakan apakah isi disajikan langsung atau diperlakukan sebagai lampiran unduhan. Nama berkas yang disarankan juga dapat disampaikan agar hasil unduhan lebih mudah dikenali pengguna.
Nilai inline mengarahkan penyajian di dalam peramban bila didukung, sedangkan attachment mengarahkan unduhan. Perilaku akhir tetap dapat dipengaruhi peramban dan pengaturan pengguna. Jangan menjanjikan tampilan identik pada semua perangkat hanya berdasarkan satu header.
Penamaan berkas
Gunakan nama yang menjelaskan isi dan tidak memuat informasi pribadi yang tidak diperlukan. Jika nama berasal dari masukan pengguna, bersihkan sesuai kebutuhan keamanan dan penanganan header. Nama yang rapi tidak membuktikan isi benar; tipe media dan berkas hasil tetap perlu diperiksa.
Pengujian distribusi
Unduh contoh pada perangkat sasaran, lalu buka hasilnya. Cocokkan nama, ekstensi, ukuran, dan isi. Periksa karakter non-ASCII bila digunakan dalam nama berkas, serta pastikan pesan tombol sesuai: Unduh Dokumen tidak seharusnya hanya membuka halaman kosong atau menghasilkan berkas berisi pesan kesalahan.
Intisari
Selaraskan header, nama berkas, jenis media, dan teks tombol unduhan.
Uji berkas hasil yang diterima pengguna, bukan hanya respons awal server.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Mengapa izin akses harus diperiksa pada setiap permintaan
Penjelasan konsep · Keamanan Digital ·
Otorisasi menentukan tindakan yang boleh dilakukan suatu akun terhadap sumber daya tertentu, bukan hanya halaman yang boleh terlihat.
Menyembunyikan tombol edit membantu pengguna memahami perannya, tetapi tidak mencegah permintaan langsung ke server. Setiap permintaan membaca atau mengubah data perlu diperiksa terhadap pengguna, objek yang dituju, serta tindakan yang diminta. Kepemilikan objek juga tidak boleh diasumsikan dari alamat halaman.
Prinsip izin minimum
Berikan hanya hak yang diperlukan untuk pekerjaan pengguna. Ketika aturan belum secara jelas mengizinkan sebuah tindakan, keputusan bawaan sebaiknya menolak. Peran administrator yang terlalu luas dapat memperbesar dampak kesalahan maupun penyalahgunaan, sehingga pembagian tugas perlu ditinjau bersama pemilik proses.
Menguji aturan
Gunakan akun uji dengan peran berbeda untuk memeriksa kasus yang boleh dan tidak boleh dilakukan. Uji juga pergantian objek milik akun lain dalam lingkungan yang diizinkan. Catat hasil server, bukan hanya tampilan tombol, lalu jalankan kembali pemeriksaan setelah aturan akses berubah.
Intisari
Periksa izin pengguna terhadap tindakan dan objek secara bersamaan.
Penolakan server adalah bukti yang lebih kuat daripada tombol tersembunyi.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Menggunakan identitas yang sama untuk fungsi yang sama
Penjelasan konsep · Website ·
Kontrol dengan fungsi yang sama sebaiknya tidak berganti nama atau simbol tanpa alasan. Konsistensi membantu pengguna mengenali tindakan tanpa harus menafsirkan ulang setiap halaman yang dikunjungi.
Jika kaca pembesar berarti Cari Artikel, gunakan makna yang sama pada halaman pengetahuan dan berita. Jangan memakai simbol identik untuk membuka detail di satu halaman tetapi menghapus pilihan di halaman lain. Teks tambahan dapat memberi konteks tanpa mengganti makna dasar.
Dasar peninjauan
WCAG 3.2.4 mengharuskan komponen dengan fungsi yang sama diidentifikasi secara konsisten. Konsisten tidak selalu berarti setiap label harus identik kata demi kata. Nama dapat menyebut objek berbeda selama hubungan fungsi tetap jelas, misalnya Unduh Ringkasan dan Unduh Invoice.
Audit komponen
Buat daftar tindakan berulang beserta label terlihat dan nama aksesibelnya. Bandingkan tombol, ikon, pesan bantuan, serta teks pembaca layar. Ketika istilah diganti, perbarui seluruh tempat yang menjalankan fungsi tersebut dan pastikan dokumentasi pengguna tidak masih memakai istilah lama.
Intisari
Petakan identitas kontrol berdasarkan fungsi, bukan berdasarkan kemiripan bentuk visual saja.
Perbarui label terlihat dan nama aksesibel secara bersamaan ketika terminologi berubah.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Hash kata sandi berbeda dari enkripsi yang dapat dibalik
Penjelasan konsep · Keamanan Digital ·
Penyimpanan kata sandi memerlukan fungsi hashing yang dirancang untuk tujuan tersebut, bukan salinan teks biasa atau enkripsi untuk dibuka kembali.
Saat pengguna masuk, sistem perlu membandingkan bukti kata sandi dengan hasil penyimpanan yang aman. Sistem tidak perlu mengambil kembali kata sandi asli. Karena itu, mekanisme yang sengaja dapat mengembalikan nilai aslinya memiliki tujuan berbeda dari penyimpanan hash kata sandi.
Memilih mekanisme
OWASP membahas algoritme khusus penyimpanan kata sandi, termasuk Argon2id. Gunakan pustaka yang terpelihara dan pengaturan yang sesuai lingkungan, bukan merancang algoritme sendiri. Salt yang unik membantu membedakan hasil untuk kata sandi yang sama; pengelolaannya umumnya disediakan oleh pustaka yang tepat.
Menjaga keseluruhan proses
Hash yang baik tidak menghapus kebutuhan perlindungan akun, pembatasan percobaan masuk, dan pengamanan basis data. Hindari mencatat kata sandi dalam log ataupun mengirimkannya melalui surel. Ketika mekanisme penyimpanan diperbarui, rencanakan migrasi yang tidak mengharuskan pengelola mengetahui kata sandi asli pengguna.
Intisari
Jangan menyimpan kata sandi dalam bentuk yang sengaja bisa dibaca kembali.
Gunakan pustaka hashing khusus kata sandi yang terpelihara.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Menandai tujuan bidang informasi pengguna
Penjelasan konsep · Website ·
Nama bidang yang terlihat membantu manusia, sedangkan tujuan yang dapat dikenali program membantu pengisian dan penyesuaian antarmuka. Kedua lapisan tersebut saling melengkapi dan tidak seharusnya saling menggantikan.
Bidang nama, alamat email, dan kode pos dapat menggunakan penanda tujuan yang sesuai melalui kemampuan HTML. Label terlihat tetap diperlukan. Jangan memberi token alamat email pada bidang nomor pesanan hanya untuk memicu isian otomatis, karena hasilnya dapat membingungkan dan salah.
Cakupan kriteria
WCAG 1.3.5 berlaku untuk tujuan masukan tentang pengguna yang termasuk dalam daftar tujuan yang ditentukan serta menggunakan teknologi yang mendukung identifikasi tersebut. Kriteria ini bukan perintah memberi token sembarang pada semua bidang khusus dalam formulir bisnis.
Pemeriksaan implementasi
Cocokkan label, tipe masukan, tujuan bidang, dan token autocomplete. Uji pengisian otomatis dengan data percobaan, lalu pastikan data masuk ke tempat yang benar. Pisahkan informasi pelanggan dari informasi penerima ketika keduanya berbeda agar sistem tidak mencampurkan alamat atau identitas tanpa penjelasan.
Intisari
Gunakan penanda tujuan hanya ketika cocok dengan makna data yang diminta.
Uji pengisian otomatis bersama label dan struktur formulir, bukan sebagai fitur terpisah.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Menyediakan isi berguna ketika JavaScript tidak berjalan
Penjelasan konsep · Website ·
Halaman sebaiknya tidak kehilangan seluruh informasi ketika skrip tidak tersedia. Jalur membaca dasar dapat dipisahkan dari peningkatan interaktif seperti penyaringan atau animasi daftar.
Elemen noscript menyediakan isi alternatif ketika scripting dimatikan atau jenis skrip tidak didukung. Namun noscript bukan penangkap semua kegagalan JavaScript. Jika skrip diizinkan tetapi mengalami kesalahan saat berjalan, bagian ini tidak otomatis tampil sebagai pengganti.
Contoh arsip artikel
Daftar artikel dasar dapat disediakan dalam HTML biasa, sementara JavaScript menambahkan pencarian dan pagination. Pengunjung masih dapat membuka artikel melalui tautan internal tanpa fitur interaktif. Keterangan noscript dapat menjelaskan keterbatasan penyaringan tanpa menyatakan seluruh website tidak dapat digunakan.
Menguji dua keadaan
Uji halaman dengan scripting dimatikan dan uji kegagalan skrip secara terpisah. Kedua keadaan tidak sama. Pastikan isi inti tetap tersedia atau terdapat penanganan kesalahan yang sesuai, sehingga pengguna tidak hanya melihat area kosong tanpa jalan menuju informasi.
Intisari
Pisahkan konten dasar yang dapat dibaca dari peningkatan interaktif halaman.
Jangan menganggap noscript sebagai pengganti penanganan semua kesalahan JavaScript.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Memeriksa array secara eksplisit sebelum mengolah daftar
Penjelasan konsep · Website ·
Array.isArray membantu memastikan apakah suatu nilai merupakan array. Pemeriksaan ini lebih tepat daripada mengandalkan kemiripan objek atau keberadaan properti length ketika aplikasi memang membutuhkan daftar dalam bentuk array.
Nilai teks memiliki panjang, tetapi bukan array. Objek biasa juga dapat memiliki properti length tanpa menjadi daftar yang sesuai. Gunakan pemeriksaan tipe sebelum menjalankan operasi yang bergantung pada struktur array agar kesalahan data tidak baru muncul di tengah proses tampilan.
Isi tetap diperiksa
Array yang valid dapat kosong atau berisi elemen dengan bentuk yang salah. Karena itu, Array.isArray tidak menggantikan pemeriksaan setiap artikel atau produk. Tentukan bidang yang diperlukan, seperti identitas dan judul, kemudian validasi isinya sesuai skema aplikasi.
Skenario uji
Coba array kosong, array berisi objek benar, objek biasa, teks, dan null. Catat respons yang diharapkan untuk masing-masing keadaan. Aplikasi dapat menampilkan daftar kosong secara wajar, tetapi data salah tipe perlu dibedakan dari daftar yang memang tidak memiliki item.
Intisari
Gunakan pemeriksaan array yang eksplisit ketika struktur daftar memang diperlukan.
Validasi isi elemen secara terpisah dari tipe wadahnya.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Membedakan no-cache dari no-store
Penjelasan konsep · Website ·
Dua arahan cache yang terdengar mirip mempunyai makna berbeda. Kesalahan memahaminya dapat membuat pengembang mengira respons tidak disimpan, padahal respons hanya diwajibkan melalui validasi sebelum digunakan kembali.
No-cache mengizinkan penyimpanan tetapi meminta validasi sebelum penggunaan ulang sesuai aturan HTTP. No-store mengarahkan agar respons tidak disimpan oleh cache. Pemilihan perlu mengikuti sensitivitas dan kebutuhan isi, bukan sekadar menyalin konfigurasi dari jenis halaman yang berbeda.
Contoh penerapan
Halaman profil publik yang sering diperbarui mempunyai kebutuhan berbeda dari respons berisi informasi pribadi. Tinjau pula cache bersama di depan server, bukan hanya cache peramban. Menambahkan satu header pada HTML tidak otomatis mengatur seluruh respons API dan aset yang dimuat halaman tersebut.
Cara memverifikasi
Periksa header respons aktual dan perilaku pemuatan ulang pada lingkungan uji. Uji pengguna berbeda bila terdapat cache bersama dan konten personal. Simpan hasil per jenis sumber agar kebijakan yang tepat pada gambar publik tidak tanpa sengaja diterapkan pada data akun atau dokumen pribadi.
Intisari
No-cache bukan sinonim tidak boleh disimpan; bedakan validasi ulang dari larangan penyimpanan.
Terapkan kebijakan per jenis respons dan periksa cache peramban maupun cache bersama.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Memisahkan varian cache dengan header Vary
Penjelasan konsep · Website ·
Satu alamat dapat menghasilkan representasi berbeda berdasarkan header permintaan. Cache perlu mengetahui pembeda yang relevan agar salinan untuk satu kondisi tidak keliru digunakan pada kondisi lain.
Jika respons berbeda menurut pengodean yang diterima klien, Vary dapat menyebut Accept-Encoding. Dengan begitu, cache mempertimbangkan header tersebut ketika membedakan representasi. Daftar pembeda harus mengikuti perilaku server yang nyata, bukan ditambahkan sebanyak mungkin tanpa memahami konsekuensinya.
Konsistensi respons
Nilai Vary perlu konsisten pada respons yang berkaitan, termasuk validasi yang menghasilkan 304. Konfigurasi berbeda antara server asal dan lapisan cache dapat membuat diagnosis membingungkan. Tinjau respons aktual yang diterima klien, bukan hanya pengaturan yang tertulis pada satu komponen.
Pengujian pasangan
Kirim dua permintaan berizin dengan kondisi yang memang menghasilkan varian berbeda. Bandingkan isi, header, dan penggunaan cache. Jangan mengandalkan Vary sebagai satu-satunya perlindungan konten pribadi; kebijakan penyimpanan dan pemisahan akses tetap perlu sesuai sifat data yang dilayani.
Intisari
Cantumkan pembeda yang benar-benar memengaruhi representasi pada alamat yang sama.
Uji pasangan varian dan konsistensi header di seluruh lapisan pengiriman.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menulis tujuan tautan yang dapat dipahami dari konteks
Penjelasan konsep · Website ·
Tautan yang semuanya berbunyi Klik di Sini membuat pilihan sulit dibedakan. Pembaca perlu mengetahui tujuan atau hasil perpindahan sebelum meninggalkan bagian yang sedang dibaca.
Gunakan judul tujuan seperti Baca Panduan Transfer Domain, bukan kata umum tanpa objek. Pada kartu artikel, judul yang ditautkan sering sudah menyediakan konteks cukup. Hindari menambahkan beberapa tautan berulang dengan nama berbeda menuju tempat yang sama tanpa kebutuhan nyata.
Batas kriteria
WCAG 2.4.4 menerima tujuan yang dapat ditentukan dari teks tautan sendiri atau konteks yang dapat ditentukan secara programatis. Artinya, tidak semua tautan harus berdiri sendiri sebagai kalimat panjang. Namun, konteks visual yang jauh atau tidak terhubung belum tentu membantu teknologi pendukung.
Cara menguji
Tinjau daftar tautan serta paragraf tempatnya berada. Periksa apakah pembaca dapat membedakan tujuan yang mirip. Untuk berkas, keterangan jenis atau tujuan dokumen dapat membantu pengambilan keputusan. Pastikan teks tidak menjanjikan unduhan ketika tindakan sebenarnya membuka formulir atau halaman lain.
Intisari
Tulis hasil atau tujuan perpindahan secara spesifik dan sesuai tindakan sebenarnya.
Periksa konteks programatis, bukan hanya kedekatan elemen yang tampak di layar.
Menu yang berulang membantu pengunjung membangun kebiasaan. Memindahkan pilihan secara tidak terduga pada setiap halaman menambah beban pencarian, terutama ketika pengguna mengandalkan pola navigasi yang sudah dipelajari.
WCAG 3.2.3 meminta mekanisme navigasi yang berulang muncul dalam urutan relatif yang sama, kecuali perubahan diprakarsai pengguna. Ketentuan ini bukan tuntutan setiap halaman memiliki isi identik atau posisi piksel yang tidak pernah berubah pada ukuran layar berbeda.
Contoh pemeriksaan
Bandingkan urutan Beranda, Layanan, Pengetahuan, dan Kontak pada beberapa halaman. Penambahan submenu kontekstual tidak harus mengubah urutan relatif menu utama. Periksa juga urutan pada menu seluler, bukan hanya tampilan desktop yang terlihat saat pengembangan.
Pemeliharaan implementasi
Gunakan sumber navigasi bersama atau pemeriksaan otomatis untuk mendeteksi perbedaan yang tidak disengaja. Ketika suatu halaman memang membutuhkan navigasi khusus, beri pemisahan dan label yang jelas. Catat perubahan agar pembaruan satu halaman tidak meninggalkan halaman lain dalam pola lama.
Intisari
Pertahankan urutan relatif menu berulang di seluruh kelompok halaman terkait.
Bedakan navigasi global yang konsisten dari navigasi lokal yang mengikuti isi halaman.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Memakai data attributes untuk metadata antarmuka yang tidak rahasia
Penjelasan konsep · Website ·
Komponen halaman kadang memerlukan identitas tambahan untuk logika antarmuka. Data attributes dapat menyimpannya, tetapi informasi tersebut tetap berada di sisi pengunjung dan bukan tempat rahasia.
Atribut data-* menyediakan data khusus yang dapat dihubungkan dengan representasi elemen dalam DOM. Contohnya adalah kode kategori atau ID kartu. Data ini membantu skrip mengenali elemen tanpa harus menebak identitas dari teks yang terlihat.
Contoh penyaringan katalog
Sebuah kartu dapat mempunyai data-category berisi domain agar tombol filter mengetahui kelompoknya. Nilai tersebut bukan bukti otorisasi. Pengunjung dapat melihat atau mengubah data sisi browser, sehingga keputusan yang memengaruhi akun atau transaksi harus diperiksa oleh sistem yang berwenang.
Memeriksa penamaan dan batas
Gunakan nama yang konsisten serta nilai sederhana yang sesuai kebutuhan. Jangan menyimpan kata sandi, kunci layanan, atau data pribadi tersembunyi di atribut ini. Tidak terlihat pada tampilan biasa bukan berarti data tersebut terlindungi dari pembaca kode halaman.
Intisari
Gunakan data attributes untuk metadata antarmuka yang memang boleh terlihat.
Jangan menjadikannya tempat rahasia atau dasar tunggal keputusan otorisasi.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Memeriksa angka berhingga tanpa konversi diam-diam
Penjelasan konsep · Website ·
Number.isFinite memeriksa apakah nilai bertipe angka dan berhingga. Metode ini tidak mengubah teks menjadi angka terlebih dahulu, sehingga cocok untuk tahap validasi setelah proses konversi yang sengaja ditentukan aplikasi.
Angka 12 dapat lolos pemeriksaan, sedangkan teks 12 tidak dianggap sebagai angka berhingga oleh metode ini. Infinity dan NaN juga tidak lolos. Perbedaan tersebut membantu menghindari penerimaan nilai salah tipe hanya karena tampilannya menyerupai angka.
Urutan validasi
Jika masukan pengguna memang berupa teks, tentukan aturan pembacaan angka terlebih dahulu. Setelah itu, periksa hasil konversi dan batas bisnisnya. Angka berhingga masih dapat negatif, pecahan, atau berada di luar rentang yang diperbolehkan untuk jumlah barang atau nomor halaman.
Uji aplikasi
Gunakan angka sah, teks numerik, teks kosong, NaN, dan nilai tak berhingga sebagai kasus terpisah. Jangan menganggap satu pemeriksaan cukup untuk semua kebutuhan. Tipe, keberhinggaan, kebulatan, serta batas minimum dan maksimum merupakan aturan berbeda yang perlu dinyatakan sesuai bidang data.
Intisari
Number.isFinite tidak mengonversi teks menjadi angka secara otomatis.
Periksa rentang serta kebulatan secara terpisah ketika kebutuhan data mensyaratkannya.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Memahami mengapa lapisan anak tidak selalu bisa melewati induknya
Penjelasan konsep · Website ·
Nilai z-index yang sangat besar tidak selalu membawa elemen ke paling depan. Urutan lapisan juga dipengaruhi kelompok penumpukan tempat elemen dan induknya berada.
Stacking context mengelompokkan elemen dalam urutan lapisan yang mandiri. Setelah isi suatu konteks ditumpuk, kelompok itu diperlakukan sebagai satu unit dalam konteks induknya. Karena itu, perbandingan angka pada dua anak dari kelompok berbeda tidak selalu dapat dilakukan secara langsung.
Contoh menu tertutup
Menu dropdown dapat tertutup kartu lain walaupun angka lapisan menu sangat tinggi. Periksa apakah induk menu berada dalam konteks yang lebih rendah. Menaikkan angka anak berulang kali tidak menyelesaikan hubungan antara dua kelompok induk yang berbeda.
Pemeriksaan hierarki
Telusuri elemen dan pembungkus yang membentuk konteks penumpukan. Tentukan lapisan komponen pada tingkat yang tepat, lalu uji menu, dialog, dan header bersamaan. Jangan menghapus semua aturan lapisan tanpa memahami efeknya karena komponen lain mungkin bergantung pada hubungan tersebut.
Intisari
Periksa konteks induk sebelum terus menaikkan angka lapisan pada elemen anak.
Rancang hubungan lapisan antarkomponen, bukan perlombaan angka terbesar pada setiap elemen.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menggunakan textarea untuk uraian yang membutuhkan beberapa baris
Penjelasan konsep · Website ·
Uraian kebutuhan dan catatan biasanya tidak cocok dipaksa ke kolom satu baris. Textarea memberi ruang untuk teks bebas tanpa menganggap isinya sebagai dokumen berformat kaya.
Textarea merupakan kontrol penyuntingan teks biasa yang mendukung beberapa baris. Pengguna dapat memisahkan paragraf atau menulis daftar sederhana. Bentuk kontrol ini tidak dengan sendirinya menyediakan pemformatan tebal, gambar, atau dokumen yang dapat dijalankan.
Contoh brief singkat
Kolom Uraian Kebutuhan dapat meminta tujuan website, halaman yang dibutuhkan, dan bahan yang sudah dimiliki. Berikan tinggi awal yang nyaman serta label yang tetap terlihat. Contoh petunjuk sebaiknya membantu pengguna menjelaskan kebutuhan, bukan memaksa jawaban panjang tanpa tujuan.
Memeriksa penyimpanan
Uji beberapa paragraf dan karakter Indonesia, lalu pastikan barisnya tetap terbaca setelah disimpan atau ditampilkan kembali. Perlakukan isian sebagai data, bukan HTML yang langsung dijalankan. Batas panjang perlu dijelaskan jika sistem memang membatasi jumlah teks yang dapat diterima.
Intisari
Sediakan ruang yang cukup untuk uraian beberapa baris tanpa format kaya.
Pertahankan keterbacaan baris dan perlakukan masukan sebagai data biasa.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menyesuaikan kartu terhadap wadah melalui container query
Penjelasan konsep · Website ·
Komponen yang sama dapat berada di kolom sempit atau area lebar pada layar yang sama. Ukuran viewport saja tidak selalu menggambarkan ruang yang benar-benar tersedia bagi komponen tersebut.
Container size query memungkinkan gaya menyesuaikan dimensi wadah yang ditetapkan sebagai konteks. Ini berbeda dari media query yang memeriksa viewport. Pengembang perlu menetapkan konteks containment yang sesuai sebelum menggunakan ukuran wadah sebagai dasar kondisi.
Contoh kartu layanan
Kartu dapat menampilkan ikon di samping teks ketika wadahnya lebar, lalu menumpuk ikon di atas ketika ditempatkan di sidebar sempit. Kedua kartu mungkin berada pada viewport yang sama. Perubahan mengikuti ruang komponen, bukan nama halaman tempatnya dipasang.
Memeriksa penggunaan ulang
Uji kartu pada beberapa lebar wadah dan sediakan tampilan dasar yang tetap terbaca. Periksa dukungan lingkungan yang menjadi sasaran proyek. Jangan menambahkan container query hanya karena tersedia; gunakan ketika penyesuaian terhadap wadah memang menyederhanakan perilaku komponen yang digunakan ulang.
Intisari
Gunakan ukuran wadah ketika ruang komponen berbeda dari lebar viewport.
Pertahankan tampilan dasar yang berguna sebelum menambahkan aturan penyesuaian lanjutan.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menyiapkan caption untuk video rekaman
Penjelasan konsep · Website ·
Caption menyediakan isi audio dalam bentuk teks yang mengikuti waktu video. Isinya tidak hanya dialog, tetapi juga informasi suara yang diperlukan untuk memahami kejadian dan siapa yang sedang berbicara.
Tulis percakapan secara akurat, identifikasi pembicara ketika tidak jelas, dan jelaskan suara bermakna. Musik latar yang tidak memengaruhi pemahaman tidak perlu dijabarkan berlebihan. Caption berbeda dari terjemahan dialog semata karena juga membantu penonton yang tidak mendengar audio asli.
Dasar kebutuhan
WCAG 1.2.2 berlaku pada audio rekaman dalam media tersinkron, dengan pengecualian tertentu untuk alternatif media dari teks yang telah diberi penandaan jelas. Jangan menganggap caption otomatis selalu benar. Nama produk, angka, dan istilah teknis sering membutuhkan pemeriksaan manusia.
Pemeriksaan akhir
Tonton video tanpa suara dan ikuti caption hingga selesai. Periksa waktu muncul, keterbacaan, pemenggalan kalimat, serta apakah teks menutup informasi penting. Cocokkan angka dan nama dengan naskah yang disetujui sebelum publikasi, kemudian uji tombol pengaktifan caption pada pemutar yang digunakan.
Intisari
Caption harus menyampaikan informasi audio penting, bukan hanya kata yang mudah dikenali otomatis.
Tinjau sinkronisasi dan isi dengan menonton versi akhir tanpa suara.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Menandai pergantian bahasa dalam satu halaman
Penjelasan konsep · Website ·
Halaman berbahasa Indonesia dapat memuat kutipan atau petunjuk dalam bahasa lain. Penandaan bahasa membantu teknologi pendukung memilih pengucapan dan pemrosesan yang lebih sesuai dengan bagian tersebut.
Gunakan atribut bahasa pada rentang atau elemen yang benar-benar berpindah bahasa. Contohnya adalah satu paragraf petunjuk berbahasa Inggris di tengah penjelasan Indonesia. Bahasa utama dokumen tetap ditetapkan pada elemen akar agar bagian lain mempunyai konteks yang jelas.
Batas penerapan
WCAG 3.1.2 memiliki pengecualian, termasuk nama diri, istilah teknis, kata yang bahasanya tidak dapat ditentukan, dan ungkapan yang sudah menjadi bagian bahasa setempat. Tidak setiap nama merek atau istilah komputer harus dibungkus sebagai pergantian bahasa tersendiri.
Cara meninjau
Baca naskah dan tandai peralihan yang cukup jelas memengaruhi pengucapan. Cocokkan kode bahasa dengan isi sebenarnya, bukan lokasi perusahaan penerbit. Periksa hasil pada teknologi pendukung yang digunakan dalam pengujian, sambil mengingat kualitas suara juga bergantung pada perangkat dan paket bahasa tersedia.
Intisari
Tetapkan bahasa utama dokumen dan tandai bagian yang benar-benar berganti bahasa.
Jangan menambahkan penanda bahasa secara mekanis pada setiap nama atau istilah teknis.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Menggunakan address untuk informasi kontak yang relevan
Penjelasan konsep · Website ·
Elemen address tidak berarti semua nama tempat harus dibungkus sebagai alamat. Fungsinya berkaitan dengan informasi kontak orang atau organisasi yang relevan terhadap dokumen.
Address menunjukkan informasi kontak untuk seseorang, kelompok, atau organisasi. Isinya dapat mencakup alamat fisik, email, atau nomor telepon sesuai konteks. Nama pemilik kontak perlu jelas agar pembaca mengetahui siapa yang dapat dihubungi melalui informasi tersebut.
Contoh halaman perusahaan
Bagian kontak menampilkan nama perusahaan dan jalur korespondensinya. Sebaliknya, nama kota yang disebut dalam sebuah artikel perjalanan tidak otomatis menjadi informasi kontak. Pemilihan elemen mengikuti fungsi keterangan itu dalam halaman, bukan sekadar keberadaan nama jalan atau kota.
Memeriksa kejelasan identitas
Cocokkan nama organisasi, alamat, dan jalur komunikasi yang dipublikasikan. Jangan mencampur kontak dua badan usaha tanpa keterangan hubungan yang jelas. Struktur address yang benar tidak membuktikan keaktifan nomor, kepemilikan alamat, atau status hukum pihak yang dicantumkan.
Intisari
Gunakan address untuk informasi yang benar-benar berfungsi sebagai kontak.
Sebutkan pihak pemilik kontak agar identitasnya tidak tercampur dengan pihak lain.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menangani konten meluber tanpa menyembunyikan informasi penting
Penjelasan konsep · Website ·
Konten yang melewati kotak perlu ditangani berdasarkan jenisnya. Menutup luapan secara global mungkin merapikan layar, tetapi juga dapat membuat informasi atau kontrol tidak dapat dijangkau.
Overflow mengatur bagaimana konten ditangani ketika tidak muat pada kotaknya. Pilihannya mencakup menampilkan luapan, memotong, atau menyediakan guliran. Keputusan harus membedakan dekorasi yang boleh dipotong dari isi yang tetap perlu dibaca dan digunakan.
Contoh tabel panjang
Tabel dengan banyak kolom dapat ditempatkan dalam wadah yang bisa digulir horizontal. Halaman utama tetap mengikuti lebar layar. Sebaliknya, memotong seluruh bagian kanan tabel akan menyembunyikan nilai tanpa memberi jalan bagi pembaca untuk melihatnya kembali.
Pemeriksaan akses
Coba mencapai kontrol terakhir melalui keyboard dan guliran. Pastikan bayangan, indikator fokus, dan menu tidak terpotong secara tidak sengaja. Bila luapan disebabkan ukuran komponen yang salah, perbaiki ukuran tersebut terlebih dahulu daripada menjadikan overflow hidden sebagai penutup masalah.
Intisari
Bedakan luapan dekoratif dari informasi yang wajib tetap dapat diakses.
Perbaiki penyebab ukuran sebelum memilih pemotongan sebagai solusi tampilan.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Mencocokkan Content-Type dengan isi yang dikirim
Penjelasan konsep · Website ·
Content-Type menjelaskan jenis media dari isi pesan. Klien menggunakan informasi ini untuk menafsirkan data, sehingga respons dengan status sukses tetap dapat gagal digunakan ketika jenis isi dan badan tidak cocok.
Antarmuka meminta JSON tetapi menerima halaman HTML kesalahan. Memaksa pengurai JSON membaca halaman tersebut akan menghasilkan kegagalan lanjutan yang dapat menutupi masalah awal. Periksa status, header, dan sebagian isi yang telah disamarkan sebelum menyimpulkan penyebabnya.
Perbedaan header
Content-Type tidak sama dengan Content-Encoding. Yang pertama menjelaskan jenis data, sedangkan yang kedua berkaitan dengan pengodean seperti kompresi. Pada permintaan, tipe yang dikirim juga perlu sesuai dengan badan agar server dapat memilih cara pembacaan yang benar.
Validasi penerapan
Uji HTML, CSS, JavaScript, JSON, dan gambar yang benar-benar dilayani paket. Jangan menganggap ekstensi berkas selalu menghasilkan header yang tepat pada semua hosting. Sesudah konfigurasi diubah, periksa kembali respons langsung dan aset yang melewati jalur cache atau pengalihan berbeda.
Intisari
Periksa kesesuaian jenis media dengan badan respons sebelum memilih pengurai.
Bedakan jenis isi dari pengodean kompresi dan uji konfigurasi hosting sebenarnya.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Memahami hasil every pada array kosong
Penjelasan konsep · Website ·
Metode every memeriksa apakah semua elemen yang diuji memenuhi suatu kondisi. Pada array kosong, hasilnya true, sehingga aplikasi yang membutuhkan setidaknya satu item perlu memeriksa keberadaan data secara terpisah.
Sebuah aplikasi ingin memastikan semua artikel memiliki judul. Pemeriksaan every terhadap daftar kosong dapat menghasilkan true, tetapi hal itu tidak membuktikan ada artikel yang tersedia. Jika syaratnya daftar tidak kosong dan seluruh judul lengkap, kedua syarat harus dinyatakan secara eksplisit.
Makna hasil
True berarti tidak ada elemen yang diuji melanggar kondisi sesuai perilaku metode, bukan sertifikat kelengkapan seluruh sumber data. Pemeriksaan tipe, jumlah minimum, dan bidang lain tetap merupakan kebutuhan yang berbeda. Jangan menggabungkan semuanya ke satu label valid tanpa menjelaskan cakupannya.
Skenario uji
Uji daftar kosong, semua elemen benar, dan satu elemen salah. Periksa pesan yang ditampilkan untuk masing-masing keadaan. Validasi yang baik membantu pengguna membedakan tidak ada data dari data yang tersedia dan memenuhi aturan yang benar-benar diperiksa.
Intisari
Tambahkan pemeriksaan jumlah ketika aplikasi mensyaratkan daftar tidak kosong.
Jangan menafsirkan hasil every sebagai bukti seluruh sumber data telah lengkap.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Tautan pemulihan kata sandi perlu masa berlaku dan sekali pakai
Penjelasan konsep · Keamanan Digital ·
Pemulihan akun harus memberikan jalan kembali kepada pemiliknya tanpa membuka kesempatan penggunaan berulang oleh pihak yang memperoleh tautan.
Token pemulihan perlu sulit ditebak, terkait dengan akun yang sesuai, memiliki masa berlaku, dan tidak dapat digunakan lagi setelah dipakai. Pemeriksaan tersebut berada di server. Menghilangkan tombol pada halaman tidak membuat token otomatis kedaluwarsa atau tidak berlaku.
Respons yang tidak membocorkan akun
Pesan pemulihan sebaiknya tidak mengungkapkan secara tidak perlu apakah alamat tertentu terdaftar. Pembatasan permintaan juga membantu mencegah penyalahgunaan pengiriman pesan. Pengguna tetap membutuhkan penjelasan yang jelas mengenai langkah berikutnya tanpa menerima kata sandi lama dalam surel.
Menutup proses
Setelah perubahan berhasil, pastikan token yang sama ditolak dan pertimbangkan penanganan sesi aktif sesuai kebijakan keamanan. Uji token kedaluwarsa, token yang sudah dipakai, serta permintaan yang tidak lengkap. Jangan memasukkan nilai token ke tangkapan layar dukungan atau laporan yang dibagikan luas.
Intisari
Masa berlaku dan status sekali pakai harus diperiksa oleh server.
Pemulihan kata sandi bukan pengiriman kembali kata sandi lama.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Memberi judul halaman yang membedakan tab peramban
Penjelasan konsep · Website ·
Judul halaman membantu pengguna mengenali tempatnya ketika beberapa tab terbuka. Judul yang sama untuk semua halaman menghilangkan petunjuk penting meskipun judul besar di dalam halaman sudah berbeda.
WCAG 2.4.2 meminta judul halaman yang menjelaskan topik atau tujuan. Untuk artikel, gunakan pokok tulisan diikuti identitas website. Untuk formulir, jelaskan tugasnya. Hindari judul generik seperti Halaman Utama pada seluruh halaman layanan, profil, dan pengetahuan.
Keadaan dinamis
Jika aplikasi mengganti isi utama tanpa pemuatan halaman penuh, tinjau apakah judul dokumen ikut berubah. Pengguna yang berpindah tab perlu memperoleh nama yang sesuai dengan tampilan saat ini. Judul lama dapat menyesatkan meskipun konten baru sudah tampil dengan benar.
Pemeriksaan sederhana
Buka beberapa halaman berbeda dan baca label tab atau daftar riwayat. Pastikan judul membedakan halaman yang berdekatan topiknya. Periksa karakter khusus dan pemotongan nama; letakkan informasi pembeda lebih awal agar bagian yang paling berguna tidak selalu tersembunyi di belakang nama perusahaan panjang.
Intisari
Bedakan judul dokumen dari heading besar yang terlihat di dalam halaman.
Utamakan topik spesifik sebelum identitas website yang berulang pada banyak tab.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Menggunakan ETag untuk mengenali versi sumber
Penjelasan konsep · Website ·
ETag adalah penanda versi representasi sumber yang diberikan server. Penanda ini membantu klien membandingkan versi tanpa perlu menganggap nama berkas yang sama selalu berarti isi yang sama.
Klien yang sudah mempunyai salinan dapat mengirim penanda versi dalam permintaan bersyarat. Server kemudian menentukan apakah isi perlu dikirim kembali. Efisiensi berasal dari kesesuaian penanda dengan representasi sebenarnya, bukan dari panjang atau bentuk visual nilai ETag.
Perubahan yang diperhatikan
Jika isi berubah, penanda yang relevan juga perlu berubah sesuai aturan pembentukannya. ETag dapat digunakan dalam pengendalian pembaruan bersamaan, tetapi aplikasi harus menerapkan pemeriksaan kondisi secara benar. Keberadaan header saja tidak otomatis mencegah dua penyunting saling menimpa perubahan.
Pengujian versi
Ambil sumber, catat ETag, ubah isi pada lingkungan uji, lalu ulangi permintaan. Periksa hasil ketika penanda masih cocok dan ketika sudah berbeda. Jangan memakai ETag sebagai bukti keaslian penerbit atau pengganti tanda tangan keamanan; fungsinya dalam alur ini adalah validasi versi representasi.
Intisari
Pastikan penanda versi mengikuti perubahan isi yang dilayani server.
Uji kondisi cocok dan tidak cocok, bukan hanya keberadaan header ETag.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Mengelola nilai desain berulang melalui custom properties
Penjelasan konsep · Website ·
Warna, jarak, dan radius yang berulang lebih mudah dipelihara jika mempunyai nama. Nilai bersama membantu perubahan tetap konsisten tanpa mengganti angka secara manual di banyak tempat.
Custom properties menyimpan nilai yang dapat digunakan kembali melalui fungsi var. Nama diawali dua tanda hubung. Nilainya mengikuti aturan cascade dan, pada bentuk biasa, dapat diwariskan, sehingga cakupan penetapan perlu dipahami saat dipakai oleh komponen.
Contoh jarak kartu
Tetapkan satu variabel untuk sela kartu, lalu gunakan pada beberapa grid yang memang harus seragam. Jika satu bagian membutuhkan sela berbeda, timpa pada cakupan bagian tersebut. Jangan memakai satu variabel untuk dua kebutuhan yang kebetulan memiliki angka sama tetapi maknanya berbeda.
Pemeriksaan perubahan
Ubah nilai pada lingkungan uji dan periksa seluruh komponen yang merujuknya. Nama yang semantik memudahkan penelusuran dampak. Variabel CSS bukan pengganti pengujian visual, dan penggunaannya tidak berarti setiap nilai harus dibuat global tanpa mempertimbangkan batas komponen.
Intisari
Beri nama berdasarkan fungsi nilai, bukan sekadar warna atau angka saat ini.
Batasi cakupan agar perubahan lokal tidak merusak komponen yang tidak terkait.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menjelaskan kesalahan formulir melalui teks
Penjelasan konsep · Website ·
Pesan kesalahan perlu menunjukkan bidang yang bermasalah dan sifat masalahnya. Garis merah saja tidak memberi informasi cukup, terutama ketika pengguna tidak melihat warna atau membaca melalui teknologi pendukung.
Alih-alih menampilkan Data Salah, gunakan keterangan seperti Alamat Email Belum Diisi. Pesan menunjuk bidang tertentu dan menjelaskan keadaan yang perlu diperbaiki. Jangan menghapus semua isian yang sudah benar ketika satu bidang gagal, karena pengguna akan kehilangan konteks pekerjaannya.
Dasar kriteria
WCAG 3.3.1 meminta kesalahan masukan yang dideteksi otomatis diidentifikasi dan dijelaskan dalam teks. Kriteria ini tidak berarti setiap kemungkinan kesalahan isi harus dapat diketahui sistem. Jelaskan hanya masalah yang benar-benar terdeteksi, bukan menebak maksud atau keadaan pengguna.
Alur pengujian
Kirim formulir percobaan kosong, gunakan format salah, lalu perbaiki satu bidang. Pastikan pesan terkait masih terlihat, terhubung dengan bidangnya, dan hilang setelah masalah selesai. Ringkasan kesalahan dapat membantu formulir panjang jika tautannya membawa pengguna ke bidang yang tepat.
Intisari
Sebutkan bidang dan masalah secara spesifik tanpa menyalahkan pengguna.
Uji kemunculan, hubungan, dan penghapusan pesan setelah data diperbaiki.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Menggunakan required tanpa membuat semua kolom menjadi wajib
Penjelasan konsep · Website ·
Penanda wajib sebaiknya hanya diterapkan pada data yang diperlukan untuk menyelesaikan tujuan formulir. Mewajibkan terlalu banyak informasi dapat mengaburkan mana kebutuhan utama dan mana tambahan.
Required merupakan atribut boolean yang menunjukkan bahwa kontrol yang mendukungnya harus memiliki nilai sebelum formulir dikirim melalui validasi biasa. Kehadiran atributlah yang menentukan keadaan wajib; menulis nilai teks false tidak berarti menonaktifkannya.
Contoh permintaan penawaran
Nama kontak dan uraian kebutuhan mungkin diperlukan untuk menjawab permintaan, sementara catatan tambahan bersifat opsional. Beri penjelasan yang terlihat pada kolom wajib. Jangan hanya mengandalkan bintang tanpa keterangan karena pembaca harus memahami arti penandanya.
Menguji kegagalan pengisian
Kirim formulir dalam keadaan kosong, lalu lengkapi satu per satu. Pastikan pesan menunjukkan kolom yang perlu diperbaiki dan tidak menghapus isian lain. Pemeriksaan server tetap diperlukan karena pengiriman tidak selalu berasal dari formulir browser yang telah divalidasi.
Intisari
Wajibkan hanya data yang diperlukan bagi tujuan formulir tersebut.
Atribut required harus disertai petunjuk yang jelas dan pemeriksaan penerima.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Log yang berguna tidak perlu menyimpan kata sandi
Penjelasan konsep · Keamanan Digital ·
Pencatatan kejadian membantu penelusuran masalah, tetapi log juga dapat menjadi tempat kebocoran apabila semua isi permintaan disalin tanpa seleksi.
Catat waktu, jenis tindakan, identitas yang sesuai kebutuhan, objek terkait, serta hasil operasi. Nomor korelasi dapat membantu menghubungkan kejadian antarbagian sistem. Bentuk pencatatan perlu konsisten agar petugas dapat membedakan kegagalan akses, gangguan layanan, dan kesalahan data.
Data yang perlu dibatasi
Kata sandi, token akses, rahasia aplikasi, dan data sensitif tidak seharusnya masuk begitu saja ke log. Menyimpan seluruh badan permintaan sebagai kebiasaan dapat mengumpulkan informasi jauh melebihi tujuan penelusuran. Pilih bidang yang diperlukan dan lindungi nilai yang memang harus dicatat.
Mengelola akses
Batasi siapa yang dapat membaca, mengubah, dan mengekspor log. Tetapkan masa simpan sesuai kebutuhan serta kewajiban yang berlaku, tanpa menganggap semua log perlu disimpan selamanya. Uji pula bagaimana aplikasi bertindak ketika fasilitas pencatatan gagal agar kegagalan log tidak menghasilkan kebocoran tambahan.
Intisari
Utamakan konteks kejadian dan hasil, bukan salinan semua data pengguna.
Perlakukan log sebagai data yang perlu kontrol akses dan pengelolaan.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Menyelaraskan nama aksesibel dengan label tombol
Penjelasan konsep · Website ·
Label terlihat membantu pengguna memilih kontrol, termasuk melalui perintah suara. Nama aksesibel yang berbeda jauh dari tulisan di layar dapat membuat perintah yang masuk akal justru tidak menemukan sasaran.
Sebuah tombol menampilkan Kirim Permintaan, tetapi nama aksesibelnya hanya berbunyi Proses. Pengguna yang menyebut tulisan di layar menghadapi ketidakcocokan. Nama yang mencakup Kirim Permintaan lebih selaras dengan petunjuk visual yang memang diberikan halaman kepada pengguna.
Dasar kriteria
WCAG 2.5.3 meminta nama aksesibel memuat teks label yang terlihat. Menempatkan label terlihat di awal nama sering membantu konsistensi. Penambahan konteks boleh berguna, tetapi tidak seharusnya menghapus atau mengganti istilah utama yang dibaca pengguna.
Cara memeriksa
Bandingkan tulisan kontrol dengan nama yang tampil pada pohon aksesibilitas peramban. Periksa tombol ikon dengan teks tambahan, label yang dipotong, dan kontrol yang menggunakan aria-label. Atribut aksesibilitas bukan alasan untuk menimpa label asli dengan istilah internal yang tidak dikenal pengunjung.
Intisari
Gunakan istilah tindakan yang sama pada tampilan dan nama aksesibel.
Periksa hasil nama yang dihitung peramban, bukan hanya keberadaan atribut pada kode.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Menelusuri elemen yang menolak menyusut karena min-width
Penjelasan konsep · Website ·
Komponen yang meluber tidak selalu disebabkan width terlalu besar. Batas ukuran minimum dapat menahan penyusutan meskipun wadahnya sudah lebih sempit daripada isi di dalamnya.
Min-width menetapkan batas minimum lebar elemen. Batas ini dapat mengalahkan width atau max-width yang lebih kecil. Pada tata letak tertentu, ukuran minimum otomatis juga dipengaruhi isi, sehingga teks panjang dapat mempertahankan lebar yang tidak diharapkan.
Contoh judul dalam kartu
Kartu berisi ikon dan nama panjang dapat memerlukan min-width nol pada bagian teks agar bagian tersebut boleh menyusut dalam baris flex. Setelah itu, tentukan bagaimana teks membungkus. Mengizinkan penyusutan saja tidak otomatis membuat kata panjang terpecah dengan baik.
Pemeriksaan terarah
Temukan elemen yang benar-benar melewati wadah melalui ukuran terhitung. Jangan memberi min-width nol secara acak pada seluruh halaman. Beberapa kontrol memang membutuhkan batas minimum agar tetap dapat digunakan; perbaikan harus menjaga keterbacaan dan bukan sekadar menghilangkan gulir horizontal.
Intisari
Periksa batas minimum ketika width dan max-width tidak menghasilkan ukuran harapan.
Pasangkan penyusutan dengan aturan pembungkusan teks yang sesuai kebutuhan.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Kapan varian produk layak memiliki halaman dan URL sendiri
Wawasan konsep · Website ·
Varian sebaiknya dipisahkan ketika perbedaannya cukup penting bagi pencarian, keputusan, atau spesifikasi pengguna, bukan sekadar untuk menambah jumlah halaman.
Kapasitas alat, rentang ukur, konsentrasi parfum, ukuran botol, atau material consumable dapat mengubah keputusan pengguna. Jika varian tersebut memiliki nama atau spesifikasi yang dicari secara mandiri, halaman individual membantu pembaca membandingkan tanpa menafsirkan satu kartu yang terlalu padat.
Perbedaan kecil dapat tetap satu halaman
Perubahan yang tidak mengubah identitas, seperti foto baru atau perbaikan deskripsi, tidak memerlukan URL baru. Membuat banyak halaman yang isinya hampir sama dapat menambah duplikasi dan beban pemeliharaan tanpa manfaat nyata bagi pengguna.
Gunakan pola slug yang stabil
Slug sebaiknya diturunkan dari identitas produk dan tidak memasukkan status sementara seperti ready atau promo. Ketika status berubah, URL tetap relevan. SKU internal dapat membantu menjaga keunikan jika nama produk berulang.
Hubungkan varian terkait
Halaman individual sebaiknya menautkan varian atau produk terkait dengan label yang jelas. Rekomendasi adalah navigasi, bukan klaim substitusi. Untuk alat laboratorium, kompatibilitas tetap perlu diverifikasi dari spesifikasi.
Intisari
Pisahkan varian bila perbedaannya memengaruhi keputusan pengguna.
Jangan membuat URL baru untuk perubahan kosmetik.
Gunakan slug stabil dan tautkan varian terkait secara jelas.
Memberi petunjuk pengisian otomatis melalui autocomplete
Penjelasan konsep · Website ·
Formulir dapat memberikan petunjuk jenis data kepada browser. Petunjuk yang tepat membantu pengisian, sedangkan nama kolom yang ambigu dapat menghasilkan isian yang tidak sesuai.
Atribut autocomplete memberi arahan tentang bantuan pengisian dan jenis informasi yang diharapkan. Nilainya dapat berupa token tertentu, bukan sekadar nama bebas. Browser tetap menentukan bagaimana petunjuk itu diterapkan berdasarkan dukungan dan pengaturan pengguna.
Contoh alamat pengiriman
Kolom alamat jalan dapat ditandai sebagai shipping street-address agar konteks pengiriman dibedakan dari data lain. Cocokkan petunjuk dengan label yang terlihat. Jangan memberi token email pada kolom yang sebenarnya meminta nomor pesanan karena keduanya mempunyai fungsi berbeda.
Memeriksa hasil nyata
Uji formulir dengan data contoh yang tersimpan dan perhatikan kolom mana yang terisi. Pastikan pengguna tetap dapat mengoreksi nilai tersebut. Jangan menganggap semua perangkat akan mengisi otomatis dengan cara identik atau menjadikan hasil pengisian sebagai bukti identitas pengunjung.
Intisari
Pilih token autocomplete berdasarkan arti data yang benar-benar diminta.
Sediakan kesempatan memeriksa dan mengubah nilai sebelum formulir dikirim.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Mengurutkan angka dengan pembanding yang sesuai
Penjelasan konsep · Website ·
Pengurutan bawaan sort tidak otomatis memperlakukan seluruh elemen sebagai angka untuk urutan numerik. Pengembang perlu menentukan pembanding yang sesuai dan menyadari bahwa sort mengubah array tempat metode tersebut dipanggil.
Daftar angka 2, 10, dan 1 dapat tersusun berdasarkan representasi teks jika tidak diberi pembanding numerik. Untuk kebutuhan urutan angka naik, fungsi pembanding perlu mencerminkan perbandingan angka. Jangan menilai urutan benar hanya dari contoh satu digit yang kebetulan tampak sesuai.
Perubahan sumber
Sort bekerja pada array yang ada. Jika daftar sumber juga dipakai untuk navigasi lain, perubahan urutan dapat memengaruhi bagian tersebut. Buat keputusan yang jelas apakah urutan sumber memang boleh berubah atau diperlukan hasil terurut yang terpisah.
Uji pembanding
Gunakan nilai sama, angka negatif, dan beberapa digit. Periksa pula data yang bukan angka sesuai aturan aplikasi. Pembanding perlu konsisten agar hasil dapat dipahami. Jangan memperbaiki data salah tipe secara diam-diam hanya agar operasi pengurutan tidak menampilkan kesalahan yang terlihat.
Intisari
Gunakan pembanding numerik ketika tujuan pengurutan adalah nilai angka.
Perhatikan bahwa sort mengubah urutan array sumber.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Mengelompokkan pilihan formulir dengan fieldset dan legend
Penjelasan konsep · Website ·
Sekumpulan pilihan sering membutuhkan satu pertanyaan bersama. Fieldset dan legend membantu menunjukkan hubungan itu tanpa mengandalkan garis kotak atau kedekatan posisi semata.
Fieldset mengelompokkan kontrol dan label yang saling berhubungan di dalam formulir. Legend memberikan nama kelompok tersebut. Pengelompokan ini berguna ketika label setiap pilihan baru dapat dipahami setelah membaca pertanyaan yang berlaku untuk semuanya.
Contoh pilihan layanan
Dalam formulir konsultasi, buat kelompok Jenis Layanan berisi pilihan Website, Domain, dan Parfum. Setiap pilihan tetap mempunyai label sendiri. Legend menerangkan pertanyaan bersama, sedangkan label menjelaskan jawaban yang dapat dipilih oleh pengunjung pada kelompok tersebut.
Memeriksa isi kelompok
Pastikan kontrol yang tidak berkaitan tidak ikut masuk hanya karena letaknya berdekatan. Bila terdapat dua pertanyaan berbeda, buat dua kelompok yang jelas. Jangan menghapus legend lalu menggantinya dengan teks dekoratif yang tidak lagi memiliki hubungan struktural dengan pilihan.
Intisari
Gunakan legend sebagai nama pertanyaan untuk kelompok kontrol terkait.
Label setiap pilihan tetap diperlukan meskipun kelompok sudah memiliki nama.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Logout yang benar harus mengakhiri sesi di server
Penjelasan konsep · Keamanan Digital ·
Menghapus tampilan akun dari browser belum tentu membuat sesi tidak berlaku. Pengelolaan sesi membutuhkan pemeriksaan di sisi server.
Identitas sesi menghubungkan permintaan berikutnya dengan akun yang telah masuk. Karena itu, nilainya perlu dilindungi dari kebocoran dan tidak dicantumkan sembarangan dalam alamat atau log. Batas waktu sesi harus ditegakkan oleh server, bukan hanya penghitung waktu pada halaman pengguna.
Mengakhiri akses
Saat pengguna keluar, server perlu membatalkan sesi yang bersangkutan. Menghapus cookie atau menyembunyikan nama pengguna saja tidak cukup apabila identitas sesi lama masih diterima. Perubahan tingkat hak akses juga memerlukan penanganan sesi yang tepat, termasuk pembaruan identitas sesi ketika diperlukan.
Mengamati hasil
Dalam lingkungan pengujian yang sah, periksa apakah permintaan menggunakan sesi yang sudah diakhiri benar-benar ditolak. Uji pula batas waktu tidak aktif dan batas umur sesi sesuai kebijakan layanan. Atribut cookie seperti Secure, HttpOnly, dan SameSite mendukung perlindungan, tetapi tidak menggantikan pembatalan sesi.
Intisari
Uji penolakan sesi lama setelah logout, bukan hanya perpindahan halaman.
Terapkan masa berlaku sesi di server dan lindungi cookie sesi.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Menampilkan penanda fokus melalui focus-visible
Penjelasan konsep · Website ·
Pengguna keyboard perlu mengetahui kontrol yang sedang aktif. Penanda fokus merupakan bagian fungsi antarmuka, bukan gangguan visual yang sebaiknya dihapus dari seluruh halaman.
Pseudo-class focus-visible berlaku ketika elemen memiliki fokus dan browser menentukan bahwa fokus perlu ditunjukkan secara visual. Pola ini membantu memberi penanda yang sesuai dengan cara interaksi pengguna. Perilaku tepatnya mengikuti heuristik browser, bukan hanya satu jenis perangkat masukan.
Contoh tombol dan tautan
Berikan outline yang jelas serta jarak yang cukup dari tepi tombol. Uji pada latar terang dan gelap. Jangan hanya mengubah warna teks sedikit karena posisi fokus dapat sulit dibedakan, terutama ketika beberapa kontrol tampak mirip dan berdekatan.
Pemeriksaan jalur keyboard
Gunakan Tab untuk menelusuri halaman dan lihat apakah penanda terpotong oleh pembungkus. Pastikan fokus tetap terlihat ketika menu terbuka atau halaman digulir. Menghapus outline bawaan hanya dapat dipertimbangkan jika penggantinya benar-benar jelas dan telah diuji pada seluruh kontrol terkait.
Intisari
Pertahankan penanda fokus yang dapat dikenali pada setiap kontrol interaktif.
Periksa pemotongan outline dan kontras pada seluruh latar yang digunakan.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Memberi alternatif untuk gerakan seret
Penjelasan konsep · Website ·
Gerakan menyeret dapat menyulitkan pengguna yang kesulitan mempertahankan tekanan sambil memindahkan penunjuk. Fungsi yang sama memerlukan alternatif yang tidak menuntut gerakan tersebut ketika gerak seret tidak esensial.
Pada daftar unggahan, sediakan tombol Naik dan Turun untuk memindahkan item selain pegangan seret. Pengguna penunjuk tunggal dapat menekan tombol beberapa kali. Alternatif ini juga membuat perubahan urutan lebih jelas ketika daftar panjang atau ruang layar terbatas.
Batas persyaratan
WCAG 2.5.7 meminta alternatif penunjuk tunggal tanpa menyeret, dengan pengecualian tertentu. Menyediakan pintasan keyboard saja belum tentu memenuhi kebutuhan ini karena keyboard bukan alternatif penunjuk tunggal. Fungsi yang esensial terhadap gerakan perlu dinilai sesuai konteks sebenarnya.
Validasi hasil
Pastikan kedua cara menghasilkan urutan dan penyimpanan yang sama. Periksa pengumuman posisi baru, keadaan tombol di awal atau akhir daftar, dan kemampuan membatalkan kesalahan. Jangan membuat alternatif yang ada secara visual tetapi tidak terhubung ke proses penyimpanan utama.
Intisari
Sediakan operasi klik atau ketuk yang setara ketika seret bukan kebutuhan esensial.
Uji kesetaraan hasil, termasuk penyimpanan dan penanganan kesalahan urutan.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Memisahkan tampilan tanggal dan nilai mesin dengan time
Penjelasan konsep · Website ·
Tanggal yang nyaman dibaca manusia dapat berbeda bentuk dari tanggal untuk pemrosesan. Elemen time membantu menyimpan keduanya tanpa mengubah arti waktu yang dimaksud.
Elemen time dapat mewakili tanggal, waktu, atau durasi yang sesuai. Atribut datetime menyediakan bentuk yang dapat dibaca mesin. Teks yang terlihat tetap dapat menggunakan penulisan bahasa Indonesia selama nilainya konsisten dengan representasi di atribut tersebut.
Contoh tanggal publikasi
Artikel menampilkan 25 September 2026, sedangkan datetime berisi 2026-09-25. Jika jam juga dicantumkan, tentukan zona waktunya secara jelas. Jangan menyamakan tanggal kejadian dengan tanggal publikasi ketika laporan membahas peristiwa yang berlangsung pada hari berbeda.
Memeriksa perubahan editorial
Saat artikel diperbarui, bedakan waktu terbit dan waktu pembaruan bila keduanya ditampilkan. Periksa bahwa teks, atribut, dan metadata tidak saling bertentangan. Elemen time tidak membuat suatu tanggal menjadi benar; ketepatannya tetap bergantung pada catatan editorial yang digunakan.
Intisari
Simpan tanggal mesin yang sesuai dengan teks tanggal yang terlihat.
Bedakan waktu kejadian, publikasi, dan pembaruan ketika konteks memerlukannya.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Mengatur titik tampilan gambar dengan object-position
Penjelasan konsep · Website ·
Potongan gambar dapat berubah ketika bingkai menyempit. Posisi tampilan membantu menjaga bagian penting tetap terlihat tanpa mengubah atau menggambar ulang berkas sumbernya.
Object-position menentukan penempatan isi elemen gambar atau video di dalam kotaknya. Properti ini bekerja bersama cara penyesuaian ukuran isi. Nilai tengah, atas, atau persentase dapat mengubah bagian yang terlihat ketika bingkai tidak menampilkan seluruh gambar.
Contoh foto produk
Jika label utama berada dekat bagian atas foto, perataan center top dapat lebih sesuai daripada titik tengah ketika memakai cover. Keputusan tetap perlu diperiksa pada foto sebenarnya. Menggeser posisi tidak dapat menampilkan dua bagian yang berjauhan jika bingkainya terlalu sempit.
Menguji beberapa ukuran
Periksa tampilan desktop, tablet, dan ponsel dengan gambar yang sama. Bila potongan tetap menghilangkan informasi, ubah rasio bingkai atau gunakan contain. Jangan terus menggeser posisi untuk memaksakan foto ke desain yang memang tidak menyediakan ruang cukup bagi informasi penting.
Intisari
Sesuaikan titik tampilan dengan letak bagian penting pada gambar asli.
Ubah bingkai apabila penggeseran posisi saja tidak dapat menjaga informasi.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Mengatur viewport tanpa membatasi pembesaran halaman
Penjelasan konsep · Website ·
Website responsif memerlukan pengaturan viewport yang sesuai dan tata letak yang lentur. Metadata saja tidak dapat memperbaiki konten yang terlalu lebar atau teks yang terpotong.
Meta viewport memberikan petunjuk tentang ukuran dan skala area tampilan. Pengaturan width=device-width dan initial-scale=1 merupakan pola umum untuk menyesuaikan lebar awal dengan perangkat dalam satuan CSS. Pengaturan ini bukan pengganti aturan responsif pada isi halaman.
Contoh pemeriksaan ponsel
Setelah metadata dipasang, uji judul panjang, tabel, menu, dan gambar pada layar sempit. Jika masih ada bagian meluber, periksa ukuran tetap atau minimum pada komponennya. Jangan mengubah viewport menjadi sangat lebar hanya untuk menyembunyikan masalah tata letak.
Menjaga kendali pembaca
Hindari membatasi kemampuan pembesaran hanya demi menjaga komposisi visual. Pengguna dapat membutuhkan teks lebih besar. Uji halaman ketika diperbesar dan pastikan kontrol penting tetap dapat dijangkau, bukan hanya menilai tampilan pada ukuran awal yang dipilih pengembang.
Intisari
Atur viewport sebagai dasar, lalu perbaiki responsivitas setiap komponen.
Pertahankan kemampuan pembesaran agar pembaca dapat menyesuaikan ukuran tampilan.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Memeriksa kontras kontrol dan grafik penting
Penjelasan konsep · Website ·
Batas isian, tanda pilihan, dan bagian grafik dapat membawa informasi tanpa kata. Jika penandanya terlalu samar, pengguna kesulitan mengetahui tempat interaksi atau membaca keadaan suatu kontrol.
WCAG 1.4.11 menggunakan rasio 3 banding 1 terhadap warna yang bersebelahan untuk informasi visual penting pada kontrol dan objek grafis. Bukan setiap garis dekoratif harus memenuhi syarat tersebut. Fokusnya adalah bagian yang dibutuhkan untuk mengenali fungsi atau makna.
Contoh pemeriksaan
Pada kotak centang, periksa tanda bahwa pilihan aktif, bukan hanya latar kartu di sekelilingnya. Pada diagram, tinjau bagian yang diperlukan untuk memahami data. Tambahkan label atau pola ketika warna saja tidak cukup membedakan kategori yang berdekatan.
Batas kesimpulan
Terdapat pengecualian, termasuk kontrol tidak aktif dan tampilan bawaan tertentu yang tidak diubah pembuat halaman. Jangan menggunakan pengecualian sebagai alasan menyamarkan tombol utama. Simpan pengukuran dan alasan pemilihan objek agar tinjauan berikutnya dapat mengulang pemeriksaan yang sama.
Intisari
Tentukan dahulu bagian visual yang benar-benar menyampaikan fungsi atau informasi.
Pisahkan evaluasi kontras nonteks dari evaluasi kontras tulisan di dalam kontrol.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Memakai checkbox untuk pilihan yang dapat berdiri sendiri
Penjelasan konsep · Website ·
Checkbox cocok ketika beberapa pilihan dapat dinyalakan atau dimatikan secara terpisah. Bentuk ini berbeda dari pertanyaan yang hanya mengizinkan satu jawaban dalam satu kelompok.
Checkbox memungkinkan pengguna memilih atau tidak memilih suatu nilai. Beberapa checkbox dapat aktif sekaligus. Karena itu, kontrol ini sesuai untuk daftar minat yang boleh lebih dari satu, bukan untuk pilihan tunggal yang saling meniadakan.
Contoh kebutuhan konsultasi
Pengunjung dapat memilih Website dan Domain dalam satu permintaan karena kedua kebutuhan bisa berjalan bersamaan. Setiap checkbox diberi label yang menjelaskan layanan. Jangan membuat pilihan tambahan diam-diam mengubah arti pilihan lain tanpa penjelasan yang dapat dibaca.
Pemeriksaan data kiriman
Periksa keadaan tidak dipilih, satu dipilih, dan beberapa dipilih. Pada pengiriman formulir biasa, checkbox yang tidak dicentang tidak menyumbang pasangan nama dan nilainya. Sistem penerima harus memahami keadaan tersebut, bukan menganggap setiap pilihan selalu hadir dengan nilai false.
Intisari
Gunakan checkbox ketika beberapa jawaban boleh dipilih secara bersamaan.
Definisikan penanganan pilihan yang tidak dikirim oleh formulir biasa.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Membuat pilihan select dengan label dan nilai yang konsisten
Penjelasan konsep · Website ·
Menu pilihan memisahkan teks yang dibaca pengguna dari nilai yang dikirim sistem. Kedua bagian itu perlu diselaraskan agar pilihan tidak berubah makna setelah formulir diproses.
Elemen select menyediakan menu opsi. Setiap option dapat mempunyai nilai pengiriman yang berbeda dari teks tampilannya. Perbedaan ini berguna untuk kode internal, tetapi harus dirancang supaya label manusia dan kode sistem selalu menunjuk pilihan yang sama.
Contoh kategori pesan
Opsi Pertanyaan Domain dapat mengirim kode domain, sedangkan Dukungan Website mengirim kode website. Tuliskan label select sebagai Kategori Pesan. Pilihan awal kosong dapat membantu mencegah pengguna tanpa sengaja mengirim kategori pertama ketika belum menentukan kebutuhan.
Memeriksa perubahan daftar
Setelah mengganti urutan atau nama opsi, uji nilai yang diterima sistem. Jangan mengandalkan nomor posisi sebagai identitas tetap apabila urutan mungkin berubah. Pastikan pilihan yang sudah tidak tersedia tidak tetap muncul sebagai pilihan aktif pada formulir baru.
Intisari
Pisahkan label yang mudah dibaca dari kode internal yang stabil.
Periksa nilai kiriman setiap kali daftar opsi diubah atau diurutkan ulang.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Memahami ukuran sasaran minimum 24 piksel CSS
Penjelasan konsep · Website ·
Sasaran interaksi yang terlalu kecil mudah tertekan keliru. Ukuran yang dinilai adalah area aktif sebenarnya, bukan hanya ukuran ikon atau banyaknya ruang kosong yang tampak di sekitarnya.
WCAG 2.5.8 menetapkan sasaran minimal 24 kali 24 piksel CSS atau memenuhi ketentuan pengecualian, termasuk aturan jarak tertentu. Ada pula pengecualian untuk sasaran sebaris dan kondisi lain. Jangan menyebut 44 piksel sebagai angka minimum universal untuk kriteria AA ini.
Contoh tombol halaman
Ikon panah dapat berukuran kecil tetapi ditempatkan dalam tombol yang area aktifnya cukup luas. Sebaliknya, padding pada pembungkus luar tidak membantu jika hanya ikon di tengah yang menerima klik. Periksa kotak sasaran melalui alat inspeksi dan pengujian sentuh.
Keputusan desain
Untuk kontrol yang berdekatan, utamakan area aktif yang lapang daripada bergantung pada penafsiran pengecualian. Uji ukuran layar sempit serta pembesaran teks. Sasaran yang memenuhi batas minimum tetap dapat diperbesar apabila penggunaan nyata membutuhkan ruang sentuh yang lebih nyaman.
Intisari
Ukur area yang menerima interaksi, bukan dimensi gambar ikonnya saja.
Pisahkan batas kepatuhan minimum dari pilihan desain yang memberi kenyamanan tambahan.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Kunci rahasia tidak boleh ditanam di JavaScript publik
Penjelasan konsep · Keamanan Digital ·
Berkas yang dikirim ke browser dapat dibaca pengguna. Menyembunyikan nama variabel atau memperkecil kode tidak membuat kunci rahasia tetap rahasia.
Kredensial yang memberi kewenangan pada layanan perlu dikelola di lingkungan yang memang berhak menyimpannya, umumnya sisi server atau pengelola rahasia. Jangan menaruhnya dalam HTML, JavaScript publik, repositori terbuka, atau contoh konfigurasi yang ikut dibagikan kepada pelanggan.
Membatasi dampak
Pisahkan rahasia menurut lingkungan dan kebutuhan layanan. Berikan kewenangan minimum, catat pemiliknya, dan sediakan proses pergantian serta pencabutan. Rahasia yang sama untuk banyak layanan memperbesar cakupan pekerjaan ketika satu salinan bocor atau seorang pengelola berganti tugas.
Ketika terpapar
Menghapus baris dari versi terbaru tidak menjamin salinan lama hilang dari riwayat, cache, atau unduhan. Cabut atau ganti kredensial yang terpapar, periksa penggunaan yang relevan, dan telusuri penyebabnya. Jangan menempelkan nilai rahasia tersebut ke tiket dukungan untuk membuktikan kebocoran.
Intisari
Minifikasi bukan mekanisme penyimpanan rahasia.
Paparan kredensial membutuhkan pencabutan atau rotasi, bukan penghapusan teks saja.
Sumber dan pemeriksaan
Dasar informasi: OWASP.
Tanggal pemeriksaan rujukan: .
Menggunakan referensi visual sebagai arah tanpa menyalin isi yang tidak relevan
Penjelasan konsep · Website ·
Referensi membantu menjelaskan suasana, komposisi, atau hierarki informasi. Namun, tidak semua elemen referensi perlu dipindahkan, terutama ketika subjek, identitas, dan tujuan komunikasi berbeda dari pekerjaan yang sedang dibuat.
Tandai bagian yang diikuti, seperti jarak teks, kesederhanaan latar, atau posisi objek. Pisahkan bagian yang tidak digunakan, seperti logo, klaim, foto orang, atau harga milik pihak lain. Jangan menganggap seluruh isi referensi telah disetujui hanya karena gambarnya diberikan sebagai contoh gaya.
Contoh penerapan
Referensi restoran dapat memberi inspirasi ruang kosong dan tipografi untuk katalog layanan, tetapi foto makanan tidak perlu ikut digunakan. Susun elemen berdasarkan bahan serta pesan sendiri. Hasil perlu mempunyai hubungan jelas dengan produk atau layanan yang benar-benar ditawarkan.
Pemeriksaan akhir
Bandingkan tujuan awal dengan keluaran, bukan hanya kemiripan permukaan. Pastikan tidak ada identitas pihak lain atau informasi referensi yang tertinggal. Catat keputusan elemen yang dipertahankan agar revisi tidak berubah menjadi penyalinan penuh yang mengabaikan konteks serta bahan asli proyek.
Intisari
Jelaskan bagian referensi yang menjadi arah dan bagian yang tidak boleh ikut dipindahkan.
Bangun komposisi dari bahan serta pesan sendiri, bukan seluruh isi contoh pihak lain.
Menggunakan arah logis untuk jarak dan ukuran
Penjelasan konsep · Website ·
Awal baris tidak selalu berada di sisi kiri. Properti logis membantu menyatakan jarak berdasarkan arah penulisan sehingga komponen lebih mudah disesuaikan pada konteks bahasa berbeda.
Properti logis menggunakan konsep inline dan block, serta start dan end, bukan hanya kiri, kanan, atas, dan bawah. Makna fisiknya mengikuti writing mode dan arah tulisan. Karena itu, aturan dapat lebih dekat dengan hubungan isi yang dimaksud.
Contoh ikon di awal label
Jarak setelah ikon dapat dinyatakan terhadap arah inline, sehingga hubungan ikon dan teks tidak selalu bergantung pada sisi kanan. Uji arah penulisan yang memang didukung proyek. Jangan menganggap mengganti properti otomatis menyelesaikan seluruh kebutuhan antarmuka multibahasa.
Memeriksa campuran aturan
Periksa apakah properti fisik lama masih menimpa properti logis baru. Campuran yang tidak disengaja dapat menghasilkan jarak ganda atau sisi yang salah. Dokumentasikan pola yang dipilih agar komponen baru mengikuti prinsip yang sama dan tidak menambah pengecualian tanpa alasan.
Intisari
Nyatakan jarak berdasarkan awal dan akhir alur ketika hubungan isi membutuhkannya.
Periksa konflik antara properti fisik lama dan properti logis yang ditambahkan.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menyediakan tampilan cetak yang tetap memuat isi penting
Penjelasan konsep · Website ·
Halaman yang nyaman di layar belum tentu nyaman dicetak. Navigasi, latar dekoratif, dan komponen menempel dapat mengganggu hasil kertas bila tidak diberi penanganan khusus.
CSS dapat memakai media print untuk menerapkan gaya ketika dokumen dicetak atau diproses sebagai keluaran cetak. Aturan tersebut tetap mengikuti cascade. Karena itu, penempatannya harus mempertimbangkan aturan lain yang mungkin mempunyai prioritas lebih tinggi.
Contoh artikel pengetahuan
Pada tampilan cetak, menu interaktif dan dekorasi besar dapat disembunyikan, sementara judul, tanggal, isi, dan keterangan gambar tetap dipertahankan. Gunakan warna teks yang terbaca tanpa bergantung pada latar berwarna yang mungkin tidak dicetak oleh pengaturan pengguna.
Memeriksa pratinjau
Buka pratinjau cetak dan periksa pemotongan tabel, judul yang terpisah dari paragraf, serta elemen fixed yang berulang di halaman. Jangan menganggap hasil pasti sama pada semua ukuran kertas. Uji ukuran yang relevan dan pertahankan isi penting dalam alur dokumen.
Intisari
Pisahkan dekorasi layar dari informasi yang perlu tersedia pada hasil cetak.
Periksa pratinjau dengan tabel, gambar, dan beberapa halaman isi yang nyata.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Memahami batas pemeriksaan kolom email di browser
Penjelasan konsep · Website ·
Kolom email dapat membantu menemukan kesalahan bentuk alamat. Namun lolos pemeriksaan format belum membuktikan bahwa kotak surat tersedia atau dimiliki oleh pengisi formulir.
Input bertipe email memeriksa bentuk nilai yang dimasukkan sebelum pengiriman formulir biasa. Nilai kosong tetap dapat diterima ketika kolom tidak diwajibkan. Pemeriksaan ini berhubungan dengan format masukan, bukan keberhasilan pengiriman pesan ke alamat tersebut.
Contoh pendaftaran kontak
Seorang pengguna dapat mengetik alamat yang bentuknya benar tetapi salah satu hurufnya keliru. Browser mungkin tidak menolak alamat itu. Bila kepemilikan email penting untuk akun, proses layanan perlu mempunyai langkah verifikasi yang sesuai, bukan hanya mengandalkan jenis kolom.
Pengujian yang terpisah
Uji kolom kosong, alamat dengan bentuk salah, dan alamat contoh yang bentuknya benar. Kemudian uji penanganan di server secara terpisah. Pesan kesalahan sebaiknya menjelaskan apa yang perlu diperbaiki tanpa menyatakan alamat pasti tidak ada hanya berdasarkan pemeriksaan tampilan.
Intisari
Pisahkan pemeriksaan format email dari verifikasi kepemilikan alamat.
Validasi di browser tidak menggantikan pemeriksaan pada sistem penerima.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Mengizinkan deretan tombol berpindah baris dengan flex-wrap
Penjelasan konsep · Website ·
Deretan tombol atau label kategori tidak selalu muat dalam satu baris. Membiarkannya berpindah baris dapat lebih jelas daripada mengecilkan teks sampai sulit dibaca.
Flex-wrap mengatur apakah item flex dipaksa berada pada satu baris atau dapat membentuk beberapa baris. Nilai wrap mengizinkan pembungkusan. Keputusan ini perlu disertai jarak antarelemen yang konsisten agar baris baru tidak tampak sebagai kelompok berbeda.
Contoh filter artikel
Delapan tombol kategori mungkin muat pada desktop tetapi tidak pada ponsel. Izinkan tombol turun ke baris berikutnya dan pertahankan label utuh. Jangan memotong nama kategori hanya untuk mempertahankan satu baris apabila potongan tersebut menghilangkan perbedaan antarjenis konten.
Pemeriksaan urutan
Periksa bahwa urutan visual setelah pembungkusan masih mengikuti urutan baca yang masuk akal. Uji juga ketika ukuran teks diperbesar. Tombol terakhir tidak boleh tertutup atau terjepit karena tinggi wadah dikunci berdasarkan perkiraan bahwa hanya ada satu baris.
Intisari
Izinkan pembungkusan ketika satu baris tidak cukup untuk label yang terbaca.
Hindari tinggi wadah tetap yang memotong baris tambahan pada layar sempit.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menguji pengaturan jarak teks oleh pengguna
Penjelasan konsep · Website ·
Sebagian pengguna mengubah jarak huruf, kata, baris, dan paragraf agar bacaan lebih nyaman. Website perlu menoleransi perubahan tersebut tanpa memotong isi atau menghilangkan fungsi penting.
WCAG 1.4.12 memeriksa perubahan tinggi baris menjadi 1,5 kali ukuran huruf, jarak antarparagraf dua kali, jarak huruf 0,12 kali, dan jarak kata 0,16 kali. Parameter diuji sebagai pengaturan pengguna, bukan kewajiban menjadikannya gaya bawaan setiap halaman.
Dampak pada komponen
Menu sempit, tombol dengan lebar tetap, dan kartu yang tingginya dikunci mudah bermasalah. Teks dapat menimpa ikon atau bersembunyi di balik pembungkus. Uji seluruh pengaturan secara bersamaan agar hambatan yang muncul dari kombinasinya tidak terlewat.
Tindak lanjut
Izinkan kotak bertambah tinggi dan judul membungkus ke baris berikutnya. Periksa bahasa serta jenis aksara yang digunakan karena kriteria memiliki pertimbangan penerapan yang relevan. Setelah perubahan, pastikan tombol tetap terbaca dan fokus keyboard tidak tertutup oleh isi yang berkembang.
Intisari
Pengujian jarak teks menilai toleransi terhadap pengaturan pengguna, bukan satu gaya visual wajib.
Periksa isi dan fungsi setelah seluruh parameter jarak diubah secara bersamaan.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Menjaga perbandingan lebar dan tinggi dengan aspect-ratio
Penjelasan konsep · Website ·
Bingkai visual yang konsisten membantu daftar terlihat rapi sebelum gambar selesai dimuat. Rasio perlu ditentukan sebagai hubungan ukuran, bukan dua angka tetap untuk semua perangkat.
Aspect-ratio menyatakan rasio lebar terhadap tinggi yang diinginkan untuk kotak elemen. Rasio membantu perhitungan ketika setidaknya satu dimensi bersifat otomatis. Jika lebar dan tinggi sama-sama dikunci, rasio tidak selalu dapat menentukan ukuran seperti yang diharapkan.
Contoh bingkai persegi panjang
Kotak dengan rasio 4 banding 3 dan lebar 400 piksel memiliki tinggi 300 piksel ketika rasio mengendalikan ukurannya. Saat lebarnya turun menjadi 240 piksel, tingginya menjadi 180 piksel. Bentuk tetap serupa meskipun ruang halaman berubah.
Memeriksa isi visual
Rasio kotak tidak menjamin seluruh gambar terlihat. Periksa cara gambar dimuat ke dalam bingkai, terutama bila rasionya berbeda. Logo sebaiknya tidak dipotong hanya untuk menyamakan kartu, sementara foto ilustrasi dapat memerlukan keputusan potongan yang berbeda sesuai konteksnya.
Intisari
Gunakan rasio untuk menjaga bentuk saat ukuran wadah berubah.
Bedakan rasio bingkai dari keputusan menampilkan atau memotong isi gambar.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Membuat panduan membaca label tanpa menebak informasi yang hilang
Penjelasan konsep · Parfum ·
Foto label dapat membantu pembeli memeriksa identitas barang, tetapi informasi yang tidak terlihat tidak boleh dilengkapi dengan tebakan. Panduan membaca label perlu membedakan tulisan yang terbaca, bagian yang terpotong, dan data yang berasal dari sumber lain.
Gunakan foto yang cukup jelas untuk membaca bagian relevan. Jika tulisan terlalu kecil atau tertutup pantulan, ambil foto tambahan apabila tersedia. Jangan memperbesar gambar lalu menganggap hasil perkiraan sebagai pembacaan pasti, terutama pada kode, angka ukuran, atau nama produk yang mirip.
Penyalinan data
Salin tulisan sesuai yang terlihat dan tandai bagian yang perlu dikonfirmasi secara internal. Bandingkan dengan dokumen pemasok sebelum diterbitkan. Jika kedua sumber berbeda, catat perbedaannya dan minta penjelasan, bukan memilih versi yang terlihat lebih menarik untuk penjualan.
Penyajian kepada pembeli
Tampilkan spesifikasi yang sudah jelas dengan bahasa yang mudah dibaca. Foto label tetap dapat disertakan sebagai pelengkap, tetapi tidak menggantikan informasi teks yang penting. Hindari membuat klaim yang tidak tercantum atau tidak didukung sumber lain hanya karena ruang deskripsi masih kosong.
Intisari
Pisahkan tulisan yang terbaca dari informasi yang masih perlu dikonfirmasi.
Gunakan foto label sebagai pelengkap data, bukan alasan untuk menebak detail produk.
Menjawab pertanyaan dengan informasi yang diketahui terlebih dahulu
Penjelasan konsep · Usaha & Layanan ·
Jawaban layanan tidak harus menunggu seluruh informasi lengkap apabila sebagian pertanyaan sudah dapat dijawab dengan pasti. Pisahkan hal yang diketahui dari bagian yang masih perlu diperiksa agar pelanggan tidak menerima tebakan sebagai fakta.
Mulai dari informasi yang sudah tersedia, misalnya nama varian atau rincian pesanan yang tercatat. Setelah itu, nyatakan bagian yang belum terkonfirmasi secara spesifik. Kalimat Harga ukuran ini tercatat, ketersediaannya masih diperiksa lebih jelas daripada jawaban umum yang membuat semua informasi terasa tidak pasti.
Menghindari janji rekaan
Jangan menyebut waktu penyelesaian yang tidak memiliki dasar operasional. Jika ada proses pemeriksaan, jelaskan siapa atau bagian apa yang perlu dikonfirmasi tanpa membagikan data internal yang tidak diperlukan. Hindari menjadikan kemungkinan sebagai kepastian hanya agar jawaban terdengar cepat.
Pembaruan jawaban
Ketika informasi baru tersedia, hubungkan dengan pertanyaan sebelumnya dan jelaskan bagian yang berubah. Jangan mengirim jawaban baru yang bertentangan tanpa koreksi. Catatan percakapan sebaiknya menunjukkan urutan informasi sehingga pelanggan memahami alasan pembaruan tersebut.
Intisari
Pisahkan informasi yang sudah diketahui dari rincian yang masih diperiksa.
Perbarui jawaban dengan menyebut bagian yang berubah, bukan menutupinya.
Memeriksa pembesaran teks hingga 200 persen
Penjelasan konsep · Website ·
Teks yang membesar dapat mengungkap masalah tinggi kotak, pemotongan label, dan tombol yang saling menutupi. Pengujian ini berbeda dari sekadar membuka website pada layar yang lebih besar.
WCAG 1.4.4 meminta teks dapat diperbesar hingga 200 persen tanpa kehilangan isi atau fungsi, dengan pengecualian tertentu seperti caption dan gambar teks. Tujuannya bukan mempertahankan susunan identik, melainkan memastikan informasi tetap tersedia dan dapat digunakan.
Bagian yang rawan
Periksa kartu harga, tombol dua baris, menu akun, pesan validasi, dan footer. Kotak dengan tinggi tetap sering tidak menyediakan ruang cukup setelah teks membesar. Jangan menyimpulkan lulus hanya karena paragraf utama terlihat baik sementara tindakan penting menghilang.
Perbaikan yang diuji
Izinkan pembungkusan teks dan pertumbuhan tinggi komponen. Tinjau penggunaan overflow tersembunyi yang memotong isi. Setelah memperbaiki, ulangi tugas lengkap seperti mencari artikel dan mengirim formulir percobaan, karena keterbacaan tanpa keteroperasian belum memenuhi tujuan pengujian.
Intisari
Pastikan pembesaran tidak menghilangkan isi maupun tindakan penting.
Gunakan label dan pesan terpanjang saat menguji komponen yang ruangnya terbatas.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Mengatur jarak luar elemen melalui margin
Penjelasan konsep · Website ·
Jarak antarbab atau antarblok perlu menunjukkan hubungan isi. Margin mengatur ruang luar elemen, tetapi hasilnya tetap dipengaruhi konteks tata letak tempat elemen berada.
Margin menetapkan area di luar border elemen. Bentuk ringkasnya dapat mengatur keempat sisi sekaligus. Dalam alur blok tertentu, margin vertikal dapat mengalami penggabungan, sehingga jarak akhir tidak selalu sama dengan penjumlahan dua nilai yang berdekatan.
Contoh paragraf dan judul
Judul bagian dapat mempunyai jarak atas lebih besar daripada jarak bawah agar hubungan dengan paragraf berikutnya terlihat. Gunakan pola yang konsisten. Jika setiap paragraf dan pembungkus juga menambahkan margin besar, jarak antarbagian dapat menjadi berlebihan tanpa alasan struktural.
Menelusuri jarak aneh
Periksa model kotak elemen dan pembungkusnya ketika ruang kosong tidak sesuai perkiraan. Jangan langsung menambah margin negatif untuk menarik blok kembali. Temukan aturan yang menghasilkan jarak tersebut, lalu ubah pada sumbernya agar perbaikan tidak merusak halaman lain.
Intisari
Gunakan margin untuk menunjukkan hubungan ruang antarkomponen atau bagian isi.
Periksa penggabungan margin sebelum menganggap jarak selalu bersifat penjumlahan sederhana.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menentukan informasi wajib internal sebelum produk dipublikasikan
Penjelasan konsep · Parfum ·
Tim katalog dapat menetapkan daftar informasi minimum sebagai aturan kerja sendiri. Daftar ini membantu mencegah produk tayang dengan identitas atau pilihan yang membingungkan tanpa mengklaim bahwa daftar internal tersebut merupakan ketentuan hukum yang berlaku umum.
Masukkan nama produk, kode varian, ukuran, harga yang disetujui, foto sesuai barang, dan kelengkapan penawaran. Tambahkan bidang lain sesuai proses toko. Pisahkan informasi yang harus diperiksa untuk kebutuhan kepatuhan oleh pihak yang berwenang dari pemeriksaan kelengkapan katalog sehari-hari.
Keputusan publikasi
Jika bidang penting belum tersedia, tentukan apakah produk ditunda atau tampil tanpa kemampuan pemesanan dengan penjelasan yang sesuai. Jangan mengisi angka contoh agar halaman terlihat selesai. Angka contoh dapat tertinggal dan terbaca sebagai penawaran nyata oleh pembeli.
Pemeriksaan penanggung jawab
Tetapkan siapa yang menyetujui data dan kapan pemeriksaan dilakukan. Simpan catatan perubahan setelah produk tayang. Daftar minimum tidak menjamin semua kesalahan hilang, tetapi memberi dasar pemeriksaan yang konsisten dan membantu tim mengetahui bagian mana yang belum memiliki informasi pendukung.
Intisari
Tetapkan daftar minimum sebagai prosedur internal dengan cakupan yang jelas.
Jangan mengganti informasi yang belum tersedia dengan angka atau klaim rekaan.
Menyampaikan status tanpa bergantung pada warna
Penjelasan konsep · Website ·
Warna dapat mempercepat pembacaan, tetapi tidak boleh menjadi satu-satunya cara visual untuk menunjukkan informasi. Pesan yang hanya berbunyi merah atau hijau dapat kehilangan makna bagi sebagian pengguna.
Tampilkan kata Diproses, Selesai, atau Perlu Tindakan bersama warna status. Pada formulir, jelaskan bidang dan masalahnya melalui teks. Ikon dapat membantu, tetapi ikon yang tidak memiliki makna jelas tetap perlu ditemani label yang dapat dipahami.
Prinsip aksesibilitas
WCAG 1.4.1 membatasi penggunaan warna sebagai satu-satunya pembeda visual. Menambah warna kedua tidak menyelesaikan masalah jika makna tetap hanya ditentukan oleh warna. Bentuk, pola, posisi yang berlabel, atau keterangan tertulis dapat menyediakan jalur informasi tambahan.
Langkah peninjauan
Baca halaman sambil mengabaikan warnanya, lalu periksa apakah status masih dapat dipahami. Uji tabel, tautan dalam paragraf, grafik, dan pesan kesalahan. Pastikan keterangan tambahan ikut diperbarui ketika keadaan berubah, bukan hanya kelas warna pada elemen.
Intisari
Pasangkan warna status dengan teks atau penanda bermakna yang konsisten.
Perubahan keadaan harus memperbarui informasi, bukan sekadar mengganti warna tampilan.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Memilih contain atau cover untuk gambar dalam bingkai
Penjelasan konsep · Website ·
Gambar yang rasionya berbeda dari bingkai memerlukan keputusan tampilan. Pilihannya bukan sekadar mana yang terlihat penuh, melainkan informasi apa yang boleh atau tidak boleh terpotong.
Object-fit mengatur cara isi gambar atau video menyesuaikan kotaknya. Contain mempertahankan seluruh isi dalam kotak dan dapat menyisakan ruang kosong. Cover memenuhi kotak dengan mempertahankan rasio, tetapi sebagian isi dapat berada di luar bagian yang terlihat.
Contoh logo dan foto
Logo perusahaan umumnya memerlukan contain agar seluruh bentuknya terlihat. Foto suasana pada kartu dapat memakai cover jika bagian penting tetap terjaga. Jangan menerapkan satu aturan global pada semua gambar ketika logo, diagram, dan foto mempunyai kebutuhan yang berbeda.
Memeriksa potongan akhir
Uji beberapa rasio layar dan perhatikan tepi gambar. Pastikan tulisan pada kemasan atau bagian diagram tidak hilang. Object-fit mengubah cara tampilan dalam elemen, bukan menyunting berkas sumber atau menambahkan detail yang tidak ada pada gambar aslinya.
Intisari
Pilih contain ketika seluruh isi harus terlihat tanpa pemotongan.
Gunakan cover hanya setelah memastikan bagian penting tetap berada dalam bingkai.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menyusun skala z-index yang mudah dipelihara
Penjelasan konsep · Website ·
Urutan lapisan perlu konsisten agar menu, header, dan panel tidak saling menutupi secara acak. Skala kecil yang terencana lebih mudah dipahami daripada angka besar tanpa pola.
Z-index menentukan urutan lapisan untuk elemen yang memenuhi konteks penerapannya, termasuk elemen berposisi serta item flex dan grid. Nilai lebih besar berada di atas nilai lebih kecil dalam perbandingan yang berlaku pada konteks penumpukannya.
Contoh aturan proyek
Sebuah proyek dapat menetapkan lapisan dasar, header, dropdown, dan panel sebagai tingkat yang terdokumentasi. Angka dipilih untuk kebutuhan proyek, bukan mengikuti klaim standar universal. Nama variabel seperti lapisan-menu membantu menjelaskan fungsi dibanding angka acak yang muncul di banyak berkas.
Menguji kombinasi komponen
Buka menu ketika halaman memiliki panel atau header menempel. Periksa tumpang tindih dan kemampuan menutup komponen. Jangan menganggap nilai tinggi dapat mengatasi pemotongan oleh overflow atau semua perilaku top layer; masalah berbeda memerlukan pemeriksaan yang berbeda pula.
Intisari
Gunakan skala lapisan yang menjelaskan fungsi komponen dalam proyek.
Bedakan masalah urutan lapisan dari pemotongan dan penempatan elemen.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Memilih breakpoint berdasarkan isi dengan media query width
Penjelasan konsep · Website ·
Perubahan tata letak sebaiknya terjadi ketika isi membutuhkan ruang berbeda. Nama perangkat saja tidak cukup untuk menentukan kapan menu atau kolom harus berubah bentuk.
Media feature width memeriksa lebar viewport, bukan secara langsung ukuran fisik seluruh perangkat. Kondisi minimum atau maksimum dapat digunakan untuk menerapkan aturan tampilan. Hasilnya mengikuti ruang browser yang tersedia pada saat halaman ditampilkan.
Contoh menu perusahaan
Sempitkan halaman sampai label menu mulai bertabrakan, lalu tentukan breakpoint sebelum keadaan itu terjadi. Uji nama layanan terpanjang dan ukuran teks yang diperbesar. Angka yang cocok untuk satu merek belum tentu cocok ketika identitas perusahaan mempunyai lebih banyak kata.
Pemeriksaan sekitar batas
Uji tepat di bawah, pada, dan di atas breakpoint. Periksa apakah kedua versi menu muncul bersamaan atau justru keduanya hilang. Aturan yang saling bertumpuk perlu disusun jelas agar perpindahan tata letak tidak menciptakan keadaan yang tidak direncanakan.
Intisari
Tentukan breakpoint dari kebutuhan isi dan ruang viewport yang tersedia.
Uji beberapa ukuran di sekitar batas, bukan hanya dua ukuran ekstrem.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menjelaskan singkatan tanpa mengandalkan tooltip
Penjelasan konsep · Website ·
Singkatan yang akrab bagi penulis belum tentu dipahami pembaca. Penjelasan pertama sebaiknya terlihat langsung, bukan hanya muncul ketika penunjuk berada di atas istilah.
Elemen abbr menandai singkatan atau akronim. Kepanjangan dapat ditulis sebagai teks biasa pada penggunaan pertama. Atribut title dapat memberikan kepanjangan tambahan, tetapi bukan alasan untuk menghilangkan penjelasan yang perlu dibaca semua pengunjung.
Contoh panduan website
Tuliskan Cascading Style Sheets, disingkat CSS, ketika istilah pertama kali menjadi pokok pembahasan. Setelah maknanya jelas, penggunaan CSS berikutnya tidak perlu selalu dijabarkan. Hindari memperkenalkan banyak singkatan baru dalam satu paragraf yang sama tanpa konteks memadai.
Memeriksa pada perangkat sentuh
Baca artikel tanpa mengarahkan mouse ke istilah apa pun. Jika makna penting hanya tersedia melalui tooltip, tambahkan penjelasan terlihat. Singkatan yang mempunyai beberapa arti perlu diberi konteks bidangnya agar pembaca tidak membawa pengertian lain ke dalam pembahasan.
Intisari
Jelaskan kepanjangan istilah penting pada penggunaan pertamanya dalam artikel.
Jangan menyimpan satu-satunya penjelasan yang diperlukan di dalam tooltip.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Menyusun pertanyaan produk yang dapat dijawab dari katalog
Penjelasan konsep · Parfum ·
Daftar pertanyaan produk sebaiknya berangkat dari informasi yang benar-benar tersedia. Tujuannya membantu pembeli menemukan jawaban, bukan menutupi kekurangan data dengan kalimat umum yang terdengar meyakinkan.
Mulai dari ukuran, pilihan aroma, isi paket, dan cara memilih varian. Jawaban harus konsisten dengan halaman produk serta proses layanan. Jangan menulis bahwa semua pertanyaan sudah terjawab jika rincian penting masih harus dikonfirmasi kepada pemasok atau pengelola persediaan.
Batas jawaban
Untuk pertanyaan yang membutuhkan bukti khusus, jelaskan informasi yang dimiliki dan langkah pemeriksaannya. Hindari memberi jawaban kesehatan atau keamanan bahan berdasarkan deskripsi aroma. Catatan produk bukan pengganti penilaian profesional yang relevan ketika pertanyaannya berada di luar informasi perdagangan biasa.
Pembaruan berkala
Catat pertanyaan yang berulang dalam percakapan pelanggan lalu perbaiki lokasi informasi pada katalog. Jika banyak orang tidak menemukan ukuran, menambahkan jawaban panjang belum tentu menyelesaikan masalah tampilan. Letakkan informasi utama dekat dengan pilihan produk dan gunakan pertanyaan tambahan untuk penjelasan yang lebih rinci.
Intisari
Jawab pertanyaan dengan informasi produk yang tersedia dan dapat ditelusuri.
Perbaiki penempatan data utama ketika pertanyaan berulang menunjukkan informasi sulit ditemukan.
Menulis heading dan label yang menjelaskan tujuan
Penjelasan konsep · Website ·
Heading memberi peta bacaan, sedangkan label memberi nama bagi kontrol. Keduanya perlu membantu pengguna memperkirakan isi atau tindakan tanpa harus membaca seluruh halaman dari awal.
Ganti heading Lainnya dengan Informasi Pengiriman jika bagian itu memang membahas pengiriman. Pada formulir, gunakan Nomor Pesanan alih-alih Nomor ketika ada beberapa jenis nomor. Label yang lebih tepat mengurangi kebutuhan menebak tanpa harus selalu menjadi kalimat panjang.
Dasar kriteria
WCAG 2.4.6 meminta heading dan label menjelaskan topik atau tujuan. Kriteria ini menilai kejelasan penamaan, bukan hanya keberadaan tag heading. Struktur hierarki tetap penting, tetapi heading yang tersusun rapi masih dapat membingungkan jika semua judulnya terlalu umum.
Cara mengaudit
Baca hanya daftar heading, kemudian baca hanya label formulir. Tanyakan apakah alur halaman dan jenis data yang diminta masih dapat dipahami. Periksa istilah yang mirip, singkatan internal, dan judul yang tidak lagi cocok setelah isi bagian berubah pada pembaruan terakhir.
Intisari
Pilih kata yang membedakan topik atau tujuan setiap bagian dan kontrol.
Tinjau kembali label ketika isi, proses, atau jenis data yang diminta berubah.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Mengadakan tinjauan akhir yang berfokus pada pembelajaran proses
Penjelasan konsep · Website ·
Tinjauan akhir dapat membantu memperbaiki cara kerja berikutnya tanpa berubah menjadi pencarian pihak yang disalahkan. Gunakan kejadian dan bukti konkret untuk membahas apa yang berjalan baik serta bagian yang perlu diubah.
Tinjau kebutuhan yang terlambat jelas, revisi yang berulang, bahan yang sulit ditemukan, dan pengujian yang menemukan masalah penting. Bedakan akibat perubahan lingkup dari kesalahan pelaksanaan. Jangan menyimpulkan kemampuan seseorang hanya dari satu kejadian tanpa memahami konteks prosesnya.
Tindakan perbaikan
Pilih beberapa perubahan yang dapat dilakukan, seperti format komentar lebih jelas atau daftar aset yang lebih lengkap. Setiap tindakan mempunyai penanggung jawab dan cara mengecek hasil pada proyek berikutnya. Daftar panjang tanpa kepemilikan sering sulit diterjemahkan menjadi perubahan kerja yang nyata.
Penyimpanan hasil
Simpan ringkasan yang relevan tanpa menyebarkan rincian pribadi atau percakapan yang tidak diperlukan. Hubungkan pembelajaran ke template brief, daftar uji, atau panduan penyerahan. Tujuannya adalah membuat proses berikutnya lebih dapat ditelusuri, bukan sekadar menulis bahwa tim akan lebih teliti.
Intisari
Bahas kejadian dan proses yang dapat diperiksa, bukan penilaian pribadi yang tidak berdasar.
Ubah pembelajaran menjadi tindakan konkret dengan penanggung jawab serta pemeriksaan hasil.
Memilih posisi elemen tanpa merusak alur halaman
Penjelasan konsep · Website ·
Penempatan bebas dapat terlihat rapi pada satu ukuran layar tetapi mudah bertabrakan saat teks berubah. Position perlu dipilih berdasarkan perilaku elemen, bukan untuk menambal setiap jarak.
Properti position menentukan cara elemen ditempatkan dalam dokumen. Elemen absolute keluar dari alur normal, sementara relative mempertahankan ruang alurnya meskipun dapat digeser. Perbedaan ini memengaruhi apakah elemen lain menyediakan ruang bagi komponen tersebut.
Contoh ikon dalam tombol
Ikon kecil dapat diposisikan di dalam pembungkus yang sesuai, tetapi teks tombol tetap memerlukan ruang agar tidak tertimpa. Untuk susunan ikon dan label sederhana, Flexbox atau Grid sering lebih mudah mengikuti perubahan panjang teks daripada koordinat tetap.
Menguji perubahan isi
Ganti label dengan teks lebih panjang dan perbesar huruf. Periksa apakah elemen saling menutupi. Hindari mengatur seluruh halaman dengan absolute karena alur dokumen tidak lagi secara otomatis menyediakan ruang untuk isi yang bertambah atau membungkus ke baris berikutnya.
Intisari
Pahami apakah posisi yang dipilih mempertahankan ruang dalam alur normal.
Utamakan tata letak yang mengikuti isi untuk label dan komponen berulang.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Membedakan pengeluaran untuk penggunaan internal dan untuk pesanan
Penjelasan konsep · Usaha & Layanan ·
Barang dapat keluar untuk memenuhi pesanan atau dipakai dalam kegiatan internal. Keduanya mengurangi jumlah fisik, tetapi alasan serta hubungan dokumennya berbeda dan perlu dicatat agar laporan tidak mencampurkan tujuan penggunaan.
Sepuluh map diserahkan untuk pesanan, sedangkan lima map dipakai untuk pelatihan internal. Total pengeluaran fisik adalah 15 map. Namun, laporan pemenuhan pesanan hanya mencakup sepuluh map, sehingga seluruh pengeluaran tidak boleh otomatis disebut jumlah barang yang terjual atau diserahkan kepada pelanggan.
Jenis mutasi
Sediakan alasan pengeluaran yang jelas dan pihak yang menerima sesuai kebutuhan proses. Hindari kategori Lainnya tanpa keterangan ketika alasan sebenarnya diketahui. Hubungkan penggunaan internal ke kegiatan atau permintaan yang relevan agar penelusuran tidak bergantung pada ingatan petugas.
Pemeriksaan laporan
Pastikan ringkasan stok memakai seluruh pengeluaran yang sah, sementara ringkasan per tujuan menggunakan kelompok yang tepat. Perubahan label alasan tidak seharusnya mengurangi saldo sekali lagi. Pisahkan koreksi klasifikasi dari kejadian fisik baru agar hasil tetap konsisten.
Intisari
Catat alasan pengeluaran agar jumlah fisik tidak disalahartikan sebagai satu jenis kegiatan saja.
Bedakan koreksi klasifikasi dari transaksi baru yang benar-benar mengubah saldo.
Menilai mutu jawaban layanan dari ketepatan, bukan hanya kecepatannya
Penjelasan konsep · Usaha & Layanan ·
Kecepatan balasan merupakan satu aspek layanan, tetapi tidak menjelaskan apakah jawaban benar dan membantu pelanggan mengambil langkah berikutnya. Evaluasi sebaiknya memeriksa beberapa aspek yang memiliki arti jelas.
Nilai apakah jawaban sesuai pertanyaan, menggunakan data yang benar, menjaga batas kepastian, dan menjelaskan langkah berikutnya. Periksa juga apakah informasi pribadi yang tidak perlu telah dihindari. Jangan memberi nilai tinggi hanya karena pesan dikirim cepat tetapi mengandung harga atau status yang keliru.
Contoh evaluasi
Gunakan percakapan yang sudah disamarkan dan rubrik internal yang dijelaskan. Bedakan kesalahan data, jawaban tidak lengkap, dan masalah nada bahasa. Kategori ini membantu memilih perbaikan yang tepat tanpa menjadikan evaluasi sebagai penilaian umum terhadap pribadi petugas.
Penggunaan hasil
Tentukan tindakan perbaikan, seperti memperbarui templat atau memperjelas sumber informasi. Jika hanya sebagian percakapan diperiksa, sebutkan cakupan sampelnya. Hasil evaluasi tidak boleh dipresentasikan sebagai gambaran seluruh layanan apabila data yang digunakan belum mewakili cakupan tersebut.
Intisari
Periksa ketepatan, relevansi, kejelasan, dan perlindungan informasi bersama kecepatan balasan.
Gunakan hasil evaluasi untuk memperbaiki proses dengan cakupan yang dinyatakan jelas.
Menjelaskan ketidakpastian tanpa membuat seluruh informasi kabur
Penjelasan konsep · Pendidikan ·
Ketidakpastian perlu ditempatkan pada bagian yang memang belum diketahui. Menambahkan kata Mungkin pada semua kalimat dapat mengaburkan fakta yang sudah jelas, sedangkan menghilangkannya dari dugaan membuat tulisan terlalu pasti.
Jumlah berkas gagal dapat diketahui dari hasil uji, sementara penyebabnya belum dipastikan. Tulis angka hasil uji dengan cakupannya, lalu jelaskan beberapa kemungkinan penyebab sebagai dugaan. Jangan menggabungkan keduanya menjadi kalimat yang seolah membuktikan penyebab hanya karena kegagalan telah teramati.
Jenis keterbatasan
Bedakan data belum tersedia, sumber saling berbeda, pengukuran memiliki ketelitian terbatas, dan penafsiran yang belum diuji. Masing-masing membutuhkan penjelasan berbeda. Frasa Tidak Pasti saja belum memberi tahu pembaca bagian mana yang dapat digunakan dan bagian mana yang perlu menunggu bukti tambahan.
Tindak lanjut
Sebutkan informasi yang diperlukan untuk memperjelas keadaan bila relevan. Hindari janji bahwa semua ketidakpastian pasti dapat dihapus. Tulisan tetap dapat berguna dengan menunjukkan batas pengetahuan saat ini serta keputusan yang sebaiknya tidak diambil hanya dari informasi yang belum lengkap.
Intisari
Tempatkan ketidakpastian pada klaim yang memang belum didukung secara memadai.
Jelaskan jenis keterbatasan agar pembaca mengetahui bagian yang masih perlu diperiksa.
Memeriksa saldo negatif sebagai sinyal proses yang perlu ditelusuri
Penjelasan konsep · Usaha & Layanan ·
Saldo negatif pada catatan persediaan menunjukkan pengeluaran tercatat melebihi saldo yang tersedia menurut perhitungan. Kondisi itu perlu ditelusuri, tetapi angka negatif sendiri belum menjelaskan penyebab fisik atau administratifnya.
Saldo awal lima unit dan pengeluaran tercatat tujuh unit menghasilkan minus dua. Periksa apakah penerimaan belum dicatat, pengeluaran berulang, satuan salah, atau transaksi masuk pada urutan waktu berbeda. Jangan langsung menambah dua unit tanpa bukti hanya agar tampilan kembali nol.
Aturan proses
Tentukan apakah sistem menolak pengeluaran yang melampaui saldo atau mengizinkannya dengan status pengecualian untuk ditinjau. Pilihan tersebut harus jelas bagi petugas. Menyembunyikan angka negatif dari laporan tidak menyelesaikan penyebab dan dapat membuat ketidaksesuaian semakin sulit ditemukan.
Penyelesaian
Cocokkan dokumen serta keadaan fisik, kemudian lakukan koreksi yang memiliki dasar. Pisahkan perbaikan transaksi asal dari penyesuaian saldo. Simpan alasan dan persetujuan sesuai kewenangan internal agar saldo yang pulih dapat dijelaskan, bukan hanya terlihat lebih rapi setelah perubahan manual.
Intisari
Gunakan saldo negatif sebagai tanda penelusuran, bukan alasan mengarang penerimaan tambahan.
Koreksi berdasarkan bukti dan pertahankan jejak perubahan transaksi atau saldo.
Membuat daftar masalah terbuka yang tidak tercampur dengan tugas selesai
Penjelasan konsep · Usaha & Layanan ·
Daftar masalah terbuka membantu tim melihat kebutuhan yang masih harus ditangani. Daftar tersebut perlu membedakan keadaan nyata, bukan hanya menampilkan semua percakapan yang pernah masuk sebagai pekerjaan aktif.
Gunakan identitas laporan, ringkasan masalah, penanggung jawab, tindakan terakhir, dan langkah berikutnya. Pisahkan status menunggu informasi dari pekerjaan yang siap dijalankan. Jangan menghapus laporan hanya karena sudah ada balasan apabila tindakan yang disepakati belum selesai.
Pemeriksaan rutin
Tinjau laporan yang tidak memiliki pembaruan atau penanggung jawab jelas. Cari hambatan yang benar-benar tercatat, bukan menebak alasan keterlambatan. Jika laporan bergantung pada jawaban pelanggan, pastikan permintaan informasinya sudah dikirim dan memang diperlukan untuk melanjutkan proses.
Penutupan yang tepat
Pindahkan laporan ke selesai setelah hasilnya dapat dijelaskan sesuai proses layanan. Simpan ringkasan penutupan agar riwayat tetap tersedia. Daftar aktif sebaiknya menunjukkan pekerjaan yang masih membutuhkan perhatian, sedangkan arsip menyimpan kejadian terdahulu tanpa membebani tampilan pekerjaan harian.
Intisari
Pisahkan masalah terbuka, menunggu informasi, dan selesai berdasarkan keadaan nyata.
Pastikan setiap masalah aktif memiliki penanggung jawab serta langkah berikutnya.
Memisahkan istilah koleksi internal dari kategori asal produk
Penjelasan konsep · Parfum ·
Nama koleksi dapat dibuat untuk memudahkan penataan katalog, sedangkan asal produk merupakan informasi yang membutuhkan dasar tersendiri. Keduanya perlu dipisahkan agar nama pemasaran tidak terbaca sebagai fakta tentang tempat produksi.
Dokumentasikan apakah kategori menunjukkan merek, karakter aroma, rentang ukuran, atau koleksi pilihan toko. Nama seperti Koleksi Timur tidak dengan sendirinya membuktikan bahwa produk dibuat di wilayah tertentu. Jika asal produk dicantumkan, gunakan informasi yang sesuai label atau dokumen yang tersedia.
Tampilan publik
Berikan pengantar singkat untuk kategori yang berpotensi ambigu. Pembeli perlu memahami apakah mereka sedang melihat pengelompokan pemasaran atau spesifikasi barang. Jangan memindahkan produk ke kategori asal tertentu hanya karena bentuk kemasan atau nuansa aromanya dianggap cocok dengan nama kategori tersebut.
Pemeriksaan data
Cocokkan kategori pada kartu produk, halaman detail, dan filter pencarian. Simpan keterangan asal sebagai bidang terpisah bila tersedia. Dengan pemisahan ini, perubahan nama koleksi tidak otomatis mengubah klaim asal, identitas merek, atau informasi lain yang seharusnya tetap berdasarkan data produk.
Intisari
Jelaskan fungsi kategori dan pisahkan dari informasi asal barang.
Jangan menyimpulkan tempat produksi berdasarkan tema koleksi atau tampilan kemasan.
Menyeimbangkan baris judul dengan text-wrap
Penjelasan konsep · Website ·
Judul panjang dapat menghasilkan satu kata tersisa pada baris terakhir. Pengaturan pembungkusan dapat membantu komposisi, tetapi tidak menggantikan penyuntingan judul atau ruang yang memadai.
Text-wrap mengatur cara teks dibungkus dan menyediakan nilai yang dapat memperbaiki keseimbangan panjang baris. Nilai balance dapat dipertimbangkan untuk heading. Dukungan serta batas perilaku perlu diperiksa pada browser sasaran, terutama untuk nilai yang lebih baru.
Contoh judul layanan
Judul tiga baris dapat terlihat lebih seimbang ketika panjang baris dibagi ulang. Namun nama perusahaan harus tetap utuh secara makna. Jangan menyisipkan pemisah baris tetap pada setiap layar hanya untuk meniru satu tangkapan layar desktop yang dipilih sebagai contoh.
Menguji hasil alami
Periksa beberapa judul dengan panjang berbeda serta ukuran layar di antara breakpoint. Jika hasil tetap buruk, tinjau lebar kolom dan ukuran huruf. Hindari nowrap pada judul panjang karena mempertahankan satu baris dapat memaksa isi melewati batas layar kecil.
Intisari
Gunakan keseimbangan baris sebagai peningkatan, bukan pengganti ruang dan penyuntingan.
Uji judul berbeda tanpa mengunci pemisah baris untuk semua ukuran layar.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Mengikat gambar dan keterangannya dengan figure
Penjelasan konsep · Website ·
Gambar dan keterangannya sering perlu dipahami sebagai satu kesatuan. Pengelompokan yang tepat menjaga konteks ketika blok dipindahkan dalam tata letak atau dibaca berurutan.
Elemen figure mewakili konten mandiri yang dapat mempunyai keterangan melalui figcaption. Isinya tidak terbatas pada foto. Diagram atau potongan contoh juga dapat dikelompokkan ketika seluruh blok memang berfungsi sebagai satu unit penjelasan.
Contoh ilustrasi artikel
Sebuah diagram alur pemesanan ditempatkan bersama keterangan yang menjelaskan arah panah dan batas proses. Keterangan bukan hanya nama gambar. Bila diagram bersifat ilustratif, nyatakan konteksnya sehingga pengunjung tidak mengira ilustrasi itu sebagai bukti transaksi atau dokumentasi peristiwa nyata.
Memeriksa keterhubungan
Pindahkan blok ke tampilan satu kolom dan pastikan keterangannya tetap berada bersama gambar. Jangan menempatkan caption jauh di footer sehingga hubungan keduanya hilang. Figure juga tidak menghilangkan kebutuhan teks pengganti yang sesuai pada gambar di dalamnya.
Intisari
Kelompokkan visual dan keterangannya ketika keduanya membentuk satu unit.
Bedakan ilustrasi penjelas dari dokumentasi fakta atau peristiwa nyata.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Membedakan penguncian fokus modal dari jebakan keyboard
Penjelasan konsep · Website ·
Dialog aktif sering menahan perpindahan fokus agar pengguna tidak masuk ke halaman di belakangnya. Penahanan tersebut harus disertai jalan keluar yang dapat digunakan dengan keyboard.
Buka panel bantuan, lalu tekan Tab berulang kali. Jika fokus masuk ke komponen tetapi tidak dapat keluar atau menutupnya, pengguna menghadapi hambatan. Tombol tutup yang hanya muncul ketika tetikus diarahkan tidak menyelesaikan masalah bagi pengguna keyboard.
Batas perilaku
WCAG 2.1.2 melarang jebakan keyboard. Modal boleh mengatur fokus di dalam dirinya selama tersedia cara keluar yang berfungsi. Bila cara keluar tidak mengikuti pola keyboard yang umum, pengguna perlu memperoleh petunjuk mengenai cara tersebut.
Langkah koreksi
Sediakan tombol tutup yang memiliki nama jelas, uji urutan fokusnya, dan kembalikan fokus ke pemicu setelah dialog ditutup. Escape dapat menjadi tambahan yang berguna sesuai pola komponen. Ulangi pemeriksaan pada konten yang berubah, termasuk pesan kesalahan dan keadaan pemuatan.
Intisari
Fokus yang dibatasi sementara berbeda dari fokus yang tidak bisa dilepaskan.
Pastikan jalan keluar tetap tersedia ketika isi dialog bertambah atau berubah.
Sumber dan pemeriksaan
Dasar informasi: W3C WAI.
Tanggal pemeriksaan rujukan: .
Memisahkan perubahan isi dari perubahan lingkup pekerjaan
Penjelasan konsep · Website ·
Mengganti satu kalimat dan menambah satu modul baru mempunyai dampak berbeda. Pembedaan membantu pembahasan pekerjaan tetap jelas tanpa menganggap setiap permintaan sebagai perubahan kecil yang tidak memengaruhi bagian lain.
Memperbaiki ejaan pada halaman kontak adalah perubahan isi. Menambahkan sistem akun dengan pemulihan akses merupakan kemampuan baru yang memengaruhi data, keamanan, dan pengujian. Keduanya dapat dikerjakan, tetapi kebutuhan serta konsekuensinya tidak boleh disamakan hanya karena permintaannya ditulis dalam satu kalimat.
Catatan perubahan
Tuliskan alasan, bagian terdampak, keluaran tambahan, dan pengujian yang diperlukan. Bandingkan dengan lingkup yang telah disepakati. Hindari membuat janji waktu atau hasil sebelum ketergantungan yang relevan dipahami, terutama ketika melibatkan layanan di luar berkas website itu sendiri.
Keputusan
Minta persetujuan atas perubahan lingkup melalui alur yang diketahui kedua pihak. Simpan keputusan untuk memasukkan sekarang, menunda, atau tidak melanjutkan. Perubahan yang tidak disetujui tidak seharusnya diam-diam masuk ke paket sehingga menyulitkan penerimaan atau mengubah fungsi yang sebelumnya sudah sesuai.
Intisari
Nilai perubahan berdasarkan dampak dan keluaran, bukan panjang kalimat permintaannya.
Catat keputusan lingkup sebelum menambahkan kemampuan baru ke versi yang sedang diterima.
Menangani pertanyaan keaslian tanpa klaim yang melampaui bukti
Penjelasan konsep · Parfum ·
Pertanyaan tentang keaslian memerlukan jawaban yang sesuai dengan dokumen dan asal barang yang diketahui. Penjual sebaiknya tidak mengganti kebutuhan bukti dengan slogan atau perbandingan visual yang belum cukup untuk menyimpulkan identitas produk.
Periksa catatan pengadaan, identitas pemasok, dan informasi produk yang dapat dibagikan secara wajar. Jangan memublikasikan data pribadi atau rincian transaksi pihak lain hanya untuk memperkuat jawaban. Jelaskan jenis catatan yang tersedia tanpa menyebut pengujian atau verifikasi yang tidak pernah dilakukan.
Batas foto
Foto kemasan membantu membandingkan tampilan, tetapi kemiripan foto saja tidak menjelaskan seluruh riwayat barang. Jangan menyatakan bahwa satu ciri visual merupakan bukti tunggal untuk semua merek dan seri. Jika diperlukan pemeriksaan khusus, arahkan prosesnya kepada pihak yang berwenang atau memiliki kompetensi sesuai.
Jawaban pelanggan
Sampaikan apa yang diketahui, dasar informasinya, serta hal yang masih perlu diperiksa. Bila bukti belum cukup, jangan menambahkan jaminan mutlak. Catat pertanyaan agar informasi yang sama dapat diperbaiki pada katalog dan tidak dijawab berbeda oleh setiap petugas.
Intisari
Sesuaikan pernyataan keaslian dengan bukti yang benar-benar dimiliki.
Jangan menjadikan slogan atau kemiripan satu foto sebagai pengganti verifikasi.
Mencatat keluhan berdasarkan kejadian, bukan penilaian terhadap pelanggan
Penjelasan konsep · Usaha & Layanan ·
Catatan keluhan berguna ketika menjelaskan apa yang terjadi dan apa yang perlu diperiksa. Penilaian tentang kepribadian pelanggan tidak membantu membuktikan masalah dan dapat mengaburkan informasi yang diperlukan petugas berikutnya.
Tuliskan barang atau layanan terkait, waktu kejadian yang diketahui, masalah yang dilaporkan, serta bukti yang tersedia. Bedakan laporan pelanggan dari hasil pemeriksaan internal. Jika suatu bagian belum terkonfirmasi, tandai sebagai informasi yang perlu diperiksa, bukan langsung sebagai kesalahan salah satu pihak.
Bahasa netral
Gunakan kalimat Pelanggan melaporkan ukuran berbeda dari konfirmasi, bukan pelanggan cerewet. Catatan netral memudahkan tim membandingkan laporan dengan pesanan. Hindari menyalin rincian pribadi yang tidak berkaitan dengan penyelesaian masalah atau menyebarkan percakapan lebih luas dari kebutuhan layanan.
Tindak lanjut
Catat tindakan yang sudah dilakukan dan pertanyaan yang belum terjawab. Jangan menandai keluhan selesai hanya karena petugas sudah membalas pesan. Penyelesaian perlu mengikuti keadaan masalah serta kesepakatan yang tercatat, sehingga status mencerminkan proses nyata.
Intisari
Pisahkan laporan, bukti, dan hasil pemeriksaan dalam catatan keluhan.
Gunakan bahasa tentang kejadian, bukan label terhadap pribadi pelanggan.
Menjelaskan biaya tambahan sebelum pelanggan mengambil keputusan
Penjelasan konsep · Usaha & Layanan ·
Biaya tambahan perlu dijelaskan pada saat informasi tersebut relevan dengan pilihan pelanggan. Menyebutkannya setelah keputusan dibuat dapat menimbulkan perbedaan pemahaman tentang jumlah yang sebelumnya dianggap sudah mencakup seluruh layanan.
Pisahkan harga utama, pilihan tambahan, dan biaya yang bergantung pada kondisi tertentu. Gunakan angka yang sudah disetujui pengelola, bukan perkiraan petugas yang belum diperiksa. Jika suatu biaya belum dapat dihitung, jelaskan informasi yang diperlukan untuk menentukannya.
Pilihan pelanggan
Tunjukkan apakah tambahan bersifat pilihan atau bagian dari proses yang berlaku pada pesanan tersebut. Jangan memasukkan layanan opsional secara otomatis ke ringkasan tanpa pilihan yang jelas. Deskripsi manfaat perlu sesuai keluaran yang benar-benar diberikan, bukan sekadar nama paket yang terdengar lebih lengkap.
Konfirmasi total
Setelah rincian diketahui, tampilkan total dan komponen yang membentuknya. Pastikan angka yang sama muncul pada catatan pesanan serta pesan konfirmasi. Jika ada perubahan berikutnya, jelaskan perbedaannya dan ikuti proses persetujuan yang sesuai, bukan mengganti total secara diam-diam.
Intisari
Pisahkan harga utama, pilihan tambahan, dan biaya yang masih perlu dihitung.
Konfirmasikan komponen serta total sebelum menjalankan keputusan yang memengaruhi biaya.
Menentukan teks pengganti gambar sesuai fungsinya
Penjelasan konsep · Website ·
Teks pengganti bukan tempat menumpuk kata kunci. Isinya perlu membantu memahami informasi atau fungsi gambar ketika gambar tidak dapat dilihat oleh pembaca.
Elemen img menyematkan gambar, sedangkan alt menyediakan teks penggantinya. Deskripsi dipilih berdasarkan peran gambar dalam konteks halaman. Gambar produk yang memperlihatkan ciri penting membutuhkan penjelasan berbeda dari ornamen yang tidak membawa informasi tambahan.
Contoh foto produk
Untuk foto bagian belakang kemasan, jelaskan bahwa gambar menampilkan sisi belakang dan informasi yang relevan. Jangan menyalin seluruh nama file. Jika keterangan panjang sudah tersedia di dekat gambar, gunakan teks pengganti yang melengkapi konteks, bukan mengulang tanpa manfaat.
Pemeriksaan saat gambar hilang
Bayangkan halaman tanpa gambar, kemudian baca teks yang tersisa. Pastikan informasi penting masih dapat dipahami. Gambar dekoratif dapat menggunakan alt kosong agar tidak menambah gangguan, tetapi keputusan itu tidak tepat untuk diagram atau foto yang menjadi sumber informasi utama.
Intisari
Sesuaikan teks pengganti dengan fungsi gambar pada halaman tersebut.
Jangan menjadikan alt sebagai daftar kata kunci pemasaran.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Mencatat barang dipinjam tanpa menganggapnya hilang dari kepemilikan
Penjelasan konsep · Usaha & Layanan ·
Barang yang dipinjamkan berpindah penguasaan sementara menurut alur internal, tetapi statusnya berbeda dari barang yang habis digunakan. Catatan perlu menunjukkan lokasi atau penanggung jawab serta kewajiban pengembaliannya.
Tiga papan display dipinjam untuk kegiatan. Catat jumlah keluar, penerima, waktu, kondisi awal, dan rencana pengembalian. Jumlah tersedia di ruang penyimpanan berkurang, tetapi daftar aset yang sedang dipinjam tetap menunjukkan keberadaan ketiga unit tersebut di luar lokasi.
Pengembalian sebagian
Jika dua unit kembali, catat dua diterima dan satu masih dipinjam. Jangan menutup seluruh catatan hanya karena ada satu bukti pengembalian. Periksa identitas unit bila dilacak per benda agar unit yang kembali sesuai dengan unit yang sebelumnya diserahkan.
Penutupan
Tinjau kondisi akhir dan kelengkapan sebelum status tersedia dipulihkan. Pisahkan keterlambatan, kekurangan, dan kerusakan sebagai keadaan yang memerlukan tindak lanjut berbeda. Catatan yang jelas membantu merekonstruksi keberadaan barang tanpa langsung menganggap semua unit yang tidak berada di rak sebagai kehilangan.
Intisari
Pisahkan barang sedang dipinjam dari barang yang benar-benar habis atau dikeluarkan permanen.
Tutup catatan berdasarkan jumlah dan identitas yang kembali, bukan keberadaan satu dokumen saja.
Memberi ruang pada tujuan gulir melalui scroll-margin-top
Penjelasan konsep · Website ·
Judul yang dituju tautan bagian dapat tertutup header menempel. Ruang gulir pada target membantu menempatkan tujuan sehingga pembaca tetap dapat melihat awal pembahasan.
Scroll-margin-top menambahkan jarak bagian atas pada area gulir target. Properti ini tidak sama dengan margin tata letak biasa. Penggunaannya dapat membantu mengatur posisi akhir target ketika browser menggulir elemen ke area pandang.
Contoh daftar isi
Halaman dengan header setinggi sekitar 80 piksel dapat memberi ruang target yang lebih besar dari tinggi header, misalnya 96 piksel sebagai nilai uji. Angka tersebut bukan standar universal; sesuaikan dengan tinggi header yang benar-benar digunakan pada tiap ukuran layar.
Memeriksa tujuan sebenarnya
Aktifkan tautan daftar isi dari beberapa posisi gulir. Pastikan judul terlihat dan tidak terlalu jauh dari tepi atas. Uji pula ketika header berubah tinggi karena nama panjang atau pembesaran teks, sebab nilai yang cocok pada desktop dapat kurang sesuai di ponsel.
Intisari
Bedakan ruang target gulir dari margin yang mengubah alur tata letak.
Sesuaikan jarak dengan tinggi header nyata dan uji tautan bagian secara langsung.
Sumber dan pemeriksaan
Dasar informasi: MDN Web Docs.
Tanggal pemeriksaan rujukan: .
Hubungi PT DIRAC INOVASI NUSANTARABantuan layanan melalui WhatsApp atau email.
