Küçük formları nasıl daha erişilebilir yaparız?
Küçük bir alana, form sığdırmak istediğinizde, bu işin ne kadar zor olduğunu fark etmişsinizdir. Gerçekten de web sitenize form eklemek bazen tam bir işkence halini alabiliyor.
Minnacık bir alana sığdırılmış formların, kağıt üzerinde harika göründükleri bir gerçek. Fakat genellikle böyle bir form kullanmak istiyorsanız, erişilebilirlik kurallarını hiçe saymanız gerekiyor.
Bir tasarımcı geçenlerde bana, küçük bir alana sığdırılmış form tasarımını gösterdi. Pek sık kullanılmayan bir yöntem kullanmış: Field (alan) isimlerini, text field’ların içine yerleştirmiş.
Genelde bu iş şöyle yapılır: Field (alan) ismini input’un value (değer) bölümüne yazarsınız. Sonrasında biraz JS veya sunucu taraflı kodlama kullanarak, “Kullanıcı Adı” ve “Şifre” gibi form ögelerinin varsayılan değerlerle yollanmayacağından emin olursunuz. Bir problem çıkar: Şifre değeri, sahtekarların kaçamak bakışlarından korunmanız için yuvarlak karakterler veya yıldızlar halinde görünür. Bu sebeple “şifre” bölümüne, direkt olarak “Şifre” yazamazsınız.
Bu meseleyi bir kenara bırakacak olsak bile başlı başına bir başka sıkıntı vardır: Kutucuklara yazdığınız değerler, erişilebilirlik açısından işimize yaramaz.
Bu makalemizde, boyutu küçük olmasına rağmen yüksek derecede erişilebilirlik sağlayan bir form hazırlayacağız. Hemen belirtelim: Bu makalenin amacı, sizi küçük formlar kullanmaya teşvik etmek değil. Tasarımı hoş görünen işler çıkarmanızı isteyen “patron”larla, erişilebilir tasarım yapmak isteyen sizlerin aranızı bulmaya çalışıyorum :).
Erişilebilir Markup (İşaretleme)
Erişilebilirliği sağlamak için, her form elemanına işlevini gösteren bir label değeri atamalıyız. Küçük bir tasarım hazırlayacak olmamız, bu kurala uymamızı engellemiyor. Her zamanki gibi öncelikle, hafif ve fonksiyonel olarak doğru bir işaretleme yapacak, arkasından CSS ve JavaScript’le görünümü ve fonksiyonelliği geliştireceğiz.
Bu gösterimde CSS kullanarak label değerlerinin field (alan)’ların içindeymiş gibi görünmesini sağlayacağız.
<form name="login" action="#" method="post">
<div id="username">
<label for="username-field" class="overlabel"> »
Username</label>
<input id="username-field" type="text" »
name="username" title="Username" value="" tabindex="1" />
</div>
<div id="password">
<label for="password-field" class="overlabel"> »
Password</label>
<input id="password-field" type="password" »
name="password" title="Password" value="" tabindex="2" />
</div>
<div id="submit">
<input type="submit" name="submit" value="Login" »
tabindex="3" />
</div>
</form>
Her label ve input değeri div’lerle ayrıldı. Böylece CSS olmadan görüntülendiği zaman temiz bir görünüm elde edilmesini sağladık. Her label’a overlabel ismini verdik. Böylece event handler’lar yardımıyla kolayca bu class’a sahip label’leri etkileyebileceğiz.
Label etiketleriyle beraber, her input alanına bir title değeri ekledik. Kutucuklara değer girildiğinde label isimleri kaybolacağından, title değerlerinin eklenmesiyle görme engeli bulunmayan ziyaretçilerimiz için kullanım kolaylaştı.
Label’leri etkileyecek CSS’imizi yazıyoruz:
form#login {
position:relative;
}
div#username,
div#password {
position:relative;
float:left;
margin-right:3px;
}
input#username-field,
input#password-field {
width:10em;
}
label.overlabel {
position:absolute;
top:3px;
left:5px;
z-index:1;
color:#999;
}
Label elemanlarını önde göstermek istediğimizden, z-index değeri ekledik. Yine bu çalışmamızda -em değerleri kullanarak, ziyaretçilerin tarayıcılarının ayarlarıyla oynayarak kutucukların boyutunu kolayca değiştirebilmelerini sağlamaya çalıştık.
Script Ekleyelim
Kutucuklar seçildiğinde veya kutucuklara bir değer girildiğinde label değerleri görünmemeli. Sayfa, kutucukların value değerleri doldurulmuş şekilde yüklenmiş veya ziyaretçi formu doldurmuş olabilir.
Labelleri gizlemek için JavaScript’ten yararlanacağız. Bu sebeple overlabel değerinde değişikliğe gideceğiz. JavaScript devre dışıysa, label değeri görüntülenecek.
label.overlabel {
color:#999;
}
label.overlabel-apply {
position:absolute;
top:3px;
left:5px;
z-index:1;
color:#999;
}
Labellerin erişilebilirliğini korumak için, display değerine “none” (yok) değerine getirmeyip, yazının görünümünü engellemek amacıyla negatif text-indent (Tr:Yazı Çentiği) kullanacağız.
function initOverLabels () {
if (!document.getElementById) return;
var labels, id, field;
// Set focus and blur handlers to hide and show
// labels with 'overlabel' class names.
labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
if (labels[i].className == 'overlabel') {
// Skip labels that do not have a named association
// with another field.
id = labels[i].htmlFor || labels[i].getAttribute ?
('for');
if (!id || !(field = document.getElementById(id))) {
continue;
}
// Change the applied class to hover the label
// over the form field.
labels[i].className = 'overlabel-apply';
// Hide any fields having an initial value.
if (field.value !== '') {
hideLabel(field.getAttribute('id'), true);
}
// Set handlers to show and hide labels.
field.onfocus = function () {
hideLabel(this.getAttribute('id'), true);
};
field.onblur = function () {
if (this.value === '') {
hideLabel(this.getAttribute('id'), false);
}
};
// Handle clicks to label elements (for Safari).
labels[i].onclick = function () {
var id, field;
id = this.getAttribute('for');
if (id && (field = document.getElementById(id))) {
field.focus();
}
};
}
}
};
function hideLabel (field_id, hide) {
var field_for;
var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
field_for = labels[i].htmlFor || labels[i]. ?
getAttribute('for');
if (field_for == field_id) {
labels[i].style.textIndent = (hide) ? '-1000px' : ?
'0px';
return true;
}
}
}
window.onload = function () {
setTimeout(initOverLabels, 50);
};
Script, “overlabel” class (sınıf) isimli label’ları arayacak. Gerekli alanları Label’ların for bölümüne bakıp input etiketinin id’sine ulaşarak belirleyecek. Seçilen label’lara “overlabel-apply” isimli yeni class yazılacak. Ek olarak onfocus ve onblur event handler’larıyla label değerinin görünmemesi sağlanmış olacak.
Yukarıda da söylendiği gibi, script inputların isim ve id’lerinden etkilenmiyor. Label’ları “overlabel” class’ına göre tanıyor. Class’lar ile CSS bilgilerini belirleyebildiğimiz gibi, bu örnekte de fonksiyonelliğini yönetebiliyoruz.
Sadece initOverLabels fonksiyonunun son bölümünde Safari’nin kullanıcının alanı seçmesini engellemesi sebebiyle tarayıcıya göre kod yazmak zorunda kaldık. Bu problemi onClick’le çözmeyi başardık.
Özet
Şuradaki çalışan örnek, temiz ve erişilebilir bir kodlamayla, field ismini, field’ın içinde gösterebileceğimizi ispatlıyor. Hiç bir değere dokunmadan formun yollanması, “isim”, “şifre” gibi varsayılan değerler yerine boş değerlerin girilmesini sağlıyor. Biraz kodlama bilgisiyle bu bilgiyi istediğiniz form’a uygulayabilirsiniz.
Kadayıfın kaymağı da var: Ziyaretçiler, CSS ve JavaScript ayarları kapalı olan bir tarayıcıyla sayfanızı ziyaret etse bile form kullanılabilir durumda ve label’lar field’ların yanında bulunuyorlar.
‘Translated with the permission of A List Apart Magazine and the author.’
sitenizi çok faydalı buldum ancak birde resim formatlarını siteye öeklerseni sizleri sevindirirsiniz