H O K K A
Haber Yazılımında Kampanya İncele
22 Eylül 2016

Bağımlılık Bilincini Geliştirme

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.