Büyük Lansmanlar
Ürününü tek başına duyurmanın pratik yolu
Menü
Diğer yazılar
Hakkında
Yeni ürün, uygulama ve projelerin lansman sürecini adım adım anlatan bağımsız bir kaynak. Planlama, duyuru, ilk kullanıcılar ve lansman sonrası büyüme için uygulanabilir rehberler sunar.

Lansman wcag erişilebilirlik yaparken sık yapılan hatalar

thebiggestlaunches.com

Kısa Özet

Ürün lansmanı yaparken WCAG erişilebilirlik standartlarını göz ardı etmek, potansiyel kullanıcılarının önemli bir kısmını kaybetmeniz anlamına geliyor. Lansmanınızı herkes için erişilebilir hale getirmek sadece etik bir sorumluluk değil, aynı zamanda daha geniş bir kitleye ulaşmanın pratik yoludur. Bu yazıda, lansmanımı hazırlarken karşılaştığım ve birçok startup'ın tekrarlayan hatalarını paylaşıyorum.

Renkle İletişim: En Sık Yapılan Hata

Lansmanımızın tasarım aşamasında en büyük hataı renkle iletişime güvenmekti. "Kırmızı buton önemli, yeşil buton başarılı" diye düşünmüştü. Ancak WCAG standartlarına göre renk tek başına mesaj iletmemelidir. Renk körlüğü yaşayan kullanıcılar (toplumun yaklaşık yüzde 8'i) bu farkı göremez.

Gördüğüm hata şuydu: Sadece renk farkıyla önemli uyarıları veren tasarımlar. Çözüm basit ama etkili. Her renk kodlanmış elementin yanına ikon, metin etiketi veya desen eklemedim. Örneğin, bir hata mesajı sadece kırmızı değil, yanına bir X ikonu ve "Hata:" yazısı ekledi. Bu küçük değişiklik, lansmanımızı herkes için okunabilir hale getirdi.

Kontrast Oranı: Görülebilirlik Göz Ardı Edildi

Lansmanımızda açık gri yazı kullanmıştım. Tasarım açısından hoş görünüyordu ama WCAG AA standardında başarısız oluyordu. Kontrast oranı 4.5:1 olması gerekirken, benim 2:1 ile düşük kalmıştı.

Başlık ve gövde yazıların kontrastını kontrol etmek için çevrimiçi araçlar kullandım. Açık renk seçerken, arka planla olan kontrastı test ettim. Sonuç itibariyle, daha koyu gri tonlarına geçtim ve yazı okunabilirliği çarpıcı şekilde arttı. İlginç olan, bu değişiklik tasarım estetiksinide bozmamıştı.

Görüntüler İçin Alt Metinler Yazılmamış

Lansmanmızın açılış sayfasında güzel ürün görselleri vardı. Ancak bu görsellere alt metin (alt text) eklemeyi unutmuştum. Ekran okuyucu kullanan kullanıcılar sadece "resim" duyuyordu, resmin ne gösterdiğini öğrenemiyordu.

WCAG standartlarına uygun alt metinler yazarken, görüntüyü tanımlayan ama kısaca yapılması gerektiğini öğrendim. Örneğin, "Yazılım arayüzü ekran görüntüsü" yerine "Pano bölümünde müşteri istatistikleri gösteren grafikler" yazmak çok daha faydalı. Dekoratif görseller için boş alt metin kullanmak yeterli.

Klavye Navigasyonu Desteklenmiyor

Lansmanımızı tasarlarken mouse ile navigasyonu ön planda tuttum. Ancak WCAG standartları, tüm fonksiyonlara klavye ile de erişim sağlanması gerektiğini söylüyor. Birçok kullanıcı, motor beceri sorunları veya tercih nedeniyle yalnızca Tab tuşu ve Enter ile geziniyor.

Lansmanımızın butonlarının Tab sırasını test ettim. Odak göstergesini (focus indicator) açık ve görülebilir hale getirdim. Form alanlarında Tab tuşuyla dolaşırken, mantıklı bir sırayı takip etmesi sağladım. Bu değişiklik yapıldıktan sonra, lansmanımız önemli ölçüde daha erişilebilir hale geldi.

Başlıklar Yanlış Hiyerarşide Kullanılmış

Sayfa tasarımında başlık boyutlarını estetik nedenlerle değiştirmiştim. H1'den H3'e zıplayıp tekrar H1'e geri dönüyordum. Ekran okuyucu kullananlar, sayfa yapısını anlamakta zorlanıyordu.

Doğru çözüm, başlık hiyerarşisini mantıksal tutmakti. H1 sayfanın ana başlığı, H2 ana bölümler, H3 alt bölümler olmalı. Tasarımsal farklılıklar CSS ile sağlanabilir, semantik yapı bozulmamalı.

Form Alanları Etiketlenmemiş

Lansmanımızda email toplayacak basit bir form vardı. Input alanının yanında placeholder yazısı eklemişti. Ama form alanı semantik olarak bir label ile bağlı değildi.

WCAG standartlarına göre, her form alanının HTML label etiketi olmalı. Bunu ekledikten sonra, ekran okuyucu kullanıcılar hangi alana ne gireceğini açıkça duyabiliyor.

Video İçeriğinde Altyazı ve Açıklamalar Yok

Ürün demosunu video ile göstermeyi planlamıştım. Ancak videoya altyazı (caption) eklemeyi atlattım. Sağır kullanıcılar ve gürültülü ortamlardaki diğer kullanıcılar, videonun sesli kısmını anlamıyor.

Hızlı bir çözüm olarak, platform tarafından sağlanan otomatik altyazıları kullanıp bunları gözden geçirdim. Teknik terimler ve ürün adları düzelttim. Sonuç olarak, video herkes tarafından erişilebilir hale geldi.

SSS

© 2026 Büyük Lansmanlar