BU DERSİN BAŞLIKLARI
- 1 Erişilebilirliğin Temel Prensipleri
- 2 Erişilebilir Bir Kodlama İçin Nelere Dikkat Edilmelidir?
- 2.1 1. Başlıklar (Headings)
- 2.2 2. Resimler
- 2.2.1 I – Bilgi Veren Resimler (Informative Images)
- 2.2.2 II – Dekoratif Resimler (Decorative Images)
- 2.2.3 III – Fonksiyonel Resimler (Fonctional Images)
- 2.2.4 IV – Yazıların Resimleri (Images of Text)
- 2.2.5 V – Karmaşık Resimler (Complex Images)
- 2.2.6 VI – Resim Grupları
- 2.2.7 VII – Resim Haritaları (Image Maps)
- 2.3 3. Sekme Linkleri (Skip Links)
- 2.4 4. Linkler
- 2.5 5. Formlar
- 2.5.1 I – Label Elemanı
- 2.5.2 Label Textini Saklama
- 2.5.3 Label Elemanı ile Sarma
- 2.5.4 Butonlar
- 2.5.5 Label Textinin Yerleşimi
- 2.5.6 II – Form Elemanlarını Gruplama
- 2.5.7 III – Form Alanını Örneklendirme
- 2.5.8 Placeholder (Yer tutucu) Textler
- 2.5.9 Yer Tutucuları (Placeholder) Stillendirme
- 2.5.10 IV – Verileri Onaylamak
- 2.5.11 V – Kullanıcıyı Bilgilendirme
- 2.5.12 VI – Çok Sayfalı Formlar
- 2.5.13 VII – Özel Formlar
- 2.6 6. Renkler
- 2.7 7. Renkler Arasındaki Kontrast Oranı
- 2.8 8. jQuery ve JavaScript Kullanmak
- 2.9 9. Temanızı Test Edin
- 2.10 10. Uzak Durmanız Gerekenler
Bir temanın erişilebilir olması demek, normal kişilerin yanı sıra, görme sıkıntısı yaşayan, hiç göremeyen, fare kullanmayan, güncelliğini yitirmiş teknolojiler kullanan veya kısıtlı kişilere özgü teknolojiler kullanan kişilerin de temanın sayfalarında kaybolmadan dolaşabilmesi demektir, temamızı rahatça kullanabilmesi demektir.
WordPress’in varsayılan temaları, erişilebilir özellikte yapılmıştır. Bizim de, bir WordPress tema yazarı olarak, temalarımızın erişilebilir olmasına dikkat etmemiz gerekmektedir.
Erişilebilirlik, İngiltere’de, özürlü bir vatandaşın, bir bilet satın alma sitesinden bilet satın alamaması sonucu, bu siteyi dava etmesi ve davayı kazanması ile önem kazanmıştır. Bu dava, web tasarımı yapan herkes için önemli bir milattır. Bu davayı bir tarafa koysak bile, sadece İngiltere’de, özürlülerin yarattığı ekonomik değerin, yıllık olarak milyarlarca Pound olduğu gerçeğini göz ardı etmemiz doğru olmaz.
Erişilebilir bir tema yapmak, sitemizin engelli veya kısıtlı kullanıcılara da ulaşmasını, dolayısıyla, kısıtlı bireylerin oluşturduğu pazardan veya kitleden pay almamızı sağlayacaktır.
Erişilebilirliğin Temel Prensipleri
Erişilebilir bir site yapma konusu, oldukça kapsamlı bir konudur ve bütün detayları ile açıklamak tek bir dersin sınırlarını aşmaktadır.
Erişilebilir bir tema tasarlarken dört temel prensibe göre hareket edilmelidir. Bu prensipler şunlardır:
1. Farkedilebilirlik (Percievable)
Sayfamızdaki içerikler, kullanıcının imkanı ya da cihazı ne olursa olsun, görüntülenebilmeli ya da algılanabilmelidir. Bazı kullanıcılarımızın, güncelliğini yitirmiş cihazlar kullanıyor alabileceğini, bazı kullanıcılarımızın fareden yoksun olabileceğini dikkate almalıyız. Temamız, bahsettiğimiz ve bahsetmeyi unuttuğumuz bütün kısıtlı şartlarda, sunmak istediği içeriği başarıyla sunabilmelidir.
2. Kullanılabilirlik (Operable)
Kullanıcımız, faresi olsun ya da olmasın, gözleri görsün ya da görmesin, sitemizden istediğini alabilmeli veya sitemizde kaybolmadan gezinebilmelidir.
3. Anlaşılabilirlik (Understandable)
Sitede sunulan içerikler, normal bir kullanıcı için olduğu kadar, ekran okuyucuları için de, kolayca anlaşılabilir bir mantık dahilinde sunulmalıdır. Siteyi şekillendiren ve yöneten menüler, linkler, formlar, içerik… anlaşılabilir olmalıdır. Örneğin, linklerin altını çizmek veya başlık atarken ana başlıkta h1 tagını, alt başlıklarda h2 tagını kullanmak gibi, yaygın olarak kullanılan ve anlaşılan özellikleri kullanmak, bu amaca hizmet edecektir.
4. İstikrar (Robust)
İçeriğimiz, her cihazda kullanılabilir olmalıdır. Engelli ya da kısıtlı kullanıcılar, çok farklı yazılım veya donanımlar kullanabilmektedir. Kısıtlı kullanıcılara yardımcı olan bu teknolojilere, “yardımcı teknolojiler” (Assistive Technology – AT) denir. Yardımcı teknolojiler; ekran okuyan ve ses tanıyan yazılımlar, braille okuyucuları ve donanımları gibi teknolojilerdir.
Bir temanın, yukarıda bahsedilen 4 temel özelliği kazanması ve erişilebilir olması için, temayı kodlarken dikkat etmemiz gereken bazı hususlar vardır. Aşağıda bu hususlardan bahsedilmiştir.
Erişilebilir Bir Kodlama İçin Nelere Dikkat Edilmelidir?
Bir tema kodlarken, oluşturduğunuz, başlıklar, resimler, menüler, linkler, HTML yapısının kendisi… erişilebilir olmalıdır. Erişilebilir bir HTML kodu oluşturmak, temanızı sadece erişilebilir yapmayacak, SEO uyumluluğu için de katkı sağlayacaktır.
Erişilebilir HTML kodları oluşturmak için nelere dikkat edilmelidir? Aşağıda bu zor sorunun cevabını vermeye çalıştık. Umarım verebilmişizdir.
1. Başlıklar (Headings)
Başlıklar, HTML dilinde, büyükten küçüğe doğru sırasıyla, h1, h2, h3, h4, h5 ve h6 tagları ile ifade edilir. Başlıklar, sadece büyük ve kalın yazılar oluşturmak için kullanılan birer HTML elemanı değildir, bir nevi yazımızın iskeletidir, bölümleridir, ekran okuyucusu kullanan kişilerin yazımızı sağlıklı bir şekilde okumasını sağlayan köşe taşlarıdır. Başlıkların ne kadar önemli olduğunu, hiç başlık içermeyen bir yazıyı okumaya çalıştığımızda daha iyi anlayabiliriz.
Başlıklar, içeriğimizi belirli bir mantık çerçevesinde bölümlere ayırır. Sadece başlıklarına baktığımızda, bir yazının neyi anlatmak istediğini, o yazıyı okuyunca neleri öğrenmiş olacağımız anlamış oluruz.
Ekran okuyucular (JAWS gibi), içeriğimizdeki başlıklarından bir liste hazırlar ve kullanıcının bu şekilde içeriğimizin ne anlatmaya çalıştığı hakkında bir fikir sahibi olmasını ve içeriğimizde rahatça dolaşmasını sağlar.
Başlıklarımızın büyüklükleri ve mantık yapısı çok önemlidir. En önemli başlık en büyük atılmalıdır, alt başlıklar, üst başlıktan bir küçük olacak şekilde oluşturulmalıdır. Bir yazının ana başlığı bir tane olmalıdır ve <h1> tagı ile oluşturulmalıdır. Birden çok <h1> tagı, ekran okuyucu kullananların sayfada kaybolmasına sebep olabilmektedir. Oluşturulan alt ve üst başlıkların konuyu mantıksal bölümlere ayırması her bir başlığın bir bölüme açıklık getirmesi önemlidir. Yani, ana başlık yazının hangi konuyu anlatacağını belirtmelidir, ana başlık altında oluşturulan her bir alt başlık konunun ayrı bir yönünü anlatmalı, her bir alt başlığın altındaki başlık ise o yönün ayrı bir özelliğini anlatmalıdır. Ne demeye çalıştığımızı anlamak için aşağıdaki örneğe dikkat edelim:
<h1>ANA BAŞLIK</h1>
<h2>Alt Başlık Bir</h2>
<h3>Alt Başlık Birin Alt Başlığı Bir</h3>
<h3>Alt Başlık Birin Alt Başlığı İki</h3>
<h3>Alt Başlık Birin Alt Başlığı Üç</h3>
<h2>Alt Başlık İki</h2>
<h3>Alt Başlık İkinin Alt Başlığı Bir</h3>
<h3>Alt Başlık İkinin Alt Başlığı İki</h3>
<h3>Alt Başlık İkinin Alt Başlığı Üç</h3>
<h2>Alt Başlık Üç</h2>
<h3>Alt Başlık Üçün Alt Başlığı Bir</h3>
<h3>Alt Başlık Üçün Alt Başlığı İki</h3>
<h3>Alt Başlık Üçün Alt Başlığı Üç</h3>Yukarıdaki örnekte de görüldüğü gibi, bir <h1> başlığını her zaman bir <h2> başlığı takip etmelidir, <h2> başlığını da <h3> takip etmelidir. Yani başlık taglarının numaraları birer birer eksilmelidir. <h2> başlığının doğrudan alt başlığı <h4> olmamalıdır.
Yazımızdaki başlıkların hiyerarşi ve anlam kalitesi, SEO özelliğinin ya da endişesinin ötesindedir ve doğrudan yazımızın kalitesini, içeriğimizin erişilebilirliğini arttıran bir faktördür.
İçeriğinizin başlık yapısı hakkında bir fikir sahibi olmak için, içeriğinizdeki bütün başlıkları bir liste halinde görün ve bu listeye bakarak, içeriğin ne anlattığı ve nasıl anlattığı hakkında kesin bir kanaate varabiliyor musunuz, düşünün. Eğer, oluşturduğunuz başlıklar, yazıyı okuyunca o konuyu iyi öğreneceğinizi hissettiriyorsa, başlık yapınız başarılı demektir.
‘aria-labelledby’ Özelliği
Başlıklara verilen id="baslik" değeri ve başlığın başladığı ve bittiği bölümü saran HTML elemanında, aria-labelledby="baslik" özelliğini kullanarak, başlığın, içerikteki bölgesini ya da sınırlarını belirtebilirsiniz. Bu yapı, içeriğinizin erişilebilirlik özelliğini arttıracaktır. Aşağıda, bahsettiğimiz bu yapıya göre oluşturulmuş örnek bir içerik görüyorsunuz:
<body>
<header>
<h1>Uzay Araştırmaları</h1>
</header>
<nav aria-labelledby="anabolge">
<h2 id="anabolge">Dolaşım Menüsü</h2>
…
</nav>
<main>
<article>
<h2>Uzay Araştırmalarında Son Durum</h2>
<nav aria-labelledby="ozettablo">
<h3 id="ozettablo">Konu Hakkında Bir Tablo</h3>
…
</nav>
<p>…</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>…</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
</ul>
<h3>Cotton Fur</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>…</p>
<aside aria-labelledby="ilgiliyazilar">
<h3 id="ilgiliyazilar">Konu İle İlgili Yazılar</h3>
<ul>
<li><a href="#">İlgili Yazı Başlığı 1</a></li>
<li><a href="#">İlgili Yazı Başlığı 2</a></li>
<li><a href="#">İlgili Yazı Başlığı 3</a></li>
</ul>
</aside>
</article>
<aside aria-labelledby="guncelyazilar">
<h3 id="guncelyazilar">Konu Hakkında En Güncel Yazılar</h3>
<ul>
<li><a href="#">Güncel Yazı 1</a></li>
<li><a href="#">Güncel Yazı 1</a></li>
<li><a href="#">Güncel Yazı 1</a></li>
</ul>
</aside>
</main>
<footer>
<p>© Benim Şirketim.</p>
</footer>
</body>WordPress Temalarında Başlıklar Nasıl Kullanılmalıdır?
Bir WordPress temasında <h1> tagı şu amaçlar ile kullanılabilir:
- Her bir sayfada, yazıda ya da arşivde bir adet
<h1>tagı kullanılmalıdır. - Sadece ana sayfada iken
<h1>tagı, site başlığını ya da logosunu içerebilir. - Sayfalarda,
<h1>tagı, sadece sayfa başlıkları için kullanılabilir. - Yazılarda,
<h1>tagı, sadece yazı başlıkları için kullanılabilir. - Arşiv sayfalarında,
<h1>tagı, sadece arşiv başlığı için kullanılabilir.
WordPress temalarında, logo veya site başlığı (banner) oluştururken şunlara dikkat edilmelidir:
- Logo ya da site başlığı, ana sayfada iken
<h1>tagı içinde kullanılmalıdır ve link halinde olmamalıdır. Çünkü, ana sayfada bu elemanlara link vermek demek, aynı sayfaya link vermek demektir. - Dilerseniz, ana sayfada ve içeriklerinizin üstünde,
<h1>tagı ile uygun gördüğünüz bir sayfa başlığı kullanabilirsiniz. - Ana sayfa dışındaki sayfalarda, site logosu veya başlığı, ana sayfaya götüren bir link şekilde olmalıdır ve
<h1>tagı içinde olmamalıdır.
WordPress temalarında, site açıklaması (site description) kısmı oluşturulurken şunlara dikkat edilmelidir:
- Site açıklaması kısmı,
<h2>tagı ile oluşturulmamalıdır. Çünkü, site logosu için<h1>veya<h2>başlıkları kullanılmıştır ve bir başlığı her zaman bir içerik elemanı (<p>,<li>,<nav>…) takip etmelidir.
Sidebar (sayfa kenarı) kısımlarında, başlıkların durumu şöyledir:
- Sidebar başlığı için, (gizli de olsa) anlamlı bir
<h2>tagı kullanın. - Sidebar içinde kullandığınız bileşenlere (Widgets) başlık atarken
<h3>tagı kullanın. - Bir bileşenin içinde
<h1>,<h2>ve<h3>taglarını kullanmayın.
WordPress temalarında, footer (sayfa altı) kısmı oluşturulurken şunlara dikkat edilmelidir:
- Footer başlığı için, (gizli de olsa) anlamlı bir
<h2>tagı kullanın. - Footer içinde kullandığınız bileşenlere (Widgets) başlık atarken
<h3>tagı kullanın. - Footer kısmında kullandığınız bir bileşenin içinde
<h1>,<h2>ve<h3>taglarını kullanmayın.
Gizli Başlıklar
Bazen, tasarımlarımızda, görsel endişeler ile, bazı sayfalar için başlık kullanmak istemeyiz. Böyle durumlarda, ekran okuyucusu kullanan ziyaretçilerimizi düşünmek ve temamızın erişilebilirliğini arttırmak için, yine de başlık kullanmalı fakat başlıklarımızı uygun CSS kodları ile, sadece ekran okuyucuların görebileceği şekilde gizleyebiliriz. Başlıkları gizlemek için kullanabileceğimiz CSS kodlarını merak ediyorsanız aşağıda bunun örnekleri verilecektir.
Unutulmamalıdır ki, tepesinde bir başlığı olmayan bir sayfa ya da yazı, ekran okuyucular için serseri bir içeriktir.
Sayfanın Başlık Yapısını Görme
- Temanızın herhangi bir sayfasının başlık yapısını görmek için, Firefox’s Web Developer Toolbar eklentisini kullanabilirsiniz. Bu eklenti, Firefox tarayıcısı ile çalışan bir eklentidir. Bu eklenti ile, ekrandaki bir web sayfası için, aşağıdaki resimde görüldüğü gibi, Information->View Document Outline menüsünü kullanarak, o sayfanın başlık hiyerarşisini görebilirsiniz.
- Bunun dışında, WordPress temalarınızda, başlık hiyerarşisini görmek ve ziyaretçilerinize göstermek için, Table of Contents Plus eklentisini kullanabilirsiniz. Bu eklenti, yönetim panelindeki editör ile oluşturduğunuz içerikler için, başlık hiyerarşisini çıkaran ve bununla da yetinmeyip, bu başlıkları sayfa içi dolaşıma müsait birer bağlantı haline dönüştüren bir eklentidir.
2. Resimler
Resim oluştururken, erişilebilirlik açısından dikkat etmemiz gereken husus, resim elemanına (<img>) bir alternatif metin eklemektir. Bunu yapmak, bu resim elemanına bir alt="Ben bir alternatif metinim" özelliği eklemek kadar kolaydır.
Bir resim elemanına, uygun bir alternatif text oluşturmak için öncelikle resmin kullanım amacını belirlemek gerekir. Temalarımızda kullandığımız resimler, şu amaçlar ile kullanılır:
I – Bilgi Veren Resimler (Informative Images)
Bu resimler, kendilerine bağlı olan içeriğin daha iyi anlaşılabilmesi için konulmuş, içeriğin bahsettiği şey ile ilgili kullanıcıya görsel destek sağlayan resimlerdir. Telefon numaralarının önüne konulan telefon resmi gibi, bir köpek cinsini tanıtan bir metnin önüne, o cinse ait ve örnek olarak konulmuş bir köpek resmi gibi resimler bu tipten resimlerdir. Bu tip resimlerde, resmin ne anlatmak istediği, alternatif metinde belirtilir.
Aşağıda bu resimlerin kullanımına bir örnek verilmiştir:
Yukarıdaki yapı, erişilebilir olarak şöyle oluşturulabilir:
<p>
<img src="phone.png" alt="Telefon:"> 0123 456 7890
</p>
<p>
<img src="fax.png" alt="Fax:"> 0123 456 7891
</p>Veya bir köpek cinsini tanıtan bir yazının tepesine konulmuş bir resim, şöyle oluşturulabilir:
<p>
<img src="dog.jpg" alt="Boyununda bir zil bulunan bir köpek.">
Bu cinsten köpekler ...
</p>Veya, bir ilaç şişesinin kapağının nasıl açıldığını gösteren bir görselin HTML yapısı, erişilebilir olarak şöyle olabilir:
<img src="ilac-sisesi-kapagi-acma.png" alt="Kapağı aşağı itin ve saat yönünün tersi yönde (sağdan sola doğru) çevirin.">II – Dekoratif Resimler (Decorative Images)
Dekoratif amaç ile kullanılan resimler, sayfadaki içerik ile herhangi bir bağlantısı olmayan, sadece hoş bir görüntü oluşturmak amacıyla kullanılan resimlerdir. Kenarlık olarak kullanılan resimler, dolgu amaçlı kullanılan arka plan resimleri, köşe resimleri gibi resimler bu amaç ile kullanılan resimlerdir.
Dekoratif amaç ile kullanılan resimlerde alternatif metin boş bırakılır, (alt="") böylece ekran okuyucular bu resimleri görmezler.
Aslına bakarsanız, bir resmin bilgilendirme amacı ile mi dekoratif amaç ile mi kullanıldığına, sadece içeriğin yazarı karar verebilir. Dekoratif amaç ile kullanılan resimler genellikle şu özellikleri taşır:
- Kenarlıkları, boşlukları ya da köşeleri süslemek için kullanılırlar.
<img src="ustalan_arkaplaninda_kenarlik.png" alt="">Her ne kadar, boş bir alternatif metin kadar yaygın olmasa da, bu tip dekoratif resimler için role="presentation" özelliği de kullanılabilir.
<img src="ustalan_arkaplaninda_kenarlik.png" role="presentation">- Link textlerinin dikkat çekmesi veya tıklanabilir alanlarının arttırılması için kullanılırlar. Mesela, çiçeklere götüren bir linkin içine, dekoratif amaçlı ve rastgele bir çiçek resmi konulabilir. Aşağıda bu tip bir dekoratif resim örneği verilmiştir:
<a href="lalesayfasi.html">
<img src="lale.jpg" alt="">
<strong> Lale soğanları</strong>
</a>- İlgili metne bir örnek teşkil ederler fakat bilgi vermezler. Mesela, köpeklerden bahseden bir içeriğe, dekoratif amaçlı ve rastgele bir köpek resmi konulabilir ve kodu da şöyle olabilir:
<p>
<img src="kopekler.jpg" alt="">
<strong>Köpekler:</strong> ...
</p>- Sadece ambiyans olsun, yazıya uygun bir ortam oluşsun veya görsel olarak ilgiyi sayfaya çeksin diye kullanılırlar. Aşağıda bu amaçla kullanılan bir resim kodu verilmiştir:
<img src="tropikal.jpg" alt="">III – Fonksiyonel Resimler (Fonctional Images)
Fonksiyonel resimler, bir eylem başlatmak için kullanılırlar. Amaçları, içerik ile ilgi bir bilgi vermek ya da dekor oluşturmak değildir. Butonlarda, linklerde ve diğer interaktif elemanlarda kullanılırlar. Bu türdeki resimlerin alternatif textleri, resmin kendisini değil de görevini tarif etmelidir.
Örnek olarak, bir sayfayı yazdırmak için oluşturduğunuz bir linkte, bir yazıcı resmi kullandınız diyelim. Kullandığınız bu resim için alternatif text olarak, alt="yazıcı" yerine alt="sayfayı yazdır" kullanmak temanızı daha erişilebilir yapacaktır.
Yine, site içi arama yapmak için oluşturduğunuz arama butonunda kullandığınız bir büyüteç resmi için, alternatif text olarak, alt="buyutec" yerine alt="ara"
Başka bir örnek olarak, sitenizin logo resmini, ana sayfanıza götüren bir bağlantı olarak kodladınız diyelim. Bu durumda, logo resminiz için şöyle bir kodlama daha erişilebilir olacaktır:
<a href="https://www.sitecenneti.com/">
<img src="logo.png" alt="sitecenneti ana sayfa">
</a>Logo örneğinden devam edelim. Logomuzu yine ana sayfa bağlantısı olarak kullanalım fakat bu defa bir text ile birlikte kullanalım. Bu durumda, tekrara düşmemek ve gereksiz bilgi vermemek için, logo resmimizde bir alternatif text açıklaması yapmamıza gerek yoktur. Böyle durumlarda, logo resmimiz dekoratif bir resim olarak kullanılmış olacaktır. Yani doğru kod şöyle olmalıdır:
<a href="https://www.sitecenneti.com/">
<img src="logo.png" alt=""> Sitecenneti Ana Sayfa
</a>Yine, bizi yeni bir sayfaya götüren bir bağlantı içinde kullanılan bir ikon resmi için şu kod uygun olacaktır:
<a href="https://www.sitecenneti.com/" target="_blank">
Sitecenneti Ana Sayfa <img src="yeni-sayfa.png" alt="yeni bir sayfa">
</a>IV – Yazıların Resimleri (Images of Text)
Bazen yazıların resimlerini kullanmak isteriz. Bunu yapmadan önce, günümüzdeki CSS teknolojisinin, resmi çekilmiş gibi yazılar oluşturmakta çok maharetli olduğunu hatırlatmak isteriz. CSS yoluyla, şekillendirilen yazıların, bir çok açıdan daha avantajlı olduğunu da söylemeden geçmek istemeyiz.
Resim formatında bir yazı kullanıyorsak, resimde yazan yazıyı alternatif text olarak belirtmek daha erişilebilir olacaktır. Örneğe dikkat edelim:
Yukarıdaki resim için şu kodlama uygun olacaktır:
<img src="okunmasi-gereken-kitaplar.png" alt="Her muhasebecinin okuması gereken kitaplar">V – Karmaşık Resimler (Complex Images)
Karmaşık resimler, bir kaç kelime ile ifade edilemeyecek kadar çok bilgi sunan resimlerdir. Bu resimler genellikle şu tip resimlerdir:
- Grafikler, akış çizelgesi resimleridir.
- Sayfada yazılanları anlamak için, önce resmin anlaşılmasının gerektiği diyagramlar veya canlandırma resimleridir.
- İzobar eğrileri içeren hava durumu resimleri, konum gösteren haritalar gibi resimlerdir.
Bu tür resimler için, iki bölüm oluşturmamız gerekmektedir. Birinci bölümde resmin kısa bir açıklaması, ikinci bölümde ise uzun açıklaması yer almalıdır. Bahsettiğimiz bu kısa ve uzun açıklama kısımları oluşturmanın farklı yolları vardır. Bu yollar şu şekildedir:
Yol 1: Resmin alternatif metninde kısa açıklama yapılır, uzun açıklama için bir link oluşturulur:
<p>
<img
src="garfik.png"
alt="Bar çizelgesi, şu yılın şu döneminde şu sitenin ziyaretçi sayısının değişimini göstermektedir.">
<br>
<a href="ziyaretci-sayileri.html">Sitecenneti.com sitesinin şu yılın şu dönemindeki ziyaretçi sayısını gösteren grafiğin detaylı açıklaması</a>
</p>Yol 2: Bu yolda, kısa açıklama alternatif text içinde yapılır ve kısa açıklama içinde uzun açıklamanın hangi başlık altında yapıldığı da belirtilir. Koda dikkat ediniz:
<p>
<img
src="garfik.png"
alt="Bar çizelgesi, şu yılın şu döneminde şu sitenin ziyaretçi sayısının değişimini göstermektedir.">
<br>
<a href="ziyaretci-sayileri.html">Sitecenneti.com sitesinin şu yılın şu dönemindeki ziyaretçi sayısını gösteren grafiğin detaylı açıklaması aşağıdaki Ziyaretçi Grafiği başlığı altnda açıklanmıştır.</a>
</p>
[...]
<h2>Ziyaretçi Grafiği</h2>
[...]Yol 3: Bu yolda da kısa açıklama alternatif text içinde yapılır, uzun açıklama için bir link oluşturulur. Fakat, bütün bu elemanlar <figure> elemanı ile oluşturulan bir grup (role="group") içinde toplanır, böylelikle birlikte oldukları, ekran okuyuculara ilan edilmiş olur. Koda dikkat ediniz:
<figure role="group">
<img
src="garfik.png"
alt="Bar çizelgesi, şu yılın şu döneminde şu sitenin ziyaretçi sayısının değişimini göstermektedir.">
<figcaption>
<a href="ziyaretci-sayileri.html">Sitecenneti.com sitesinin şu yılın şu dönemindeki ziyaretçi sayısını gösteren grafiğin detaylı açıklaması</a>
</figcaption>
</figure>Yol 4: Bu yolda da bütün elemanlar <figure> elemanı ile oluşturulan bir grup (role="group") içinde toplanır. Yukarıdaki yoldan farklı olarak, uzun açıklama <figcaption> elemanı içinde yapılır. Koda dikkat ediniz:
<figure role="group">
<img
src="garfik.png"
alt="Bar çizelgesi, şu yılın şu döneminde şu sitenin ziyaretçi sayısının değişimini göstermektedir.">
<figcaption>
<h2>Grafiğin Açıklaması</h2>
<p>Bu grafik şunu şunu göstermektedir...</p>
<h2>Değerler...</h2>
<table>
<caption>Şu yılın şu döneminde şu sitenin ziyaretçi sayısının değişimini</caption>
<tr>…</tr>
</table>
</figcaption
</figure>Yol 5: Bu yolda longdesc özelliği kullanılır ve uzun açıklamanın hangi id değerindeki elemanda bulunduğu bu özellik yardımı ile belirtilir. Koda dikkat ediniz:
<img
src="garfik.png"
alt="Bar çizelgesi, şu yılın şu döneminde şu sitenin ziyaretçi sayısının değişimini göstermektedir.">
longdesc="#grafigin-aciklamasi">
[…]
<div id="grafigin-aciklamasi">
[…]
</div>Yol 6: Bu yolda aria-describedby özelliği kullanılır ve uzun açıklamanın hangi id değerindeki elemanda bulunduğu bu özellik yardımı ile belirtilir. Bu özelliği kullanırken uzun açıklamayı içeren HTML elemanı bir paragraf gibi bir düz metin elemanı olmalıdır. Koda dikkat ediniz:
<img
src="garfik.png"
alt="Bar çizelgesi, şu yılın şu döneminde şu sitenin ziyaretçi sayısının değişimini göstermektedir.">
aria-describedby="#grafigin-aciklamasi">
[…]
<p id="grafigin-aciklamasi">
[…]
</p>VI – Resim Grupları
Bazen tek bir bilgi vermek için birden çok resim bir arada kullanılır. Bunun en bilinen örneği, yıldızlardır. Bir çok alış-veriş sitesinde ürünlere beş adet yıldız grubu üzerinden verilen puanları görürüz. Bu şekilde, grup halinde kullanılan resimlerin erişilebilir olması için, bu resimlerden sadece birinin alternatif textini girmeliyiz, diğerlerini boş bırakmalıyız.
Aşağıdaki resim, beş yıldız üzerinden 3.5 puan almış bir içerik için oluşturulmuştur:
Bu resimler şu şekilde kodlanmalıdır:
<img src="star-full.jpg" alt="5 yıldız üzerinden 3.5 puan">
<img src="star-full.jpg" alt="">
<img src="star-full.jpg" alt="">
<img src="star-half.jpg" alt="">
<img src="star-empty.jpg" alt="">Başka bir örnek olarak, bir binanın farklı tarihlerde çekilmiş üç resmini birlikte sunduğumuzu düşünelim. Bu üç resim için, HTML5 elemanları ve bu elemanlarda kullanılan, role="group" ve aria-labelledby özellikleri ile aşağıdaki kod uygun olacaktır:
<figure role="group" aria-labelledby="fig1">
<figcaption id="fig1">
Tarihi binanın 50, 40 ve 30 yıl önce çekilmiş fotoğraflarını görüyorsunuz.
</figcaption>
<figure role="group" aria-labelledby="fig2">
<img src="bina-resmi-1.jpg"
alt="Binanın 50 yıl önceki renginin sarı olduğunu görüyoruz.">
<figcaption id="fig2">Binanın 50 yıl önceki resimi</figcaption>
</figure>
<figure role="group" aria-labelledby="fig3">
<img src="bina-resmi-2.jpg"
alt="Binanın 40 yıl önceki renginin yeşil olduğunu görüyoruz.">
<figcaption id="fig3">Binanın 40 yıl önceki resimi</figcaption>
</figure>
<figure role="group" aria-labelledby="fig4">
<img src="bina-resmi-3.jpg"
alt="Binanın 30 yıl önceki renginin mavi olduğunu görüyoruz.">
<figcaption id="fig4">Binanın 30 yıl önceki resimi</figcaption>
</figure>
</figure>VII – Resim Haritaları (Image Maps)
Haritalanmış bir resim için kullanılacak alternatif textler, resimdeki harita hakkında bilgi vermelidir.
Aşağıda, bir şirketin yönetim ağacına ait bir resim haritası kodu verilmiştir:
<img src="orgchart.png"
alt="Yönetici kadrosu: "
usemap="#Harita">
<map name="Harita" id="Harita">
<area
shape="rect"
coords="176,14,323,58"
href="…"
alt="Ahmet AHMET: Müdür"
>
<area
shape="rect"
coords="81,75,226,114"
href="…"
alt="Mehmet MEHMET: Genel Sekreter"
>
<area
shape="rect"
coords="6,138,155,182"
href="…"
alt="Ali ALİ: Pazarlama Müdürü (Müdüre karşı sorumludur)"
>
<area
shape="rect"
coords="175,138,323,182"
href="…"
alt="Ayşe AYŞE: Satış Müdürü (Müdüre karşı sorumludur)"
>
<area
shape="rect"
coords="345,136,496,186"
href="…"
alt="Fatma FATMA: Finans Müdürü (Müdüre karşı sorumludur)"
>
</map>Resim haritaları, sabit koordinatlar kullanıldığında mobil cihazlarda düzgün çalışmayabilir. Çünkü mobil cihazlarda, resimlerin en-boy değerleri değişebilmektedir.
3. Sekme Linkleri (Skip Links)
Sekme linkleri, sayfa içi dolaşımı kolaylaştıran bağlantılardır. Sekme linkleri ile sayfanın belli bir bölümüne hızlı bir şekilde gitmek mümkündür. Bu linkler genellikle bir web sayfasının şu bölümlerine gitmek için kullanılır:
- Ana menüye gitmek için
- İkincil menüye gitmek için
- Ana içeriğe gitmek için
- Sayfanın üst kısmına gitmek için
- Sayfanın alt kısmına gitmek için
Aşağıda, sekme linkleri ile birlikte oluşturulmuş, erişilebilir bir HTML sayfası görüyorsunuz.
…
<body>
<ul class="skip-linkleri">
<li><a href="#ana-menu"></a>Ana menüye git</li>
<li><a href="#ikincil-menu"></a>İkincil menüye git</li>
<li><a href="#icerik"></a>İçeriğe git</li>
<li><a href="#sayfa-alti"></a>Sayfanın altına git</li>
</ul>
<header id="sayfa-ustu">
<h1>Bemin Şirketim Şti.</h1>
</header>
<nav id="ana-menu" aria-labelledby="anamenuheader">
<h2 id="anamenuheader">Ana Menu</h2>
…
</nav>
<main id="icerik">
<article>
<h2>Makalenin Başlığı</h2>
<nav id="ikincil-menu" aria-labelledby="tocheader">
<h3 id="tocheader">İçerikler Tablosu</h3>
…
</nav>
<p>…</p>
<p>…</p>
<p>…</p>
<ul>
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
<h3>Alt Başlık</h3>
<p>…</p>
<p>…</p>
<aside aria-labelledby="relatedheader">
<h3 id="relatedheader">Bunlar da İlginizi Çekebilir</h3>
<ul>
<li><a href="#">…</a></li>
<li><a href="#">…</a></li>
<li><a href="#">…</a></li>
</ul>
</aside>
</article>
<aside aria-labelledby="latestheader">
<h3 id="latestheader">Son Eklenenlar</h3>
<ul>
<li><a href="#">…</a></li>
<li><a href="#">…</a></li>
<li><a href="#">…</a></li>
</ul>
</aside>
</main>
<footer id="sayfa-alti">
<p>
© Benim Şirketim Şti. -
<a class="sayfa-ustune-git" href="#sayfa-ustu">Yukarı git</a>
</p>
</footer>
</body>
…Sekme linklerinin, sadece ekran okuyucular veya klavyeler için görünmesini istiyorsanız, CSS kullanarak, bu linkleri sayfanın normal sınırlarının dışına itebilirsiniz. Yukarıdaki örnek sayfada, CSS sınıfı class="skip-linkleri" olan sekmeleri, sayfa dışına itmek ve klavye ile erişilebilir yapmak için şu CSS kodlarını kullanabiliriz:
.skip-linkleri {
margin: 0;
padding: 0;
list-style-type: none;
}
.skip-linkleri a {
position: absolute;
top: -3em;
background-color: #000;
color: #fff;
font-weight: bold;
text-decoration: none;
}
.skip-linkleri a:focus {
top: 0;
}4. Linkler
Erişilebilir bir temada, linklerin taşıması gereken özellikler şöyle sıralanabilir:
I – Link Textleri
Link textleri götürecekleri sayfa hakkında bilgi vermelidir. Bazı yardımcı teknolojiler, sayfadaki linkleri tararlar ve bir liste halinde kullanıcısına sunarlar. Bu yüzden, kısıtlı kullanıcının anlayabileceği şekilde, linkler için kullanılan textlerin link ile ilgili anlamlı bir bilgi vermesi önemlidir. Aşağıda, bir yazının devamını okumak için oluşturulan erişilebilir link örnekleri verilmiştir:
<?php the_content( the_title('', '', false) . __('Okumaya devam et', 'text_domain') ); ?>Yukarıda verilen kod, şöyle bir bağlantı oluşturacaktır (Yazının adının “Benim Güzel Yazım” olduğunu farzediyoruz):
<a href="https://sitecenneti.com/..." class="more-link">Benim Güzel yazım okumaya devam etç.ç.</a>Başka bir okumaya devam et bağlantısı örneği:
<?php
the_content( sprintf( __('%1$s%2$s%3$s devamını gör', 'text_domain'), '<span>', get_the_title(), '</span>') );
?>Yukarıdaki kod, aşağıdaki HTML kodunu oluşturacaktır:
<a href="https://sitecenneti.com/...." class="more-link"><span>Benim Güzel Yazım</span> devamını gör</a>Verilen örneklerde, devamını okumak için oluşturulan linklerin textleri, yazının başlığını da içermektedir. Bu yüzden, bir ekran okuyucusu kullanıcısı, bu linke gittiğinde karşısına ne çıkacağını bilecektir.
II – Linki Vurgulama
Opera haricindeki diğer web tarayıcıların varsayılan link vurguları oldukça kullanışsızdır. Bu yüzden, klavye aracılığıyla bir sayfadaki linklerin arasında gezinirken kaybolma ihtimali yüksektir. Bunun önüne geçmek, linkler için a:focus ve a:active sınıfları kullanarak belirgin stiller oluşturmak kadar kolaydır.
III – Linklerin Altını Çizmek
Genel olarak, menülerde bulunanların haricindeki linklerin altının çizilmesi gerektiği bilinir. Linkler için farklı renkler kullanmak, her zaman işe yarayan bir yol değildir. Çünkü, kullandığımız renkten ya da ziyaretçinin kısıtlı olmasından dolayı, linklere verdiğimiz renkler farkedilemeyebilir. Bu yüzden altı çizili linkler oluşturmak linklerinizi daha erişilebilir yapacaktır.
5. Formlar
Ekran okuyucular, ekranda bir HTML <form> elemanı ile karşılaştığında, otomatik olarak, okuma modundan etkileşim moduna (interaktif mod) geçerler. Bu durumda, <input> alanlarımız için girdiğimiz açıklamalar önem kazanmaktadır. Çünkü ekran okuyucu kullanıcısı, bu formu bu açıklamalara göre dolduracaktır.
I – Label Elemanı
Bir <input> alının açıklamasını, HTML paragraf elamanı (<p>..</p>) ile yaptıysak, ekran okuyucu bu açıklamanın hangi input alanına ait olduğunu anlayamayacak ve görmezden gelecektir. Bu yüzden, formlarımızdaki <input> alanlarımız hakkında bilgi vermek için <label> elamanı kullanmamız gerekmektedir.
Aşağıda label etiketi ile birlikte input kullanımına bir örnek verilmiştir:
<label for="adiniz">Adınızı giriniz:</label>
<input type="text" name="adiniz" id="adiniz"><br>
<input type="checkbox" name="uyeol" id="uyeol">
<label for="uyeol">Beni haberdar et</label>Label Textini Saklama
Bazı durumlarda, <input> elemanının görevi herkes için oldukça açıktır ve ekstra bir açıklamaya yani bir <label> elemanına ihtiyaç kalmaz. Bu durumda, yapmamız gereken, ekran okuyucu ya da seslendiricisi kullananlar için, <input> alanımızı açıklamak fakat bunu normal kullanıcıların görmeyeceği şekilde yapmak yani <label> etiketini saklamaktır.
Bir <label> elemanını saklamanın farklı yöntemleri vardır. Bu yöntemler şunlardır:
Yöntem 1: CSS kullanarak saklayabiliriz. Örneğe dikkat edelim:
<label for="ara" class="sakla">Ara: </label>
<input type="text" name="ara" id="ara">
<button type="submit">Ara</button>Yukarıdaki örnekte, <label> etiketinin sahip olduğu "sakla" sınıfının CSS yapısı şöyledir:
.sakla {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}Ekran okuyucu teknolojiler de tıpkı web tarayıcılar gibi, display: none; ve visibility: hidden; şeklinde saklanmış HTML elemanlarını görmezden gelirler.
Yöntem 2: aria-label özelliği kullanabiliriz.
<input type="text" name="ara" aria-label="Ara">
<button type="submit">Ara</button>Yöntem 3: aria-labelledby özelliği kullanabiliriz.
<input type="text" name="ara" aria-labelledby="aramabutonu">
<button id="aramabutonu" type="submit">Ara</button>Yöntem 4: title özelliği kullanabiliriz.
Tavsiye edilen bir yol olmasa da, title özelliği, <input> alanının ne işe yaradığını ifade edebilir.
<input title="Ara" type="text" name="ara">
<button type="submit">Ara</button>Label Elemanı ile Sarma
Bazen <input> elemanın id değeri belli değildir. Bu durumlarda, erişilebilirliği korumak için, <input> elemanını, <label> elemanı içine alabilirsiniz. Aşağıda bunun örneği verilmiştir:
<label>
Adınız:
<input type="text" name="adi">
</label>
<br>
<label>
<input type="checkbox" name="aboneol">
Gazetemize abone olun.
</label>Butonlar
Butonlar veya buton görevi gören <input> elemanları, ne işe yaradıklarına dair açıklamaları, zaten kendi içlerinde barındırırlar. Aşağıda, bu durum gösterilmiştir:
<button type="submit">Gönder</button>
<button type="button">İptel et</button>
<input type="submit" value="Gönder">
<input type="button" value="İptal et">Eğeri type="image" (resim) tipinde bir <input> elemanı kullanıyorsak, bu butonun görevini alt özelliği ile belirtebiliriz:
<input type="image" src="aramabutonu.png" alt="Ara">Label Textinin Yerleşimi
<radio> ve <checkbox> tipindeki form elemanlarına ait <label> textlerinin, bu form elemanlarına göre sağda bulunması, bu ikisi dışındaki form elemanlarının <label> textlerinin ise üstlerinde veya sol taraflarında bulunması tavsiye edilir. Bu yerleşim, form elemanlarımızın anlaşılırlığını arttıracaktır.
II – Form Elemanlarını Gruplama
Belli bir bilgi için oluşturulmuş form alanlarını gruplamak, kullanıcının formu daha kolay anlamasını sağlar. Form alanlarını gruplamak için, <fieldset>, <legend>, <optgroup> gibi HTML elemanları kullanılır. Aşağıda bu elemanların, erişilebilir olarak kullanımına örnekler verilmiştir.
Örnek – 1: type="radio" tipindeki butonların gruplandırılmasına bir örnektir:
<fieldset>
<legend>Dosya Formatı Seçiniz</legend>
<div>
<input type="radio" name="format" id="txt" value="txt" checked>
<label for="txt">Text dosyası</label>
</div>
<div>
<input type="radio" name="format" id="csv" value="csv">
<label for="csv">CSV dosyası</label>
</div>
<div>
<input type="radio" name="format" id="html" value="html">
<label for="csv">HTML dosyası</label>
</div>
</fieldset>Yukarıdaki kod, şöyle bir form alanı oluşturur:
Örnek – 2: type="checkbox" tipindeki alanlarının gruplandırılmasına bir örnektir:
<fieldset>
<legend>Şunları satın almak istiyorum:</legend>
<div>
<input type="checkbox" name="hosting" id="check_1">
<label for="check_1">Hosting</label>
</div>
<div>
<input type="checkbox" name="domain" id="check_2">
<label for="check_1">Domain</label>
</div>
<div>
<input type="checkbox" name="ssl" id="check_3">
<label for="check_1">SSL sertifikası</label>
</div>
</fieldset>Yukarıdaki kod, şöyle bir form alanı oluşturur:
Örnek – 3: Birbiri ile bağlantılı alanlarının gruplandırılmasına bir örnektir:
<fieldset style="float: left;">
<legend>Kargo Adresi:</legend>
<div>
<label for="kargo_adi"><span class="sakla">Kargo </span>Adı:</label><br>
<input type="text" name="kargo_adi" id="kargo_adi">
</div>
<div>
<label for="cadde">Cadde:</label><br>
<input type="text" name="cadde" id="cadde">
</div>
<div>
<label for="no">Numara:</label><br>
<input type="text" name="no" id="no">
</div>
<div>
<label for="sehir">Şehir:</label><br>
<input type="text" name="sehir" id="sehir">
</div>
<div>
<label for="posta_kodu">Posta kodu:</label><br>
<input type="text" name="posta_kodu" id="posta_kodu">
</div>
</fieldset>
<fieldset style="float: left;">
<legend>Fatura Adresi:</legend>
<div>
<label for="fatura_adi"><span class="sakla">Fatura </span>Adı:</label><br>
<input type="text" name="fatura_adi" id="fatura_adi">
</div>
<div>
<label for="fatura_caddesi">Cadde:</label><br>
<input type="text" name="fatura_caddesi" id="fatura_caddesi">
</div>
<div>
<label for="fatura_no">No:</label><br>
<input type="text" name="fatura_no" id="fatura_no">
</div>
<div>
<label for="fatura_sehir">Şehir:</label><br>
<input type="text" name="fatura_sehir" id="fatura_sehir">
</div>
<div>
<label for="fatura_posta_kodu">Posta kodu:</label><br>
<input type="text" name="fatura_posta_kodu" id="fatura_posta_kodu">
</div>
</fieldset>Yukarıdaki kod, şöyle bir form alanı oluşturur:
Örnek – 4: role="group" ve aria-labelledby="..." özellikleri kullanılarak, bağlantılı form alanlarının gruplandırılmasına bir örnektir:
<div role="group" aria-labelledby="kargo_basligi" style="float: left;">
<div id="kargo_basligi">Kargo Adresi:</div>
<div>
<label for="kargo_adi"><span class="sakla">Kargo </span>Adı:</label><br>
<input type="text" name="kargo_adi" id="kargo_adi">
</div>
<div>
<label for="cadde">Cadde:</label><br>
<input type="text" name="cadde" id="cadde">
</div>
<div>
<label for="no">Numara:</label><br>
<input type="text" name="no" id="no">
</div>
<div>
<label for="sehir">Şehir:</label><br>
<input type="text" name="sehir" id="sehir">
</div>
<div>
<label for="posta_kodu">Posta kodu:</label><br>
<input type="text" name="posta_kodu" id="posta_kodu">
</div>
</div>
<div role="group" aria-labelledby="fatura_basligi" style="float: left;">
<div id="fatura_basligi">Fatura Adresi:</div>
<div>
<label for="fatura_adi"><span class="sakla">Fatura </span>Adı:</label><br>
<input type="text" name="fatura_adi" id="fatura_adi">
</div>
<div>
<label for="fatura_caddesi">Cadde:</label><br>
<input type="text" name="fatura_caddesi" id="fatura_caddesi">
</div>
<div>
<label for="fatura_no">No:</label><br>
<input type="text" name="fatura_no" id="fatura_no">
</div>
<div>
<label for="fatura_sehir">Şehir:</label><br>
<input type="text" name="fatura_sehir" id="fatura_sehir">
</div>
<div>
<label for="fatura_posta_kodu">Posta kodu:</label><br>
<input type="text" name="fatura_posta_kodu" id="fatura_posta_kodu">
</div>
</div>Yukarıdaki kod, şöyle bir form alanı oluşturur:
Örnek – 5: <optgroup> elemanı kullanılarak, bağlantılı form alanlarının gruplandırılmasına bir örnektir:
<select name="elementler" id="elementler">
<optgroup label="Metaller">
<option value="alkali">Alkali metaller</option>
<option value="toprak_alkali">Toprak alkali metaller</option>
<option value="toprak">Toprak metalleri</option>
</optgroup>
<optgroup label="Ametaller">
<option value="halojen">Halojenler</option>
<option value="kalkojen">Kalkojenler</option>
<option value="azot">Azot grubu</option>
</optgroup>
<optgroup label="Soygazlar">
<option value="helyum">Helyum</option>
<option value="neon">Neon</option>
<option value="argon">Argon</option>
</optgroup>
</select>
<input type="submit" value="Seç" />Yukarıdaki kod, şöyle bir form alanı oluşturur:
III – Form Alanını Örneklendirme
Form alanlarınız, belli bir formatta bilgi kabul ediyorsa, kullanıcılarınızı, bu formata uygun olarak veri girebilmeleri için, örnekler ya da ipuçları vererek aydınlatmanız gerekir. Aksi taktirde, kullanıcınız, istediğiniz bilgiyi anlamayabilir ve formu başarı ile dolduramayabilir.
Ekran okuyucuları, sayfada bir <form> etiketi ile karşılaştıklarında, hemen form moduna geçerler. Bu modda iken sadece, <input>, <select>, <textarea>, <legend> ve <label> elemanlarını seslendirirler. Bu yüzden, input alanlarımızın doğru doldurulması için vereceğimiz örneklerin, bu elemanlar ile ilişkili olması gerekmektedir. Aşağıda bunu nasıl başaracağımıza dair farklı örnekler verilmiştir:
Örnek -1: İpuçlarını, label elamanının içinde verebiliriz:
<label for="skt">Son kullanım tarihi (AA/YYYY): </label> <input type="text" name="skt" id="skt">Örnek -2: İpuçlarını, <label> elamanının dışında verebiliriz. Bunun için aria-labelledby özelliğinden yardım alabiliriz:
<label id="sktEtiketi" for="skt" tabindex="-1">Son kullanım tarihi:</label>
<span>
<input type="text" name="skt" id="skt" aria-labelledby="sktEtiketi sktIpucu">
<span id="sktIpucu" tabindex="-1">AA/YYYY</span>
</span>Yukarıdaki form alanı sayfamızda şöyle görünecektir:
AA/YYYYÖrnek -3: İpuçlarını, <label> elamanının dışında gösterip, aria-describedby özelliğinden yardım alabiliriz:
<label id="sktEtiketi" for="expire">Son kullanım tarihi:</label>
<span>
<input type="text" name="skt" id="skt" aria-labelledby="sktEtiketi" aria-describedby="sktIpucu">
<span id="sktIpucu">AA/YYYY</span>
</span>Placeholder (Yer tutucu) Textler
Yer tutucu textler, kullanıcımız <input> alanına tıkladığında kaybolan soluk yazılardır. Yer tutucu textler ile de, input alanında istenen bilginin formatına dair örnek verebiliriz. Fakat bu yol, bu işi bir <label> elemanı ile yapmaktan daha iyi bir yol değildir. Çünkü kullanıcımız, <input> alanına veri girmeye başladığı anda, örnek ortadan kaybolacak ve kullanıcımızın kafası karışabilecektir.
Aşağıda, <input> elemanları ile birlikte yer tutucu text kullanımına örnek verilmiştir:
<div>
<label for="ara">Ara:</label> <input type="text" name="ara" id="ara" placeholder="örnek: Muzlu kek">
</div>
<div>
<label for="email">Email: </label> <input type="text" name="email" id="email" placeholder="ali123@ornek.com">
</div>Yukarıdaki form alanı sayfamızda şöyle görünecektir:
Yer Tutucuları (Placeholder) Stillendirme
Web tarayıcıları, genellikle yer tutucu metinleri, olması gereken minimum contrast değerinin altında göstermektedir. Erişilebilir bir tema için, yer tutucu metinlerinin renklerini canlandırmak gerekmektedir. Aşağıda bunun için gerekli CSS kodları verilmiştir:
::-webkit-input-placeholder {
color: #767676;
opacity: 1;
}
:-moz-placeholder { /* Firefox 18- */
color: #767676;
opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
color: #767676;
opacity: 1;
}
:-ms-input-placeholder {
color: #767676;
opacity: 1;
}IV – Verileri Onaylamak
Bir form alanına girilen dataların, istenilen nitelikte olup olmadığını kontrol etmek ve varsa eksiklikler hakkında kullanıcıya geri dönüş yapmak veya form alanına sadece belli formatta veri girilmesine izin vermek, verileri onaylamak anlamına gelmektedir.
HTML5; email, url, number, range, date, ve time tipindeki <input> elemanları için, varsayılan olarak onaylama özelliği taşımaktadır.
Verileri kontrol edip onaylamak işlemi için geliştirdiğimiz kodlar, hem istemci (web tarayıcı) hem de server taraflı olmalıdır. Unutmayınız, istemci taraflı güvenlik önemleri kolayca atlatılabilmektedir.
Aşağıda HTML5 ile birlikte gelen, kendinden doğrulamalı form alanları verilmiştir:
<div>
<label for="email">Email: </label>
<input type="email" name="email" id="email">
</div>
<div>
<label for="url">Website: </label>
<input type="url" name="url" id="url">
</div>
<div>
<label for="numara">0 ile 100 Arası Numara: </label>
<input type="number" name="numara" id="numara" min="0" max="100" step="10" value="0">
</div>
<div>
<label for="dilim">Yüzdelik Dilimi: </label>
<input type="range" name="dilim" id="dilim" min="0" max="100" step="10" value="0">
</div>
<div>
<label for="tarih">Tarih: </label>
<input type="date" name="tarih" id="tarih">
</div>
<div>
<label for="zaman">Zaman: </label>
<input type="time" name="zaman" id="zaman">
</div>Yukarıdaki form alanları, sayfamızda şöyle görünecektir:
Aşağıda, SS HHH SSSS (S:sayı, H:harf) formatında plaka girişi için oluşturulmuş bir alan görüyorsunuz. Bu form alanı, formata uymayan plakaları kabul etmeyecektir:
<div>
<label for="plaka">Plakanızı giriniz SS HHH SSSS (S:sayı, H:harf)</label>
<input type="text" id="plaka"
pattern="[A-Z]{1,2}( )[A-Z]{2,3}( )[0-9]{1,4}"
>
</div>Zorunlu alanlar oluşturmak da, kullanıcılarımızın eksik bilgi girmesini engelleyecektir. Zorunlu bir alan oluşturduğumuzda, bu durumdan kullanıcımızı ve ekran okuyucular haberdar etmemiz gerekir. Aşağıda, ekran okuyucuların da anlayacağı şekilde, zorunlu bir form alanı örneği vardır:
<label for="adiniz">Adını (zorunlu): </label>
<input type="text" name="adiniz" id="adiniz" required aria-required="true">V – Kullanıcıyı Bilgilendirme
Kullanıcı bir form alanını gidiğinde veya formu gönderdiğinde bilgilendirilmelidir.
Form alanını doldururken, bir hata yapıldığında, kullanıcı bu hatadan mümkünse hemen haberdar edilmelidir. Bu yapılmadıysa, formu gönderdiğinde, yapılan hatalar anlaşılır bir şekilde tarif edilmelidir.
Formu gönderdiğinde, kullanıcı yaptığı işlemin başarılı veya eksiksiz olup olmadığını bilmek isteyecektir. Bu yüzden, kullanıcıya, form gönderme işleminin sonucu hakkında bilgi verilmelidir.
Aşağıda bu türden bilgilendirme örnekleri verilmiştir.
Hata mesajı:
<h1>Hata – Fatura adresi hatalı</h1>
<!-- veya -->
<h2>Hata – Fatura adresi hatalı</h2>Başarı mesajı:
<h1>Siparişiniz başarıyla verilmiştir. Bizi tercih ettiğiniz için teşekkürler.</h1>
<!-- veya -->
<h2>Siparişiniz başarıyla verilmiştir. Bizi tercih ettiğiniz için teşekkürler.</h2>Sayfa başlığı ile hata mesajı:
<title>Hata – Fatura adresi hatalı</title>Sayfa başlığı ile başarı mesajı:
<title>Sipariş başarılı. Teşekkürler.</title>JS diyaloğu ile başarı mesajı:
document.getElementById('tiklananbuton')
.addEventListener('click', function() {
/* [… data kaydı yapılan bölge …] */
alert('Sipariş başarılı. Teşekkürler!');
});VI – Çok Sayfalı Formlar
Çok sayfalı formlarda şu hususlara dikkat etmek gerekir:
- Form alanları ile ilgili gerekli açıklamalar, her sayfada ayrı ayır yapılmalıdır.
- Her bir sayfa, mantıklı veya birbirine yakın form alanlarından oluşmalıdır. Mesela, bir sipariş kabulu yapıyorsak, ilk sayfada kargo bilgileri, diğer sayfada fatura bilgileri olabilir.
- Zorunlu olmayan sayfa ya da bölümleri es geçebilmesi için kullanıcıya izin verilmelidir.
- Mümkünse, sayfalar için bir zaman kısıtlaması konulmamalıdır, konulursa da kullanıcının, dilerse zamanı uzatmasına izin verilmelidir.
VII – Özel Formlar
Bazen, kullanıcıdan istediğimiz bilgi, bilinen form elemanları ile elde edilemeyecek türden olabilir. Paylaşım butonları, derecelendirme yıldızları gibi alanlar bunlara örnek olarak verilebilir.
Aşağıda, derecelendirme yıldızı örneği verilmiştir:
Yukarıdaki form şu kodlardan oluşur:
<form action="#" id="star_rating">
<input value="0" id="star0" checked="" type="radio" name="rating" class="visuallyhidden">
<label for="star0">
<span class="visuallyhidden">0 Yıldız</span>
<svg viewBox="0 0 512 512">
<g stroke-width="70" stroke-linecap="square">
<path d="M91.5,442.5 L409.366489,124.633512"></path>
<path d="M90.9861965,124.986197 L409.184248,443.184248"></path>
</g>
</svg>
</label>
<input value="1" id="star1" type="radio" name="rating" class="visuallyhidden">
<label for="star1">
<span class="visuallyhidden">1 Yıldız</span>
<svg viewBox="0 0 512 512"><path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path></svg>
</label>
<input value="2" id="star2" type="radio" name="rating" class="visuallyhidden">
<label for="star2">
<span class="visuallyhidden">2 Yıldız</span>
<svg viewBox="0 0 512 512"><path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path></svg>
</label>
<input value="3" id="star3" type="radio" name="rating" class="visuallyhidden">
<label for="star3">
<span class="visuallyhidden">3 Yıldız</span> <svg viewBox="0 0 512 512"><path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path></svg>
</label>
<input value="4" id="star4" type="radio" name="rating" class="visuallyhidden">
<label for="star4">
<span class="visuallyhidden">4 Yıldız</span> <svg viewBox="0 0 512 512"><path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path></svg>
</label>
<input value="5" id="star5" type="radio" name="rating" class="visuallyhidden">
<label for="star5">
<span class="visuallyhidden">5 Yıldız</span> <svg viewBox="0 0 512 512"><path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path></svg>
</label>
<button type="submit" class="btn-small visuallyhidden focusable">Submit rating</button>
<output></output>
</form>
<style>
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
#star_rating svg {
width: 1em;
height: 1em;
fill: currentColor;
stroke: currentColor;
}
#star_rating label, #star_rating output {
display:block;
float:left;
font-size: 2em;
height: 1.2em;
color: #036;
cursor: pointer;
border-bottom: 2px solid transparent;
}
#star_rating output {
font-size: 1.5em;
padding: 0 1em;
}
#star_rating input:checked ~ label {
color: #858585;
}
#star_rating input:checked + label {
color: #036;
border-bottom-color: #036;
}
#star_rating input:focus + label {
border-bottom-style: dotted;
}
#star_rating:hover input + label {
color: #036;
}
#star_rating input:hover ~ label,
#star_rating input:focus ~ label,
#star_rating input[id="star0"] + label {
color: #999;
}
#star_rating input:hover + label,
#star_rating input:focus + label {
color: #036;
}
#star_rating input[id="star0"]:checked + label {
color: #ff2d21;
}
#star_rating [type="submit"] {
float: none;
}
</style>
<script>
var radios = document.querySelectorAll('#star_rating input[type=radio]');
var btn = document.querySelector('#star_rating button');
var output = document.querySelector('#star_rating output');
var do_something = function(stars) {
// An AJAX request could send the data to the server
output.textContent = stars;
};
Array.prototype.forEach.call(radios, function(el, i){
var label = el.nextSibling.nextSibling;
label.addEventListener("click", function(event){
do_something(label.querySelector('span').textContent);
});
});
document.querySelector('#star_rating').addEventListener('submit', function(event){
do_something(document.querySelector('#star_rating :checked ~ label span').textContent);
event.preventDefault();
event.stopImmediatePropagation();
});
</script>6. Renkler
İnternet kullanıcılarının yaklaşık %10’u ve özellikle renk körü olanlar, renkleri görmekle ilgili sorunlar yaşamaktadır. Renk körleri, özellikle kırmızı ve yeşil renkleri birbirinden ayırmakta zorluk yaşamaktadır.
Aşağıda, dört farklı renk körü hastalığı (Protanopia, Deuteranopia, Tritanopia ve Monochromatism) ve bu hastaların, renk spektrumunu nasıl gördükleri gösterilmiştir:
Yukarıda; ortadaki renk spektrumu, sağlıklı bir gözün renkleri nasıl gördüğünü gösterir, köşelerdeki renkler ise her bir renk körü hastasının ortadaki renk spektrumunu nasıl gördüğünü gösterir.
Mesela, Protanopia ve Deuteranopia hastaları, neredeyse bütün renkleri sarı ve mavinin tonları olarak görmektedir. Dolayısıyla, sarı ve mavi dışındaki renkler ile oluşturduğumuz tonlama farkları, bu tür hastaların gözünde aynı görünecektir.
Web sayfalarınızın, renk körü hastalarının gözünde nasıl göründüğünü merak ediyorsanız, sayfanızın bir ekran görüntüsünü alıp, bir renk körlüğü simülatörü yardımı ile sayfanıza renk körlerinin gözünden bakabilirsiniz.
7. Renkler Arasındaki Kontrast Oranı
Kontrast kavramı, renkler arasındaki zıtlığı ifade eder. Konstrast, bir resimdeki en karanlık renk ile en aydınlık renk arasındaki farktır.
Temanızın arka plan rengi ile yazı rengi arasında belli bir kontrast oranı yoksa, görme sorunu yaşayan bir çok kullanıcınız, yazılarınızı okumakta zorluk yaşayacaktır.
Bir web sayfasında, okunaklı olması için, yazı rengi ile arka plan rengi arasındaki kontrast oranı en az 4.5:1 olmalıdır. 24 pixel yazılarda veya 19 pixel ve kalın yazılmış yazılarda bu oran, 3:1 oranına kadar düşebilir.
Sayfalarınızda kullandığınız ön ve arka plan renkleri arasındaki kontrast oranını görmek için, renkler arası kontrast oranı testi yapabilirsiniz.
8. jQuery ve JavaScript Kullanmak
Erişilebilir temalarda, jQuery kullanabilirsiniz. Fakat temel özelliklerde, jQuery’e güvenmemelisiniz. Nedenini merak ediyorsanız, tarayıcınızda JavaScript’i kapatıp, sitenizin jQuery ile kodlanmış özelliklerini kullanmayı deneyebilirsiniz.
Temanızda, jQuery kullanarak slayt şov gibi bir bölüm kodladıysanız, bu bölümün klavye tuşları ile de kullanılabildiğinden emin olun.
9. Temanızı Test Edin
İnternet’te, temanızın erişilebilirlik durumunu test edebileceğiniz araçlar vardır. Bu araçları kullanarak, WordPress temanızın erişebilirlikte testlerini yapabilirsiniz.
Temanızı, farklı tarayıcılar ile test etmeniz, erişilebilirlik açısından önemlidir. Çünkü, temanızda kullandığınız HTML veya CSS kodları, bazı tarayıcılarda farklı yorumlanabilir veya bir kısmında tanınırken diğerlerinde tanınmayabilir. Bu durumda, tema sayfalarınız, farklı tarayıcılarda farklı veya eksik görünebilir.
10. Uzak Durmanız Gerekenler
I – Yeni Pencere ve Sekmeler
Yeni pencereler veya sekmeler, kullanıcının gezinme geçmişini sıfırlayacak, bazı klavye gezginlerinin tekrar aynı sayfaya dönmesini zorlaştıracaktır. Bu yüzden, gerçekten zorunlu değilseniz, kullanıcılarınızı yeni sayfa ya da sekmelere göndermeyin, göndermek zorunda iseniz de, kullanıcınızı bu durumdan haberdar edin.
II – Autoplay ve Animasyonlar
Autoplay ve animasyonlar ile ilgili uzak durmanız gereken hatalar şunlardır:
- Kullanıcıların açık bir izni olmadan, herhangi bir ses dosyasını otomatik olarak başlatmayın.
- Sesler, ekran okuyucuların seslendirmeleri ile karışıp, ekran okuyucusunun sesinin boğuk çıkmasına sebep olur.
- Fash veya .gif gibi animasyonlar, bazı durumlarda kullanıcıların hastalık nöbeti (photo-epileptic nöbet) geçirmesine sebep olabilir.
- Slayt şovlar, ekran okuyucusu kullananlar için veya klavye gezgini kullananlar için sorun olabilir.
- Kar yağması efekti gibi özel efekt animasyonlarının, photo-epileptic nöbetlere sebep olduğu bilinmektedir.
III – Tabindex
tabindex özelliği nesnelerin sekme (tab tuşu) sıralamasını tanımlar. “TAB” tuşuna basıldığında nesneler tabindex özelliğinde belirtilen sırada gösterilir.
tabindex özelliğini, bazı durumlarda negatif değer vermek gerekliliği dışında, kullanmaktan kaçının. Çünkü, menülerde dolaşma düzenini sizin değil kullanıcının kendisinin belirlemesi doğru olandır.
1 yorum: “4.19 Erişilebilirlik-Ulaşılabilirlik (Accessibility)”