Web Erişilebilirliği: Modern Web Uygulamalarında A11Y Rehberi

Web erişilebilirliği (a11y), web sitelerinin ve uygulamaların herkes tarafından kullanılabilir olmasını sağlayan önemli bir konudur. Bu yazıda, modern frontend geliştirmede erişilebilirlik prensiplerini, WCAG standartlarını ve pratik implementasyon örneklerini inceleyeceğiz.

Web Erişilebilirliği Nedir?

Web erişilebilirliği, engelli kullanıcılar da dahil olmak üzere tüm kullanıcıların web içeriklerine eşit şekilde erişebilmesini sağlayan prensipler ve teknikler bütünüdür. Bu, görme engelli, işitme engelli, motor becerileri kısıtlı veya bilişsel engelli kullanıcıları kapsar.

WCAG Standartları

WCAG (Web Content Accessibility Guidelines), web erişilebilirliği için uluslararası standartları belirler. Dört temel prensip üzerine kuruludur:

Algılanabilir (Perceivable): Bilgi ve arayüz bileşenleri kullanıcılara algılanabilir şekilde sunulmalıdır.
Çalıştırılabilir (Operable): Arayüz bileşenleri ve navigasyon çalıştırılabilir olmalıdır.
Anlaşılabilir (Understandable): Bilgi ve arayüzün çalışması anlaşılabilir olmalıdır.
Sağlam (Robust): İçerik, farklı kullanıcı aracıları tarafından güvenilir şekilde yorumlanabilecek kadar sağlam olmalıdır.

Semantic HTML Kullanımı

Erişilebilir web uygulamaları oluşturmanın ilk adımı, semantic HTML elementlerini doğru kullanmaktır.

<!-- ❌ Yanlış Kullanım -->
<div class="header">
  <div class="nav">
    <div class="nav-item">Ana Sayfa</div>
  </div>
</div>

<!-- ✅ Doğru Kullanım -->
<header>
  <nav>
    <ul>
      <li><a href="/">Ana Sayfa</a></li>
    </ul>
  </nav>
</header>

ARIA Attributes

ARIA (Accessible Rich Internet Applications) özellikleri, HTML elementlerinin erişilebilirlik bilgilerini zenginleştirir.

// React komponenti örneği
function Dialog({ isOpen, onClose, title, children }) {
  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="dialog-title"
      aria-describedby="dialog-description"
    >
      <h2 id="dialog-title">{title}</h2>
      <div id="dialog-description">
        {children}
      </div>
      <button
        onClick={onClose}
        aria-label="Kapat"
      >
        ×
      </button>
    </div>
  );
}

Klavye Navigasyonu

Tüm interaktif elementler klavye ile erişilebilir olmalıdır.

function KeyboardNavigation() {
  const handleKeyPress = (event) => {
    if (event.key === 'Enter' || event.key === ' ') {
      // İşlem gerçekleştir
      event.preventDefault();
    }
  };

  return (
    <button
      onKeyDown={handleKeyPress}
      tabIndex={0}
      role="button"
    >
      İşlem Yap
    </button>
  );
}

Renk Kontrastı ve Görsel Tasarım

Görsel tasarımda erişilebilirlik için dikkat edilmesi gereken önemli noktalar vardır:

/* ❌ Yetersiz kontrast */
.text-low-contrast {
  color: #666;
  background-color: #fff;
}

/* ✅ WCAG AA standardına uygun kontrast */
.text-accessible {
  color: #595959;
  background-color: #fff;
}

/* Hover durumunda focus göstergesi */
.interactive-element:focus {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
}

/* Hareket eden içerik için kullanıcı tercihleri */
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
    transition: none;
  }
}

Form Erişilebilirliği

Formlar, web uygulamalarının en önemli etkileşim noktalarıdır ve erişilebilir olmaları kritiktir.

function AccessibleForm() {
  return (
    <form>
      <div>
        <label htmlFor="name">
          İsim
          <span aria-hidden="true" className="required">*</span>
        </label>
        <input
          id="name"
          type="text"
          required
          aria-required="true"
          aria-invalid={errors.name ? "true" : "false"}
        />
        {errors.name && (
          <span role="alert" className="error">
            {errors.name}
          </span>
        )}
      </div>
    </form>
  );
}

Erişilebilirlik Testleri

Erişilebilirlik testleri, uygulamanızın WCAG standartlarına uygunluğunu kontrol etmenizi sağlar.

// Jest ve Testing Library ile erişilebilirlik testi örneği
import { render, screen } from '@testing-library/react';
import { axe } from 'jest-axe';

test('form should not have any accessibility violations', async () => {
  const { container } = render(<AccessibleForm />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Mobil Erişilebilirlik

Mobil cihazlarda erişilebilirlik için ek dikkat edilmesi gereken noktalar:

Dokunma hedeflerinin yeterli büyüklükte olması (en az 44x44px)
Gesture alternatifleri sunulması
Ekran okuyucu uyumluluğu
Responsive tasarım prensipleri

/* Dokunma hedefleri için minimum boyut */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
}

/* Mobil cihazlar için ek boşluk */
@media (max-width: 768px) {
  .interactive-element {
    margin: 8px 0;
    padding: 12px;
  }
}

Sonuç

Web erişilebilirliği, modern web geliştirmenin vazgeçilmez bir parçasıdır. WCAG standartlarına uygun, erişilebilir web uygulamaları geliştirmek:

Daha geniş bir kullanıcı kitlesine ulaşmanızı sağlar
SEO performansınızı artırır
Yasal gerekliliklere uyum sağlar
Kullanıcı deneyimini iyileştirir

Bu rehberde bahsedilen prensipleri ve teknikleri uygulayarak, herkes için erişilebilir web uygulamaları geliştirebilirsiniz.

hero.title