Erişilebilirliği Sola Kaydırın: Tasarımcılar Neden Figma İçinde Erişilebilirlik Kontrolü Yapmalı?

Erişilebilirlik çoğu ekipte “sonradan” ele alınıyor: geliştirme bittiğinde bir denetim, birkaç düzeltme, ardından erişilebilirlik beyanı… Oysa bu yaklaşım hem maliyetli hem de riskli. “Shift left accessibility” (erişilebilirliği sola kaydırma) fikri, sorunları kod yazılmadan önce—tasarım aşamasında—yakalamayı hedefler. Bu noktada Figma, tasarımcıların WCAG (Web Content Accessibility Guidelines) kriterlerini daha erken uygulayabilmesi için güçlü bir çalışma alanı sunar.

Bu yazıda, tasarımcıların neden erişilebilirlik kontrollerini Figma içinde çalıştırması gerektiğini; bunun WCAG uyumu, kapsayıcı tasarım ve ekip verimliliği açısından nasıl fark yarattığını ele alacağız.

“Shift left” ne demek ve erişilebilirlikte neden kritik?

Yazılım geliştirmede “shift left”, kalite ve güvenlik gibi kontrollerin sürecin erken aşamalarına taşınması anlamına gelir. Erişilebilirlikte bunun karşılığı basittir: Hataları tasarımda yakalarsanız, kodda daha az yeniden iş çıkar.

• Daha düşük maliyet: Yanlış renk kontrastını Figma’da düzeltmek dakikalar alır; kodda, QA’da ve içeriklerde zincirleme değişikliklere yol açması ise günler sürebilir.
• Daha az risk: Yasal uyumluluk ve kamu/kurumsal ihale süreçlerinde erişilebilirlik şartları giderek yaygınlaşıyor. Bu konuda güncel çerçeveyi anlamak için Dijital Erişilebilirlik ve Regülasyonlar: WCAG Uyumunda Güncel Rehber yazısındaki pratik özet, ekipler için iyi bir başlangıçtır.
• Daha iyi kullanıcı deneyimi: Erişilebilirlik, yalnızca “uyum” değil; herkes için daha anlaşılır, daha okunur ve daha kullanılabilir arayüz demektir.

Figma içinde erişilebilirlik kontrolü yapmak tasarıma ne kazandırır?

1) Renk kontrastı hatalarını erken yakalarsınız

WCAG’a göre metin ve arka plan arasında yeterli kontrast sağlanmalı. Ancak “göze güzel geliyor” hissi, özellikle düşük görüş, renk körlüğü, parlak ekran/ışık koşulları gibi durumlarda yanıltıcı olabilir. Figma’da kontrast kontrollerini düzenli yapmak:

• Body metinleri, küçük fontlar ve ikincil metinlerde okunabilirliği artırır.
• Buton, link, etiket (badge) gibi bileşenlerin tüm varyantlarında tutarlılık sağlar.
• Tasarım sisteminde renk token’larını (ör. primary/secondary, success/error) WCAG hedefleriyle hizalar.

İpucu: Sadece “normal metin” için değil, ikon üzeri metin, placeholder ve disabled durumlarını da kontrol edin. Placeholder’ın “gri” olması erişilebilir olmak zorunda değil; ama form alanı etiketinin (label) varlığı ve görünürlüğü kritiktir.

2) Odak (focus) durumlarını ve klavye akışını tasarımda planlarsınız

Bir arayüz, fare olmadan kullanılabiliyor mu? WCAG’ın önemli bir parçası klavye ile gezinme ve görünür odak göstergesidir. Tasarım aşamasında aşağıdakileri netleştirirseniz geliştirme aşamasında sürpriz azalır:

• Odak sırası: Tab ile gezinince hangi öğe hangi sırayla odak alacak?
• Görünür odak stili: Focus ring rengi, kalınlığı, arka planla kontrastı.
• Etkin durumlar: Hover’a bağımlı ipuçları yerine klavye/odak ile de görülebilen geri bildirimler.

Figma prototipleri “klavye ile tam gezinme”yi birebir simüle etmese de, odak durumlarını bir tasarım standardı haline getirmek, ekip genelinde erişilebilirlik olgunluğunu artırır.

3) Form alanları, hata mesajları ve mikro kopya daha erişilebilir olur

Formlar erişilebilirliğin en sık kırıldığı alanlardan biridir. Tasarımcılar Figma’da şu soruları erkenden yanıtlayabilir:

• Her alanın kalıcı bir etiketi (label) var mı? Sadece placeholder’a güveniliyor mu?
• Hata durumunda mesaj alanın yanında ve anlaşılır mı? Sadece kırmızı renkle mi anlatılıyor?
• Yardım metinleri kısa, net ve eyleme dönük mü?

Bu aşamada metinlerin anlaşılır olması da önemli: basit dil, tutarlı terimler ve açık yönlendirme, bilişsel erişilebilirliği güçlendirir.

Figma’da yapılabilecek pratik WCAG odaklı kontrol listesi

Her tasarım tesliminden önce Figma dosyasında hızlı bir tur atmak için aşağıdaki kontrol listesi iş görür:

• Kontrast: Metin/arka plan, ikon/arka plan, link renkleri. Küçük metinler için daha sıkı kontrol.
• Tipografi: Minimum font boyutu yaklaşımı, satır aralığı, paragraflar arası boşluk; uzun metin bloklarında okunabilirlik.
• Odak görünürlüğü: Tüm etkileşimli bileşenlerin focus durumları tanımlı mı?
• Tıklanabilir alan: Küçük ikon butonların dokunma alanı yeterli mi?
• Durumlar: Default/hover/focus/active/disabled/error/success durumları tasarlanmış mı?
• İçerik hiyerarşisi: Başlık seviyeleri (H1-H2-H3) mantıklı bir akışa sahip mi? Kart başlığı gerçekten başlık mı yoksa stil mi?
• Görsel metinler: Önemli bilgi görselin içine gömülü mü? (İdeal değil; metin olarak sunulmalı.)

Tasarım sistemiyle erişilebilirliği kalıcı hale getirin

Tek tek ekranları iyileştirmek faydalıdır; ancak asıl kaldıraç tasarım sistemidir. Erişilebilirlik “bileşenlerin doğal özelliği” olursa ekipler her seferinde yeniden keşfetmez.

Bileşen seviyesinde standardize edin

• Butonlar: Kontrastlı metin, net odak stili, disabled durumunda yeterli ayrışma.
• Linkler: Sadece renkle ayırt etmeme (alt çizgi veya başka bir ipucu).
• Form öğeleri: Label, yardımcı metin, hata metni; hata durumunda yalnızca kırmızıya yaslanmayan desen.
• Modallar: Başlık, kapatma butonu görünürlüğü, odak yönetimi için tasarım notları.

Tasarım notlarıyla geliştirici elini güçlendirin

Figma’da her bileşenin yanına kısa erişilebilirlik notları eklemek (ör. “Bu alanın label’ı zorunlu”, “Focus ring 2px ve şu renkte”), geliştirmede doğru uygulamayı hızlandırır. Bu yaklaşımı kodlama öncesi süreçle birlikte anlatan Kodlamadan Önce Erişilebilirlik Sorunlarını Yakalayın: Figma Eklentimizi Anlattık yazısı, “tasarımdan yakalama” pratiğini somutlaştırır.

Figma’dan canlı siteye: Erken kontrol yetmez, izleme de gerekir

Tasarımda doğru kararlar almak önemli; ancak canlıya çıktıktan sonra içerik değişir, yeni bileşenler eklenir, üçüncü parti script’ler araya girer. Bu yüzden erişilebilirlik bir defalık kontrol değil, süreklilik isteyen bir disiplindir.

Pratik bir akış şöyle olabilir:

• Tasarım aşaması: Figma içinde kontrast, etkileşim durumları, form/hiyerarşi kontrolleri.
• Geliştirme ve QA: Sayfa bazlı testler, klavye ile gezinme, ekran okuyucu senaryoları.
• Canlı izleme: Yeni yayınlanan sayfaların ve içerik güncellemelerinin otomatik taramalarla takip edilmesi.

Bu uçtan uca yaklaşımın nasıl birlikte çalıştığını merak ediyorsanız Tasarımdan Canlı Siteye: ScanAndFix, Figma Eklentimiz ve Chrome Uzantımız Nasıl Birlikte Çalışır? yazısı, sürecin bütününü net bir şekilde çerçeveliyor.

Ekip içinde sorumluluk paylaşımı: Tasarımcı neyi “tamam” saymalı?

Erişilebilirlik ortak sorumluluk olsa da, tasarımcıların “teslim kriterleri” net olursa kalite yükselir. Önerilen minimum “Definition of Done” maddeleri:

• Tüm etkileşimli bileşenlerin hover ve focus durumları tasarımda mevcut.
• Kontrast hedefleri karşılanıyor; istisnalar notlarla gerekçelendirilmiş.
• Form alanlarında label, yardım metni ve hata mesajı desenleri tanımlı.
• Başlık/ içerik hiyerarşisi mantıklı; sadece görsel stil için “başlık gibi” metin kullanılmıyor.
• Tıklanabilir alanlar mobil için yeterli; ikon butonlar “minik ama zor” değil.

Bu standartlar, ekipte erişilebilirliğin “kişisel hassasiyet” değil “tasarım kalitesi” olarak görülmesini sağlar.

Corpowid ile tasarımdan yayına erişilebilirliği daha yönetilebilir kılın

Figma içinde erken kontrol, erişilebilirliği sola kaydırmanın temel taşıdır. Yine de canlı ortamda otomatik taramalar, izleme ve ekip içi raporlama ile desteklenmediğinde kaçaklar oluşabilir. Corpowid (corpowid.ai), otomatik erişilebilirlik denetimleri ve sürekli izleme ile WCAG odaklı sorunları daha görünür hale getirmenize yardımcı olur; ayrıca ekiplerin aksiyon almasını kolaylaştıran iş akışları sunar. Canlı sayfaları hızlıca kontrol etmek gerektiğinde Corpowid Chrome Eklentisi ile Her Sayfayı Anında Test Edin yaklaşımı da pratik bir “kontrol noktası” sağlar.

Özetle: Erişilebilirliği Figma’da başlatın, tasarım sistemiyle standardize edin, canlıda ölçün ve izleyin. Böylece uyumluluk hedefleri daha öngörülebilir hale gelir; en önemlisi de daha fazla insan için daha iyi bir deneyim üretirsiniz.

Canlı sitenizde hızlı bir tarama ile nereden başlayacağınızı görmek isterseniz ScanAndFix ile Tanışın: Her Web Sitesini Saniyeler İçinde Erişilebilirlik Sorunlarına Karşı Tarayın yazısındaki örnek akış, ilk adımı hızlandırabilir.