Mobil formda doğru klavye: type, inputmode ve autocomplete

Kısaca

Mobil formda kullanıcı her alana dokunduğunda bir klavye açılır. Hangi klavyenin açılacağına tarayıcı karar verir. Siz ona input'un öznitelikleriyle ipucu verirsiniz.

Yanlış klavye küçük bir sorun gibi görünür. Ama formda kaç alan varsa o kadar tekrar eder. Genel form kurallarını form tasarımı sayfasında anlattım. Bu sayfa yalnızca klavyeyle ilgili.

Dört öznitelik, dört ayrı iş

Bu dört öznitelik sık karıştırılır, oysa her biri ayrı bir şeyi ayarlar.

• type verinin ne olduğunu söyler. MDN'e göre email ve url türleri gönderimden önce biçimi kontrol eder, tel etmez, çünkü telefon numarası biçimleri ülkeden ülkeye çok değişir.
• inputmode yalnızca klavyeyi seçer. MDN açıkça yazar: bu öznitelik hiçbir geçerlilik kuralı koymaz. Varsayılan değeri text.
• autocomplete tarayıcıya alanın amacını söyler. Tarayıcı kayıtlı e-postayı ya da posta kodunu buna bakarak önerir.
• enterkeyhint klavyedeki Enter tuşunun etiketini seçer. Yazılmazsa tarayıcı inputmode, type ya da pattern özniteliğine bakarak bir etiket seçebilir.

MDN'deki inputmode değerleri sekiz tane. Açıklamaları kısaltarak Türkçeye çevirdim:

MDN, tel, email, url ve search değerleri için aynı uyarıyı yapar. Alan o veriyi gerçekten istiyorsa eşleşen type değerini kullanın.

enterkeyhint için MDN yedi değer sayar: enter, done, go, next, previous, search ve send. Ben formun ortasındaki alanlarda next, son alanda done ya da send kullanırım.

Alan türü seçici

Aşağıdaki altı alanın her biri gerçek bir input. Sayfayı telefonda açıp alana dokunursanız klavyenin değiştiğini görürsünüz. Kötü örneğe geçince input'un öznitelikleri de değişir.

Sık gördüğüm bir hata da IBAN ve kimlik numarasında type="number" kullanmak. Rakam klavyesi açılsın diye seçilir ama yanında istenmeyen davranışlar da gelir. Bunları aşağıda anlattım.

Türkiye'ye özgü alanlar

MDN değerleri tanımlar ama Türkiye'deki alanlar için hangisini seçeceğinizi söylemez. Aşağıdaki tablo benim önerim: alanların biçimi kaynaklı, öznitelik seçimi bana ait.

Telefon. Türkiye'nin ülke kodu 90. Yurt içinde cep numarası 0 ile başlar, 5 ile başlayan üç haneli bir önek ve yedi haneli abone numarasıyla devam eder. Kullanıcı bunu "0532 123 45 67" diye de, "5321234567" diye de yazar. İkisini de kabul edin.

MDN'e göre tel-national ülke kodu olmayan ama ülke içi öneki içeren numaradır. 0 ile başlayan yazım buna uyar. Uluslararası numara da alıyorsanız tel kullanın: MDN onu ülke kodunu içeren tam numara diye tanımlar.

T.C. kimlik numarası. 11 hanedir ve son rakamı çifttir. MDN'in autocomplete listesinde kimlik numarası için bir değer yok. Rakam klavyesi için inputmode="numeric" yeterli.

IBAN. Türkiye'de 26 karakterdir ve TR ile başlar. Wikipedia'daki tabloya göre son 16 karakter harf de içerebilir. Bu yüzden rakam klavyesi seçmiyorum.

IBAN geleneksel olarak dörtlü gruplarla yazılır, elektronik aktarımda boşluklar atılır. Form kullanıcıya grup grup yazma izni vermeli.

Posta kodu. Beş hanedir ve ilk iki hane ilin plaka kodudur. Plaka kodu iki haneli yazıldığı için, kodu 10'dan küçük illerde posta kodu 0 ile başlar ve bu 0 kaybolmamalı. MDN de posta kodunu type="number" için uygun olmayan değerler arasında sayar.

MDN'e göre pattern değerin tamamıyla eşleşmeli. Biçimi alanın yanında görünür bir yazıyla da anlatın. MDN bunu erişilebilirlik için zorunlu sayar.

type="number" tuzağı

MDN'e göre number türü yalnızca artırılıp azaltılan sayılar içindir. Sadece rakamdan oluşan ama gerçekte sayı olmayan değerler için uygun değildir. MDN'in örnekleri posta kodu ve kart numarası.

Aynı sayfa iki risk sayar. Kullanıcı başka bir şey yapmaya çalışırken sayıyı yanlışlıkla artırabilir. Sayı olmayan bir şey yazdığında da neyi yanlış yaptığını açıkça göremez.

MDN'in önerdiği yol, type="text" yanında inputmode="numeric" ve bir pattern kullanmak. Bir not daha: pattern özniteliği number türünde çalışmaz.

Tutarda numeric değil decimal seçin. numeric yalnızca 0-9 ister ve kuruş için virgül tuşu çıkmayabilir. decimal kullanıcının diline göre ondalık ayırıcıyı da gösterir.

Benim notum

Audit'lerde formlara telefonla da bakarım ve klavyeyi ayrı bir madde olarak not ederim. En sık bulduğum şey, her alanın aynı harf klavyesini açması. Geliştirici çoğu zaman type="text" yazıp geçmiştir.

İkinci sık hata, kayıt formunda e-posta ve telefon alanlarına autocomplete="off" yazmak. MDN'e göre off, tarayıcının değeri doldurmasına izin vermez ve kullanıcı her şeyi elle yazar. Ben bu değeri yalnızca kimlik numarası ve IBAN gibi tarayıcının zaten bilmediği alanlarda kullanırım.

Klavye doğru olunca bir sorun daha görünür: açılan klavye ekranın bir bölümünü kaplar. Alanların ve butonların rahat dokunulabilir büyüklükte kalması için dokunma alanı sayfasına bakın. Hata mesajlarının ne zaman çıkacağını satır içi doğrulama sayfasında anlattım.

Erişilebilirlik notu

WCAG 2.2'deki 1.3.5 Girdi amacını belirleme ölçütü AA düzeyindedir. Kullanıcı hakkında bilgi toplayan alanın amacı, standardın listelediği girdi amaçlarından biriyse programla belirlenebilmelidir. W3C'nin yeterli teknikleri arasında HTML autocomplete özniteliği var.

W3C otomatik doldurmayı hafıza sorunu ya da disleksi yaşayan kullanıcılar için önemli bir kolaylık sayar, motor engeli olan kullanıcı da daha az yazar. Doğru klavyeyi ben de aynı işin parçası görürüm. Ölçütlerin tamamını WCAG rehberinde anlattım.

autocapitalize fiziksel klavyede bir şey değiştirmez, sanal klavye ve sesle yazma gibi yöntemleri etkiler. MDN'e göre email, url ve password türlerinde harfler zaten büyütülmez. Bu yüzden e-posta alanına autocapitalize yazmanıza gerek yok.

Kontrol listesi

Bir formu yayına almadan önce telefonda her alana tek tek dokunur ve bu listeden geçerim.

• Telefon alanında type="tel" var ve telefon tuş takımı açılıyor.
• E-posta alanında type="email" var ve e-posta klavyesi açılıyor.
• Kimlik, posta kodu ve kart numarası alanlarında type="number" yok.
• Tutar alanında ondalık ayırıcı klavyede görünüyor.
• Kişisel bilgi alanlarında doğru autocomplete değeri var.
• pattern kullanan alanın yanında biçim yazıyla anlatılıyor.
• Son alanda Enter tuşu formu bitirmeye uygun bir etiket taşıyor.

Bu kontrolü benim yapmamı isterseniz UX Audit mobil maddeleri de kapsıyor. Kendiniz bakacaksanız UX audit kontrol listesi ile başlayın.