Web’de Erişilebilirlik

Web'de ErişilebilirlikWeb’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ülenmesini kapsar.  Web erişilebilirliği konusunda hem kullanıcılar hem de hazırlayıcılarda gereken duyarlılık sağlanmalıdır.
Görme engelliler sayfaları nasıl okur?
Peki görme engelliler nasıl oluyor da bir web sayfasından faydalanabiliyor diye düşünebilirsiniz.
Bilgisayarlarında kullandıkları ekran okuyucu program yardımıyla.
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 sayfaları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. Ekran okuyucular 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 dinlenebilir ö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 ve kaydetme seçeneğinin olması
Uzun yazıları ekran başında okumak istemeyip bunları kağıda bastırarak ya da sonradan 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örlerden 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ğiniz iki öznitelikle 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ğını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
<http://www.snook.ca/technical/colour_contrast/colour.html>
bulunan aracı kullanabilirsiniz.

Sonuç:
Yukarıda anlatmaya çalıştığımız erişilebilirlik kriterleri sayesinde sadece engellilerin değil tüm kullanıcıların da sayfadan verimli bir şekilde istifade etmeleri sağlanacaktır. Unutulmamalıdır ki, daha çok bilgiye açılan kapı bilginin herkes paylaşılmasından geçer. Bu da yapılan çalışmaların mümkün olduğunca fazla insana hitap etmesiyle mümkündür.

İbrahim Elibal
(BeyazOkul.Com Konuk Editör)

Sevebilirsin...

4 Yanıt

  1. Tarık diyor ki:

    Web sayfalarının engelliler açısından erişilebilir yapılması çok önemli. Bir çok web sayfasına görme engelliler erişemiyor. Bu erişim olayı farklı alanlarda da önemli. Sokaklar, caddeler, otobüsler, binalar da erişilebilir olmalıdır.

  2. Kuntay diyor ki:

    Web sayfaların erişilebilir olması için yapılması gerekenler aslında meydanda. Ama buna kimse dikkat etmiyor. Erişilebilir sayfası olanlar her zaman daha çok ziyaretçi çekecektir…

  1. 22 Eylül 2013

    […] Web’de Erişilebilirlik […]

  2. 10 Mayıs 2014

    […] ekran okuyucu program yardımıyla… Bilişim Uzmanı İbrahim Elibal’in , Web’de Erişilebilirlik başlıklı ayrıntılı makalesini okumaya davet ediyoruz. […]

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir