Jangan Gunakan Atribut Placeholder

Diperkenalkan sebagai bagian dari spesifikasi HTML5, atribut placeholder “mewakili petunjuk singkat (kata atau frasa pendek) yang dimaksudkan untuk membantu pengguna dengan entri data ketika kontrol tidak memiliki nilai. Petunjuk bisa berupa nilai sampel atau deskripsi singkat tentang format yang diharapkan.”

Atribut yang tampaknya lugas ini mengandung sejumlah masalah mengejutkan yang mencegahnya memenuhi apa yang dijanjikannya. Mudah-mudahan, saya dapat meyakinkan Anda untuk berhenti menggunakannya.

Secara teknis Benar

Input adalah gerbang yang harus dilalui oleh hampir semua e-commerce. Terlepas dari perasaan Anda tentang tempat empati dalam desain, input yang tidak dapat digunakan meninggalkan uang di atas meja.

Kehadiran atribut placeholder tidak akan ditandai oleh perangkat lunak pemeriksaan aksesibilitas otomatis. Namun, ini tidak berarti itu dapat digunakan. Pada akhirnya, aksesibilitas adalah tentang orang, bukan standar, jadi penting untuk memikirkan antarmuka Anda lebih dari sekadar menjalankan daftar periksa.

Sebut saja remediasi, desain inklusif, akses universal, apa saja. Semangat dari semua filosofi ini bermuara pada membuat hal-hal yang dapat digunakan oleh semua orang—semua orang. Dilihat melalui lensa ini, placeholder tidak tahan.

Masalah

Terjemahan

Browser dengan fitur terjemahan otomatis seperti Chrome melewati atribut saat permintaan untuk menerjemahkan halaman saat ini dimulai. Untuk banyak atribut, ini adalah perilaku yang diinginkan, karena nilai yang diperbarui dapat merusak logika atau struktur halaman yang mendasarinya.

Salah satu atribut yang dilewati oleh browser adalah placeholder . Karena itu, konten placeholder tidak akan diterjemahkan dan akan tetap sebagai bahasa aslinya.

Jika seseorang meminta halaman untuk diterjemahkan, harapannya adalah semua konten halaman yang terlihat akan diperbarui. Placeholder sering digunakan untuk memberikan instruksi pemformatan input penting atau digunakan sebagai pengganti elemen label yang lebih tepat (lebih lanjut tentang itu sebentar lagi). Jika konten ini tidak diperbarui bersama dengan halaman terjemahan lainnya, ada kemungkinan besar bahwa orang yang tidak terbiasa dengan bahasa tersebut tidak akan berhasil memahami dan mengoperasikan input.

Ini harus menjadi alasan yang cukup untuk tidak menggunakan atribut.

Sementara kita berada di subjek terjemahan, perlu juga ditunjukkan bahwa lokasi tidak sama dengan preferensi bahasa. Banyak orang mengatur perangkat mereka untuk menggunakan bahasa yang bukan bahasa resmi negara yang dilaporkan oleh alamat IP browser mereka (belum lagi VPN), dan kita harus menghormatinya. Pastikan untuk membuat konten Anda dijelaskan secara semantik—tetangga Anda akan berterima kasih!

Interoperabilitas

Interoperabilitas adalah praktik membuat sistem yang berbeda bertukar dan memahami informasi. Ini adalah bagian mendasar dari Internet dan teknologi bantu.

Menggambarkan konten Anda secara semantik membuatnya dapat dioperasikan. input yang dapat dioperasikan dibuat dengan mengaitkan elemen label secara terprogram dengannya. Label menjelaskan tujuan dari bidang input, memberikan orang yang mengisi formulir dengan prompt yang dapat mereka ambil tindakan. Salah satu cara untuk mengaitkan label dengan input , adalah dengan menggunakan atribut for dengan nilai yang cocok dengan id input.

Tanpa pasangan for / id ini, teknologi bantu tidak akan dapat menentukan untuk apa input tersebut. Asosiasi terprogram menyediakan pengait API yang dapat digunakan oleh perangkat lunak seperti pembaca layar atau pengenalan suara. Tanpanya, orang yang mengandalkan perangkat lunak khusus ini tidak akan dapat membaca atau mengoperasikan input.

Alasan saya menyebutkan ini adalah bahwa placeholder seringkali digunakan sebagai pengganti elemen label . Meskipun saya secara pribadi bingung dengan praktiknya, tampaknya telah mendapatkan daya tarik di komunitas desain. Tebakan terbaik saya untuk popularitasnya adalah efek kisi geometris yang tepat yang diciptakannya ketika ditempatkan di sebelah bidang input tanpa label lainnya bertindak seperti catnip desainer.

Efek label mengambang, sepupu dekat dengan fenomena ini, seringkali juga menggunakan atribut placeholder sebagai pengganti label .

Hal menarik yang perlu ditunjukkan adalah bahwa jika label dikaitkan secara terprogram dengan input, mengklik atau mengetuk teks label akan menempatkan fokus pada input. Trik kecil ini memberikan area ekstra untuk berinteraksi dengan input, yang dapat bermanfaat bagi orang-orang dengan masalah kontrol motorik. Placeholder yang bertindak sebagai label, serta label mengambang, tidak dapat melakukannya.

Pengartian

Sensus Amerika Serikat 2016 mencantumkan hampir 15 juta orang yang melaporkan mengalami kesulitan kognitif — dan itu hanya menghitung individu yang memilih untuk melaporkan diri. Ekstrapolasi dari ini, kita dapat mengasumsikan bahwa masalah aksesibilitas kognitif mempengaruhi sejumlah besar populasi dunia.

Pelaporan diri layak disebut, karena seseorang mungkin tidak tahu, atau merasa nyaman berbagi bahwa mereka memiliki kondisi aksesibilitas kognitif. Sayangnya, masih banyak stigma yang melekat pada pengungkapan informasi semacam ini, karena seringkali mempengaruhi hal-hal seperti pekerjaan dan prospek perumahan.

Kognisi dapat dihambat secara situasional, artinya hal itu dapat terjadi pada Anda. Ini dapat dipengaruhi oleh hal-hal seperti multitasking, kurang tidur, stres, penyalahgunaan zat, dan depresi. Saya mungkin sedikit letih di sini, tetapi itu terdengar seperti kondisi yang akan Anda temukan di sebagian besar pekerjaan kantor.

Mengingat

Payung masalah kognitif mencakup kondisi seperti kehilangan memori jangka pendek, cedera otak traumatis, dan Attention Deficit Hyperactivity Disorder. Mereka semua dapat mempengaruhi kemampuan seseorang untuk mengingat informasi.

Ketika seseorang memasukkan informasi ke dalam input, konten placeholder-nya akan hilang. Satu-satunya cara untuk memulihkannya adalah dengan menghapus informasi yang dimasukkan. Ini menciptakan pengalaman di mana bahasa pemandu dihapus segera setelah orang yang mencoba mengisi input berinteraksi dengannya. Tidak hebat!

Ketika kemampuan Anda untuk mengingat informasi terhambat, itu membuat mengikuti aturan menghilang ini menjengkelkan. Untuk input dengan persyaratan rumit yang harus dipenuhi—misalnya membuat kata sandi baru—ini melampaui gangguan dan menjadi penghalang yang sulit untuk diatasi.

Sementara orang yang lebih mahir secara teknologi mungkin telah mempelajari trik pintar seperti memotong informasi yang dimasukkan, meninjau konten placeholder untuk menyegarkan ingatan mereka, lalu menempelkannya kembali untuk mengedit, orang yang kurang melek teknologi mungkin tidak mengerti mengapa konten bantuan itu menghilang atau bagaimana mengembalikannya.

Literasi Digital

Mempertimbangkan bahwa semakin banyak populasi dunia yang online, tanggung jawab ada pada kami sebagai desainer dan pengembang yang bertanggung jawab untuk membuat orang-orang ini merasa disambut. Sudut kecil Internet (atau intranet!) Anda bisa menjadi salah satu pengalaman pertama mereka online — dengan asumsi bahwa pengguna akhir "hanya akan tahu" adalah kesombongan yang sederhana.

Untuk pembaca yang berbasis di AS, pengingat lembut bahwa baru mungkin tidak berarti asing. Akses sedang meningkat untuk orang Amerika yang lebih tua. Sementara literasi digital akan menjadi lebih umum di antara populasi yang lebih tua seiring berjalannya waktu, masalah aksesibilitas juga akan terjadi.

Untuk seseorang yang belum pernah menemukannya sebelumnya, teks placeholder mungkin terlihat seperti konten yang dimasukkan, menyebabkan mereka melewatkan input. Jika ini adalah bidang wajib, pengiriman formulir akan membuat pengalaman yang membuat frustrasi di mana mereka mungkin tidak mengerti apa kesalahannya, atau bagaimana cara memperbaikinya. Jika itu bukan bidang wajib, formulir Anda masih menjalankan risiko yang tidak perlu karena gagal mengumpulkan informasi sekunder yang berpotensi berharga.

Kegunaan

Konten bantuan placeholder terbatas hanya pada string teks statis, dan itu mungkin tidak selalu cukup untuk mengomunikasikan pesan. Mungkin perlu memiliki gaya tambahan yang diterapkan padanya, atau berisi markup deskriptif, atribut, gambar, dan ikonografi.

Ini sangat berguna dalam sistem desain yang matang. Opsi gaya tambahan yang dibuat dengan memindahkan string teks dari elemen input berarti dapat memanfaatkan token desain sistem, dan semua manfaat yang menyertai penggunaannya.

Panjang teks placeholder juga terbatas pada lebar input yang dikandungnya. Di dunia kami yang responsif dan mengutamakan seluler, ada kemungkinan besar informasi penting dapat terpotong:

Penglihatan

Kontras Warna

Gaya default browser utama untuk konten placeholder menggunakan warna abu-abu terang untuk mengkomunikasikan secara visual bahwa itu adalah saran. Banyak desain input kustom mengikuti konvensi ini dengan mengambil warna konten input dan mencerahkannya.

Sayangnya, teknik ini kemungkinan akan bertabrakan dengan masalah kontras warna. Kontras warna adalah rasio yang ditentukan dengan membandingkan luminositas teks dan nilai warna latar belakang; dalam hal ini, ini adalah warna teks placeholder di atas latar belakang input.

Jika konten placeholder memiliki rasio kontras yang terlalu rendah untuk dilihat, itu berarti informasi penting untuk mengisi formulir dengan sukses mungkin tidak dapat dilihat oleh orang yang mengalami kondisi low vision. Untuk ukuran font input yang paling umum, rasionya adalah 4,5:1.

Seperti semua masalah aksesibilitas, kondisi low vision dapat bersifat permanen atau sementara, biologis atau lingkungan, atau kombinasi. Cacat biologis termasuk kondisi seperti rabun jauh, buta warna, pupil melebar, dan katarak. Kondisi lingkungan termasuk keadaan seperti silau matahari tengah hari, pengaturan kecerahan rendah yang hemat baterai, layar privasi, minyak dan riasan yang tertinggal di layar Anda oleh panggilan telepon terakhir Anda, dan sebagainya.

Rasio ini bukan preferensi estetika pribadi yang saya coba paksakan ke orang lain secara sewenang-wenang. Ini adalah bagian dari seperangkat aturan yang dikembangkan dengan susah payah yang membantu memastikan bahwa sebagian besar orang dapat mengoperasikan teknologi digital, terlepas dari kemampuan atau keadaan mereka. Mengabaikan aturan-aturan ini secara sadar berarti terlibat dalam praktik eksklusi.

Dan inilah intinya: Dalam mencoba membuat atribut placeholder inklusif, warna konten placeholder kontras yang lebih tinggi yang diperbarui mungkin menjadi cukup gelap untuk ditafsirkan sebagai input yang dimasukkan, bahkan oleh orang yang lebih melek digital. Ini mengayunkan masalah kembali ke ranah kognitif.

Mode Kontras Tinggi

Sistem operasi Windows berisi fitur yang disebut Mode Kontras Tinggi. Saat diaktifkan, ini memberikan warna baru ke elemen antarmuka dari palet kontras tinggi khusus yang menggunakan pilihan warna dalam jumlah terbatas. Berikut ini contoh tampilannya:

Dalam Mode Kontras Tinggi, konten placeholder diberi salah satu warna kontras tinggi tersebut, membuatnya tampak seperti informasi yang telah diisi sebelumnya. Seperti dibahas sebelumnya, ini dapat mencegah orang memahami bahwa input mungkin memerlukan informasi yang dimasukkan ke dalamnya.

Anda mungkin bertanya-tanya apakah mungkin untuk memperbarui gaya dalam Mode Kontras Tinggi untuk membuat placeholder lebih mudah dipahami. Meskipun dimungkinkan untuk menargetkan Mode Kontras Tinggi dalam kueri media, saya mohon Anda untuk tidak melakukannya. Pengembang front-end Kitty Giraudel mengatakan yang terbaik:

“Mode kontras tinggi bukan lagi tentang desain tetapi kegunaan yang ketat. Anda harus bertujuan untuk keterbacaan tertinggi, bukan estetika warna. ”

Orang-orang yang mengandalkan Mode Kontras Tinggi menggunakannya karena mudah ditebak. Mengubah cara penyajian konten secara berlebihan dapat mengganggu satu-satunya cara mereka dapat menggunakan komputer dengan andal. Dalam hal mencerahkan warna konten placeholder agar tampak seperti perlakuan Mode Kontras non-Tinggi, Anda menghadapi risiko yang sangat nyata sehingga tidak mungkin mereka lihat.

Sebuah solusi

Untuk rekap, atribut placeholder:

• Tidak dapat diterjemahkan secara otomatis;
• Sering digunakan sebagai pengganti label, mengunci teknologi bantu;
• Dapat menyembunyikan informasi penting saat konten dimasukkan;
• Warnanya bisa terlalu terang untuk dibaca;
• Memiliki pilihan gaya terbatas;
• Mungkin terlihat seperti informasi yang telah diisi sebelumnya dan dapat dilewati.

Eesh. Itu tidak bagus. Jadi apa yang bisa kita lakukan?

Desain

Pindahkan konten placeholder di atas input, tetapi di bawah label:

Pendekatan ini:

• Mengkomunikasikan hierarki visual dan struktural:
  • Untuk apa masukan ini,
  • Hal-hal yang perlu Anda ketahui untuk menggunakan input dengan sukses, dan
  • masukan itu sendiri.
• Dapat diterjemahkan.
• Tidak akan terlihat seperti informasi yang sudah diisi sebelumnya.
• Dapat dilihat pada keadaan low vision.
• Tidak akan hilang ketika konten dimasukkan ke dalam input.
• Dapat menyertakan markup semantik dan ditata melalui CSS.

Selain itu, konten bantuan akan tetap terlihat saat input diaktifkan pada perangkat dengan keyboard perangkat lunak. Jika ditempatkan di bawah input, konten mungkin dikaburkan saat keyboard di layar muncul di bagian bawah area pandang perangkat:

Perkembangan

Berikut cara menerjemahkan contoh rancangan kami ke kode:

 <div class="input-wrapper"> <label for="employee-id"> Your employee ID number </label> <p class="input-hint"> Can be found on your employee intranet profile. Example: <samp>a1234567-89</samp>. </p> <input name="id-number" type="text" /> </div>

Ini tidak terlalu jauh dari pasangan atribut tradisional yang dapat diakses for / id : Elemen label secara terprogram dikaitkan dengan input melalui deklarasi id "id karyawan". Elemen p yang ditempatkan di antara label dan elemen input bertindak sebagai pengganti atribut placeholder .

"Jadi," Anda mungkin bertanya-tanya. “Mengapa kita tidak meletakkan semua konten pengganti placeholder itu di elemen label ? Sepertinya itu akan menjadi jauh lebih sedikit pekerjaan! ” Jawabannya adalah kenyamanan pengembang tidak harus diprioritaskan daripada pengalaman pengguna.

Dengan menggunakan aria-describedby untuk mengaitkan input dengan elemen p secara terprogram, kami membuat prioritas informasi untuk pembaca layar yang memiliki kesamaan dengan apa yang akan dialami seseorang yang menjelajah tanpa pembaca layar. aria-describedby memastikan bahwa konten p akan dijelaskan terakhir, setelah konten label dan jenis input yang terkait dengannya.

Dengan kata lain, ini adalah konten yang diminta oleh input, jenis input apa, lalu bantuan tambahan jika Anda membutuhkannya — persis seperti yang akan dialami seseorang jika mereka melihat input formulir.

Pengalaman pengguna mencakup semua pengguna, termasuk mereka yang bernavigasi dengan bantuan pembaca layar. Konten bantuan mandiri dan mudah dinavigasi ke dan dari, jika orang yang menggunakan pembaca layar perlu merujuk ulang. Karena merupakan simpul mandiri, ia juga dapat dibungkam (biasanya dengan tombol Kontrol) tanpa risiko mematikan informasi penting lainnya.

Menyertakan konten bantuan sebagai bagian dari label membuatnya tidak perlu bertele-tele. label s harus bermakna, tetapi juga ringkas. Menambahkan terlalu banyak informasi ke label mungkin memiliki kebalikan dari efek yang diinginkan, membuatnya terlalu lama untuk diingat atau terlalu membuat frustrasi untuk mendengarkan sampai selesai. Sebenarnya, Pedoman Aksesibilitas Konten Web memiliki aturan yang secara khusus membahas hal ini: Kriteria Sukses 2.4.6 dan 3.3.2.

Contoh

Berikut adalah solusi yang diterapkan dalam kode langsung:

Lihat Pena Jangan gunakan atribut placeholder oleh Eric Bailey (@ericwbailey) di CodePen.

Dan inilah video yang menunjukkan bagaimana pembaca layar populer menanganinya:

Solusi yang Lebih Baik

“Semakin sedikit antarmuka yang dibutuhkan penggunanya, semakin mudah diakses.”

— Alice Boxhall

Sebuah pemikiran terakhir: Apakah Anda membutuhkan informasi placeholder tambahan itu?

Solusi front-end yang baik memanfaatkan atribut input khusus dan mengakomodasi praktik validasi untuk mencegah beban kerja ekstra ke orang yang hanya ingin menggunakan situs atau aplikasi Anda dengan komplikasi sesedikit mungkin.

Copywriting yang baik menciptakan label yang secara jelas dan ringkas menggambarkan tujuan input. Lakukan pekerjaan yang cukup baik di sini dan label akan memotong ambiguitas, terutama jika Anda mengujinya sebelumnya.

Pengalaman pengguna yang baik adalah tentang menciptakan arus cerdas yang mendahului kebutuhan, keinginan, dan keinginan orang dengan memanfaatkan informasi yang ada untuk menghilangkan sebanyak mungkin pertanyaan yang tidak perlu.

Mengakomodasi orang-orang yang menggunakan situs web atau aplikasi web Anda berarti memperhatikan secara kritis apa yang Anda anggap remeh saat menjelajah Internet. Dengan tidak membuat asumsi tentang keadaan orang lain — termasuk teknologi yang mereka gunakan — Anda dapat melakukan bagian Anda untuk membantu mencegah pengecualian.

Luangkan waktu untuk meninjau desain dan kode Anda dan lihat apa yang tidak sesuai dengan pengawasan — memeriksa untuk melihat apakah Anda menggunakan atribut placeholder mungkin merupakan tempat yang baik untuk memulai.

Berdiri di atas bahu raksasa. Terima kasih kepada Roger Johansson, Adam Silver, Scott O'Hara, dan Katie Sherwin atas tulisan mereka tentang masalah ini.