Bir girişimci veya KOBİ sahibi olarak, günümüzde web erişilebilirliği hakkında giderek daha fazla şey duyuyorsunuz. Bu genellikle koca bir geliştirici ekibi gerektiren karmaşık, teknik bir konu olarak sunuluyor. Özel çalışma ve temiz kodla iyi inşa edilmiş bir platform teknik temeli oluştursa da, en yaygın engeller aslında basitçe içerik girişi sırasında ortaya çıkıyor.

2006'dan beri Belçika ve Hollanda'daki işletmeler için web siteleri ve web uygulamaları geliştiriyorum. Pratikte, birçok erişilebilirlik sorununun kaynak kodunda değil, sitenin günlük olarak doldurulma ve bakım yapılma şeklinde olduğunu görüyorum. Birçok girişimci bana, web sitelerini daha geniş bir kitle için hemen daha kullanışlı hale getirmek için kendilerinin ne yapabileceğini soruyor.

Bu makalede, içerik yönetim sisteminizde, kelime işlemcinizde veya sayfa editörünüzde doğrudan düzeltebileceğiniz erişilebilirlik hatalarıyla ilgili en sık sorulan soruları yanıtlıyorum. Birkaç hedefli ayarlamayla, ziyaretçileriniz için engeli azaltır ve aynı zamanda genel kullanıcı deneyimini iyileştirirsiniz.

Erişilebilirlik yalnızca engelli ziyaretçiler için mi önemli?

Erişilebilirlik konusu gündeme geldiğinde en sık sorulan sorulardan biri budur. Kısa cevap hayır. Erişilebilirlik görsel, işitsel, motor veya zihinsel engeli olan kişilere odaklanır, ancak çözümler web sitenizdeki kelimenin tam anlamıyla her kullanıcıya yardımcı olur.

Web sitenizi parlak güneş ışığında akıllı telefondan görüntüleyen bir müşteriyi düşünün. Metin ile arka plan arasındaki kontrast çok düşük olduğunda, bu kişi sayfayı okuyamaz. Bu, görme bozukluğu olan birinin yaşadığı sorunla tamamen aynıdır. Ya da geçici olarak kolu kırık olan ve bir formda gezinmek için yalnızca klavye veya sesli kontrol kullanabilen birini düşünün.

Bunun yanı sıra, erişilebilirlik arama motorlarının web sitenizi nasıl okuduğunu doğrudan etkiler. Arama motorları, bir sayfadaki yapıyı, metinleri ve görselleri analiz etmek için ekran okuyuculara benzer teknikler kullanır. İyi bir şekilde erişilebilir kurulmuş bir web sitesi, bir arama motoru için daha anlaşılırdır. Yani erişilebilirliği yalnızca belirli bir hedef kitle için değil, platformunuzu kullanan herkes için inşa edersiniz.

Kontrast ve okunabilirlik sorunlarını nasıl düzeltirim?

Modern web sitelerinde yaygın bir hata, beyaz arka plan üzerinde açık gri metin veya açık renkli bir düğme üzerinde beyaz metin kullanmaktır. Bu, bazı tasarımlarda şık görünür, ancak metni büyük bir kesim için okunamaz hale getirir.

Bu sorunu kendi başınıza kolayca tespit edip düzeltebilirsiniz. Metninizin renk kodunu ve arka planın renk kodunu girdiğiniz ücretsiz çevrimiçi araçlar var. Araç daha sonra kontrast oranını hesaplar. Standartlara göre, normal metin için kontrast en az 4,5'e 1 olmalıdır. Büyük metin için minimum 3'e 1 oranı geçerlidir.

Bir metnin okunması zor olduğunu fark ederseniz, rengi editörünüzde ayarlayın:

  • Açık gri gövde metnini daha koyu gri veya siyah yapın.
  • Düğmelerde arka plan rengi ile metin rengi arasında net bir fark olduğundan emin olun.
  • Metni doğrudan hareketli bir arka plan görseli üzerine yerleştirmekten kaçının. Bunun yerine metnin arkasına düz renkli bir katman yerleştirin veya sade bir arka plan seçin.

Metin boyutunu da kontrol edin. Ekrandaki gövde metni için mümkünse en az 16 piksel boyut kullanın. Ayrıca satırların birbirine çok yakın olmadığından emin olun, böylece ziyaretçiler satırları gözleriyle kolayca takip edebilir.

Görseller ve alt metinlerde hangi hataları yapıyorum?

Görseller bir sayfayı zenginleştirir, ancak bir ekran okuyucu bir görseli göremez. Bu yüzden bir ekran okuyucu, görselde ne olduğunu açıklamak için alt metin (alternatif metin) adı verilen şeyi kullanır. Bu konuda iki hata çok sık yapılır: alt metni tamamen unutmak veya yanlış doldurmak.

Bir görsel yüklediğinizde ve alt metin girmediğinizde, bir ekran okuyucu genellikle dosya adını okur. Bir ziyaretçi o zaman foto1234-final.jpg gibi bir şey duyar. Bu hiçbir faydalı bilgi sağlamaz. Öte yandan, alt metni SEO anahtar kelimeleriyle doldurmak da amaçlanan bir şey değildir.

Alt metinleri doldururken şu kurallara uyun:

  • İşlevsel görseller: Görünenleri kısa ve sade bir şekilde tanımlayın. Bir çalışanın fotoğrafında, örneğin kişinin adını ve görevini kullanın.
  • Dekoratif görseller: Bir görsel yalnızca süsleme amacı taşıyor ve herhangi bir içerik eklemiyorsa, alt metin alanını boş bırakın veya CMS'inizde bunun dekoratif bir görsel olduğunu işaretleyin. Ekran okuyucu böylece görseli düzgünce atlar.
  • Metin içeren görseller: Önemli metni bir görselin içine yerleştirmekten kaçının. Başka yolu yoksa, görseldeki metnin tamamını alt metne kelimesi kelimesine yazın.

Yanlış başlık yapısı neden sorun teşkil eder?

Yaygın bir yanlış düşünce, başlıkların (H1, H2 ve H3 gibi) yalnızca metni büyütmek veya kalınlaştırmak için var olduğudur. Pratikte, işletme sahipleri genellikle bir paragrafın üstüne, sadece H3 boyutunun güzel durduğunu düşündükleri için bir H3 başlığı koyar.

Görsel olarak bu doğru görünebilir, ancak sayfanın yapısı açısından kafa karıştırıcıdır. Ekran okuyucu kullanan ziyaretçiler, sayfaya hızlıca genel bir bakış elde etmek için genellikle başlıktan başlığa gezinir. Yapı, aralarında bir H2 olmadan H1'den H3'e atlarsa, bu mantık bozulur.

Sayfanızı düzenlerken net bir hiyerarşiye bağlı kalın:

  • H1: Sayfanın ana başlığı. Sayfa başına yalnızca bir tane kullanın.
  • H2: Hikayenizin ana bölümlerini belirten ara başlıklar.
  • H3: Belirli bir H2 bölümünün altına giren alt başlıklar.

Belirli bir ara başlığın daha küçük veya daha büyük görünmesini mi istiyorsunuz? O zaman öğenin görsel stilini CMS'inizde ayarlayın veya geliştiricinizden başlıkların CSS'teki biçimlendirmesini ayarlamasını isteyin. Başlık türünü asla yalnızca boyutu etkilemek için kullanmayın.

Bağlantıları ve düğmeleri nasıl daha kullanışlı hale getiririm?

Bağlantılar web sitenizin gezinmesini oluşturur. Birçok web sitesi "buraya tıklayın", "devamını oku" veya "indir" gibi bağlantı metinleriyle doludur. Birisi sayfadaki tüm bağlantıların listesini bir ekran okuyucuya okutursa, o kişi art arda on kez "devamını oku" duyar. Bu hiçbir bağlam sağlamaz.

Bağlantı metnini açıklayıcı hale getirerek bunu kendi başınıza kolayca düzeltebilirsiniz. "Broşürü görüntülemek için buraya tıklayın" yerine "Hizmetlerimiz hakkındaki broşürü görüntüleyin" yazın. Okuyucu böylece, metin sayfanın geri kalanından bağımsız olarak okunsa bile, bağlantının nereye gittiğini hemen bilir.

Mobil cihazlarda tıklanabilirlik de önemlidir. Birbirine çok yakın yerleştirilmiş veya çok küçük ayarlanmış düğmeler ve bağlantılar, ziyaretçilerin yanlışlıkla yanlış öğeye dokunmasına neden olur. Düğmelerin etrafında yeterli boşluk olduğundan ve tıklanabilir alanın bir başparmakla kullanılabilecek kadar büyük olduğundan emin olun.

Son olarak, klavye gezinmesi önemlidir. Birçok kişi bir sayfada gezinmek için Tab tuşunu kullanır. Biri Tab tuşunu kullandığında, o anda hangi öğenin seçili olduğu açıkça görünür olmalıdır. Buna odak (focus) durumu denir. Web sitenizin stilini ayarlarken, düğmelerin ve bağlantıların etrafındaki bu çerçevenin veya işaretin devre dışı bırakılmadığından emin olun.

Erişilebilir bir platforma başlarken

Erişilebilirlik tek seferlik bir proje değil, web sitenizi yönetirken süregelen bir süreçtir. Renk kontrastınıza, alt metinlerinize, başlık yapınıza ve bağlantı metinlerinize eleştirel bir gözle bakarak, herhangi bir teknik bilgi olmadan sorunların büyük bir kısmını zaten ortadan kaldırabilirsiniz.

Yeni bir web sitesi yaptırdığınızda, en baştan temiz bir temel seçmek akıllıca olur. Ben kendim React, TypeScript, Tailwind CSS ve Supabase gibi teknolojilerle özel web siteleri ve platformlar inşa ediyorum. Ağır, hazır temalar yerine özel çalışmayı seçerek, hız, güvenlik ve erişilebilirlik için teknik temel ilk günden itibaren sağlam olur.

Web sitenizin teknik yapısı hakkında fikir alışverişi yapmak veya platformunuzun performansını nasıl artırabileceğinizi öğrenmek ister misiniz? ferhat.io/contact üzerinden ücretsiz otuz dakikalık bir görüşme planlayın. O zaman işletmeniz için olasılıklara birlikte bakarız.