Sayfanı erişilebilir yap

Erişilebilir bir sayfayı herkes kullanabilir: ekran okuyucu kullananlar, görme sorunu yaşayanlar, ekrandaki hareketten kaçınanlar ya da telefonuna güneşin altında bakanlar. LinkHarbor birçok şeyi otomatik olarak halleder; bazı şeyler sana kalır. Bu makale nelere dikkat etmen gerektiğini gösterir.

#LinkHarbor’ın otomatik olarak yaptıkları

• Bir ziyaretçi sisteminde “Hareketi azalt”ı açtıysa arka plan videoları oynatılmaz; kaydırma ve paralaks efektleri ile üzerine gelme animasyonları kapatılır
• “Başlık” bloğu, ekran okuyucuların yön bulmak için kullandığı gerçek bir başlık olarak verilir
• “Görsel” ve “Galeri” bloklarındaki görseller alternatif metnini açıklama olarak alır
• Düğmeler için kendi metin rengini seçmediysen LinkHarbor düğme rengine uyan bir renk seçer

#Görseller için alternatif metinler

Alternatif metin bir görselde ne göründüğünü anlatır. Ekran okuyucular onu sesli okur ve bir görsel yüklenmediğinde görünür.

“Görsel” bloğu

Blok düzenleyicideki “Alternatif metin” alanı.

“Galeri” bloğu

Görsel başına en fazla 200 karakterlik bir “Alternatif metin”.

• Dosyayı değil içeriği anlat: “IMG_2041” yerine “Ahşap masada latte art’lı kapuçino”
• Metin içeren görsellerde metin alternatif metne aittir
• Kısa tut – genellikle bir cümle yeterlidir

Alanları nerede bulacağın Ücretsiz bloklar ayrıntılı ve İçerik blokları bölümlerinde anlatılıyor.

#Başlıklarla yapı

Uzun sayfaları büyük metin yerine “Başlık” bloğuyla böl. Ekran okuyucu kullananlar başlıktan başlığa atlar ve böylece aradıklarını hızlıca bulur – örneğin “Çalışma saatleri” veya “İletişim”.

#Anlaşılır bağlantı başlıkları

• Her bağlantı tek başına anlamlı olmalı: “Buraya tıkla” yerine “PDF olarak menü”
• Farklı hedefler için aynı başlıkları kullanma
• Başlığın başındaki emojiler sesli okunur; onları az kullan

Bağlantılar hakkında daha fazlası Bağlantı ekle ve biçimlendir bölümünde.

#Kontrast ve okunabilirlik

• Metin ile arka plan arasında yeterli kontrast olduğundan emin ol, özellikle açık pastel renklerde
• Metin bir arka plan görseli veya videosu üzerindeyse okunur kalması için temadaki “Katman opaklığı”nı kullan
• Önemli metni yalnızca bir görselde verme – ekran okuyucu kullanan ziyaretçiler onu okuyamaz
• Okunması kolay bir yazı tipi ve metin blokları için çok küçük olmayan bir yazı boyutu seç

Renkleri, arka planı ve yazı tipini temada ayarlarsın, bkz. Tasarım.

#Özel CSS’i dikkatli kullan

Özel CSS ile neredeyse her şeyi değiştirebilirsin – erişilebilirlik için önemli olan şeyler dahil. Odak çerçevelerini gizleme, metni çok küçültme ve değişikliklerden sonra sayfayı klavyeyle de test et. Bkz. Özel CSS.

#Kendin test et

1. Telefonundaki ekran okuyucuyu aç (iPhone’da VoiceOver, Android’de TalkBack) ve sayfanı dinle
2. Sistem ayarlarında metin boyutunu büyüt ve her şeyin okunur kaldığını kontrol et
3. Sayfaya parlak ışıkta ve karanlık modda bak