Figma’da Alternatif Metin (Alt Text) Testi: WCAG Uyumlu Tasarım için Pratik Rehber

“Alternative test in Figma” ifadesi, pratikte çoğu ekipte “Figma’da alternatif metin (alt text) kontrolü ve doğrulaması” ihtiyacına karşılık gelir. Alternatif metin; ekran okuyucu kullanan kişiler için görsellerin anlamını aktaran metinsel açıklamadır ve WCAG 2.1/2.2 kapsamında 1.1.1 (Non-text Content) başarım kriterinin merkezindedir. Tasarım aşamasında alt metni test etmek, geliştirmeye geçmeden önce hataları yakalamanın ve daha kapsayıcı (inclusive) deneyimler üretmenin en hızlı yollarından biridir.

Bu yazıda Figma’da alt metni nasıl planlayabileceğinizi, nasıl “test edebileceğinizi”, tasarım sistemiyle nasıl sürdürülebilir hale getireceğinizi ve geliştirmeye devrederken neleri netleştirmeniz gerektiğini adım adım ele alacağız.

Alternatif metin (alt text) neden Figma’da “test” edilir?

Figma bir tarayıcı gibi alt metni “okutmaz”; yani gerçek bir ekran okuyucu simülasyonu değildir. Buna rağmen Figma’da alt metni test etmek, iki kritik soruya yanıt verir:

• Görselin amacı net mi? Alt metin, görselin arayüzdeki işlevini/mesajını doğru aktarıyor mu?
• Görsel gerekli mi? Dekoratif bir görsel gereksiz yere okunuyor mu; bilgi taşıyan bir görsel açıklamasız mı kalmış?

Bu kontrol erken yapılırsa, geliştirme sonrası “son dakika” düzeltmeleri, hukuki riskler ve kullanıcı şikâyetleri belirgin şekilde azalır. Erişilebilirlik risklerinin gerçek dünyadaki sonuçlarını görmek isterseniz, örneğin Fashion Nova’nın 5,15 milyon dolarlık web erişilebilirliği uzlaşması gibi vakalar alt metin dahil birçok temel konunun ne kadar kritik olduğunu gösterir.

WCAG’e göre iyi bir alt metin neyi karşılamalı?

Alt metin yazarken amaç, görselin “neye benzediğini” betimlemekten çok, kullanıcıya hangi bilgiyi/işlevi sağladığını aktarmaktır. WCAG 1.1.1 için pratik bir kontrol listesi:

• Bağlam odaklı: Aynı görsel farklı sayfalarda farklı amaçlarla kullanılıyorsa alt metin de değişebilir.
• Kısa ve anlamlı: Genelde 1 cümle yeterlidir. Gereksiz detaylar ekran okuyucuda yük yaratır.
• Tekrardan kaçınır: Görselin yanındaki metin zaten aynı şeyi söylüyorsa alt metin bunu tekrar etmemeli.
• Fonksiyonel öğelerde işlevi anlatır: İkon buton ise “Ara”, “Sepete ekle” gibi eylemi söylemelidir.
• Dekoratifse boş bırakılır: Sadece süs amaçlı görsellerin alt metni boş olmalı (HTML’de alt="").

Figma’da alternatif metin testini kurgulamanın 4 pratik yolu

1) Bileşen kütüphanesinde “Alt Metin” alanı standardı

Figma’da bileşenler üzerinden tutarlılık sağlamak için, görsel içeren bileşenlerde bir erişilebilirlik notu alanı standardı belirleyin. Örneğin:

• Komponent açıklamasında: “Alt text: …”
• Varyantlarda: “Decorative: yes/no”
• İkon butonlarda: “Accessible name: …” (etiket)

Bu yaklaşım, “alternatif metin testini” tek tek ekranlar yerine tasarım sistemi seviyesinde yapmanıza yardımcı olur.

2) “Dekoratif mi, bilgilendirici mi, fonksiyonel mi?” triage testi

Figma dosyanızda görsel öğeleri hızlıca sınıflandırın:

• Dekoratif: Arka plan dokuları, süs ikonları, anlam taşımayan illüstrasyonlar. (Alt metin boş)
• Bilgilendirici: Grafikler, ekran görüntüleri, ürün fotoğrafı (kullanıcı kararını etkiliyorsa), infografik. (Anlamı anlatan alt metin)
• Fonksiyonel: Tıklanabilir ikon, görsel bağlantı, resimden oluşan buton. (İşlevi anlatan etiket)

Bu triage testi, WCAG 1.1.1’in özünü yakalar: “Metin olmayan içerik, eşdeğer bir metin alternatifi sunmalı.”

3) Akış (user flow) üzerinden “okunma sırası” senaryosu yazın

Figma ekranları üzerinde, ekran okuyucu kullanan bir kişinin akışını düşünerek mini senaryolar yazın. Örneğin bir e-ticaret ürün kartında:

• Ürün görseli: “Siyah spor ayakkabı, yan görünüm” (ürün fotoğrafı karar verdiriyorsa)
• Favori ikonu butonu: “Favorilere ekle”
• İndirim rozeti dekoratif değilse: “%30 indirim” (veya rozet metin olarak zaten varsa alt metin gereksiz)

Bu yöntem, alt metinlerin sadece “var” olmasını değil, anlamlı bir deneyim oluşturmasını test eder.

4) Devre alma öncesi “tasarım notlarıyla” doğrulama

Figma’da geliştiriciye (handoff) bırakacağınız notlar alt metin testinin çıktısıdır. Her görsel için şunları netleştirin:

• Alt metin (veya dekoratifse boş bırakılacağı bilgisi)
• Görsel bağlantıysa hedefi ve erişilebilir adı
• Görsel metin içeriyorsa (ör. poster), metnin ayrıca HTML metni olarak sunulup sunulmayacağı

Figma’da en sık yapılan alt text hataları (ve hızlı düzeltmeler)

“image of / picture of” ile başlayan alt metinler

Ekran okuyucular çoğu zaman bunun bir görsel olduğunu zaten belirtir. Bunun yerine doğrudan anlamı verin: “Ürün ambalajı üzerinde alerjen uyarısı” gibi.

İkonlara alt metin yazıp buton etiketini unutmak

Bir ikon tek başına tıklanabiliyorsa sorun “alt metin”den çok erişilebilir ad (accessible name) konusudur. Figma notlarında “Bu ikon butonun erişilebilir adı: ‘Ara’” gibi net bir ifade kullanın.

Dekoratif görselleri gereksiz yere açıklamak

Bu, ekran okuyucu kullanıcılarını gereksiz bilgiyle yorar. Dekoratif görsellerin alt metnini boş bırakma kararını tasarım notlarına ekleyin.

Tasarım aşamasından canlı siteye: Alt metin doğrulamasını nasıl tamamlamalı?

Figma’daki “alternatif test” güçlü bir erken aşama kontrolüdür; ancak canlı ortamda mutlaka doğrulanmalıdır. Çünkü gerçek çıktı; HTML’de alt özniteliği, ARIA etiketleri, DOM sırası ve bileşen davranışlarıyla belirlenir. Canlı sitede kontrol için, Web siteniz erişilebilir mi? İşte nasıl öğrenirsiniz yazısındaki yöntemler iyi bir başlangıç sağlar.

Bu noktada, ekipler genellikle iki şeye ihtiyaç duyar: düzenli denetim ve sürekli izleme. Örneğin Corpowid (corpowid.ai) ile otomatik erişilebilirlik denetimleri yaparak görsel alternatifleri, etiketleme sorunlarını ve sayfa şablonlarındaki tekrar eden problemleri daha hızlı görünür kılabilir; izleme sayesinde yeni eklenen içeriklerin erişilebilirliği zaman içinde korunabilir.

Uyumluluk perspektifi: Neden “küçük” alt metin kararları büyük fark yaratır?

Alt metin, çoğu ekipte “sonradan eklenir” gibi görülse de erişilebilirlik uyumluluğunun temel taşlarındandır. Özellikle kamu ve yüksek görünürlüklü platformlarda erişilebilirlik beklentileri daha da yüksektir. Bu konuda hukuki örnekler, “muafiyet” varsayımlarının riskli olabileceğini gösterir; örneğin Louisiana web erişilebilirlik davası kamu siteleri için önemli dersler içerir.

Öte yandan erişilebilirlik sadece büyük kurumların meselesi değildir. STK’lar ve kâr amacı gütmeyen kuruluşlar için bile, görsel iletişim güçlü olduğu için alt metin kalitesi doğrudan etki yaratır. Bu bakış açısı için STK’lar ve Kâr Amacı Gütmeyen Kuruluşlar İçin Dijital Erişilebilirlik Rehberi içindeki öneriler tasarım sürecine kolayca uyarlanabilir.

Uygulanabilir bir süreç: Figma’da alt text “testi” kontrol listesi

• Her görsel için: Dekoratif / bilgilendirici / fonksiyonel sınıflandırması yapıldı mı?
• Bilgilendirici görsellerde: Bağlama uygun, kısa, tekrar etmeyen alt metin yazıldı mı?
• Fonksiyonel ikonlarda: Butonun/bağlantının erişilebilir adı net mi?
• Grafik/infografiklerde: Kritik veri metin alternatifiyle sunuluyor mu (gerekirse uzun açıklama)?
• Handoff notlarında: “Boş alt” kararı dahil tüm kararlar açık mı?
• Canlı ortamda: Otomatik + manuel doğrulama planlandı mı?

Sonuç

Figma’da “alternative test” yaklaşımını, alt metni tasarım sisteminin bir parçası haline getirerek uygularsanız; WCAG 1.1.1 uyumunu güçlendirir, geliştirme sürecindeki belirsizlikleri azaltır ve daha kapsayıcı deneyimler üretirsiniz. Son adım olarak canlı sitede denetim ve izleme ile bu kararların doğru uygulandığını doğrulamak gerekir. Bu süreçte Corpowid (corpowid.ai) gibi denetim ve izleme araçları, ekiplerin erişilebilirlik kalitesini süreklileştirmesine yardımcı olabilir.