Web erişilebilirliği, engelli bireylerin etkili bir şekilde kullanabileceği web siteleri oluşturmak anlamına gelir. Bu, ekran okuyucuları, yalnızca klavye ile gezinme, ses kontrolü, ekran büyütücüler kullanan veya renk görme sınırlamaları olan bireyleri içerir. WordPress ekosisteminde erişilebilirlik, birçok yargı alanında yasal bir gereklilik olmasının yanı sıra, daha geniş bir kitleye ulaşmanın pratik bir yoludur—dünya genelinde 1 milyardan fazla insanın bir tür engeli bulunmaktadır.
Bu kılavuzda, WordPress sitenizi erişilebilir hale getirmek için pratik adımları ele alıyoruz ve Web İçeriği Erişilebilirlik Kılavuzları (WCAG) 2.2'yi AA seviyesinde takip ediyoruz—bu, ADA (ABD), EAA (AB) ve AODA (Kanada) gibi erişilebilirlik yasaları tarafından en yaygın olarak talep edilen standarttır.
WCAG 2.2 İlkelerini Anlamak
WCAG, POUR olarak bilinen dört ilke etrafında organize edilmiştir:
| İlke | Anlamı | WordPress Örnekleri |
|---|---|---|
| Algılanabilir | Kullanıcılar içeriği görme, duyma veya dokunma yoluyla algılayabilir | Görseller için alternatif metin, videolar için altyazılar, yeterli renk kontrastı |
| İşletilebilir | Kullanıcılar arayüzde gezinip etkileşimde bulunabilir | Klavye ile gezinme, atlama bağlantıları, klavye tuzakları yok |
| Anlaşılabilir | Kullanıcılar içeriği ve arayüzü nasıl kullanacaklarını anlayabilir | Açık dil, tutarlı gezinme, hata mesajları |
| Sağlam | İçerik tarayıcılar, cihazlar ve yardımcı teknolojiler arasında çalışır | Geçerli HTML, uygun ARIA rolleri, anlamsal işaretleme |
Erişilebilir Bir Tema Seçmek
WordPress temanızın HTML yapısı ve CSS, sitenizin erişilebilirliğinin temelini oluşturur. WordPress teması seçerken, bu erişilebilirlik faktörlerini değerlendirin:
- Anlamsal HTML: Tema, her şey için genel divler yerine uygun HTML5 öğelerini (header, nav, main, article, aside, footer) kullanır
- Başlık hiyerarşisi: H1 → H2 → H3, seviyeleri atlamadan mantıklı bir sırayı takip eder
- Atlama bağlantıları: "İçeriğe atla" bağlantısı, klavye kullanıcılarının gezinmeyi atlamasına olanak tanıyan ilk odaklanabilir öğe olarak mevcuttur
- Klavye ile gezinme: Tüm etkileşimli öğeler (bağlantılar, düğmeler, formlar) Tab tuşu ile erişilebilir ve kullanılabilir
- Odak göstergeleri: Odaklanmış öğelerin görünür bir kenarlığı veya vurgusu vardır (outline: none ile kaldırılmamış)
- Renk kontrastı: Metin, WCAG AA kontrast oranlarını karşılar (normal metin için 4.5:1, büyük metin için 3:1)
WordPress.org üzerinde "erişilebilirlik hazır" olarak etiketlenmiş temalar, temel bir erişilebilirlik incelemesini geçmiştir. Ancak, bu etiket bir başlangıç noktasını belirtir, tam WCAG uyumluluğunu değil. Popüler temalar arasında, GeneratePress, temiz anlamsal HTML ve uygun ARIA işaretleri ile dikkat çekici bir şekilde iyi kodlanmıştır.
Görsel Erişilebilirliği
Alternatif Metin
Anlamlı her görselin açıklayıcı bir alternatif metne ihtiyacı vardır. WordPress bunu basit hale getirir—alternatif metin alanı, Medya Kütüphanesi'nde ve içeriğe görsel eklerken mevcuttur.
| Görsel Türü | Alternatif Metin Yaklaşımı | Örnek |
|---|---|---|
| Ürün fotoğrafı | Ürünü tanımlayın | "Altın tokalı kırmızı deri çapraz çanta, ön görünüm" |
| Ekran görüntüsü | Ekran görüntüsünün neyi gösterdiğini tanımlayın | "12 aktif eklentiyi gösteren WordPress kontrol paneli" |
| İnfografik | Ana bilgileri özetleyin | "Karşılaştırma tablosu: Elementor ile Gutenberg özellikleri. Elementor 100'den fazla widget, Gutenberg 90'dan fazla blok içeriyor" |
| Süsleme görseli | Boş alternatif (alt="") | Arka plan desenleri, ayırıcılar, tamamen süsleyici simgeler |
| Grafik/çizelge | Eğilimi veya ana veri noktasını tanımlayın | "Web sitesi trafiğinin Ocak'tan Aralık 2025'e kadar %45 arttığını gösteren çizgi grafiği" |
Erişilebilirlik için Görsel Optimizasyonu
- Metin içeren görseller kullanmayın—bunun yerine CSS ile stillendirilmiş gerçek metin kullanın
- Görsellerde yer alan metinlerin kontrast gereksinimlerini karşıladığından emin olun
- Karmaşık görseller (grafikler, diyagramlar) için yan bir paragraf veya longdesc niteliği kullanarak uzun açıklamalar sağlayın
- Görsellerin uygun boyutlara sahip olduğundan emin olun, böylece düzen kaymaları (CLS) oluşturmazlar
Klavye
Klavyeyle Navigasyon
Pek çok kullanıcı web sitelerinde tamamen klavye ile gezinir—İleri gitmek için Tab, geri gitmek için Shift+Tab, bağlantıları/düğmeleri etkinleştirmek için Enter, onay kutularını açıp kapatmak ve düğmelere tıklamak için Boşluk, modalları kapatmak için ise Escape tuşunu kullanır.
Yaygın Klavye Erişilebilirlik Sorunları
- Odak tuzakları: Ana içeriğe geri tablanmasına izin vermeyen modal diyaloglar (modallar odaklanmayı modal içinde tutmalı ve Escape ile kapatılmalıdır)
- Kaybolan odak göstergeleri: Odaklanmış öğelerde varsayılan dış çizgiyi kaldıran CSS (global olarak *:focus { outline: none } kullanmayın)
- Tıklama işleyicileri olan etkileşimsiz öğeler: Klavye erişilebilir olmayan onClick olayları olan divler veya spanlar (bunun yerine düğmeler veya bağlantılar kullanın)
- Yalnızca üzerine gelindiğinde açılan açılır menüler: Klavye kullanıcıları üzerine gelme durumlarını tetikleyemez. Menüler odak/Enter ile de açılmalıdır
- ARIA olmadan özel bileşenler: Doğru ARIA rolleri ve klavye işleyicileri olmadan oluşturulmuş sekmeler, akordeonlar ve döner tablolar
Renk ve Kontrast
WCAG AA, bu minimum kontrast oranlarını gerektirir:
| Öğe | Minimum Oran | Örnek (Geçer) | Örnek (Geçmez) |
|---|---|---|---|
| Normal metin (<18px) | 4.5:1 | #333 üzerinde #fff (12.6:1) | #999 üzerinde #fff (2.8:1) |
| Büyük metin (≥18px veya ≥14px kalın) | 3:1 | #555 üzerinde #fff (7.4:1) | #aaa üzerinde #fff (2.3:1) |
| UI bileşenleri (düğmeler, girişler) | 3:1 | Mavi #2563eb düğmesi (4.6:1) | Açık mavi #93c5fd (1.8:1) |
| Metin dışı içerik (ikonlar, kenarlıklar) | 3:1 | Açık arka planda koyu ikon | Beyaz üzerinde açık gri ikon |
Kontrast oranlarını doğrulamak için WebAIM'in Contrast Checker'ı veya axe tarayıcı uzantısını kullanın. Bilgi iletmek için yalnızca renge güvenmeyin—renk kodlamasına ek olarak metin etiketleri, desenler veya ikonlar kullanın.
Form Erişilebilirliği
Formlar, erişilebilirlik için en kritik alanlardan biridir. İster Gutenberg blokları, Gravity Forms veya WPForms kullanıyor olun:
- Her girişi etiketleyin: Her girişi for/id niteliği ile ilişkilendirilmiş <label> öğesini kullanın. Yer tutucu metin etiketlerin yerini tutmaz
- İlgili alanları gruplandırın: İlgili giriş grupları için <fieldset> ve <legend> kullanın (örneğin, gönderim adresi alanları)
- Hata mesajları sağlayın: Doğrulama başarısız olduğunda, hangi alanın hatalı olduğunu belirleyin ve nasıl düzeltileceğini açıklayın. Hata mesajlarını alanlarıyla ilişkilendirmek için aria-describedby kullanın
- Zorunlu alanları işaretleyin: Zorunlu niteliğini kullanın ve zorunlu alanları metin ile görsel olarak belirtin (sadece bir yıldız değil)
- Otomatik tamamlama desteği sağlayın: Tarayıcıların form verilerini otomatik doldurabilmesi için uygun otomatik tamamlama niteliklerini ekleyin (isim, e-posta, tel, adres-satır1)
İçerik Erişilebilirliği
Başlık Yapısı
Doğru başlık hiyerarşisi, ekran okuyucu kullanıcılarının sayfa yapısını anlamalarına ve bölümler arasında gezinmelerine yardımcı olur. Kurallar:
- Her sayfa için bir H1 (sayfa/yazı başlığı)
- Ana bölümler için H2
- H2 içindeki alt bölümler için H3
- Seviyeleri atlamayın (H2 → H4, H3 olmadan yanlıştır)
- Görsel stil için başlıkları kullanmayın—bunun yerine CSS sınıflarını kullanın
Bağlantı Metni
Bağlam dışındaki anlamı olmayan genel bağlantı metninden kaçının:
| Kötü Bağlantı Metni | Erişilebilir Bağlantı Metni |
|---|---|
| "Buraya tıklayın" | "WordPress güvenliği kılavuzunu okuyun" |
| "Daha fazla oku" | "Tam Elementor Pro incelemesini okuyun" |
| "Daha fazla bilgi edinin" | "WooCommerce ödeme sayfasını nasıl optimize edeceğinizi öğrenin" |
| "Burada" | "Performans kıyaslama raporunu indirin" |
Tablolar
Veri tabloları şunları içermelidir:
- <thead> ile sütun başlıkları için <th> öğeleri (scope="col" ile)
- <th scope="row"> ile satır başlıkları
- Tablonun amacını tanımlayan bir <caption> öğesi
- Basit yapı—mümkünse birleştirilmiş hücrelerden kaçının, çünkü bunlar ekran okuyucuların yorumlaması için zordur
Web Sitenizin Erişilebilirliğini Test Etme
| Araç | Tür | Ne Test Ediyor |
|---|---|---|
| axe DevTools | Tarayıcı uzantısı | Otomatik WCAG ihlal tespiti |
| WAVE | Tarayıcı uzantısı / web | Satır içi notlarla görsel erişilebilirlik değerlendirmesi |
| Lighthouse | Chrome DevTools | Puanlar ve önerilerle erişilebilirlik denetimi |
| Klavye testi | Manuel | Sadece Tab, Enter ve Escape tuşlarını kullanarak tüm siteyi gezme |
| Ekran okuyucu | Manuel | VoiceOver (Mac), NVDA (Windows) veya TalkBack (Android) ile test etme |
Otomatik araçlar, erişilebilirlik sorunlarının yaklaşık %30-50'sini yakalar. Otomatik araçların tespit edemediği etkileşim tabanlı sorunları belirlemek için klavye ve ekran okuyucu ile manuel test yapmak gereklidir.
Erişilebilirlik için WordPress Eklentileri
- WP Accessibility: Atla bağlantıları ekler, yaygın erişilebilirlik sorunlarını düzeltir, kullanıcı tercihleri için araç çubuğu ekler
- One Click Accessibility: Ön uçta erişilebilirlik araç çubuğu ekler (yazı tipi boyutu, kontrast, bağlantı vurgusu)
- Erişilebilirlik ile başlangıç şablonları: astra-pro-addon">Astra ve GeneratePress her ikisi de temel temalarında güçlü erişilebilirlik temellerine sahiptir
Not: Erişilebilirlik üst katman eklentileri (yüzen widget ile "düzelt" butonları ekleyen) erişilebilirlik topluluğu tarafından geniş çapta eleştirilmektedir. Bir web sitesini erişilebilir hale getirmezler; aslında yardımcı teknolojilerle çelişebilecek yüzeysel bir katman eklerler. Temanızı ve içeriğinizi erişilebilir hale getirmeye odaklanın, üst katmanlara güvenmeyin.
Sıkça Sorulan Sorular
WordPress kutudan çıktığı gibi erişilebilir mi?
WordPress çekirdeği erişilebilirlik konusunda önemli ölçüde gelişmiştir. Yönetim paneli büyük ölçüde klavye ile gezilebilir ve blok editörü ARIA etiketlerini içerir. Ancak, sitenizin erişilebilirliği kullandığınız tema ve eklentilere büyük ölçüde bağlıdır. Kötü HTML yapısına sahip bir tema, WordPress'in yerleşik erişilebilirlik özelliklerini zayıflatır.
Yasal olarak erişilebilir bir web sitesine ihtiyacım var mı?
Pek çok yargı alanında, evet. ADA (ABD), Avrupa Erişilebilirlik Yasası (AB, Haziran 2025'te yürürlüğe girecek), AODA (Kanada) ve benzeri yasalar, web sitelerinin erişilebilir olmasını gerektirir. Belirli gereksinimler, konumunuza, iş türünüze ve hedef kitlenize bağlıdır. Durumunuza özgü gereksinimler için bir hukuk uzmanına danışın.
Erişilebilirlik SEO'yu etkiler mi?
Evet, önemli bir örtüşme vardır. Doğru başlık yapısı, açıklayıcı alt metin, anlamsal HTML, hızlı sayfa yükleme ve mobil uyumluluk hem erişilebilirlik hem de SEO için faydalıdır. WCAG yönergelerine uyan siteler, temelde daha iyi bir kullanıcı deneyimi sağladıkları için genellikle daha iyi sıralanır. SEO en iyi uygulamaları için kontrol listemize bakın.
Sayfa oluşturucular erişilebilir web siteleri oluşturabilir mi?
Elementor ve diğer sayfa oluşturucular, doğru kullanıldıklarında erişilebilir içerik oluşturabilir. Anahtar, doğru başlık hiyerarşisini sağlamak, resimlere alt metin eklemek, anlamsal widget'lar (stil verilmiş divler yerine butonlar) kullanmak ve klavye navigasyonunu test etmektir. Oluşturucu kendisi erişilebilirliği belirlemez; onu nasıl kullandığınız belirler.
WordPress sitelerinde en yaygın erişilebilirlik hatası nedir?
Resimlerde eksik veya yetersiz alt metin, en sık bildirilen WCAG ihlalidir. İkinci en yaygın hata ise yetersiz renk kontrastıdır. Her ikisi de düzeltmesi kolaydır; teknik uzmanlık yerine dikkat ve sürekli uygulama gerektirir.
WooCommerce'i nasıl erişilebilir hale getiririm?
WooCommerce'in varsayılan şablonları makul bir erişilebilirliğe sahiptir. Kontrol edilmesi gereken ana alanlar: ürün görseli alt metni, ödeme alanlarındaki form etiketleri, sepet ve ödeme sürecinin klavye ile gezilebilirliği ve form doğrulama hataları için erişilebilir hata mesajları. Erişilebilir bir temanın temel olarak kullanılması, WooCommerce'e özel gereken çalışmayı önemli ölçüde azaltır.
Erişilebilir WordPress Siteleri Oluşturun
Erişilebilir bir tema temeli ile başlayın. Anlamsal HTML ve WCAG uyumunu önceliklendiren hafif, iyi kodlanmış temaları inceleyin.
Erişilebilir Temaları İnceleyin →
