Yer Tutucu Özelliğini Kullanmayın

HTML5 belirtiminin bir parçası olarak tanıtılan yer tutucu özniteliği, "kontrolün değeri olmadığında kullanıcıya veri girişinde yardımcı olmayı amaçlayan kısa bir ipucunu (kelime veya kısa tümce) temsil eder. Bir ipucu, örnek bir değer veya beklenen formatın kısa bir açıklaması olabilir.”

Bu görünüşte basit nitelik, vaat ettiklerini yerine getirmesini engelleyen şaşırtıcı miktarda sorun içeriyor. Umarım sizi kullanmayı bırakmaya ikna edebilirim.

teknik olarak doğru

Girdiler, neredeyse tüm e-ticaretin geçmesi gereken kapılardır. Empatinin tasarımdaki yerine ilişkin duygularınız ne olursa olsun, kullanılmayan girdiler parayı masada bırakır.

Bir yer tutucu özelliğinin varlığı, otomatik erişilebilirlik kontrol yazılımı tarafından işaretlenmez. Ancak bu mutlaka kullanılabilir olduğu anlamına gelmez. Sonuç olarak, erişilebilirlik standartlarla değil insanlarla ilgilidir, bu nedenle arayüzünüz hakkında bir kontrol listesi oluşturmanın ötesinde düşünmek önemlidir.

Buna iyileştirme, kapsayıcı tasarım, evrensel erişim, ne olursa olsun diyelim. Tüm bu felsefelerin özü, insanların -tüm insanların- kullanabileceği şeyler yapmaktır. Bu mercekten bakıldığında, placeholder basitçe tutmaz.

Problemler

Tercüme

Geçerli sayfayı çevirmek için bir istek başlatıldığında, Chrome gibi otomatik çeviri özelliklerine sahip tarayıcılar öznitelikleri atlar. Güncellenen bir değer, temeldeki sayfa mantığını veya yapısını bozabileceğinden, pek çok öznitelik için bu istenen davranıştır.

Tarayıcılar tarafından atlanan özelliklerden biri placeholder . Bu nedenle, placeholder içerik çevrilmeyecek ve orijinal olarak yazılan dil olarak kalacaktır.

Bir kişi çevrilecek bir sayfa talep ediyorsa, beklenti, görünen tüm sayfa içeriğinin güncellenmesidir. Yer tutucular sıklıkla önemli girdi biçimlendirme talimatları sağlamak için kullanılır veya daha uygun bir label öğesinin yerine kullanılır (bundan biraz daha fazlası). Bu içerik, çevrilen sayfanın geri kalanıyla birlikte güncellenmezse, dile aşina olmayan bir kişinin girişi başarıyla anlaması ve çalıştıramaması olasılığı yüksektir.

Bu, niteliği kullanmamak için yeterli bir neden olmalıdır.

Çeviri konusuna gelmişken, konumun dil tercihiyle aynı şey olmadığını da belirtmekte fayda var. Birçok kişi, cihazlarını, tarayıcılarının IP adresi tarafından bildirilen ülkenin resmi dili olmayan bir dili kullanacak şekilde ayarlar (VPN'lerden bahsetmemek gerekirse) ve buna saygı göstermeliyiz. İçeriğinizi anlamsal olarak açıkladığınızdan emin olun; komşularınız size teşekkür edecek!

birlikte çalışabilirlik

Birlikte çalışabilirlik, farklı sistemlerin bilgi alışverişi yapma ve bilgileri anlama uygulamasıdır. Hem internetin hem de yardımcı teknolojinin temel bir parçasıdır.

İçeriğinizi anlamsal olarak açıklamak, onu birlikte çalışabilir hale getirir. Birlikte çalışabilir bir input , bir label öğesini programlı olarak onunla ilişkilendirerek oluşturulur. Etiketler, bir giriş alanının amacını açıklar ve formu dolduran kişiye işlem yapabilecekleri bir bilgi istemi sağlar. Bir label input ile ilişkilendirmenin bir yolu, for niteliğini girdinin id eşleşen bir değerle kullanmaktır.

Bu / id eşleştirmesi olmadan for yardımcı teknoloji girdinin ne için olduğunu belirleyemez. Programlı ilişkilendirme, ekran okuyucular veya ses tanıma gibi yazılımların kullanabileceği bir API kancası sağlar. Onsuz, bu özel yazılıma güvenen kişiler girdileri okuyamaz veya çalıştıramaz.

Bundan bahsetmemin nedeni, placeholder çoğu zaman bir label öğesi yerine kullanılmasıdır. Uygulama beni kişisel olarak şaşırtsa da, tasarım camiasında ilgi görmüş gibi görünüyor. Popülaritesi için en iyi tahminim, diğer etiketsiz girdi alanlarının yanına yerleştirildiğinde tasarımcı kedi nanesi gibi davrandığında oluşturduğu geometrik olarak kesin ızgara efektidir.

Bu fenomenin yakın bir kuzeni olan kayan etiket etkisi, çoğu zaman bir label yerine yer tutucu niteliğini de kullanır.

Bir etiket programlı olarak bir girdiyle ilişkilendirilmişse, etiket metnine tıklamak veya dokunmak odağı girdiye yerleştirecektir. Bu küçük numara, motor kontrol sorunları olan kişiler için faydalı olabilecek girdi ile etkileşim için fazladan bir alan sağlar. Etiket görevi gören yer tutucular ve kayan etiketler bunu yapamaz.

Biliş

2016 Amerika Birleşik Devletleri Nüfus Sayımı, bilişsel zorluk yaşadığını bildiren yaklaşık 15 milyon insanı listeliyor - ve bu yalnızca kendi kendini bildirmeyi seçen bireyleri sayıyor. Bundan çıkarım yaparak, bilişsel erişilebilirlik endişelerinin dünya nüfusunun önemli bir miktarını etkilediğini varsayabiliriz.

Bir kişinin bilişsel erişilebilirlik koşuluna sahip olduğunu bilmeyebileceği veya bunu rahatça paylaşabileceği için, kendi kendine bildirimde bulunmaya değer. Ne yazık ki, çoğu zaman iş ve konut beklentileri gibi şeyleri etkilediğinden, bu tür bilgilerin ifşa edilmesiyle ilgili hala birçok damga var.

Biliş, durumsal olarak engellenebilir, yani başınıza çok iyi gelebilir. Çoklu görev, uyku yoksunluğu, stres, madde bağımlılığı ve depresyon gibi şeylerden etkilenebilir. Burada biraz yorgun olabilirim ama bu, çoğu ofis işinde bulacağınız koşullara çok benziyor.

Hatırlamak

Bilişsel kaygılar şemsiyesi, kısa süreli hafıza kaybı, travmatik beyin hasarı ve Dikkat Eksikliği Hiperaktivite Bozukluğu gibi durumları kapsar. Hepsi bir kişinin bilgiyi hatırlama yeteneğini etkileyebilir.

Bir kişi bir girdiye bilgi girdiğinde, yer tutucu içeriği kaybolacaktır. Geri yüklemenin tek yolu, girilen bilgileri kaldırmaktır. Bu, girdiyi doldurmaya çalışan kişi onunla etkileşime girer girmez kılavuz dilin kaldırıldığı bir deneyim yaratır. Harika değil!

Bilgiyi hatırlama yeteneğiniz engellendiğinde, bu kaybolan kurallara uymanız can sıkıcı hale gelir. Karmaşık gereksinimleri olan girdiler için (örneğin yeni bir parola oluşturmak) sıkıntıyı aşar ve aşılması zor bir engel haline gelir.

Teknolojik açıdan daha gelişmiş kişiler, girilen bilgileri kesmek, belleklerini yenilemek için yer tutucu içeriği gözden geçirmek ve ardından düzenlemek için yeniden yapıştırmak gibi akıllıca hileler öğrenmiş olsa da, teknoloji okuryazarlığı daha az olan kişiler, yardım içeriğinin neden olduğunu anlayamayabilir. kaybolması veya nasıl geri getirileceği.

Dijital okuryazarlık

Dünya nüfusunun gitgide daha fazla çevrimiçi hale geldiğini düşünürsek, bu insanları memnuniyetle karşılama sorumluluğu sorumlu tasarımcılar ve geliştiriciler olarak bize düşüyor. İnternetin (veya intranetin!) küçük köşeniz, pekala ilk çevrimiçi deneyimlerinden biri olabilir - son kullanıcının "bildiğinin" basit bir kibir olduğunu varsayarsak.

ABD merkezli okuyucular için, yeninin yabancı anlamına gelmeyebileceğini nazik bir hatırlatma. Yaşlı Amerikalılar için erişim artıyor. Dijital okuryazarlık, zaman geçtikçe yaşlı nüfuslar arasında daha yaygın hale gelirken, erişilebilirlik sorunları da artacaktır.

Daha önce hiç karşılaşmamış biri için yer tutucu metin, girilen içerik gibi görünebilir ve bu da girişi atlamalarına neden olabilir. Bu zorunlu bir alansa, form gönderme, hatanın ne olduğunu veya nasıl düzeltileceğini anlayamayacakları sinir bozucu bir deneyim yaratacaktır. Bu zorunlu bir alan değilse, formunuz yine de potansiyel olarak değerli ikincil bilgileri toplayamamak gibi gereksiz bir risk taşır.

Yarar

Yer tutucu yardım içeriği yalnızca bir dizi statik metinle sınırlıdır ve bu, mesajı iletmek için her zaman yeterli olmayabilir. Üzerine ek stil uygulanması veya açıklayıcı işaretleme, nitelikler, resimler ve ikonografi içermesi gerekebilir.

Bu özellikle olgun tasarım sistemlerinde kullanışlıdır. Metin dizesini giriş öğesinden çıkararak oluşturulan ek stil seçenekleri, sistemin tasarım belirteçlerinden ve bunları kullanmanın getirdiği tüm avantajlardan yararlanabileceği anlamına gelir.

Yer tutucu metnin uzunluğu, içerdiği girdinin genişliğiyle de sınırlıdır. Duyarlı, mobil öncelikli dünyamızda, önemli bilgilerin kesilme olasılığı çok yüksektir:

Görüş

Renk Kontrastı

Başlıca tarayıcıların yer tutucu içeriği için varsayılan stilleri, bunun bir öneri olduğunu görsel olarak iletmek için açık gri bir renk kullanır. Birçok özel girdi tasarımı, girdi içeriğinin rengini alarak ve onu aydınlatarak bu kuralı takip eder.

Ne yazık ki, bu tekniğin renk kontrastı sorunları yaşaması muhtemeldir. Renk kontrastı, metnin parlaklığı ile arka plan rengi değerlerinin karşılaştırılmasıyla belirlenen bir orandır; bu durumda, girdinin arka planı üzerindeki yer tutucu metnin rengidir.

Yer tutucu içeriğin algılanamayacak kadar düşük bir kontrast oranı varsa, bu, bir formu başarılı bir şekilde doldurmak için kritik olan bilgilerin az görme sorunu yaşayan kişiler tarafından görülemeyebileceği anlamına gelir. En yaygın giriş yazı tipi boyutu için oran 4,5:1'dir.

Tüm erişilebilirlik sorunları gibi, az görme koşulları da kalıcı veya geçici, biyolojik veya çevresel veya bunların bir kombinasyonu olabilir. Biyolojik engeller, ileri görüşlülük, renk körlüğü, genişlemiş öğrenciler ve katarakt gibi durumları içerir. Çevresel koşullar, gün ortası güneşinin parlaması, pil tasarrufu sağlayan düşük parlaklık ayarı, gizlilik ekranları, son telefon görüşmenizden sonra ekranınızda kalan yağ ve makyaj gibi durumları içerir.

Bu oran, keyfi olarak başkalarına zorlamaya çalıştığım kişisel bir estetik tercih değil. Yetenekleri veya durumları ne olursa olsun, mümkün olan en geniş insan yelpazesinin dijital teknolojiyi çalıştırabilmesini sağlamaya yardımcı olan, özenle geliştirilmiş bir dizi kuralın parçasıdır. Bu kuralları bilinçli olarak görmezden gelmek, dışlama uygulamasında suç ortağı olmaktır.

Sorun şu: Yer tutucu niteliklerini kapsayıcı hale getirmeye çalışırken, güncellenmiş yüksek kontrastlı yer tutucu içerik rengi, dijital okuryazarlığı daha fazla kişiler tarafından bile girilen girdi olarak yorumlanacak kadar koyu hale gelebilir. Bu, konuyu bilişsel kaygılar alanına geri döndürür.

Yüksek Kontrast Modu

Windows işletim sistemi, Yüksek Karşıtlık Modu adı verilen bir özellik içerir. Etkinleştirildiğinde, sınırlı sayıda renk seçeneği kullanan özel bir yüksek karşıtlık paletinden arabirim öğelerine yeni renkler atar. İşte neye benzeyebileceğine dair bir örnek:

Yüksek Kontrast Modunda, placeholder içeriğe bu yüksek kontrastlı renklerden biri atanır ve bu, önceden doldurulmuş bilgiler gibi görünmesini sağlar. Daha önce tartışıldığı gibi, bu, insanların girdinin içine girilen bilgilere ihtiyaç duyabileceğini anlamalarını engelleyebilir.

Bir yer tutucuyu daha anlaşılır kılmak için Yüksek Karşıtlık Modunda stili güncellemenin mümkün olup olmadığını merak ediyor olabilirsiniz. Bir medya sorgusunda Yüksek Karşıtlık Modu'nu hedeflemek mümkün olsa da, bunu yapmamanızı rica ediyorum. Ön uç geliştirici Kitty Giraudel en iyisini söyledi:

“Yüksek kontrast modu artık tasarımla ilgili değil, katı kullanılabilirlikle ilgili. Renk estetiğini değil, en yüksek okunabilirliği hedeflemelisiniz.”

Yüksek Kontrast Moduna güvenen insanlar, ne kadar öngörülebilir olduğu için bunu kullanır. İçeriği sunma şeklini gereksiz yere değiştirmek, bir bilgisayarı güvenilir bir şekilde kullanmalarının tek yolunu etkileyebilir. Yer tutucu içeriğin rengini, Yüksek Karşıtlık Modu olmayan işlemi gibi görünmesi için açmanız durumunda, onların algılamasını imkansız hale getirme konusunda gerçek bir risk alırsınız.

Bir çözüm

Özetlemek gerekirse, yer tutucu özelliği:

• Otomatik olarak çevrilemez;
• Çoğu zaman bir etiket yerine kullanılır, yardımcı teknolojiyi kilitler;
• İçerik girildiğinde önemli bilgileri gizleyebilir;
• Okunamayacak kadar açık renkli olabilir;
• Sınırlı stil seçeneklerine sahiptir;
• Önceden doldurulmuş bilgiler gibi görünebilir ve atlanabilir.

Eesh. Bu harika değil. Peki bu konuda ne yapabiliriz?

Tasarım

Yer tutucu içeriğini girişin üzerine, ancak etiketin altına taşıyın:

Bu yaklaşım:

• Görsel ve yapısal bir hiyerarşi iletir:
  • Bu giriş ne için,
  • Girişi başarılı bir şekilde kullanmak için bilmeniz gerekenler ve
  • girdinin kendisi.
• Tercüme edilebilir.
• Önceden doldurulmuş bilgiler gibi görünmeyecektir.
• Az görme durumlarında görülebilir.
• Girişe içerik girildiğinde kaybolmaz.
• Anlamsal işaretleme içerebilir ve CSS ile biçimlendirilebilir.

Ek olarak, yazılım klavyesi olan bir cihazda giriş etkinleştirildiğinde yardım içeriği görüntüde tutulacaktır. Girişin altına yerleştirilirse, cihaz görünüm portunun altında bir ekran klavyesi göründüğünde içerik gizlenebilir:

Gelişim

Tasarladığımız örneği koda nasıl çevireceğiniz aşağıda açıklanmıştır:

 <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>

Bu, geleneksel bir erişilebilir for / id öznitelik eşleştirmesinden çok fazla bir sapma değildir: label öğesi, "çalışan kimliği" id bildirimi aracılığıyla input programlı olarak ilişkilendirilir. label ve input öğeleri arasına yerleştirilen p öğesi, bir placeholder özniteliğinin yerine geçer.

"Yani" diye merak ediyor olabilirsiniz. "Neden tüm bu yer tutucu değiştirme içeriğini label öğesine koymuyoruz? Çok daha az iş olacak gibi görünüyor!” Cevap, geliştirici rahatlığının kullanıcı deneyimine göre öncelikli olmaması gerektiğidir.

input p öğesiyle programlı olarak ilişkilendirmek için aria-describedby kullanarak, ekran okuyucusu olmadan göz atan bir kişinin deneyimleyeceği şeyle eşliği olan ekran okuyucular için bir bilgi önceliği oluşturuyoruz. aria-describedby , p içeriğinin, label içeriğinden ve ilişkilendirildiği girdi türünden sonra en son açıklanmasını sağlar.

Başka bir deyişle, girdinin hangi içeriği istediği, ne tür bir girdi olduğu, daha sonra ihtiyacınız olursa ek yardım - tam olarak birisinin form girdisine baktıklarında deneyimleyeceği şey.

Kullanıcı deneyimi, ekran okuyucuların yardımıyla gezinenler de dahil olmak üzere tüm kullanıcıları kapsar. Yardım içeriği bağımsızdır ve ekran okuyucu kullanan kişinin içeriğe yeniden başvurması gerekirse, bu içeriğe gidip gelmesi kolaydır. Bağımsız bir düğüm olduğundan, diğer önemli bilgileri sessize alma riski olmadan da susturulabilir (tipik olarak Kontrol tuşuyla).

Yardım içeriğinin label bir parçası olarak dahil edilmesi, onu gereksiz yere ayrıntılı hale getirir. label s anlamlı ama aynı zamanda kısa olmalıdır. Bir etikete çok fazla bilgi eklemek, istenen etkinin tam tersini yapabilir, bu da hatırlamayı çok uzun veya baştan sona dinlemek için çok sinir bozucu olabilir. Aslında, Web İçeriği Erişilebilirlik Yönergeleri bunu özellikle ele alan kurallara sahiptir: Başarı Kriterleri 2.4.6 ve 3.3.2.

Örnek vermek

İşte canlı kodda uygulanan çözüm:

Kaleme bakın CodePen'de Eric Bailey (@ericwbailey) tarafından yazılan yer tutucu özelliğini kullanmayın.

Ve işte ekran okuyucuların bunu nasıl ele aldığını gösteren bir video:

Daha İyi Bir Çözüm

“Bir arayüz kullanıcılarından ne kadar az şey isterse, o kadar erişilebilir olur.”

- Alice Boxhall

Son bir düşünce: Bu ek yer tutucu bilgilerine ihtiyacınız var mı?

İyi ön uç çözümleri, yalnızca sitenizi veya uygulamanızı mümkün olduğunca az karmaşıklıkla kullanmak isteyen kişiye fazladan çalışmanın yüklenmesini önlemek için özel girdi özelliklerinden ve uyumlu doğrulama uygulamalarından yararlanır.

İyi metin yazarlığı, girdinin amacını açık ve özlü bir şekilde tanımlayan etiketler oluşturur. Burada yeterince iyi bir iş yapın ve özellikle önceden test ederseniz, etiket belirsizliği ortadan kaldırır.

İyi kullanıcı deneyimi, mümkün olduğunca çok sayıda gereksiz soruyu ortadan kaldırmak için mevcut bilgilerden yararlanarak insanların ihtiyaçlarını, isteklerini ve arzularını önleyen akıllı akışlar oluşturmakla ilgilidir.

Web sitenizi veya web uygulamanızı kullanan kişileri barındırmak, İnternet'te gezinirken doğal kabul ettiğiniz şeylere eleştirel bir gözle bakmak anlamına gelir. Kullandıkları teknoloji de dahil olmak üzere, diğer insanların koşulları hakkında varsayımlarda bulunmayarak, dışlanmayı önlemeye yardımcı olmak için üzerinize düşeni yapabilirsiniz.

Tasarımınızı ve kodunuzu gözden geçirmek ve neyin incelemeye dayanmadığını görmek için biraz zaman ayırın - yer tutucu özelliğini kullanıp kullanmadığınızı kontrol etmek, başlamak için iyi bir yer olabilir.

Devlerin omuzlarında duran. Konuyla ilgili yazıları için Roger Johansson, Adam Silver, Scott O'Hara ve Katie Sherwin'e teşekkürler.