Web Sitenizi Görme Engelli Kullanıcılar için Erişilebilir Hale Getirme Yöntemleri

Web Erişilebilirliği: Görme Engelli Kullanıcılar İçin Kapsayıcı Tasarım Stratejileri

Web erişilebilirliği, herkesin - engelli olsun ya da olmasın - dijital içeriğe eşit şekilde ulaşabilmesini sağlama amacını taşır. Özellikle görme engelli kullanıcılar için web sitelerini erişilebilir hale getirmek, hem etik bir sorumluluk hem de yasal bir gerekliliktir. İşte web sitenizi görme engelli kullanıcılar için daha erişilebilir hale getirmenin yöntemleri:

1. Semantik HTML Kullanımı

Semantik HTML, içeriğin yapısını ve anlamını net bir şekilde tanımlar. Bu, ekran okuyucuların içeriği doğru şekilde yorumlamasına yardımcı olur.

<!-- Kötü Örnek -->
<div class="header">Site Başlığı</div>

<!-- İyi Örnek -->
<header>
  <h2>Site Başlığı</h2>
</header>

<nav>
  <ul>
    <li><a href="#">Ana Sayfa</a></li>
    <li><a href="#">Hakkımızda</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
</nav>

2. Uygun Başlık Hiyerarşisi

Doğru bir başlık hiyerarşisi (

-

), içeriğin yapısını anlamak için kritik öneme sahiptir.

 

<h1 >Ana Başlık</h1 >
<h2>Alt Başlık</h2>
<h3>Bölüm Başlığı</h3>
<p>İçerik metni...</p>

3. Alternatif Metin (Alt Text) Kullanımı

Tüm anlamlı görseller için açıklayıcı alt metinler ekleyin. Bu, görme engelli kullanıcıların görselin içeriğini anlamalarını sağlar.

<img src="logo.png" alt="Şirket Logosu: Mavi Arka Planda Beyaz Bir Kuş">

<!-- Dekoratif görseller için boş alt metin kullanın -->
<img src="decorative-line.png" alt="">

4. ARIA (Accessible Rich Internet Applications) Kullanımı

ARIA öznitelikleri, dinamik içeriğin ve karmaşık kullanıcı arayüzü kontrollerinin erişilebilirliğini artırır.

<button aria-expanded="false" aria-controls="menu-content">Menüyü Aç</button>
<div id="menu-content" aria-hidden="true">
  <!-- Menü içeriği -->
</div>

5. Klavye Navigasyonu

Tüm site işlevlerinin klavye ile erişilebilir olduğundan emin olun. Bu, fare kullanamayan kullanıcılar için kritiktir.

// JavaScript ile klavye navigasyonu örneği
document.addEventListener('keydown', function(e) {
  if (e.key === 'Tab') {
    // Tab tuşu kullanımını yönet
  }
});

// CSS ile klavye odağını görünür kılma
:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

6. Renk Kontrastı

Metin ve arka plan arasında yeterli kontrast sağlayın. WCAG standartlarına göre, normal metin için en az 4.5:1, büyük metin için en az 3:1 kontrast oranı olmalıdır.

/* Yüksek kontrastlı metin örneği */
.high-contrast-text {
  color: #ffffff;
  background-color: #000000;
}

/* Kontrast oranı kontrolü için araçlar kullanın, örneğin: WebAIM Contrast Checker */

7. Esnek Font Boyutları

Kullanıcıların metni büyütebilmesini sağlamak için esnek font boyutları kullanın.

body {
  font-size: 16px; /* Temel font boyutu */
}

h2 {
  font-size: 2em; /* Göreceli boyut */
}

p {
  font-size: 1rem; /* Kök elemente göre boyut */
}

8. Form Erişilebilirliği

Formları erişilebilir hale getirmek için label etiketlerini kullanın ve hata mesajlarını açıkça belirtin.

<form>
  <label for="name">Adınız:</label>
  <input type="text" id="name" name="name" required aria-required="true">
  
  <label for="email">E-posta:</label>
  <input type="email" id="email" name="email" required aria-required="true">
  
  <button type="submit">Gönder</button>
</form>

<div role="alert" aria-live="assertive" id="error-message"></div>

9. Dinamik İçerik için Live Regions

Sayfada dinamik olarak değişen içerik için ARIA live regions kullanın. Bu, ekran okuyucuların değişiklikleri kullanıcıya bildirmesini sağlar.

<div aria-live="polite" id="notification-area">
  <!-- Dinamik bildirimler buraya gelecek -->
</div>

<script>
function updateNotification(message) {
  document.getElementById('notification-area').textContent = message;
}
</script>

10. Sayfa Yapısı ve Bölüm Başlıkları

Sayfanızı mantıklı bölümlere ayırın ve her bölüm için açıklayıcı başlıklar kullanın.

<main>
  <h2>Ana Sayfa</h2>
  
  <section aria-labelledby="section1-heading">
    <h2 id="section1-heading">Ürünlerimiz</h2>
    <!-- Bölüm içeriği -->
  </section>
  
  <section aria-labelledby="section2-heading">
    <h2 id="section2-heading">Hizmetlerimiz</h2>
    <!-- Bölüm içeriği -->
  </section>
</main>

11. Skip to Content Bağlantısı

Sayfanın başında ana içeriğe atlamak için bir bağlantı ekleyin. Bu, tekrarlayan içeriği geçmek isteyen kullanıcılar için faydalıdır.

<body>
  <a href="#main-content" class="skip-link">Ana İçeriğe Atla</a>
  <header>...</header>
  <nav>...</nav>
  <main id="main-content">
    <!-- Ana içerik buraya -->
  </main>
</body>

12. Medya Erişilebilirliği

Video ve ses içerikleri için altyazı, transkript ve sesli betimleme sağlayın.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="tr" label="Türkçe">
  <track kind="descriptions" src="descriptions.vtt" srclang="tr" label="Sesli Betimleme">
  Tarayıcınız video etiketini desteklemiyor.
</video>

<a href="transcript.html">Video Transkripti</a>

Sonuç: Herkes İçin Erişilebilir Web

Web sitenizi görme engelli kullanıcılar için erişilebilir hale getirmek, sadece etik bir sorumluluk değil, aynı zamanda daha geniş bir kitleye ulaşmanın ve yasal gereklilikleri karşılamanın da bir yoludur. Bu yöntemleri uygulayarak, sitenizin kullanılabilirliğini önemli ölçüde artırabilir ve tüm kullanıcılar için daha kapsayıcı bir deneyim sunabilirsiniz.

Unutmayın ki erişilebilirlik, sürekli bir süreçtir. Düzenli olarak sitenizi test edin, kullanıcı geri bildirimlerini dikkate alın ve yeni teknolojileri ve en iyi uygulamaları takip edin. Ayrıca, WCAG (Web Content Accessibility Guidelines) gibi uluslararası standartları referans alarak çalışmalarınızı yönlendirin.

Erişilebilir bir web sitesi tasarlamak, herkesin bilgiye eşit erişim hakkına saygı göstermenin ve dijital dünyada gerçek anlamda kapsayıcı olmanın bir yoludur. Bu yaklaşım, sadece görme engelli kullanıcılar için değil, tüm kullanıcılar için daha iyi bir web deneyimi sunmanıza yardımcı olacaktır.