Avrupa Erişilebilirlik Yasası, web erişilebilirliğini Belçikalı ve Hollandalı girişimcilerin gündeminin üst sıralarına taşıdı. WCAG yönergelerine (Web İçeriği Erişilebilirlik Yönergeleri) göre erişilebilirlik eskiden genellikle kamu kurumları için isteğe bağlı bir ekstra olarak görülürken, yasa artık ticari platformlardan ve e-ticaret sitelerinden de herkes tarafından kullanılabilir olmalarını talep ediyor. KOBİ'ler için bu, güzel bir tasarıma körü körüne güvenmenin artık yeterli olmadığı anlamına geliyor.

Birçok işletme, mevcut sitelerine ayrı bir eklenti veya bir erişilebilirlik widget'ı ekleyerek yasayı hızlıca "halletmeye" çalışıyor. Bu tür araçlar basit bir script ile anında uyumluluk vaat ediyor, ancak pratikte çoğu zaman çözdüklerinden daha fazla soruna yol açıyorlar. Platformu ağır JavaScript dosyalarıyla yavaşlatıyor ve asıl kaynak kodundaki hataları çözmüyorlar.

Gerçek erişilebilirlik, platformunuzun temelinde başlar. Temiz kod, mantıklı HTML yapıları ve düşünülmüş bir tasarımla inşa ederek, yalnızca yasal zorunluluklara uymakla kalmaz, aynı zamanda daha hızlı, daha kullanışlı ve daha kolay bulunabilir bir web sitesi de oluşturursunuz. Bu makalede, yasanın tam olarak ne talep ettiğine ve bir öncesi-sonrası dönüşümünün pratikte nasıl göründüğüne bakıyoruz.

Yasa işletmelerden somut olarak ne talep ediyor

Dijital erişilebilirlikle ilgili mevzuat, uluslararası WCAG standartlarına dayanmaktadır. Avrupa'da, Avrupa Erişilebilirlik Yasası e-ticaret, dijital hizmetler ve kamuya açık uygulamalar için net gereksinimler belirliyor. Bu düzenlemenin özü, dijital bilginin görsel, işitsel, motor veya bilişsel engelden bağımsız olarak herkes için erişilebilir olması gerektiğidir.

WCAG yönergeleri dört sabit ilke etrafında yapılandırılmıştır:

  • Algılanabilir: Bilgi ve arayüz öğeleri, kullanıcıların algılayabileceği şekillerde sunulabilir olmalıdır. Yeterli renk kontrastı ve görseller için metin alternatiflerini düşünün.
  • Çalıştırılabilir: Kullanıcı arayüzü ve gezinme, klavye veya ekran okuyucu gibi farklı giriş cihazlarıyla çalıştırılabilir olmalıdır.
  • Anlaşılabilir: Bilgi ve arayüzün işleyişi mantıklı ve öngörülebilir olmalıdır.
  • Sağlam: İçerik, geniş bir tarayıcı ve yardımcı teknoloji yelpazesi tarafından güvenilir şekilde yorumlanabilmelidir.

Çoğu ticari platform için WCAG AA seviyesi yasal norm olarak kabul edilir. Bu, yalnızca ana sayfaların değil, gezinmeden ödemeye veya iletişime kadar tüm sürecin standartlara uyması gerektiği anlamına gelir.

Hızlı overlay'ler ve ağır eklentiler neden işe yaramıyor

Bir girişimci yeni bir mevzuatla karşı karşıya kaldığında, hızlı bir yazılım çözümü arama eğilimi güçlüdür. Piyasada birçok sözde erişilebilirlik widget'ı ortaya çıkıyor. Bunlar, ziyaretçinin metin boyutunu veya kontrastı ayarlamasına olanak tanıyan, ekranın kenarına bir düğme ekleyen harici script'lerdir.

Bu overlay'lerin sorunu, platformun temel kodunu olduğu gibi bırakmalarıdır. Görme engelli bir ziyaretçi tarafından kullanılan bir ekran okuyucu, doğrudan sayfanın HTML yapısına bakar. Bir düğme, doğru işlevsellik olmadan genel bir `<div>` olarak oluşturulmuşsa, bir overlay bunu düzeltmez. Üstelik harici bir widget genellikle yüzlerce kilobayt karmaşık script ekler, bu da sitenin yükleme süresini olumsuz etkiler.

Küçük görsel öğeler için ağır kütüphaneler eklemenin kodu kirletmesi gibi, bir overlay eklentisi de teknik yük oluşturur. Erişilebilir bir site, arayüzün üzerine eklenen ekstra bir katmana değil, her yapı taşının en baştan doğru şekilde kurulduğu sıkı, hafif bir kaynak koduna ihtiyaç duyar.

Bir öncesi-sonrası senaryosu: hızlı çözümden gerçek erişilebilirliğe

Erişilebilirliğin pratikte nasıl işlediğini anlamak için, dijital bir platformun dönüşümüne bakalım. Bu senaryoda, eski durumu yaklaşım ve nihai sonuçla karşılaştırıyoruz.

Revizyon öncesi durum

Orijinal platform, yıllar içinde ayrı modüller ve hazır tema bileşenleriyle yamalanmış bir sitenin tipik özelliklerini gösteriyordu:

  • Gezinme: Menüler yalnızca fare ile çalıştırılabiliyordu. Tab tuşuyla gezinen ziyaretçiler, hangi öğenin seçili olduğunu gösteren görsel bir gösterge olmadığı için odağı kaybediyordu.
  • Formlar: Ödeme sayfasındaki ve iletişim sayfasındaki giriş alanlarında bağlantılı `<label>` öğeleri eksikti. Bir ekran okuyucu, belirli bir alana ne girilmesi gerektiğini okuyamıyordu.
  • Görsel tercihler: Marka renkleri, kontrast oranları dikkate alınmadan kullanılıyordu. Beyaz arka plan üzerindeki açık gri metin, okunabilirliği kötüleştiriyordu.
  • Geçici çözüm: Kurallara uymak için harici bir overlay eklentisi kurulmuştu. Bu, yükleme süresini önemli ölçüde yavaşlatıyor ve formların işlenmesinde hatalara yol açıyordu.

Yaklaşım

Overlay'i korumak yerine, kaynak kodunun kapsamlı bir şekilde temizlenmesi tercih edildi. Harici eklenti tamamen kaldırıldı ve arayüz bileşenleri, semantik HTML ile React ve Tailwind CSS kullanılan özel bileşenler temelinde yeniden oluşturuldu.

Önce HTML yapısı onarıldı. `<div>` veya `<span>` olarak kodlanmış tıklanabilir öğeler, gerçek `<button>` ve `<a>` etiketleriyle değiştirildi. Bu, tarayıcıya klavye kullanımı ve ekran okuyucular için doğrudan doğru talimatları verir.

Ardından renk paleti ayarlandı. Tailwind yapılandırması içinde, normal metin için minimum 4,5:1 kontrast oranını garanti eden renk değişkenleri belirlendi. Son olarak, tüm interaktif öğelere CSS üzerinden net, özelleştirilebilir odak (focus) durumları eklendi, böylece klavyeyle gezinirken hangi öğenin aktif olduğu her zaman net oluyor.

Revizyon sonrası durum

Bu yaklaşımın ardından ortaya çıkan sonuç net bir fark gösteriyor:

  • Tam klavye erişimi: Karmaşık formlar ve pop-up'lar dahil olmak üzere tüm platform, fare kullanılmadan sorunsuzca gezilebiliyor.
  • Temiz kaynak kodu: Harici widget'ın kaldırılması ve gereksiz script'lerin temizlenmesiyle sayfa önemli ölçüde daha hızlı yükleniyor.
  • Otomatik uyumluluk: Platform, harici tedarikçilere veya widget'lar için aylık yazılım aboneliklerine bağımlı olmadan, kaynak kodu düzeyinde WCAG AA gereksinimlerini karşılıyor.
  • Arama motorları için daha iyi: Erişilebilirlik için gereken semantik yapı, Google'ın arama motorlarının da sayfanın içeriğini daha iyi anlamasını ve dizine eklemesini sağlıyor.

Kendi platformunuz için pratik kontrol listesi

Web sitenizin veya uygulamanızın yasal gereksinimlere hazır olup olmadığını kontrol etmek istiyorsanız, hemen bakabileceğiniz birkaç önemli nokta var.

Semantik HTML

HTML öğelerini ne için tasarlandılarsa o amaçla kullanın. Bir başlık `<h1>`, `<h2>` veya `<h3>`dir, bir gezinme menüsü bir `<nav>` içinde yer alır ve bir eylem düğmesi her zaman bir `<button>`dir. İnteraktif bileşenler için JavaScript olaylarına sahip genel öğeler kullanmaktan kaçının.

Kontrast ve okunabilirlik

Metin renginin arka planla yeterince kontrast oluşturduğundan emin olun. Yalnızca standart metni değil, düğmelerin hover veya focus durumundaki halini de test edin. Gövde metni için serifsiz ve yeterince büyük bir yazı tipi kullanın.

Klavye gezinmesi ve odak

Kendi web sitenizde birkaç kez Tab tuşuna basın. Nerede olduğunuzu görebiliyor musunuz? Menüyü açıp formlarda gezinebiliyor musunuz? Aktif öğelerin etrafındaki mavi veya siyah çerçeve, bir alternatif oluşturulmadan CSS'te devre dışı bırakılmışsa, site klavye kullanıcıları için erişilebilir değildir.

Formlar ve hata mesajları

Her giriş alanının, `for` özniteliği aracılığıyla alanın `id`'sine bağlanan karşılık gelen bir etiketi vardır. Bir kullanıcı bir formu doldururken hata yaptığında, hata mesajı yalnızca renkle değil, net bir metinle de belirtilmelidir.

Erişilebilirliği ilk tasarımdan itibaren kurmak

Mevcut, eskimiş bir web sitesini sonradan erişilebilir hale getirmek, genellikle yeni bir platformu baştan doğru şekilde kurmaktan daha pahalı ve zaman alıcıdır. React, TypeScript ve Tailwind CSS gibi modern teknolojilere dayalı özel çözümlerle inşa ettiğinizde, erişilebilirliği doğrudan mimariye dahil edebilirsiniz.

Bileşenleri modüler olarak oluşturup gerektiğinde doğru ARIA özniteliklerini ekleyerek, platform gelecekteki genişlemelerde de WCAG standartlarını karşılamaya devam eder. Temiz kod ve erişilebilirlik el ele gider: daha iyi performans, daha az teknik bakım ve her ziyaretçi için en iyi deneyimi sağlarlar.

Mevcut web sitenizin veya platformunuzun erişilebilirlik ve yapı açısından nasıl bir skor aldığını öğrenmek ister misiniz? Platformunuzun teknik durumunu görüşeceğimiz ücretsiz otuz dakikalık bir görüşme için iletişime geçin.