- Accessibility (A11y)
A11y (Accessibility) Erişilebilirlik Nedir?
A11y (Accessibility), web sitelerinin ve uygulamaların engelli kullanıcılar dahil herkes tarafından erişilebilir ve kullanılabilir olmasını sağlayan geliştirme yaklaşımıdır.
Zeynep Baş2 dk okuma
Perceivable (Algılanabilir)
Kullanıcı içerikleri görebilmeli veya duyabilmelidir.
Web sayfasındaki bilgiler herkes tarafından algılanabilir olmalıdır. Görme veya işitme engeli bulunan kullanıcılar için alternatif içerikler sunulmalıdır.
Görseller için alt (alt text) kullanılması
Videolar için altyazı eklenmesi
Yeterli renk kontrastı sağlanması
Bilginin yalnızca renkle ifade edilmemesi
Ekran okuyucuların içerikleri doğru okuyabilmesi için açıklayıcı metinler kullanılmalıdır.
Anlamlı alt metinler yazılması
Dekoratif görsellerde boş alt değeri kullanılması
İkonların açıklanması
Operable (Kullanılabilir)
Arayüz tüm kullanıcılar tarafından kullanılabilir olmalıdır.
Sayfadaki tüm işlemler yalnızca fare ile değil, klavye ile de gerçekleştirilebilmelidir.
Tab ile gezinme
Enter ve Space ile buton kullanımı
Focus görünürlüğü
Klavye tuzaklarının olmaması
Etkileşimli bileşenler tüm kullanıcılar için erişilebilir olmalıdır.
Dropdown'ların klavye desteği
Modal pencerelerin doğru focus yönetimi
Skip to Content bağlantısı
Understandable (Anlaşılabilir)
İçerik ve arayüz kolay anlaşılmalıdır.
Kullanıcılar form alanlarını ve hata mesajlarını kolayca anlayabilmelidir.
Formlarda label kullanılması
Anlaşılır hata mesajları
Tutarlı navigasyon
Basit dil kullanımı
Kullanıcının ne yapacağını tahmin etmek zorunda kalmaması gerekir.
Anlamlı buton isimleri
Açıklayıcı placeholder yerine label kullanımı
Tutarlı sayfa yapısı
Robust (Sağlam)
Web uygulaması farklı cihaz ve yardımcı teknolojilerle uyumlu çalışmalıdır.
Doğru HTML yapısı kullanılarak ekran okuyucuların içeriği doğru yorumlaması sağlanmalıdır.
Semantic HTML kullanımı
header, nav, main ve footer etiketleri
Doğru heading sıralaması
Standart HTML kullanımı
HTML'nin yeterli olmadığı durumlarda ARIA özelliklerinden yararlanılmalıdır.
aria-label
aria-labelledby
aria-describedby
role kullanımı
Semantic HTML Kullanımı
Doğru HTML etiketleri erişilebilirliğin temelidir.
Div yerine uygun HTML etiketleri tercih edilmelidir.
header
nav
main
section
article
footer
Semantic HTML ekran okuyucuların sayfayı daha doğru anlamasını sağlar.
SEO katkısı sağlar
Kod okunabilirliğini artırır
Bakımı kolaylaştırır
ARIA Kullanımı
HTML'nin yetersiz kaldığı durumlarda ARIA özellikleri kullanılmalıdır.
ARIA, ekran okuyuculara elementlerin ne işe yaradığını açıklamak için kullanılır.
aria-label
aria-expanded
aria-hidden
aria-live
Özellikle yalnızca ikon içeren butonlarda aria-label kullanılması gerekir.
Menüyü Aç
Sepete Ekle
Favorilere Ekle
Ara
Yaygın Yapılan Hatalar
Accessibility geliştirirken kaçınılması gereken durumlar.
Birçok projede erişilebilirlik geliştirme sürecinin sonunda düşünülür. Bu doğru bir yaklaşım değildir.
Alt text eklememek
Label kullanmamak
Sadece fare desteği sunmak
Yetersiz renk kontrastı
ARIA özelliklerini gereksiz kullanmak da yanlış bir uygulamadır.
Semantic HTML yerine sürekli ARIA kullanmak
Gereksiz role eklemek
Yanlış aria-label tanımlamak
Sonuç
Erişilebilirlik modern web geliştirmenin vazgeçilmez bir parçasıdır.
Accessibility sadece engelli kullanıcılar için değil, tüm kullanıcı deneyimini iyileştiren önemli bir yaklaşımdır.
Daha iyi kullanıcı deneyimi
SEO avantajı
Yasal standartlara uyum
Daha kaliteli ürün
Semantic HTML, klavye desteği, doğru ARIA kullanımı ve anlaşılır içerik ile erişilebilir uygulamalar geliştirilebilir.
Semantic HTML
Keyboard Navigation
ARIA Attributes
Color Contrast