Erişilebilirlik Testleri ile Web Sitenizi Daha Kullanıcı Dostu Hale Getirme

Erişilebilirlik testleri, web sitenizin tüm kullanıcılar için, özellikle de engelli bireyler için ne kadar kullanılabilir olduğunu değerlendirmenin önemli bir yoludur. İşte web sitenizi daha erişilebilir hale getirmek için uygulayabileceğiniz testler ve yöntemler:

1. Otomatik Erişilebilirlik Testleri

Otomatik araçlar, hızlı bir şekilde temel erişilebilirlik sorunlarını tespit edebilir.

// WAVE Web Accessibility Evaluation Tool kullanımı
<script src="https://wave.webaim.org/widget/wave.js"></script>

// axe-core kütüphanesi ile erişilebilirlik testi
<script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.3.5/axe.min.js"></script>
<script>
axe.run().then(results => {
  console.log(results.violations);
});
</script>

2. Klavye Navigasyon Testi

Sitenizin sadece klavye kullanılarak gezinilebilir olduğundan emin olun.

<script>
document.addEventListener('keydown', function(e) {
  if (e.key === 'Tab') {
    console.log('Aktif element:', document.activeElement);
  }
});
</script>

<style>
:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}
</style>

3. Renk Kontrast Kontrolü

Metin ve arka plan arasındaki renk kontrastının yeterli olduğundan emin olun.

<script>
function getContrastRatio(color1, color2) {
  const luminance1 = getLuminance(color1);
  const luminance2 = getLuminance(color2);
  const lightest = Math.max(luminance1, luminance2);
  const darkest = Math.min(luminance1, luminance2);
  return (lightest + 0.05) / (darkest + 0.05);
}

function getLuminance(color) {
  const rgb = color.match(/d+/g).map(Number);
  const [r, g, b] = rgb.map(c => {
    c /= 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

const backgroundColor = getComputedStyle(document.body).backgroundColor;
const textColor = getComputedStyle(document.body).color;
const contrastRatio = getContrastRatio(backgroundColor, textColor);
console.log('Kontrast oranı:', contrastRatio);
</script>

4. Alternatif Metin (Alt Text) Kontrolü

Tüm görsellerin açıklayıcı alternatif metinlere sahip olduğundan emin olun.

<script>
const images = document.querySelectorAll('img');
images.forEach(img => {
  if (!img.alt) {
    console.warn('Alt text eksik:', img.src);
  }
});
</script>

5. Başlık Hiyerarşisi Kontrolü

Doğru bir başlık hiyerarşisi (h1, h2, h3, vb.) kullanıldığından emin olun.

<script>
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
let lastLevel = 0;
headings.forEach(heading => {
  const currentLevel = parseInt(heading.tagName.charAt(1));
  if (currentLevel - lastLevel > 1) {
    console.warn('Başlık seviyesi atlanmış:', heading);
  }
  lastLevel = currentLevel;
});
</script>

6. Form Etiketleri ve ARIA Kontrolü

Form elemanlarının doğru etiketlendiğinden ve ARIA özelliklerinin kullanıldığından emin olun.

<script>
const formInputs = document.querySelectorAll('input, select, textarea');
formInputs.forEach(input => {
  const label = document.querySelector(`label[for="${input.id}"]`);
  if (!label) {
    console.warn('Etiket eksik:', input);
  }
  if (!input.hasAttribute('aria-label') && !input.hasAttribute('aria-labelledby')) {
    console.warn('ARIA etiket eksik:', input);
  }
});
</script>

7. Medya İçeriği Erişilebilirlik Kontrolü

Video ve ses içeriklerinin altyazı, transkript veya sesli betimleme içerdiğinden emin olun.

<script>
const videos = document.querySelectorAll('video');
videos.forEach(video => {
  const captions = video.querySelector('track[kind="captions"]');
  if (!captions) {
    console.warn('Altyazı eksik:', video);
  }
});
</script>

8. Dinamik İçerik Erişilebilirlik Kontrolü

AJAX ile yüklenen içeriklerin erişilebilir olduğundan emin olun.

<script>
function checkDynamicContent(content) {
  const newImages = content.querySelectorAll('img');
  newImages.forEach(img => {
    if (!img.alt) {
      console.warn('Dinamik içerikte alt text eksik:', img.src);
    }
  });
  // Diğer erişilebilirlik kontrolleri...
}

// AJAX çağrısı sonrası:
fetch('some-content.html')
  .then(response => response.text())
  .then(html => {
    const contentDiv = document.getElementById('dynamic-content');
    contentDiv.innerHTML = html;
    checkDynamicContent(contentDiv);
  });
</script>

9. Mobil Erişilebilirlik Testi

Sitenizin mobil cihazlarda da erişilebilir olduğundan emin olun.

<script>
function checkMobileAccessibility() {
  if (window.innerWidth < 768) {
    const touchTargets = document.querySelectorAll('button, a, input[type="submit"]');
    touchTargets.forEach(target => {
      const rect = target.getBoundingClientRect();
      if (rect.width < 44 || rect.height < 44) {
        console.warn('Dokunmatik hedef çok küçük:', target);
      }
    });
  }
}

window.addEventListener('resize', checkMobileAccessibility);
checkMobileAccessibility();
</script>

10. Ekran Okuyucu Testi

Sitenizi popüler ekran okuyucularla test edin (örneğin, NVDA, JAWS, VoiceOver).

Bu, manuel bir süreçtir ve gerçek kullanıcılarla test yapmayı gerektirir. Ancak, ARIA özelliklerini kontrol etmek için şu script kullanılabilir:

<script>
document.querySelectorAll('[aria-hidden="true"]').forEach(el => {
  if (el.textContent.trim() !== '') {
    console.warn('aria-hidden="true" olan element içerik içeriyor:', el);
  }
});

document.querySelectorAll('[role]').forEach(el => {
  if (!el.hasAttribute('aria-label') && !el.hasAttribute('aria-labelledby')) {
    console.warn('Role atanmış ancak etiketlenmemiş element:', el);
  }
});
</script>

Bu testler ve yöntemler, web sitenizin erişilebilirliğini değerlendirmenize ve iyileştirmenize yardımcı olacaktır. Ancak, en iyi sonuçları elde etmek için bu otomatik testleri manuel testlerle ve gerçek kullanıcılarla yapılan testlerle birleştirmeniz önemlidir. Ayrıca, WCAG (Web Content Accessibility Guidelines) gibi uluslararası standartları takip etmek, erişilebilir bir web sitesi oluşturmanın önemli bir parçasıdır.