Web’te erişilebilirlik

Yıllar önce hazırlanan standandartlara uyulsa aslında herkes için en iyi olan olur. Ne demek istediğimi yazının sonunda anlayacaksınız. Biz şuanda web sitelerini, mobil uygulamalarını kullanıcı deneyimine uygun yapıyorken, gerçekten ihtiyacı olan insanların kullanıcı deneyimlerini düşünmemezlik edemezdik. Her insanın internete özgürce erişim hakkı vardır. Bunu yeni yeni fark eden insanlardan olmak kötü bir his olsa da kıyısından dönmüş olmak insanı mutlu ediyor.

Engelli İnsanları Tanıyın

Web sitenizi erişilebilir yapmanızın nedeni, engelli insanların herkes için sunulan içeriğe, istediklerinde kolayca erişebilmelerini sağlamaktır. WCAG(Web Content Accessibility Guidelines) oluştruduğunuz web sayfasının görsel, işitsel, fiziksel, konuşma, bilişsel, dil, öğrenme ve nörolojik sakatlıklar dahil olmak üzere çok çeşitli sakatlıkları olan engelliler için daha erişilebilir olmasını hedefliyor.

Web’te Erişilebilirlik için Engel Çeşitleri

Engelli insanlar kimler?

  • Görme engelliler
  • Kısıtlı görüşe sahipler
  • İşitsel engelliler
  • Ellerini kullanamayanlar
  • Bilişsel engele sahipler

Bahsi geçen engeller ve bu engellerin türevleri web sitenizde erişilebilirlik sağlayabileceğiniz kişileri belirlemektedir. Birçok engelli insan olmasına rağmen, eğer en yaygın engelleri anlarsanız, bilgilerinizin erişilebilir olmasını sağlayabilirsiniz.

Başlıkları Ayarlayın

Web’te Erişilebilirlik için Başlıklar

Bir sayfaya başlık eklemenin iki yolu vardır.

  • Tercih edilmeyen ilk yolu, yazının biçimini değiştirerek;
  • İkici yolu ise, içeriğinizi hiyerarşik olarak alt başlıklardan oluşacak şekilde başlıklar eklemektir.

Başlıklar içeriğinizin daha kolay taranmasını sağlar. Örneğin, bazı ekran okuyucular sadece kullanıcılara başlıkları listeler. Bu durumda, kullanıcı hiyerarşik olarak yapılandırılmış başlıkları anlayarak içeriğe erişimi kolaylaşır.

Heading 1 ile bir yapıya başlıyorsanız alt başlıkları Heading 2, Heading 3 şeklinde düzenlemeniz başlangıç için güzel bir yol olabilir. HTML’de başlık oluştururken kullanabileceğiniz etiketler aşağıdaki gibidir:

  • <H1> başlık 1 </H1> başlık 1
  • <H2> başlık 2 </H2> başlık 2
  • <H3> başlık 3 </H3> başlık 3

Sayfa İçinde Çok Fazla Bilgi Barındırmayın

Sayfanızı ziyaret eden kişilere mümkün olduğunca bilgi sağlamak isteyebilirsiniz. Fakat bu durumun, ziyaretçilerinizi çok fazla bilgiye maruz bıraktığını göz ardı etmemeniz gerekmektedir.

Aynı anda her çeşit bilgiyi ziyaretçilerinize sunmak zorunda değilsiniz. Bunun yerine farklı başlıklar altında bilgilerinizi sunmanız, içeriğin anlaşılmasını kolaylaştıracaktır.

Web’te Erişilebilirlik için Yazı

Aşağıdaki maddeleri inceleyebilirsiniz:

  • Blog gönderileri
  • Son gönderiler
  • İlişkili gönderiler
  • Son mesajlar
  • Blog arşivi

Yukarıdaki maddelerin herbiri tek bir sayfaya ait olabilir fakat, unutmamanız gereken; bir sayfada ne kadar az içerik varsa, o sayfanın anlaşılması o kadar kolay olacaktır. Bu nedenle, içeriğinizi mantıklı parçalara bölmeniz ziyaretçilerinizin bilgileri anlamalarını kolaylaştıracaktır.

İçeriğin mantıklı parçalara bölünmesi, herkes için bilginin kolay anlaşılmasını sağlar. Fakat, özellikle bilişsel engeli olan insanlar, bilgilerin okunması ve anlaşılması hangi sitede daha kolaysa, o siteyi ziyaret etmeyi tercih eder.

Renkleri Özenli Seçin

 

Web’te Erişilebilirlik için Renkler

Belirli durumlarda renklerin kullanılması sitenizi geliştirir ve insanların sitenizdeki bilgileri daha kolay bulabilmesini sağlar. Ana içerik için bir renk, menüler için farklı bir renk ve zorunlu bilgiler için farklı bir renk kullanabilirsiniz.

Fakat, sadece bilgilerle iletişim kurduğunuzda renkleri kullanmayınız. Örneğin eğer sitenize bir form yerleştirirseniz, zorunlu alanlar için kırmızı rengini kullanmanız uygun olabilir fakat, zorunlu alanlarda insanların anlamalarını kolaylaştıracak alternatif yollar da denemeniz gerekmektedir. Örneğin, “*” işaretini eklemek ya da “(zorunlu)” demek, insanların kırmızı rengi zorunlulukla bağdaştırmalarını kolaylaştıracaktır.

Bunun yanı sıra, “devam etmek için kırmızı oka basınız” gibi bir yönerge vermek yerine, “ileri” yazınız.

Büyüteç Kullanın

Sitenizi engelli kullanıcıların yanınında kısıtlı görme yeteneğine sahip insanlar, yaşlı insanlarda kullanabilir. Bu sebepten dolayı yazıları büyütme seçeneği yaptığınız her sitede olması gerekmektedir. Bu işlemi çok basit bir java script koduyla yapabiliriz.

 A <input alt=”1 kat büyüt  name=”z” type=”radio” accesskey=”1” onclick=”document.body.style.zoom=1.0; this.blur();” checked= ”checked”/>
 A <input alt=”2 kat büyüt” accesskey=”2” onclick=”document.body.style.zoom=1.5;this.blur();” type=”radio” name=”z” />
 A <input alt=”3 kat büyüt” accesskey=”3” onclick=”document.body.style.zoom=2.0;this.blur();” type=”radio” name=”z” />

Yazılara Link Verin

Web’te Erişilebilirlik için Linkler

Sitenizi kurmaya başlarken, kendi sayfasınıza ya da başkalarının sayfalarına link vereceksinizdir.

Diğer sayfalara link verirken, iki durumu belirtmeniz gerekiyor:

  • Link vereceğiniz sayfa
  • Link vereceğiniz sayfanın yazısı

Genellikle linkler için “buraya tıklayın” gibi bilgi vermeyen yazılar görürsünüz. Web sitenizin erişilebilirliğini sağlayabilmek için, linklere bilgi veren ve kullanıcının anlayabileceği yazılar girmeniz idealdir.

  • Kötü örnek: Kadriye Dogutaş’ın yazılarını okumak için buraya tıklayın.
  • İyi örnek: Kadriye Dogutaş’ın  blog yazılarını okuyun

İmajları Etiketleyin

İnsanların kullandıkları ekran okuyucular yazılara duyarlıdır. Yani imajları okuyamamaktadır. Eğer, imajınızı etiketlereyek imajın tanımladığı unsuru belirtirseniz, ekran okuyucuları bunları kolaylıkla algılayabilecek ve bilginin anlaşılması sağlanacaktır. Bu tanımlamaları mümkün olduğunca kısa tutmanız gerekmektedir. Örneğin, “bu görsel şunu içeriyor” gibi bir açıklamayla başlamayın. Eğer imaj bir köpek resmiyse, sadece “köpek” yazın. Eğer oynayan bir çocuk resmiyse, sadece “oynayan çocuk” yazın.

Web’te Erişilebilirlik için Resim & Video

Birçok içerik yönetim sistemi yüklediğiniz imaja tanım yazmanıza izin verir. Siz imajı yüklerken, sistemde “alternatif yazı (alternative text)” veya “imaj altyazısı (image caption)” gibi bilgilerin altını doldurabilirsiniz.

Eğer imaj herhangi bir bilgi sağlamıyorsa ve yalnızca dekorasyon amacıyla ekleniyorsa, bu imajları tanımlaya gerek duyulmaz. Eğer sayfanızı HTML’de tasarlıyorsanız, imajınızı ekledikten sonra alt=”” satırını boş bırabilirsiniz. Bu durum, ekran okuyucuya boş bırakılan yerde bir imaj olduğunu ve bu imaja erişilebildiğini fakat, imajın tanımlanmasına ihtiyaç duyulmadığını anlatır.

Kullandığınız Videoları Tanımlayın

Videolar ve podcastsler birbirinden farklı iki tür olmalarına rağmen, erişilebilirlik açısından aynı özellikle sahip oldukları için aynı başlık altında değerlendirilebilirler.

Ses ve görüntü içeren herhangi bir medya iki şekilde tanımlanmalıdır: altyazı, ses transkripsiyonu (sesleri metin haline dönüştürme).

Altyazı, işitsel metinlerin yazıya dökülmesini ve böylece işitme engelli insanların bu işitsel materyallerden yararlanmasını sağlamaktadır. Aynı zamanda görüntülerin de yazıya dönüştürülmesi, görme engelli insanların varolan içeriğe erişimlerini kolaylaştırır. Ses transkripsiyonu ise video veya podcastte okunan metinlerin yazı halini sağlamaktadır.

Siz de sesli içeriğinizi yazı dosyası haline getirmek istiyorsanız, bu içeriği altyazı (HTML için alt=””) yazarak sitenize eklemenizdir.

Formların Doldurulması İçin Yeterli Bilgi Sağlayın

Web’te Erişilebilirlik için Form Seçenekleri

Bir form hazırladığınızda (örn. kayıt, iletişim, öneri formu), kullanıcılarınızın her bir alanın ne anlama geldiğini anlaması gerekmektedir.

Bunu sağlamak için, yönergelerinizin açık olmasına özen gösterin. “ad” ve “soyad” gibi alanlar çok bariz olabilir.

Diğer yönergelerin ise açıkça ifade edilmesi gerekebilir. Örneğin, kullanıcının doğum tarihini istediğinizde, “Ay” için ayrılan alanı kullanıcının sayıyla mı, yazıyla mı belirtmesini istediğiniz açık olmalıdır. Bu durumda, “doğum tarihi” yazısının karşısına _._/_._/_._._._ (Gün/Ay/Yıl) gibi kullanıcıyı rakam girmeye teşvik eden alanlar yerleştirebilirsiniz.

Otomatik Kişi Doğrulama Yöntemini Özenli Seçin

Büyük olasılıkla internette sizden resmin doğrulanmasını isteyen birçok kayıt formu görüyorsunuzdur.

Web’te Erişilebilirlik için Captcha

Bu doğrulama yöntemi, site sahibinin istenmeyen postalardan (SPAM) arınmasını sağlamaktadır. Çok sık karşılaştığınız bu filtreleme yöntemine CAPTCHA adı verilmektedir. Fakat bu yöntem, görme engelli insanların sitenize kayıt olmasını ve sizinle iletişim kurmasını engellemektedir. Bunun nedeni, görme engelli insanlar tarafından kullanılan ekran okuyucuların imajları okuyamamasıdır. Bu imajları etiketlemeniz, ekran okuyucular tarafından imajların algılanmasını sağlar. Fakat, bu sefer istenmeyen posta gönderen robotlar için de ulaşılabilir olur.

Tabi ki sitenizin gerçek insanlar tarafından kullanıldığına emin olmanız ve buna uygun doğrulama yöntemleri kullanmanız gerekmektedir. CAPTCHA’yı, kullanıcıdan sadece imajda yazılanları kutucuğa girmesini istemek yerine, aynı zamanda CAPTCHA içerisinde yazılanların seslendirilmesini sağlayabilirsiniz. Diğer doğrulatma yöntemleri için aşağıdaki örneklere bakabilirsiniz:

  • Kullanıcıdan e-posta doğrulaması yapmasını bekleyerek sitenize kullanıcı kaydını alabilirsiniz.
  • “2+2″ gibi işlem soruları sorabilirsiniz.
  • SMS yoluyla doğrulama isteyebilirsiniz.
  • “Türk alfebesinin ilk harfi nedir?” gibi basit sorular sorabilirsiniz.

 

Web’te Erişilebilirlik için İletişim

İletişim Bilgisi Sağlayın

Bazı insanların websitenizi kullanabilmeleri için daha fazla bilgiye ihtiyaçları olabilir.

Herkese eşit derecede hizmet sağlamanız için insanların sizinle veya anında yardım sağlayabilecek herhangi bir kişiyle iletişim kurabilmelerini kolaylaştıracak iletişim adreslerini verdiğinizden emin olunuz.

 

İlgili İçerikler

DevOps’un Temelleri: Agile, Lean, Visible Ops ve ITIL

DevOps, modern organizasyonların hız, kalite ve iş birliği hedeflerini...

DevOps Kültürüne Neden İhtiyacımız Var?

Teknoloji dünyasında yıllardır BT departmanlarının iş süreçleriyle uyum sağlayamaması,...

DevOps Nedir?

Devops ifadesini seneler önce gittiğim bir eğitimde görmüştüm. Development...

Playwright Yapılandırma Dosyası: playwright.config.ts

Playwright, modern web uygulamaları için uçtan uca testler yazmak...

Playwright’ı Neden Kullanmalıyız?

Playwright, Microsoft tarafından geliştirilen bir açık kaynaklı test otomasyon...
Sonraki İçerik

İncelemelerim