Web Erişilebilirliği Nedir?
Web erişilebilirliği (Accessibility), internetin herkes için, hiçbir fiziksel veya bilişsel engel gözetmeksizin kullanılabilir olmasıdır. Görme zorluğu çeken birinden, sadece klavye kullanan birine kadar her kullanıcının sitenizde özgürce dolaşabilmesini hedefler. WCAG (Web Content Accessibility Guidelines) standartları bu özgürlüğün anayasasıdır.
Button ve Input Neden Kritik?
Sitenizdeki butonlar ve form alanları (input), kullanıcının sizinle etkileşime geçtiği "karar noktaları"dır. Satın alma, kayıt olma veya iletişime geçme gibi tüm dönüşümler bu elemanlar üzerinden gerçekleşir. SEO'nun "davranış" katmanında, etkileşimi bozuk bir site asla zirvede kalamaz.
Google Erişilebilirliği Sıralama Faktörü Olarak Kullanır mı?
Google, erişilebilirliği doğrudan bir sıralama puanı olarak ilan etmese de, Kullanıcı Deneyimi (UX) sinyalleri üzerinden dolaylı ama ölümcül bir etki yaratır. Sitenizi kullanamayan, butonlara tıklayamayan kullanıcıların "mutsuz" ayrılması, Google'a en güçlü negatif sinyali gönderir.
Gerçek Button Nedir? (<button> vs <div>)
Açık konuşalım: <div onclick="..."> kullanmak bir erişilebilirlik cinayetidir. Div'ler klavye ile odaklanamaz, ekran okuyucular (screen reader) tarafından buton olarak algılanmaz. Sadece tasarım kaygısıyla anlamsız etiketler kullanmak, klavye kullanıcılarını ve engelli bireyleri sitenizden kovmaktır.
Tıklanabilir Alan (Hit Area) Problemi
Özellikle mobil cihazlarda, butonların ve linklerin dokunma alanları yeterli genişlikte olmalıdır. Çok küçük butonlar, kullanıcının "yanlış yerlere tıklamasına" ve hayal kırıklığına yol açar. Google Search Console, "Tıklanabilir öğeler birbirine çok yakın" uyarısıyla sizi bu konuda uyarır.
Button’larda Metin Kullanımı
"Buraya Tıkla" gibi jenerik metinler SEO ve erişilebilirlik açısından değersizdir. Butonun ne işe yaradığını açıkça belirten (Örn: "Hemen Başvurun", "Raporu İndirin") anlamlı aksiyon metinleri hem kullanıcıya hem de AI botlarına net mesaj verir.
Icon Button Sorunu ve aria-label
Sadece bir ikon barındıran (Örn: Çöp kutusu simgesi) butonlar tasarımcılar için şıktır ama ekran okuyucular için kâbustur. Bu tür butonlarda aria-label="Sil" gibi gizli ama okunan metinler kullanmak profesyonel bir teknik zorunluluktur.
Disabled Button Felaketi
Butonu görsel olarak pasif (disabled) yapmak kullanıcıyı bir "çıkmaza" sokabilir. Neden pasif olduğunu belirten bir açıklama veya etkileşim yoksa, kullanıcı sitenin bozuk olduğunu düşünebilir. Ekran okuyucular pasif elementleri bazen tamamen atlar; bu da navigasyon kopukluğu yaratır.
Keyboard Navigation (Klavye Erişimi)
Fare kullanmayan birisi sitenizde sadece "Tab" tuşuyla gezinebilmelidir. Tab sırasının mantıklı olması, focus animasyonlarının net görünmesi ve "Enter/Space" tuşlarının buton aksiyonlarını tetiklemesi erişilebilirliğin temelidir.
Focus State Neden Gizlenmemeli?
CSS ile outline: none yaparak focus çerçevesini kaldırmak, "tasarım çirkinleşmesin" bahanesiyle kullanıcıyı kör etmektir. Odaklanılan yerin net bir şekilde vurgulanması, özellikle motor becerileri sınırlı kullanıcılar için hayati navigasyon desteğidir.
Input Etiketleri (<label>) Neden Zorunlu?
Her giriş alanının (input) mutlaka bir etiketi (label) olmalıdır. Placeholder bir label değildir; kutu içine yazı yazıldığında kaybolur ve kullanıcının "Buraya ne yazacaktım?" sorusuyla baş başa kalmasına neden olur. Screen reader uyumu için label vazgeçilmezdir.
Placeholder Yanılgısı
Placeholder metinleri genellikle düşük kontrasta sahiptir ve görsel olarak siliktir. Ayrıca form doldurulurken kaybolmaları, hafıza yükünü artırır. Erişilebilirlik standartlarında placeholder sadece yardımcı bilgi için kullanılabilir; asıl görev label'ındır.
Input Tiplerinin Gücü
type="email", type="tel" veya type="number" gibi doğru tipler kullanmak, mobil cihazlarda uygun klavyenin (Örn: sadece rakamlar) açılmasını sağlar. Bu, etkileşim hızını artırır ve kullanıcıyı yormaz.
Required Alanlar ve Bildirimler
Zorunlu alanları sadece bir kırmızı yıldız (*) ile göstermek renk körleri için anlamsızdır. Hem metinsel olarak bildirmek hem de aria-required="true" etiketiyle botlara/yardımcı teknolojilere "Burası kritik" mesajı verilmelidir.
Form Hataları Nasıl Gösterilmeli?
Hata durumunda sadece kutu çerçevesini kırmızı yapmak yeterli değildir. Hatanın ne olduğunu anlatan net bir metin ve bu metnin ekran okuyucuya derhal ulaştırılması (aria-invalid ve aria-live) şarttır.
aria-label Nedir? Görünmeyen Sesin Gücü
aria-label, bir elementin üzerinde yazılı bir metin olmasa bile (örneğin sadece bir ikon varsa), tarayıcıya ve ekran okuyucuya o elementin ne olduğunu söyleyen "fısıltı" dır. Google botları, butonun içindeki bu metni okuyarak aksiyonun amacını anlar. Görsel tasarımı bozmadan içeriği anlamlandırmanın en saf yoludur.
aria-labelledby vs aria-describedby: Farkı Anlamak
En çok karıştırılan iki başlıktır:
- aria-labelledby: Elementin adını (label) başka bir elementin ID'si üzerinden belirler. "Bu elementin adı şu ID'li başlığın kendisidir" der.
- aria-describedby: Element hakkında ek açıklama (tip, kısıtlama vb.) verir. "Bu elementin adı budur ama şurada da detaylı açıklaması var" demektir. SEO için anlamsal bağlam sağlar.
aria-live ve aria-busy: Dinamik İçerik Sinyalleri
Sayfa yenilenmeden değişen içeriklerde (örneğin bir mesaj kutusu veya yükleme ekranı) kullanılır. aria-live="polite" ile tarayıcıya "Hoppala, burada bir şeyler değişti, kullanıcı işini bitirince ona söyle" dersiniz. aria-busy ise içeriğin o an güncellendiğini ve "meşgul" olduğunu botlara bildirir.
aria-hidden ve aria-current: Botlara Odak Göstermek
aria-hidden="true", bir elementi görsel olarak gösterip ekran okuyucudan (ve bazen bot algoritmasından) gizlemek için kullanılır; genellikle süs amaçlı ikonlarda tercih edilir. aria-current="page" ise navigasyon menüsünde kullanıcının (ve botun) o an hangi sayfada olduğunu anlamasını sağlayan kritik bir navigasyon sinyalidir.
aria-expanded: Menülerin Gizli Dili
Açılır menüler (dropdown) veya akordiyon yapılar için hayati önem taşır. Elementin o an açık mı (true) yoksa kapalı mı (false) olduğunu teknik olarak bildirir. Bu başlık, botların sayfa içindeki "gizli ama erişilebilir" içeriği doğru haritalandırmasını sağlar.
Renk Kontrastı ve Buton Okunabilirliği
WCAG standartlarına göre metin ve arka plan arasında minimum 4.5:1 kontrast oranı olmalıdır. CTA butonunuzun rengi tasarımı tamamlamalı ama okunabilirliği asla bozmamalıdır. Görünmeyen buton, tıklanmayan butondur.
SEO Araçlarının Erişilebilirlik Yanılgısı
Birçok araç sadece Lighthouse skoruna bakar. Oysa 100 puan alan bir sitenin klavye navigasyonu tamamen bozuk olabilir. Gerçek erişilebilirlik teknik bir checklist'ten ziyade, "gerçek bir insanın" kullanım deneyimidir.
SEO Analiz Aracı için Button & Input Skoru
Sizin için geliştirilen bu analiz motoru şu kriterleri "affetmez":
- Div Button: HATA (Semantik yıkım).
- Label Eksikliği: HATA (Form körlüğü).
- Keyboard Erişimi Yok: HATA (Dışlayıcı yapı).
- ARIA Desteği: BAŞARILI (Erişilebilir altyapı).
Erişilebilirlik ve Dönüşüm Oranı (CRO)
İronik bir gerçek: Erişilebilirlik için yaptığınız her iyileştirme, "normal" kullanıcıların da işini kolaylaştırır. Net CTA'lar, kolay dolan formlar ve hatasız akışlar dönüşüm oranınızı (Conversion Rate) doğrudan yukarı iter.
25. Erişilebilirlik & Etkileşim Manifestosu – Net Hüküm
"Erişilebilirlik bir süs veya "ekstra" değil, webin ontolojik bir gerekliliğidir. UX bir lüks değil, saygıdır. Etkileşimin olmadığı yerde SEO sadece bir yanılsamadır; gerçek başarı herkesin dokunabildiği yerde başlar."
ENGELLEYEN DEĞİL, BİRLEŞTİREN WEB.