Web’de erişilebilirlik

Web'de erişilebilirlik kavramı, başta görme engellilerin de sayfaları algılayabilecek hale dönüştürülmesi ve sayfaların farklı platformlarda da görüntülebilmesini kapsar. Türkiye'de bırakın kullanıcıları, web tasarımcılarının bile çoğu, erişilebilirlik kavramından haberdar değil. Oysa ki özellikle başta ABD'de olmak üzere erişilebilirlik özelliklerinin web sayfalarında kullanımı bir standart haline gelmeye başladı bile. Ülkemizde düzenlenen Altın Örümcek web tasarım yarışmasında  2008'den bu yana erişilebilirlik, tasarım kriterleri arasına girdi.

Görme engelliler sayfaları nasıl okur?

Peki görme engelliler nasıl oluyor da bir web sayfasından faydalanabiliyor diye düşünebilirsiniz. Tabi ki sesli okuyucusu olan özel tarayıcılar yardımıyla. Ama siz siteyi bu platforma uygun olarak kodlarsanız tabi ki.

Erişilebilirlik nasıl sağlanır?

Tasarımcılar için erişilebilirliği sağlamanın yolu, kodlamada yapılacak eklemeler ile mümkün. Yani aslında erişilebilriliği sağlamak için ayrı sayfalar tasarlamanız gerekmiyor. Tasarladığınız sayfanın kodlarına erişilebilirlik eklentilerini dahil etmeniz yeterli.

Şimdi bu erişilebilirlik eklentilerinin neler olduğuna bakalım:

1. Resim dosyalarına alternatif metin ekleme

Resim dosyalarında bulunan "alt" yani altarnate text (alternatif metin) etiketinin boş bırakılmayarak yazılması, kullanılan resmin ne olduğu hakkında engellilere bilgi verecektir. Küçük gif, png sayfa tasarımı ile alakalı görsellere bu etiketleri vermeniz gerekmez. Ancak içerikli alakalı olan, özellikle jpg uzantılı resim dosyalarının alternatif metinlerinin yazılması önemlidir.

Örnek:

<img src="resim.jpg" alt="Balık tutan bir adam" />

2. Bağlantılara açıklama ekleme

Bağlantılarda yer alan bir öznitelik olan "title", bağlantıların üzerine geldiğinizde bir açıklama yazısı görünmesini sağlar. Bu özellik sayesinde bağlantınız hakkında ziyaretçilere bilgi verebilirsiniz. Bu sadece engelliler için değil, engelli olmayan kullanıcılar için de faydalı bir özelliktir.

Örnek:

<a href="resimler.html" title="Son toplantıdan resimler">Resimler</a>

3. Başlıkların sistematik olması

Kullandığınız başlıklar sistematik olmalı. Yani hiyerarşik bir düzene bağlı olarak büyükten küçüğe doğru gitmeli. Başlıklarda <h1>, <h2>, <h3> gibi hiyerarşik başlık etiketlerini kullanmanız, içeriğinizi daha anlaşılabilir hâle getirecektir. Ayrıca başlıklar, içeriği doğru anlaşılır kılacak şekilde açık olmalıdır. Gereğinden uzun ve anlaşılmasını zorlaştıracak kadar kısa olmamalıdır.

Örnek:

<h1>Ana başlık</h1>
<h2>Alt başlık</h2>
<h3>Alt başlık kategorileri</h3>

4. Sayfaların yenilenmesi isteğe bağlı olmalı

Özellikle haber sitelerinin sayfalarını belli bir süre içerisinde kendi kendine yenilediğini farketmişsinizdir. Sayfaları okutarak takip eden bir engelli kullanıcı için, yazının ortasında sayfanın birden bire yenilenmesi sinir bozucu durumdur. Hatta bu durum engelli olmayan kullanıcıların bile canını sıkabilir. Bu yüzden de sayafların yenilebilir olması isteğe bağlı olmalı.

5. Tablo yerine katman kullanmak

CSS ile sayfa şekillendirme konusu standartlaşmadan önce, bir sayfanın genel tasarım dağılımı ve bölümlendirmesi tablolar aracılığı ile yapılırdı. Ancak CSS ile birlikte bu işi DIV isimli katman etiketleri üstlendi. Artık tabloları sayfa şekillendirmek için değil, verileri tablolamamak için kullanmak gerekir.

6. Tabloları erişilebilir kılmak

Bir veri içeren tablo oluşturduğunuzda, onu erişilebilir kılmak için gereken öznitelikleri de eklemelisiniz. Bunlardan ilki <caption> özniteliğidir. Bu tag aracılığı ile bir tabloya başlık atayabilirsiniz. Bu işi <caption> olmadan da yapabiliyorum, ona ne gerek var ki diyebilirsiniz. Bu soruya, erişilebilirlik standardı <caption> etiketini tanıdığı için diye cevap verebiliriz.

Örnek:

<table>
<caption>İstatstikler</caption>
<tr><td></td><td></td></tr>
</table>

Kullandığımız bir tablo hakkında kullanıcıya bilgi vermek amacıyla da Summary özniteliğini kullanırız. Sesli tarayıcılar ile web sayfalarını takip eden görme engelli kullanıcılar, normal kullanıcıların göremediği bu yazıyı dinleyebilirler.

Örnek:

<table summary="2008 yılına ait site istatistikleri tablosu">
<caption>İstatstikler</caption>
<tr><td></td><td></td></tr>
</table>

Tablolarda bir başka yapılması gereken de sütun başlıklarını hücre etiketi olan <td></td> yerine sütun başlığı etiketi olan <th></th> içerisine almaktır.

Örnek:

<table summary="2008 yılına ait site istatistikleri tablosu">
<caption>İstatstikler</caption>
<tr><th>Ocak</th><th>Şubat</th></tr>
<tr><td>1000</td><td>1500</td></tr>
</table>

7. Üyelik onay kodlarının dinlenebilir olması

Üyelik gerektiren sitelerde kullanılan formlardaki onay kodlarının, alternatif olarak dinlebilir özellikte olması, görme engellerin de üye olabilmesini sağlar.

8. Zor görebilenler için yazıların büyütülebilmesi

Zor görebilenler veya küçük yazıları okumakta zorlananlar için metnin büyütülebilir olmasını sağlayacak eklentinin olmasıdır.

9. Yazdırılabilir sayfa seçeneğinin olması

Uzun yazıları ekran başında okumak istemeyip bunları kağıda bastırarak okumak isteyenler olabilir. Bu seçenek aynı zamanda gereksiz sayfa öğelerini çıkardığı için, görme engelliler için daha sade, dolayısıyla daha erişilebilir bir sayfa sunar.

10. Gereksiz yerlerde Imagemap, Flash vs. kullanmamak

Sayfalarınızı daha erişilir kılmanın en temel yollarından biri, alternatif seçeneklerle görüntülenen web teknolojileirni olur olmaz yerde kullanmamaktır. Örneğin flash destekli olmayan veya flash eklentisini yüklememiş bir kullanıcı için yoğun flash kullanımı demek, o sayfaya erişememek demektir.

Sayfa açılırken eğer bir flash intro (giriş animasyonu, videosu) kullanacaksanız, mutlaka bu introyu atlayacak bir bağlantı da eklemelisiniz.

Sayfanız içerisinde imagemap'ler kullanmanız da erişilebilirliği etkileyen faktörler biri olacaktır. Zaten giderek daha az kullanılan bu seçeneğe fazla yer vermemeniz, sitenizin erişilebilirliğini artıracaktır.

11. Bağlantıların tab ve klavye ile erişilir olması

Sayfa bağlantılarına ekleyeceğiz iki özntielik o bağlantıların tab tuşu ve diğer klavye kombinasyonları ile erişilir hâle gelmesini sağlayabilirsiniz.

Örnek:

<a href="sayfa1.html" tabindex="1">Sayfa 1</a>
<a href="sayfa2.html" tabindex="2">Sayfa 2</a>
<a href="sayfa3.html" tabindex="3">Sayfa 3</a>

<a href="sayfa1.html" accesskey="1">Saya 1</a>
<a href="sayfa2.html" accesskey="2">Saya 2</a>
<a href="sayfa3.html" accesskey="3">Saya 3</a>

12. Renk kontrastına özen göstermek

Sayfanızda kullanacağız metin ve arka plan renkleri gibi öğeler, belli bir kontrasta, yani renk karşıtlığına sahip olmalıdır. Aksi halde içeriğiniz arkplandan ayırt edilemez olabilir.

Kontrast kontrolü yapmak için bu bağlantıda bulunan aracı kullanabilirsiniz.

Kitap tavsiyesi:

Web'de Erişilebilirlik konusu ile yazılmış olan tek Türkçe kitap, Numan Pekgöz'ün Pusula Yayıncılık'tan çıkan "Web'de Erişilirlik, XHTML ve CSS" isimli kitabıdır. Konuyu iyi özetleyen bir kaynak, tavsiye ederim.

 

 

Daha fazla bilgi için:

Web Accessibility Initiative – WAI (Web Erişilebilirlik Girişimi)
Web İçeriği Erişilebilirlik Yönergeleri 2.0

1 yorum

Yorum yap

+ Leave a Comment