Web Sitesi Erişilebilirliği Nedir? Tasarımda Yapılan 9 Yaygın Hata

Web Sitesi Erişilebilirliği Ne Anlama Gelir?

Web erişilebilirliği, farklı kullanıcıların dijital içeriklere erişmesini ve temel işlevleri tamamlamasını kolaylaştıran tasarım, geliştirme ve içerik üretimi yaklaşımıdır.

Bu konu yalnızca görme engelli kullanıcılarla sınırlı değildir. Klavye veya yardımcı teknolojiler kullanan kişiler, düşük görme düzeyine sahip kullanıcılar, işitsel içeriklere erişmekte zorlananlar ve farklı bilişsel ihtiyaçları bulunan kullanıcılar için de önemlidir.

W3C’nin dört temel erişilebilirlik ilkesi

Bu yaklaşım, İngilizce baş harfleriyle POUR olarak da bilinir: Perceivable, Operable, Understandable ve Robust.

WCAG 2.2 Nedir ve Web Tasarımında Nasıl Kullanılır?

WCAG, Web Content Accessibility Guidelines ifadesinin kısaltmasıdır.

W3C tarafından geliştirilen bu kılavuz, web içeriklerinin erişilebilirliğini değerlendirmek için başarı kriterleri sunar.

WCAG 2.2, 5 Ekim 2023’te W3C Recommendation olarak yayımlanmıştır.

Standartta A, AA ve AAA olmak üzere farklı uygunluk seviyeleri bulunur.

AA seviyesi, birçok erişilebilirlik projesinde hedeflenen bir değerlendirme düzeyidir. Ancak hukuki yükümlülükler, ülkeye, sektöre ve hizmet türüne göre ayrıca incelenmelidir.

WCAG 2.2 kapsamında örnek kontroller

Web Tasarımında Yapılan 9 Yaygın Erişilebilirlik Hatası

button:focus,
a:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid #7c3aed;
  outline-offset: 3px;
}

<img
  src="ofis-ekibi.jpg"
  alt="SEO ajansı reklam ajansı İstanbul SEO hizmeti"
>

<img
  src="ofis-ekibi.jpg"
  alt="Toplantı masasında proje planını inceleyen ekip"
>

<div class="buyuk-baslik">
  Hizmetlerimiz
</div>

<h2>Hizmetlerimiz</h2>

<h3>Web Tasarım</h3>
<p>Hizmet açıklaması...</p>

<h3>İçerik Üretimi</h3>
<p>Hizmet açıklaması...</p>

<input
  type="email"
  placeholder="E-posta"
>

<label for="ornek-eposta">
  E-posta adresiniz
</label>

<input
  id="ornek-eposta"
  name="email"
  type="email"
  autocomplete="email"
  aria-describedby="eposta-yardim"
  required
>

<p id="eposta-yardim">
  Yanıt göndermek için kullanılacaktır.
</p>

<a href="/hizmetler/">
  Hizmetleri incele
</a>

<button type="button">
  Filtreleri temizle
</button>

@media (prefers-reduced-motion: reduce) {
  .hareketli-ogeler {
    animation: none;
    transition: none;
  }
}

Erişilebilir Web Tasarımı İçin Uygulanabilir HTML ve CSS Örnekleri

Yukarıdaki hataları düzeltirken yalnızca görsel düzenin değiştirilmesi yeterli olmayabilir.

HTML yapısının doğru olması da önemlidir.

1. Anlamlı sayfa bölümleri

<header>
  <nav aria-label="Ana menü">
    ...
  </nav>
</header>

<main id="ana-icerik">
  <h1>Sayfa Başlığı</h1>

  <section aria-labelledby="bolum-1">
    <h2 id="bolum-1">İlk Bölüm</h2>
    <p>Bölüm açıklaması...</p>
  </section>
</main>

<footer>
  ...
</footer>

Bu yapı sayfanın ana bölümlerini anlamlı biçimde ayırmaya yardımcı olabilir.

2. İçeriğe atlama bağlantısı

<a class="skip-link" href="#ana-icerik">
  Ana içeriğe geç
</a>

<main id="ana-icerik">
  ...
</main>

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  background: #172033;
  color: #fff;
  padding: 12px;
  z-index: 9999;
}

.skip-link:focus {
  top: 12px;
}

Klavyeyle gezinen kullanıcılar için tekrar eden menü öğelerini atlamayı kolaylaştırabilir.

3. Etiketli form alanı

Aşağıdaki örnek, yalnızca form alanının nasıl sunulabileceğini gösterir. Gerçek veri gönderimi yapmaz.

Gerçek WordPress formunda aynı yaklaşım diğer alanlara da uygulanmalıdır. Ayrıca zorunlu alanlar, hatalar ve gönderim sonuçları erişilebilir biçimde ele alınmalıdır.

4. Önce yerleşik HTML, sonra gerektiğinde ARIA

Standart bir buton için <button> kullanmak, sıfırdan hazırlanmış etkileşimli bir <div> öğesine klavye davranışları eklemekten daha güvenilir bir başlangıçtır.

ARIA öznitelikleri, doğru kullanıldığında yardımcı teknolojilere bilgi verebilir. Ancak ARIA tek başına eksik klavye davranışını veya bozuk etkileşimi düzeltmez.

WordPress ve Elementor Sitelerinde Erişilebilirlik Nasıl Kontrol Edilir?

WordPress sitelerinde erişilebilirlik yalnızca içerik editörüne bağlı değildir.

Kullanılan tema, sayfa oluşturucu, açılır menüler, formlar ve üçüncü taraf eklentiler de sonucu etkiler.

Elementor’da özellikle dikkat edilecekler

• Başlık bileşenlerinde doğru HTML etiketini seçin.
• İkon butonlarının erişilebilir adlarını kontrol edin.
• Popup kapatma butonunu klavyeyle deneyin.
• Hareket efektleri ve animasyonları değerlendirin.
• Form alanlarının görünür etiketlerini kontrol edin.
• Mobilde yakınlaştırma ve metin taşmasını test edin.

WordPress projelerinin teknik tasarım yaklaşımıyla ilgili WordPress Web Tasarım Hizmetleri sayfamızı inceleyebilirsiniz.

Web Sitesi Erişilebilirlik Testi Nasıl Yapılır?

Erişilebilirlik değerlendirmesi, otomatik araçlar ve manuel kontrollerin birlikte kullanılmasıyla daha kapsamlı hâle gelir.

W3C’nin Easy Checks rehberi, ilk inceleme için başlık, alternatif metin, kontrast, klavye ve form kontrolleri önerir.

Bununla birlikte bu testlerin temel değerlendirme olduğu, tüm erişilebilirlik engellerini yakalayamayacağı açıkça belirtilir.

1. Klavye testi

1. Sayfayı yeniden yükleyin.
2. Fare kullanmadan Tab tuşuyla ilerleyin.
3. Odak işaretinin görünür olduğunu kontrol edin.
4. Menü, bağlantı, form ve butonları deneyin.
5. Hiçbir bileşende klavye tuzağı olmadığını doğrulayın.

2. Renk kontrastı testi

Başlık, paragraf, form etiketi ve buton metinlerinin gerçek renk birleşimlerini ölçün.

Sadece tasarım dosyasındaki renkleri değil, web sayfasında oluşan gerçek görünümü inceleyin.

3. Ekran okuyucu testi

Uygun ekran okuyucu kullanarak başlıklar, gezinme alanları, bağlantılar ve form kontrollerinin nasıl duyurulduğunu inceleyin.

Örneğin NVDA, VoiceOver veya uygun diğer yardımcı teknolojilerle gerçek kullanım senaryoları test edilebilir.

4. Yakınlaştırma ve yeniden akış testi

Metni büyüttüğünüzde içerikler üst üste geliyor mu, önemli butonlar ekran dışına taşıyor mu, form alanları okunabiliyor mu kontrol edin.

5. Otomatik araçlarla ilk tarama

axe DevTools, Lighthouse ve WAVE gibi araçlar bazı erişilebilirlik sorunlarını bulmaya yardımcı olabilir.

Ancak otomatik testin hata bulmaması, sitenin bütün WCAG kriterlerini karşıladığını kanıtlamaz.

Web Sitesindeki Erişilebilirlik Sorunları Hangi Sırayla Düzeltilmeli?

Büyük bir web sitesinde aynı anda çok sayıda erişilebilirlik sorunu bulunabilir.

Bu durumda düzeltmeleri yalnızca görünürlük veya tasarım beğenisine göre sıralamak yeterli değildir.

Sorunun kullanıcı üzerindeki etkisi, hangi işlevi engellediği ve kaç sayfada tekrarlandığı değerlendirilmelidir.

Bu tablo örnek bir önceliklendirmedir. Gerçek projede risk, mevzuat ve kullanıcı ihtiyaçları ayrıca değerlendirilmelidir.

Örnek dört aşamalı çalışma planı

Web Sitesi Erişilebilirliği SEO ve GEO ile Nasıl İlişkilidir?

Erişilebilir web tasarımı ve arama motoru optimizasyonu aynı çalışma alanı değildir.

Ancak bazı iyi uygulamalar birbirini destekleyebilir.

Örneğin anlamlı başlık yapısı, açıklayıcı bağlantılar, görsellerin doğru metin alternatifleri ve düzenli HTML kullanımı hem kullanıcıların içeriği anlamasına hem de sayfa yapısının daha açık olmasına katkı sağlayabilir.

Bununla birlikte bir web sitesinin WCAG kriterlerini karşılaması, Google sıralamasında otomatik yükselme veya yapay zekâ aramalarında görünürlük garantisi vermez.

GEO bağlamında da erişilebilirlik puanı ile yapay zekâ sistemlerinde anılma arasında doğrudan garantili bir ilişki kurulamaz.

Bu nedenle erişilebilirliği yalnızca SEO için yapılan bir işlem olarak görmek yerine kullanıcı ihtiyaçlarına yönelik bağımsız bir kalite hedefi olarak değerlendirmek daha uygundur.

Web sitesi geliştirme ve arama görünürlüğü çalışmalarıyla ilgili SEO Hizmetleri ve ChatGPT ve GEO sayfalarımızı da inceleyebilirsiniz.

Web Sitesi Erişilebilirliği Yayın Öncesi Kontrol Listesi

Web Sitesi Erişilebilirliği Hakkında Sıkça Sorulan Sorular

Sonuç: Erişilebilir Web Tasarımı Görünümün Ötesinde Bir Kullanıcı Deneyimi Standardıdır

Web sitesi erişilebilirliği yalnızca renkleri koyulaştırmak veya alternatif metin eklemekten oluşmaz.

Sayfanın yapısı, menü davranışları, form alanları, video içerikleri ve mobil kullanım birlikte değerlendirilmelidir.

Erişilebilir bir web sitesi geliştirmek, farklı kullanıcıların bilgiye ulaşmasını ve temel işlemleri tamamlamasını engelleyen sorunları sistematik biçimde belirleyip gidermeyi gerektirir.

WCAG 2.2 bu konuda teknik bir değerlendirme çerçevesi sunar. Ancak erişilebilirlik, tek seferlik bir kontrol olarak görülmemelidir.

Yeni içerik, tema veya eklenti eklendiğinde daha önce giderilmiş sorunlar yeniden ortaya çıkabilir.

Bu nedenle erişilebilirlik kontrollerinin site bakım ve içerik yayın süreçlerine dâhil edilmesi önemlidir.

Web tasarım ve dijital içerik planlamasıyla ilgili WordPress Web Tasarım ve İçerik Stratejisi hizmet sayfalarımızı inceleyebilirsiniz.