Web erişilebilirliği nedir

Erişilebilirlik ne demek ve kimin için?

Web erişilebilirliği, kurduğunuz sayfanın; fareyle çalışmayan, renkleri farklı gören ya da sayfayı hiç görmeyen biri için de kullanılabilir kalması demektir. Daha basit değil, daha soluk değil; yalnızca kullanılabilir.

Bundan yararlananların listesi çoğu ekibin sandığından uzundur. Ekran okuyucu kullanan biri. Eli titrediği için fareyi tam yerine götüremeyen biri. Renk körlüğü olan ve kırmızıyla yeşili tek renk gören biri. Videonuzu otobüste sessiz izleyen biri. Bir de kendini bu listeye hiç koymayan grup: öğle güneşinde ekrana bakan siz, ya da bir eliniz doluyken diğerinin başparmağıyla çalışan siz.

Standardı WCAG'dir; web konsorsiyumunun A, AA ve AAA olmak üzere üç düzeyde yayımladığı, sınanabilir ölçütler bütünü. Pratik hedef neredeyse her zaman AA'dır; bazı ölçütler için AAA sıradan bir sitede ulaşılabilir değildir ve kimse bunu sizden istemiyor.

Açık bir şey daha söyleyelim: İran pazarında müşteri bunu genelde istemez, rakip de yapmaz; Farsça sitelerin çoğu bir kez olsun klavyeyle denenmemiştir. Bu da şu demek: yapmak hâlâ bir fark, bir taban değil. Ve aşağıdakilerin çoğu bir öğleden sonra sürer, bir proje değil.

Renk kontrastı: hangi sayı yeterli?

Kontrast, metnin parlaklığının arka planınkine oranıdır ve tek bir sayıyla anlatılır: görünmez demek olan 1:1'den, siyah üstüne beyaz demek olan 21:1'e kadar. WCAG sıradan metin için en az 4,5:1, büyük metin için 3:1 ve bir girdi alanının kenarı ya da anlam taşıyan bir simge gibi arayüz parçaları için 3:1 ister.

Bu bölümün en önemli şeyi tek cümle: bir rengin tek başına kontrastı yoktur, renk çiftinin vardır. Koyu bir arka planda temiz okunan mavi, bir düğmenin arka planı olup üstüne beyaz metin geldiğinde kalabilir.

Okuduğunuz sitenin sayıları iyi bir örnek. Bunları 5 Eylül 2026'da gerçek palet değerlerinden hesapladık: gövde metni arka plan üstünde 17,6:1, ikincil metin 9,25:1, metin rengi olarak mavi 7,32:1 ve daha soluk metin 6,21:1. Şimdi aynı mavi arka plan olarak: üstündeki beyaz yalnızca 2,72:1, yani kalıyor. Bu yüzden paletimizde tek mavi değil iki mavi var; ikincisi daha koyu, üstündeki beyaz 5,17:1'e çıkıyor ve ilki metin ile simgeler için olduğu gibi kalıyor.

Denetlemesi on saniye. Tarayıcının geliştirici araçlarında metne tıklayın, renk değerini açın; kontrast oranı renk seçicinin hemen yanında yazar.

Kontrast hatalarının çoğu iki yerden çıkar ve ikisi de gövde metni değildir: görsel üstündeki metin, ki fotoğrafın parlaklığı her noktada farklı olduğu için tek bir sayısı yoktur ve çözümü metnin altına koyu bir katmandır; bir de form alanının içindeki ipucu metni, ki sayfanın çoğunlukla en soluk metnidir ve tasarımların çoğunda kalır.

Klavyeyle beş dakika: yapabileceğiniz en hızlı sınama

Fareyi bırakın ve Tab'a basın. Bu sınama hiçbir araç istemez ve gerçek sorunların çoğunu bulur, çünkü klavyeyle çalışmayan şey ekran okuyucuyla da çalışmaz.

Dört şeye bakın:

• Fareyle tıkladığınız her şeye Tab ile ulaşabiliyor musunuz? Açılır menü, pencere kapatma, sekmeler, filtreler.
• Her an nerede olduğunuzu biliyor musunuz? Odak halkasını göremiyorsanız sınama daha burada kalmıştır.
• Hareketin sırası sayfanın sırasıyla aynı mı? Tab başlıktan altbilgiye atlayıp sonra ortaya dönüyorsa, öğeler HTML'de göründükleri yerden farklı bir sırada duruyordur.
• Bir yerde takılıyor musunuz? Klasik hâli, açılan ama Escape ile kapanmayan ve Tab'ın içinden çıkmadığı bir kutudur.

Bu sınamanın bulduğu en sık hata tek satır CSS'tir: tarayıcının varsayılan halkası çirkin diye sıfırlama dosyalarına yazılan outline: none. Onu kaldırmak, klavyeyle çalışan birinin artık nerede olduğunu bilmemesi demektir. Doğrusu silmek değil değiştirmektir. Bu sitede tek bir genel kural var: iki piksellik mavi halka ve öğeden üç piksel boşlukla :focus-visible. focus-visible kelimesi önemlidir, çünkü fare kullanıcısı tıklamayla halka almaz, klavye kullanıcısı alır.

Bir de neredeyse hiçbir Farsça sitede olmayan ve üç satır süren bir öğe var: içeriğe atla bağlantısı. Tab'ın ulaştığı ilk şeydir, odak almadan görünmez ve klavyeyle gelen birini bütün menüyü geçmekten kurtarır. Bu temada body içindeki ilk öğe odur.

Bir görselin alternatif metnini nasıl yazarız?

Alternatif metin görselin nasıl göründüğünü değil, o sayfada ne iş yaptığını anlatır. Aynı fotoğraf iki farklı sayfada iki farklı alternatif metin alır.

Ürün sayfasındaki bir sandalye fotoğrafı: "file sırtlı siyah ofis sandalyesi, dörtte üç açıdan". Aynı fotoğraf bel ağrısı üzerine bir yazıda: "ofis sandalyesinde doğru oturuş". Tümüyle süs olan ve anlama bir şey katmayan görsel boş alternatif metin alır, yani alt="", ki ekran okuyucu üzerinden geçsin. Boş bir alt özniteliği, eksik bir alt özniteliğiyle aynı şey değildir: eksik olduğunda bazı ekran okuyucular dosya adını okur ve IMG-20260415-WA0007.jpg kimsenin duymaya ihtiyacı olan bir şey değildir.

Yazılmayacak üç şey: başa konan "görsel" ya da "fotoğraf" kelimesi, çünkü ekran okuyucu zaten bunun bir görsel olduğunu söyler; tıkıştırılmış anahtar kelime, ki alamayacağınız bir sıralama uğruna gerçek bir insanın deneyimini bozar; ve üç satırlık paragraf, çünkü alternatif metin tek cümledir ve daha fazla açıklama gerekiyorsa yeri sayfa metnidir.

Herkesin unuttuğu iki durum: yalnızca simgeden ibaret bir düğme, arama büyüteci ya da kapatma çarpısı gibi, okunacak metni yoktur ve adının aria-label ile verilmesi gerekir; bir de grafik ya da infografik, özeti alt içine sığmaz ve sayıları sayfa metninde de bulunmalıdır.

Bu sitede soru başka bir biçim aldı. Bu sayfanın üstündeki ve bölümler arasındaki şekiller görsel değil: HTML ve CSS. Yani metinleri gerçek metindir, ekran okuyucu onu okur, seçilebilir ve çevrilebilir; raylar ve ok uçları gibi süs parçaları ise aria-hidden ile ekran okuyucudan gizlenmiştir. Bu karar önce hız için alındı, erişilebilirlik yan faydası oldu. Sayfa içi SEO dersi aynı soruya arama tarafından bakıyor.

Bir div neden asla düğme değildir?

Çünkü <button>, <div onclick>'in hiçbirine sahip olmadığı dört şeyi bedava verir: Tab ona ulaşır, Enter ve Space onu etkinleştirir, ekran okuyucu "düğme" der ve tarayıcı devre dışı ile odak durumlarını zaten bilir. Bir div'i aynı yere getirmek tabindex, bir role ve bir klavye dinleyicisi yazmak demektir; sonunda elinizde yalnızca düğmeye benzeyen bir şey olur.

Aynı mantık HTML'in geri kalanında da geçerlidir ve anlamsal HTML fikrinin tamamı budur. Form etiketini alanına <label for> ile bağlayın ki metne tıklamak odağı alanın içine taşısın ve ekran okuyucu alanın ne istediğini bilsin; alanın içindeki ipucu metni etiketin yerini tutmaz, çünkü biri yazmaya başlar başlamaz kaybolur. Başlıkları sırayla tutun, h1 sonra h2 sonra h3, çünkü ekran okuyucu kullanan biri çoğu zaman önce başlık listesini dinler ve nereye gideceğine oradan karar verir. Menüyü <nav>, gövdeyi <main> içine koyun ki aynı kişi doğrudan içeriğe atlayabilsin. Listeyi de <ul> ile yazın, çünkü ekran okuyucu o zaman "liste, altı öğe" der; bu, art arda dizilmiş div'lerin çöpe attığı gerçek bir bilgidir.

Bunu bu sitenin şekil motorunda da uyguluyoruz: karşılaştırma şeklinin sütunları peş peşe paragraflar değil gerçek bir listedir, tam da okuyucu kaç madde olduğunu duysun diye. HTML dersi bu öğeleri tek tek gösteriyor.

Bir ARIA tuzağı da buraya ait, çünkü üretilmiş çıktılarda çok sık görünür: ARIA belirtiminin kendi birinci kuralı, HTML'de o iş için bir öğe varken ARIA yazmamaktır. Bir div üstündeki role="button", <button>'dan iyi değil kötüdür.

Metin içi bağlantılar: renk neden tek başına yetmez

WCAG ölçütlerinden biri, bir bilginin tek aktarım yolunun renk olmaması gerektiğini söyler. Bu ölçütün en sık kırıldığı yer paragraf içindeki bağlantıdır: siyah üstünde mavi, başka hiçbir işaret yok. Renk körlüğü olan, güneş altında okuyan ya da renkleri birbirine yaklaştıran ucuz bir monitörü olan biri o bağlantıyı görmez. Metindir; kendisi için mavi olmayan bir maviyle.

Bariz yanıt her bağlantının altını çizmektir ve o yanıt başka bir sorun üretir: menü, düğmeler, kartlar, logo ve sayfa numaraları da bağlantıdır ve hepsinin altı çizilir. Sayfa gürültülenir; bunu gören de genelde geri dönüp alt çizgiyi tümüyle kaldırır.

Bu sitede izlediğimiz ve kaynağında okuyabileceğiniz yol dört karardan oluşuyor. Birincisi, a genel olarak text-decoration: none taşıyor ve yalnızca metin içi bağlantılar ayrı bir sınıf alıyor. İkincisi, o sınıfın alt çizgisi 1,5 piksel kalınlığında bir degrade arka plandır ve hover ile :focus-visible durumunda 2 piksele çıkar; böylece klavye kullanıcısı, fare kullanıcısının aldığı geri bildirimin aynısını alır. Üçüncüsü, o sınıf box-decoration-break: clone taşır, çünkü onsuz ikinci satıra taşan bir bağlantının yalnızca bir parçasının altı çizilir, diğeri çıplak kalır. Dördüncüsü, Windows'un zorunlu renkler kipinde gerçek alt çizgiyi geri getiren bir @media (forced-colors: active) bloğu var; çünkü o kip arka plan görsellerini atar ve bunu düşünmediyseniz degrade alt çizginiz tam da ona en çok ihtiyacı olan kişi için kaybolur.

Sınırı da söyleyelim: bu dört satır yalnızca paragraf içindeki bağlantıları düzeltir. Görsel olan bir bağlantı, yalnızca simgeden ibaret bir bağlantı ve tümüyle tıklanabilir bir kart bundan hiçbir şey kazanmaz; her birinin kendi okunabilir adı olmalıdır.

Gerçekten düzeldiğini nasıl anlarsınız?

Üç aracınız var ve sıraları önemli. Önce klavye: hiçbir şey gerektirmez ve en çoğunu yakalar. Sonra tarayıcının geliştirici araçları: hem kontrast oranını hem de ekran okuyucunun gördüğü şey olan erişilebilirlik ağacını gösterir; düğmeniz o ağaçta adsız görünüyorsa yanıtınızı çoktan aldınız. Üçüncüsü gerçek bir ekran okuyucu: Windows'ta NVDA ücretsizdir, macOS ve iOS'ta VoiceOver, Android'de TalkBack sisteme gömülüdür. Bunlardan biriyle geçirilen on dakika, herhangi bir yazıdan çok öğretir.

Lighthouse'un erişilebilirlik bölümü gibi otomatik araçlar da yararlıdır, yerlerini bildiğiniz sürece: mekanik kuralları denetlerler. "Görsel" yazan bir alternatif metin onlardan geçer. Odak sırası ölçülmez. Neyin devamı olduğu anlaşılmayan "daha fazla" etiketli bir düğme aralarından süzülüp gider. Yüz almak, mekanik hatanız olmadığı anlamına gelir; sayfanın kullanılabilir olduğu anlamına gelmez.

Erişilebilirlik katmanı eklentileri, yani siteyi tek satır kodla erişilebilir yapmayı vadeden yüzen kutular üzerine bir söz: HTML'inizde yanlış olan şey, üstüne serilen bir katmanla düzelmez. Düğme olmayan bir div, o eklenti kurulduktan sonra da düğme değildir. Belirli bir ürünü sınamadık ve ad da vermiyoruz; yalnızca işe yarayan yolun işaretlemenin kendisini değiştirmek olduğunu söylüyoruz.