Web Erişilebilirliği (a11y): Frontend Geliştiricileri İçin Pratik Bir Rehber

Web erişilebilirliği (genellikle a11y olarak kısaltılır; burada 11, 'a' ve 'y' harfleri arasındaki harf sayısını temsil eder), engelli kişilerin kullanabileceği web siteleri ve web uygulamaları tasarlama ve geliştirme pratiğidir. Bu, görme, işitme, motor, bilişsel ve konuşma bozuklukları olan bireyleri kapsar. Erişilebilir web siteleri oluşturmak sadece uyumlulukla ilgili değildir; aynı zamanda yetenekleri veya web'e eriştikleri teknolojiler ne olursa olsun herkes için kapsayıcı ve eşit dijital deneyimler yaratmakla ilgilidir. Ayrıca daha geniş bir kitleye ulaşmak için de önemlidir. Örneğin, iyi bir renk kontrastı parlak güneş ışığındaki kullanıcılara fayda sağlarken, net düzenler bilişsel bozuklukları olanlara veya sadece çoklu görev yapanlara yardımcı olur.

Web Erişilebilirliği Neden Önemlidir?

Web erişilebilirliğine öncelik vermek için birçok zorlayıcı neden vardır:

• Etik Değerler: Herkes çevrimiçi bilgi ve hizmetlere eşit erişim hakkını hak eder. Engelli kişileri dijital dünyadan dışlamak ayrımcılıktır.
• Yasal Gereklilikler: Birçok ülke ve bölgede, Amerika Birleşik Devletleri'ndeki Engelli Amerikalılar Yasası (ADA), Kanada'daki Ontaryalılar için Engellilerle İlgili Erişilebilirlik Yasası (AODA) ve Avrupa Birliği'ndeki Avrupa Erişilebilirlik Yasası (EAA) gibi web erişilebilirliğini zorunlu kılan yasalar ve düzenlemeler bulunmaktadır. Uyum sağlanmaması yasal işlemlere neden olabilir. Örneğin, bazı yargı bölgelerinde erişilebilir olmayan web siteleri davalara maruz kalabilir.
• İyileştirilmiş Kullanıcı Deneyimi: Erişilebilirlik en iyi uygulamaları genellikle genel kullanılabilirlik ilkeleriyle örtüşür. Bir web sitesini erişilebilir hale getirmek, engellilik durumuna bakılmaksızın tüm kullanıcılar için kullanıcı deneyimini iyileştirebilir. Örneğin, form alanları için net etiketler sağlamak, bilişsel bozuklukları olan kullanıcılara ve her bir alanın amacını hızla anlamak isteyen yavaş internet bağlantısına sahip kullanıcılara fayda sağlar.
• Daha Geniş Kitleye Ulaşım: Dünya nüfusunun yaklaşık %15'inin bir engeli vardır. Web sitenizi erişilebilir hale getirerek, onu önemli ölçüde daha büyük bir kitleye açmış olursunuz. Bu, artan iş hacmi, etkileşim ve etki anlamına gelebilir. DSÖ, 1 milyardan fazla insanın bir tür engelle yaşadığını tahmin etmektedir.
• SEO Avantajları: Google gibi arama motorları, iyi yapılandırılmış, anlamsal ve kullanıcı dostu web sitelerine öncelik verir. Doğru başlık yapılarını kullanmak ve resimler için alternatif metin sağlamak gibi birçok erişilebilirlik en iyi uygulaması, web sitenizin arama motoru optimizasyonunu (SEO) da iyileştirebilir.
• Artan Marka İtibarı: Erişilebilirliğe olan bağlılığınızı göstermek, markanızın itibarını artırabilir ve müşterilerle güven oluşturabilir. Tüketiciler giderek sosyal olarak sorumlu ve kapsayıcı markaları tercih etmektedir.

Erişilebilirlik Standartlarını ve Yönergelerini Anlamak

Web erişilebilirliği için birincil standart, World Wide Web Konsorsiyumu (W3C) tarafından geliştirilen Web İçeriği Erişilebilirlik Yönergeleri (WCAG)'dir. WCAG, web içeriğinin erişilebilirliğini değerlendirmek için kullanılabilecek test edilebilir bir dizi başarı kriteri sunar. WCAG uluslararası alanda tanınmaktadır ve dünya genelindeki erişilebilirlik yasaları ve yönetmeliklerinde sıklıkla referans gösterilir.

WCAG, genellikle POUR olarak adlandırılan dört ilke etrafında düzenlenmiştir:

• Algılanabilir: Bilgi ve kullanıcı arayüzü bileşenleri, kullanıcıların algılayabileceği şekillerde sunulmalıdır. Bu, metin olmayan içerik için metin alternatifleri, videolar için altyazılar sağlamak ve yeterli renk kontrastı sağlamak anlamına gelir.
• İşletilebilir: Kullanıcı arayüzü bileşenleri ve gezinme işletilebilir olmalıdır. Bu, tüm işlevlerin klavyeden kullanılabilir olmasını sağlamayı, kullanıcılara içeriği okumak ve kullanmak için yeterli zaman tanımayı ve nöbetlere neden olabilecek içerikten kaçınmayı içerir.
• Anlaşılabilir: Bilgi ve kullanıcı arayüzünün işleyişi anlaşılabilir olmalıdır. Bu, açık ve net bir dil kullanmayı, talimatlar ve geri bildirim sağlamayı ve web sitesinin öngörülebilir ve tutarlı olmasını sağlamayı içerir.
• Sağlam: İçerik, yardımcı teknolojiler de dahil olmak üzere çok çeşitli kullanıcı aracısı tarafından güvenilir bir şekilde yorumlanabilecek kadar sağlam olmalıdır. Bu, geçerli HTML ve ARIA niteliklerini kullanmayı ve içeriğin farklı tarayıcılar ve cihazlarla uyumlu olmasını sağlamayı içerir.

WCAG'nin üç uygunluk seviyesi vardır: A, AA ve AAA. Seviye A en temel erişilebilirlik seviyesiyken, Seviye AAA en kapsamlı olanıdır. Çoğu kuruluş, erişilebilirlik ve pratiklik arasında iyi bir denge sağladığı için Seviye AA uygunluğunu hedefler. Birçok yasa ve yönetmelik Seviye AA uygunluğunu gerektirir.

Frontend Geliştiricileri İçin Pratik Teknikler

İşte frontend geliştiricilerinin web sitelerinin ve web uygulamalarının erişilebilirliğini artırmak için kullanabilecekleri bazı pratik teknikler:

1. Anlamsal HTML

Anlamsal HTML öğelerini kullanmak erişilebilirlik için çok önemlidir. Anlamsal HTML, içeriğinize anlam ve yapı kazandırarak yardımcı teknolojilerin anlamasını ve yorumlamasını kolaylaştırır. Her şey için genel <div> ve <span> öğeleri kullanmak yerine, aşağıdaki gibi HTML5 anlamsal öğelerini kullanın:

• <header>: Bir belgenin veya bölümün başlığını temsil eder.
• <nav>: Gezinme bağlantılarının bir bölümünü temsil eder.
• <main>: Bir belgenin ana içeriğini temsil eder.
• <article>: Bir belge, sayfa, uygulama veya sitede kendi kendine yeten bir kompozisyonu temsil eder.
• <aside>: Belgenin ana içeriğiyle teğetsel olarak ilgili içeriği temsil eder.
• <footer>: Bir belgenin veya bölümün altbilgisini temsil eder.
• <section>: Tematik bir içerik gruplamasını temsil eder.

Örnek:

<header>
  <h1>Web Sitem</h1>
  <nav>
    <ul>
      <li><a href="#">Anasayfa</a></li>
      <li><a href="#">Hakkında</a></li>
      <li><a href="#">İletişim</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Makale Başlığı</h2>
    <p>Makale içeriği burada...</p>
  </article>
</main>

<footer>
  <p>© 2023 Web Sitem</p>
</footer>

Uygun başlık seviyelerini (<h1> ila <h6>) kullanmak da mantıksal bir belge yapısı oluşturmak için esastır. İçeriğinizi düzenlemek ve kullanıcıların gezinmesini kolaylaştırmak için başlıkları kullanın. <h1> sayfanın ana başlığı için kullanılmalı ve sonraki başlıklar bir bilgi hiyerarşisi oluşturmak için kullanılmalıdır. Başlık seviyelerini atlamaktan (örneğin, <h2>'den <h4>'e geçmek) kaçının, çünkü bu ekran okuyucu kullanıcılarının kafasını karıştırabilir.

2. Resimler için Alternatif Metin

Tüm resimler, resmin içeriğini ve işlevini açıklayan anlamlı bir alternatif metne (alt text) sahip olmalıdır. Alt metin, resmi göremeyen kullanıcılara resmin bilgilerini iletmek için ekran okuyucular tarafından kullanılır. Eğer bir resim tamamen dekoratifse ve önemli bir bilgi taşımıyorsa, alt niteliği boş bir dizeye (alt="") ayarlanmalıdır.

Örnek:

<img src="logo.png" alt="Şirket Logosu">
<img src="decorative-pattern.png" alt="">

Alt metin yazarken açıklayıcı ve öz olun. Resmin sağladığı temel bilgileri aktarmaya odaklanın. '... resmi' veya '... fotoğrafı' gibi ifadeler kullanmaktan kaçının, çünkü ekran okuyucular genellikle bunun bir resim olduğunu anons edecektir.

Grafikler ve çizelgeler gibi karmaşık resimler için, çevreleyen metinde daha ayrıntılı bir açıklama sağlamayı veya <figure> ve <figcaption> öğelerini kullanmayı düşünün.

3. Klavye Erişilebilirliği

Web sitenizdeki tüm etkileşimli öğelere klavye kullanılarak erişilebilmelidir. Bu, fare veya başka bir işaretleme cihazı kullanamayan kullanıcılar için çok önemlidir. Kullanıcıların web sitenizde Tab tuşunu kullanarak gezinebildiğinden ve Enter veya Boşluk tuşlarını kullanarak öğelerle etkileşime girebildiğinden emin olun.

Sayfanızdaki öğelerin odak sırasına dikkat edin. Odak sırası, içerik boyunca mantıksal ve sezgisel bir yol izlemelidir. Odak sırasını kontrol etmek için tabindex niteliğini kullanabilirsiniz, ancak genellikle HTML'deki öğelerin doğal sırasına güvenmek en iyisidir. tabindex'i yalnızca varsayılan odak sırasındaki sorunları düzeltmek için kullanın.

Kullanıcılara hangi öğenin o anda odaklanmış olduğunu göstermek için görsel odak göstergeleri sağlayın. Varsayılan tarayıcı odak göstergesi yeterli olmayabilir, bu nedenle CSS kullanarak kendi stilinizi eklemeyi düşünün. Odak göstergesinin arka planla yeterli kontrasta sahip olduğundan emin olun.

Örnek:

/* CSS */
a:focus, button:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

4. ARIA Nitelikleri

ARIA (Accessible Rich Internet Applications), yardımcı teknolojilere ek anlamsal bilgi sağlamak için HTML öğelerine eklenebilen bir dizi niteliktir. ARIA nitelikleri, dinamik içeriğin, karmaşık widget'ların ve diğer etkileşimli öğelerin erişilebilirliğini artırmak için kullanılabilir.

Bazı yaygın ARIA nitelikleri şunlardır:

• aria-label: Bir öğe için bir metin etiketi sağlar.
• aria-describedby: Bir öğeyi bir açıklamayla ilişkilendirir.
• aria-labelledby: Bir öğeyi bir etiketle ilişkilendirir.
• aria-hidden: Bir öğeyi yardımcı teknolojilerden gizler.
• aria-live: Bir öğenin içeriğinin dinamik olarak güncellendiğini belirtir.
• role: Bir öğenin rolünü tanımlar (örneğin, button, checkbox, dialog).
• aria-expanded: Bir öğenin genişletilmiş mi yoksa daraltılmış mı olduğunu belirtir.
• aria-selected: Bir öğenin seçili olup olmadığını belirtir.

Örnek:

<button aria-label="Diyaloğu kapat" onclick="closeDialog()">X</button>
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Diyaloğum</h2>
  <p>Diyalog içeriği burada...</p>
</div>

ARIA niteliklerini kullanırken, ARIA kullanım kurallarına uymak önemlidir:

• Kural 1: Eğer yeniden bir öğeyi amaçlandırmak ve onu erişilebilir kılmak için bir ARIA rolü, durumu veya özelliği eklemek yerine, zaten yerleşik olarak istediğiniz anlamsal yapıya ve davranışa sahip yerel bir HTML öğesi veya niteliği kullanabiliyorsanız, onu kullanın.
• Kural 2: Gerçekten zorunda kalmadıkça yerel HTML anlamsal yapısını değiştirmeyin.
• Kural 3: Tüm etkileşimli ARIA kontrolleri klavye ile kullanılabilir olmalıdır.
• Kural 4: Odaklanılabilir öğelerde role="presentation" veya aria-hidden="true" kullanmayın.
• Kural 5: ARIA rolüne sahip tüm öğeler, gerekli tüm niteliklere sahip olmalıdır.

5. Renk Kontrastı

Metin ve arka planı arasında yeterli renk kontrastı olduğundan emin olun. Yetersiz renk kontrastı, az gören veya renk körü olan kullanıcıların metni okumasını zorlaştırabilir.

WCAG, normal metin için en az 4.5:1 ve büyük metin (18pt veya 14pt kalın) için 3:1 kontrast oranı gerektirir. Web sitenizin bu gereksinimleri karşıladığını doğrulamak için renk kontrastı denetleyicilerini kullanabilirsiniz. WebAIM Contrast Checker gibi birçok ücretsiz çevrimiçi araç mevcuttur.

Örnek:

/* CSS */
body {
  color: #333; /* Koyu gri metin */
  background-color: #fff; /* Beyaz arka plan */
}

(Bu örneğin kontrast oranı 7:1'dir ve WCAG gereksinimlerini karşılamaktadır.)

Bilgi aktarmanın tek yolu olarak renk kullanmaktan kaçının. Renk körü olan kullanıcılar farklı renkleri ayırt edemeyebilir. Rengin anlamını pekiştirmek için metin etiketleri veya simgeler gibi ek ipuçları kullanın.

6. Formlar ve Etiketler

Form öğelerini doğru bir şekilde etiketlemek erişilebilirlik için çok önemlidir. Her bir form girdisiyle bir metin etiketini ilişkilendirmek için <label> öğesini kullanın. <label> öğesinin for niteliği, karşılık gelen girdi öğesinin id niteliğiyle eşleşmelidir.

Örnek:

<label for="name">Ad:</label>
<input type="text" id="name" name="name">

Karmaşık formlar için, ilgili form kontrollerini gruplamak üzere <fieldset> ve <legend> öğelerini kullanmayı düşünün. Bu, kullanıcıların her bir kontrol grubunun amacını anlamasına yardımcı olabilir.

Kullanıcılar formu doldururken hata yaptıklarında açık ve net hata mesajları sağlayın. Hata mesajları, ilgili form alanının yakınında görüntülenmeli ve hatanın nasıl düzeltileceği konusunda rehberlik sağlamalıdır.

Hangi form alanlarının gerekli olduğunu belirtmek için required niteliğini kullanın. Bu, kullanıcıların yanlışlıkla eksik formlar göndermesini önlemeye yardımcı olabilir.

7. Multimedya Erişilebilirliği

Videolar ve ses kayıtları gibi multimedya içeriğinin engelli kullanıcılar için erişilebilir olduğundan emin olun. Videolar için altyazılar ve ses kayıtları için transkriptler sağlayın. Altyazılar, videonun konuşulan içeriğini, önemli ses efektleri veya arka plan gürültüsü de dahil olmak üzere doğru bir şekilde yazıya dökmelidir.

Canlı video için gerçek zamanlı altyazı hizmetlerini kullanmayı düşünün. Bu hizmetler, gerçek zamanlı olarak altyazı sağlayarak işitme engelli kullanıcıların içeriği takip etmesine olanak tanır. Birçok video konferans platformu yerleşik canlı altyazı özellikleri sunar.

Videolar için sesli betimlemeler sağlayın. Sesli betimlemeler, videonun görsel içeriğinin bir anlatımını sunarak ekranda neler olduğunu açıklar. Sesli betimlemeler, kör veya az gören kullanıcılar için esastır.

Oynat, duraklat ve ses kontrolü gibi multimedya kontrollerinin klavye ile erişilebilir olduğundan emin olun.

8. Dinamik İçerik ve Güncellemeler

Web sitenizdeki içerik dinamik olarak güncellendiğinde, kullanıcıları değişikliklerden haberdar etmek önemlidir. Bu, özellikle ekran okuyucu kullanan kullanıcılar için önemlidir, çünkü içeriğin değiştiğinin farkında olmayabilirler.

Dinamik güncellemeleri ekran okuyuculara duyurmak için ARIA live regions (canlı bölgeler) kullanın. ARIA canlı bölgeleri, sayfanın güncellemeleri almak üzere belirlenmiş alanlarıdır. Bir canlı bölgenin içeriği değiştiğinde, ekran okuyucu değişiklikleri kullanıcıya duyurur. Bir canlı bölge tanımlamak için aria-live niteliğini kullanın. aria-atomic ve aria-relevant nitelikleri, ekran okuyucunun değişiklikleri nasıl duyuracağını ince ayarlamak için kullanılabilir.

Örnek:

<div aria-live="polite">
  <p id="status-message">Yükleniyor...</p>
</div>

<script>
  // Veriler yüklendiğinde durum mesajını güncelle
  function updateStatus(message) {
    document.getElementById("status-message").textContent = message;
  }
</script>

Bu örnekte, aria-live="polite" niteliği, ekran okuyucunun <div> öğesinin içeriğindeki değişiklikleri duyurması gerektiğini, ancak kullanıcının mevcut görevini kesintiye uğratmaması gerektiğini belirtir. updateStatus() fonksiyonu, <p> öğesinin içeriğini günceller, bu da ekran okuyucunun yeni durum mesajını duyurmasını tetikler.

9. Erişilebilirlik Testi

Herhangi bir sorunu belirlemek ve düzeltmek için web sitenizi düzenli olarak erişilebilirlik açısından test edin. Erişilebilirlik testi için kullanabileceğiniz çeşitli araçlar ve teknikler bulunmaktadır.

• Otomatik Erişilebilirlik Denetleyicileri: Web sitenizi yaygın erişilebilirlik hataları için taramak üzere otomatik erişilebilirlik denetleyicilerini kullanın. Bazı popüler araçlar arasında WAVE, A Checker ve Google Lighthouse bulunmaktadır. Bu araçlar, eksik alt metin, düşük renk kontrastı ve uygun olmayan başlık yapıları gibi sorunları belirleyebilir. Ancak, otomatik araçlar erişilebilirlik sorunlarının yalnızca bir kısmını tespit edebilir.
• Manuel Test: Web sitenizi bir klavye ve bir ekran okuyucu kullanarak manuel olarak test edin. Bu, odak sırası sorunları ve anlaşılmaz gezinme gibi otomatik araçların tespit edemeyeceği sorunları belirlemenize yardımcı olacaktır. Bazı popüler ekran okuyucular arasında NVDA (ücretsiz ve açık kaynaklı), JAWS (ticari) ve VoiceOver (macOS ve iOS'a yerleşik) bulunur.
• Kullanıcı Testi: Test sürecinize engelli kullanıcıları dahil edin. Web sitenizin herkes için erişilebilir olduğundan emin olmak için farklı engel türlerine sahip kullanıcılardan geri bildirim alın. Kullanıcı testi, web sitenizin gerçek dünyadaki erişilebilirliği hakkında değerli bilgiler sağlayabilir.

Tarayıcının Ötesinde Erişilebilirlik

Bu rehber öncelikle bir tarayıcı bağlamında web erişilebilirliğine odaklanmış olsa da, erişilebilirliğin web'in ötesine uzandığını hatırlamak önemlidir. Diğer dijital alanlarda da erişilebilirliği göz önünde bulundurun:

• Mobil Uygulamalar: iOS ve Android için mobil uygulamalar geliştirirken benzer erişilebilirlik ilkelerini uygulayın. İşletim sistemleri tarafından sağlanan yerel erişilebilirlik özelliklerini kullanın.
• Masaüstü Uygulamaları: Masaüstü uygulamalarının klavye ile gezilebilir olduğundan, yeterli kontrast sağladığından ve ekran okuyucularla uyumlu olduğundan emin olun.
• Belgeler (PDF, Word, vb.): Uygun başlık yapıları, resimler için alt metin kullanarak ve yeterli kontrast sağlayarak erişilebilir belgeler oluşturun.
• E-postalar: Anlamsal HTML kullanarak, resimler için alt metin sağlayarak ve açık ve net bir dil kullanarak erişilebilir e-postalar tasarlayın.

Sonuç

Web erişilebilirliği, frontend geliştirmenin temel bir yönüdür. Bu rehberde özetlenen ilkeleri ve teknikleri izleyerek, yetenekleri ne olursa olsun tüm kullanıcılar için kapsayıcı ve erişilebilir web deneyimleri oluşturabilirsiniz. Erişilebilirliğin sürekli bir süreç olduğunu unutmayın. Web sitenizi düzenli olarak test edin ve zamanla erişilebilir kalmasını sağlamak için engelli kullanıcılardan geri bildirim toplayın. Erişilebilirliğe öncelik vererek, web'i herkes için daha kapsayıcı ve eşit bir yer haline getirebilirsiniz.

Erişilebilirliği benimseyerek, sadece yönetmeliklere uymakla kalmaz, aynı zamanda herkes için daha iyi bir web inşa eder, erişiminizi genişletir ve küresel ölçekte marka itibarınızı güçlendirirsiniz.