İnternet Sitelerinin Engelli Bireyler için Erişilebilir Olması Nasıl Sağlanır?

Merhabalar,

Sizlere bu yazımda engelli bireylerin internete daha kolay bir şekilde erişebilmelerini sağlamak için yazılım yaparken dikkat etmemiz gerekenleri anlatmaya çalışacağım.

Teknolojinin hızla gelişmesine paralel olarak engelli vatandaşlarımızın hayatı da hızla kolaylaşmıştır.Özellikle uyarlanmış teknoloji yardımıyla eskiden gazete okumak için bile çok yüksek meblağlar ödeyen veya birilerine bağımlı olan görme engelli insanlar konuşma sentezi aracılığı ile bir bilgisayar ekranını ya da otomatik olarak üretilmiş Braille görüntülerini okuyabilmekte,duyma engelli insanlar telefon ağları ile iletişim kurabilmekte,fiziksel engelliler,üfleyerek bilgisayarlarını kullanabilmekte, hatta ses ile bilgisayarı kullanmak mümkün olabilmektedir.

Teknolojinin bu kadar kolaylık sağlamasına karşın, web sayfalarının yoğunlukla resimler,görüntüler,  ses ve video küpleri ile geliştirilmekte olması günümüzdeki en büyük sorundur. Bu noktada web tasarımcıları için bu sorunu aşmanın ve erişilebilirliği sağlamanın yolu, kodlamada yapılacak eklemeler ile mümkündür.Çünkü eğer tasarladığımız web sitesi erişilebilirlik özellikleri dikkate alınarak hazırlanmış ise engelli internet kullanıcıları ekran okuyucu programlar vasıtası ile tüm içeriklerin sesli hale getirilmesini sağlamış oluyor. Yani erişilebilirliği sağlamak için özel sayfalar yazmadan sadece tasarladığımız sayfanın kodlarına ekleyeceğimiz erişilebilirlik eklentileri ile bu sorunu ortadan kaldırmış olmaktayız.

Peki bir web sitesini erişilebilirlik özelliklerine dikkat ederek nasıl tasarlarız?

Bunun için öncelikle;

1.Resim Dosyalarına Alternatif Metin Ekleme

Resim dosyalarında bulunan “alt” yani “alternate text” etiketinin içi boş bırakılmamalıdır. Çünkü bu kullanılan resmin ne olduğu hakkında bilgi vermektedir. Ekran okuyucu resmin üstüne geldiğinde eğer burası boş ise okuyamamakta ve resim deyip geçmektedir.Ama buraya resim ile ilgili  açıklama yazdığımızda onu okumaktadır.Engelli kullanıcı da o resmin ne olduğunu anlamaktadır. Küçük gif,png sayfa tasarımı ile alakalı görsellere bu etkileri vermek gerekmez. Ancak içerik ile 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ğimizde 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ıdır. Yani hiyerarşik bir düzene bağlı olarak büyükten küçüğe doğru gitmelidir. 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ıdır.
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

6.1. <caption> Özniteliği
Bir veri içeren tablo oluşturduğunuzda, onu erişilebilir kılmak için gereken öznitelikleri de eklemeliyiz. Bunlardan ilki <caption> özniteliğidir. Bu tag aracılığı ile bir tabloya başlık atayabilirsiniz. Bu işi <caption> olmadan da yapabiliriz fakat erişilebilirlik standartı <caption> etiketini tanır.

Örnek:
<table>
<caption>İstatstikler</caption>
<tr><td></td><td></td></tr>
</table>

6.2. <summary>  Özniteliği

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>

6.3. <th> Etiketi

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 eklentiyi eklemeliyiz.
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(reklam vs) çı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şilebilir 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) kullanılacaksa, mutlaka bu introyu atlayacak bir bağlantı da eklenmelidir.
Sayfa içerisinde imagemap’ler kullanımı da erişilebilirliği etkileyen faktörlerden biridir. Zaten giderek daha az kullanılan bu seçeneğe fazla yer vermemek, sitenin erişilebilirliğini artıracaktır.
11. Bağlantıların tab ve klavye ile erişilir olması
Sayfa bağlantılarına ekleyeceğimiz iki öznitelikle o bağlantıların tab tuşu ve diğer klavye kombinasyonları ile erişilir hâle gelmesini sağlayabiliriz.

Ö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
Sayfada kullanacağımız metin ve arka plan renkleri gibi öğeler, belli bir kontrasta, yani renk karşıtlığına sahip olmalıdır. Aksi halde içerik arkaplandan ayırt edilemez olabilir.

NOT: Kontrast kontrolü yapmak için kullanılan çeşitli araçlar vardır. Bunlardan biri ” <http://www.snook.ca/technical/colour_contrast/colour.html&gt; ”

Kısaca bir sitenin W3C(World Wide Web) standartlarına göre kodlanması gerekir. Bu standartlara uymak bize erişilebilirlik,arama motorlarında ilk sayfalarda görünme(seo), ulaşılabilirlik, hızlı yüklenme, güncelleme ve bakım kolaylığı ve hukuksal sorumluluk gibi alanlarda da avantaj sağlar.

“Evrensellik, paylaşılabilirlik” ve son olarak “erişilebilirlik”, bilginin
en önemli özellikleridir. Bilgi Çağı ve Bilgi Toplumu’nun gereklerinden en önemlisi, hangi ortamlarda bulunursa bulunsun bilgiye erişimi, her birey için eşit olanaklı halde
kılmaktır.

Unutmayalım ki, hepimiz birer engelli adayıyız…

2 Comments

Bir Cevap Yazın

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