Form Alanlarında Placeholder: Nerede Durur, Nerede Zarar Verir
Placeholder'ın zararlı olduğu artık bir klişe, klişe olduğu için de sorgulanmadan tekrarlanıyor. Oysa sorun metnin kendisinde değil, ona yüklenen işte: etiketin yerine geçtiği anda form kullanıcının kısa süreli belleğine borçlanıyor. Bu yazı placeholder'ın nerede durması gerektiğini, kontrast tavsiyesinin kendi içindeki çelişkiyi ve floating label'ın neyi çözüp neyi çözmediğini ele alıyor.
Sorun metin değil, kaybolması
Placeholder tek başına kötü bir bileşen değil. Format örneği vermek için iyi çalışır: GG/AA/YYYY, +90 5XX XXX XX XX. Kötü çalıştığı tek durum var, o da her yerde karşımıza çıkan durum: etiketi silip yerine placeholder koymak.
Bunun bedeli yazmaya başlandığı anda ödeniyor. Kullanıcı alanın ne istediğini artık ekranda göremiyor, hatırlıyor. Formu göndermeden önce gözden geçirirken de aynı sorun ikinci kez çıkıyor: dolu alanların hangisinin ne olduğunu ancak içeriğinden tahmin edebiliyor, telefonla vergi numarası gibi ikisi de rakam olan alanlarda tahmin de tutmuyor.
İkinci bedel daha sinsi. İçinde metin olan alan, göz taramasında dolu görünüyor. Uzun bir formda kullanıcının atladığı alanlar genelde placeholder'lı olanlar oluyor, çünkü boşluk aramaya programlanmış bir gözün orada duracak bir nedeni yok.
Kontrast tavsiyesi kendi kendini yiyor
Erişilebilirlik rehberlerinin çoğu iki tavsiyeyi yan yana veriyor ve bu ikisi birbiriyle çelişiyor. Birincisi: placeholder rengi soluk gri kalmasın, zeminle yeterli kontrastı olsun. İkincisi: içinde metin olan alan dolu sanılıyor, dikkat edin. Kontrastı yükselttiğinizde metin gerçekten okunur hale geliyor, ama tam da bu yüzden girilmiş bir değere benziyor. Yani birinci sorunu çözen hamle ikincisini büyütüyor.
Çıkış yolu ortada bir renk aramak değil. Alanın üstünde kalıcı bir etiket, gerekiyorsa altında kalıcı bir yardım metni koyduğunuzda placeholder'a yüklenen iş kalmıyor; solukluğu da artık kimseyi bilgiden mahrum bırakmıyor, çünkü orada taşınan tek şey bir biçim örneği.
Ekran okuyucu tarafında da placeholder'a güvenmek zemin kaybettiriyor. Etiket yoksa bazı tarayıcı ve ekran okuyucu bileşimleri placeholder metnini erişilebilir ad olarak okuyor, bazıları okumuyor. Davranışın kombinasyona göre değiştiği bir yere formun anlaşılabilirliğini bağlamanın gerekçesi yok.
Floating label nereye kadar
Yüzen etiket, alan odaklandığında küçülüp kutunun üstüne kayan desen. Yerden kazandırıyor ve etiketi ekranda tutuyor, bu yüzden yalnızca placeholder kullanan bir formdan daha güvenilir buluyorum. Kutunun üstünde sabit duran klasik etiketten daha iyi bulmuyorum, üç nedenle: etiket küçüldüğünde tipik olarak 11-12 piksele iniyor ve zaten ikincil renkte, yani en çok ihtiyaç duyulduğu anda en zor okunan öğe oluyor; yardımcı açıklamaya yer bırakmıyor; tarayıcı otomatik doldurması alanı odak olayı tetiklemeden doldurduğunda etiket yerinde kalıp değerin üstüne biniyor.
Mobilde yer gerçekten darsa yüzen etiket makul bir ödün. Masaüstünde bir form için o ödünü vermenin karşılığı yok.
Alanın kodda hali
Buradaki tartışmanın tamamı üç öznitelikle çözülüyor, üçüncü parti bir bileşene gerek yok:
<label for="eposta">E-posta adresi</label> <input id="eposta" name="eposta" type="email" autocomplete="email" placeholder="ornek@site.com" aria-describedby="eposta-not"> <p id="eposta-not">Siparis bilgileri bu adrese gonderilir.</p>label for etiketi kalıcı ve tıklanabilir yapıyor, tıklama alanını da büyütüyor. aria-describedby ile bağlanan açıklama, odaklanınca ekran okuyucuda etiketin ardından okunuyor ve yazmaya başlayınca kaybolmuyor. autocomplete ise otomatik doldurmanın asıl sinyali; tarayıcının alanı tanıması için placeholder metnine güvenmek bunun yerine geçmiyor.
Pratikte ne kalıyor
Placeholder'ı bir biçim örneği olarak bırakın, talimatı asla oraya koymayın. Zorunlu alan uyarısı, karakter sınırı, hangi belgedeki numaranın istendiği: bunların hepsi alanın dışında ve kalıcı olmalı. Formunuzda bir alanın etiketini silmek istiyorsanız, kendinize şunu sorun: kullanıcı bu alanı doldurduktan sonra geri dönüp kontrol etmek isterse ne görecek. Cevap "kendi yazdığı metin ve başka bir şey değil" ise etiketi yerinde bırakın.