Bilinmeyen Html Etiket Nitelikleri

HTML5 birlikte ile gelen ancak fazla bilinmeyen nitelikleri ele alacağız.

Html kodları arasında sık gördüğümüz ama ne işe yarar diye araştırmadığımız bazı kavramlar var. Aslında geliştiriciler olarak araştırmak en önemli özelliğimiz olmalı ancak türkçe kaynak sıkıntısı nedeniyle araştırma hevesimiz yarıda kalmıyor da değil.

Bu yazımda geliştiricilerin işini kolaylaştıracak, sorunlara daha farklı yönlerden bakmamızı sağlayacak bazı niteliklerin amacını, ne işe yaradığını ve kullanımını inceleyeceğiz.

1-) Görevleri üstlenen: Role
Adından da anlaşılacağı üzerine rolleri üstleniyor. Yani herhangi bir etiket kullanarak başka bir etiketin özelliklerini devir alıyor. Amacına gelecek olursak basit bir örnekle anlatayım. Örneğin bir tane div etiketimiz var bildiğiniz gibi div etiketi varsayılan olarak blok görevinde yani yatay olarak bir satır genişliğinde bu div etiketini buton gibi kullanmak istiyoruz. Normal yöntemlerle bunu yapmak için ya div etiketini button olarak değiştireceğiz yada div etiketinin içine yada dışına buton etiketi yerleştireceğiz. Aynı işlemi role ile yapmak istersek <div role="button"> dememiz yeterli.

Role özniteliği için kullanılabilecek değerler.

2-) Gereksiz olarak görüp çoğu zaman sildiğimiz etiket: Aria-...
Genellikle Bootstrap veya benzeri css framework'lerinde döküman inceleyenler aria ile başlayan öznitelikler görürler ve çoğu zaman bu kodları gereksiz görüp silerler. Bu aria ile başlayan özellikler engellilerin bilgiye ulaşmasında hayati önem taşıyor. Görme engellilerin internet sitelerinde gezmesi için bazı 3. parti programlara kullanırlar. Bu 3. parti programlar da ekranda görünenleri ses ortamına aktarırlar. Geliştiricilerin aria etiketini kullanması bu programların içeriği daha iyi analiz etmesini kolaylaştırıyor.

Web'in daha erişilebilir hale gelmesi için geliştiricilerin uygulayabileceği 10 adım.

3-) Accesskey 
Accesskey ile Html etiketlerin erişim tuşları atayabiliriz. Yani "b" harfine basarak butona tıklama işlemini yaptırabiliriz. Örneğin "g" harfine basarak Google'ye link vermeyi deneyelim.

<a href="http://google.com/" accesskey="g">Ya tıkla yada g harfine bas</a>

Bu özniteliğin tek dezavantajı yalnız başına kullanılamıyor olması. Yani her tarayıcı için farklı tuş kombinasyonlarına basmamız gerekecek. Aşağıdaki tablodan tarayıcınıza göre tuş kombinasyonunuzu belirleyebilirsiniz.
http://resim.sanalkurs.net/uploads/Screen_Shot_09_19_15_at_0433_PM.jpg
4-) Contenteditable
Tarayıcı üzerinden içerik değiştirebilmemizi sağlayan özniteliktir. Yani Web sayfamızda görüntülenen bir yazıyı tarayıcı üzerinden düzenlememizi sağlar. True ve False olmak üzere iki farklı değer alır. Örnek;

<div class="baslik" contenteditable="true">Ben başlığım beğenmediysen değiştir!</div>

Tarayıcı desteğine gelecek olursak Internet Explorer 5'ten itibaren destekliyor. Bu da demek oluyor ki gönül rahatlığıyla kullanabiliriz.

5-) Contextmenu
Web sayfanızı ziyaret edenler sağ tuşa tıkladığında benimde sözüm geçsin diyorsanız bu özellik tam size göre. Contextmenu kullanıcı sağ tuşa tıkladığı zaman tarayıcı tarafından gösterilen menüdür. Bu menünün içeriği yakın bir zamana kadar sabitti yani geliştiriciler müdahale edemiyordu. Ancak Html5 ile birlikte geliştiricilere de söz hakkı tanındı. Kullanımı;

<div contextmenu="benim-menu">
  <p>Üzerime gel ve sağ tıkla</p>
  <menu type="context" id="benim-menu">
	<menuitem label="Bağış Yap!"></menuitem>
    <menuitem label="İletişim"></menuitem>
  </menu>
</div>

Ne yazık ki, bu güzel özelliği sadece Firefox'ta kullanabiliyoruz.

6-) Dir 
Yazıların yönünü belirlememizi sağlar. Rtl (right to left) ve ltr (left to right) olmak üzere iki farklı değer alır. Kullanımı;

<div dir="rtl">مرحبا العالم</div>
<div dir="ltr">Merhaba Dünya</div>

7-) Draggable
Yazıları taşımamızı sağlar. Ancak jQuery gibi efektif taşıma işlemleri yapmak mümkün değil. True ve False olmak üzere iki farklı değer alır. Kullanımı;

<div draggable="true">Taşı beni..</div>

8-) Hidden
İsminden de anlaşılacağı gibi nesneleri gizlemeye yarar. True ve False olmak üzere iki değer alır. Kullanımı;

<div hidden="true">Görünmez Adam...</div>

Bu özelliği kullanmamızın önünde ki tek engel İnternet Explorer 11'den itibaren destekliyor olması. İnternet Explorer gibi bir derdiniz yoksa gönül rahatlığıyla kullanabilirsiniz.

9-) Lang
Language lisan yani dil demektir. Arama motorlarının içeriğimizin dilini belirlemesine yardımcı olur. Genellikle sayfamızın en üstünde html etiketine öznitelik olarak verilir.

<html lang="tr"></html>

10-) Spellcheck
Word kullanırken yazım yanlışı yaptığımız zaman yanlış olan yerin altına kırmızı alt çizgi gelir. Bu özellik tarayıcılarda da varsayılan olarak açık gelmekte. Textarea, input(Şifre alanı hariç) ve contenteditable özelliği olan nesnelerde geçerlidir. Eğer bunu kapatmak istiyorsanız, Bu niteliği false olarak değiştirmeniz gerekiyor. Örneğin;

<textarea spellcheck="false">estediğim gibi yizirim</textarea>

11-) Tabindex
Site içinde tab tuşuyla linkler veya inputlar arasında gezinti yapmayan geliştirici yoktur. Bu gezintinin nereden başlayıp nerede biteceğini biz de belirleyebiliriz. Kullanımı;

<a href="http://www.google.com/" tabindex="2">Google</a>
<input type="text" tabindex="1">

İyi çalışmalar.

Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Çok teşekkür ederim. Gerçekten çok önemli bilgiler... Selametle..

Yukarı Git