Büyük arşivler bir bağımlılık olarak “left pad” içerirler. Bağımlılık uzun süreli olmadığındaysa projeleri inşa edip geliştirmek imkansız hale gelebilir. Javascript’in sol tarafındaki diziye eklenmiş 11 satır left pad olmaktadır. Bağımlılıklar genellikle büyük endişeye neden olur. Bir gönderi düğmesi çalışmasını örnek alırsak:
Tüm Düğmelerin Eşit Olmaması:
Bir gönderi düğmesini biçimlendirmenin pek çok yolu bulunmaktadır. Eğer “imput” öğesini kullanırsanız bu oldukça basit bir hale gelecektir.
<input type=”submit“ value=”Sign Up“>
Bir başka düğme “button” örneği seçeneği:
<button type=”submit“>Sign Up</button>
Burada input[type=submit] öğesini button[type=submit] üzerinde tercih ediyoruz. Çünkü düğmenin text yazısı diğer semantik öğeler kadar gelişmiş olabilir. (Örneğin; em, strong)
Bunun dışında birçok web sitesinde anchor (a) kullanıldığını görürüz.
<a href=”#“>Sign Up</a>
Tıpkı üstteki button öğesi gibi, a öğesi de hareketli bir biçimlendirme taşımaktadır. Bir diğer biçimlendirme kalıbını da konumuz gereği açıklayalım istiyoruz. Bu diğer kalıp “boyut” elementi olan “div” olarak bilinir.
<div>Sign Up</div>
Bu kalıp özellikle tek sayfalık uygulamalar dünyasında ve Gmail uygulamasında oldukça yaygın olarak kullanılmaktadır.
Input:
input[type=submit] olabildiğince basit olmayı gerektirir. Görünüşte imput, tekst tabanlı tarayıcılarda bile bir düğme gibidir. Destekleyen teknolojiler içerisinde bir düğme olarak görülür. Fare ile aktif hale geçer ve odak algısı oluşur, dokunulur ve bir klavyenin space veya enter tuşu ile aktif olur. En önemlisiyse bu tür bir düğme biçimlendirdiğinizde bu düğme içeriğinde yer alan her şeyi gönderi haline getirir.
Bir submit düğmesi Lynx tarayıcılar içinde tekst olarak işlenir. İşaretleyici üzerine geldiğinde tekst sizi submit olarak bilgilendirir ve klavyedeki enter tuşu ile kullanılabilir.
Button:
Bir button[type=submit] aynı sayıda bağımlılıkla, zero, zilch, nada gibi aynı özelliklere sahiptir. CSS kullanarak bu tasarımı renklendirebilirsiniz.
Anchor:
Anchor varsayılan satır içi olarak altı çizili bir metin olarak işlenir. Bir button olarak görülebilmesi için içerisinde CSS kullanmalısınız. Genel teknoloji bir a’yı genel olarak görür çünkü bu hiçbir yere yönlenmeyen bir linktir; burada “role attribute” kullanmalısınız; bu birinci bağımlılıktır. İkinci bağımlılık ise ;
<a href=”#“ role=”button“>Sign Up</a>
Her doğru düğme gibi bir a odaklanmayı doğru olarak algılayabilmelidir. Bir a öğesi enter tuşu ile aktive olabilir oysa gerçek düğmeler space bar tuşu ile de aktif hale geçebilir. Space bar ile basma işlemini aktive etmek için Java Script kullanmalısınız; bu üçüncü bağımlılıktır. Bir a öğesi form gönderme işlemi yapmaz, bunun için Java Script kullanmalısınız. Bu kalıp için ilave biçimlendirme, CSS ve Java Script gerekmektedir.
Vanilla Kutusu:
Bahsedilmesi gereken kalıplardan biri de “div” olarak bilinir ve bu “span” veya tarayıcıların herhangi varsayılanlarından biri gibi olabilir ve uygulanabilir. Bu kalıp, a kalıbının tüm bağımlılıklarını içerir. CSS üzerinde çalışmadan sonra buna “inline-block” işler ve buna “cursor” işaretleyicisi verir ve bunu görünürdeki kullanıcılar için interaktif halde görünmesini sağlarsınız.
“a” öğesinin aksine “div” öğesi (span vs.) odaklanabilir değildir. Bunun üzerine varsayılan “tab” emrini sayfa üzerinde verebilirsiniz; buna 0 üzerinden “tabindex” atarsınız.
<div role=”button“ tabindex=”0“>Sign Up</div>
İlave edilebilir biçimlendirme gelişim sürecine bağımlıdır, yani bunun üzerine eklemeyi unutmamalısınız. “div” öğesini yaparken meydana gelebilecek hatalar klavye kullanıcıları tarafından tam olarak erişilmemesine neden olacaktır.
Düğme Bağımlılıklarına Kısa Bir Bakış
Takip edilmesi gereken önemli bir bilgi akışı vardır; burada ilişkilendirme konusuna hızlı bir bakış atabiliriz:
PATTERN |
DISPLAY |
SEMANTICS |
FOCUSABLE? |
input[type=submit] |
Button |
Button |
Yes |
button[type=submit] |
Button |
Button |
Yes |
a |
Link |
Named Generic |
Yes |
div |
Block |
Not exposed |
No |
PATTERN |
FOCUSABLE? |
ACTIVATE BY |
SUBMITS FORMS |
input[type=submit] |
Yes |
• Mouse • touch • Enter key • spacebar |
Yes |
button[type=submit] |
Yes |
• Mouse • touch • Enter key • spacebar |
Yes |
a |
Yes |
• Mouse • touch • Enter key |
No |
div |
No |
|
|
Aynı kalıplara bir de bağımlılıklar açısından bir göz atalım:
PATTERN |
DISPLAY |
SEMANTICS |
FOCUS |
input[type=submit] |
None |
None |
None |
button[type=submit] |
None |
None |
None |
a |
CSS |
ARIA |
None |
div |
CSS |
ARIA |
HTML |
PATTERN |
SEMANTICS |
FOCUS |
ACTIVATION |
input[type=submit] |
None |
None |
None |
button[type=submit] |
None |
None |
None |
a |
ARIA |
None |
JavaScript |
div |
ARIA |
HTML |
|
PATTERN |
FOCUS |
ACTIVATION |
FORM SUBMISSION |
input[type=submit] |
None |
None |
None |
button[type=submit] |
None |
None |
None |
a |
None |
JavaScript |
JavaScript |
div |
HTML |
|
|
Css bağımlılığını karışlanmamasına neden olacak birkaç sebep bulunmaktadır:
• Tarayıcının CSS desteğinin olmaması
• Kullanıcının CSS özelliklerini kapatması
• CSS erişimine engel olabilecek bir ağ problemi yaşanması
• Kullandığınız sektörün tarayıcıya göre fazla gelişmiş olması
• Medya sorgulamanın içerisindeki kurallar ve sorgunun uygulanmasını tarayıcının desteklememesi
Java Script söz konusu olduğunda benzer potansiyel sorunların meydana gelebilecek olduğunu söyleyebiliriz.
• Tarayıcının Java Script özelliğini desteklememesi
• Kullanıcının Java Script özelliğini kapaması
• Java Script özelliğinin devre dışı kalmasına neden olacak bir ağ hatası
• Java Script özelliğini engelleyen güvenlik duvarı
• Java Script kullanımını kapatan veya indirme işlemini engelleyen bir eklenti
• Üçüncü parti Java Script hatasıyla programın durdurulması
• Java Script çalışma sorununa neden olan bir bug sorunu
• Tarayıcının özellik tanımlama testinin erken sona ermesi
• Kullanıcının Java Script özelliğini tarayıcıdan indirilip yüklenmesini beklemesi
Hatta ARIA’da bile çeşitli tuzaklar bulunur. Destekleyici teknoloji ve tarayıcı destek düzeyinde uyumlu teknolojiye sahip değilse garip şeylerin meydana gelmesi kaçınılmaz olur.