Erişilebilir duyarlı tasarım

En iyi çoklu cihaz deneyimini sunmak için duyarlı bir şekilde tasarlamanın iyi bir fikir olduğunu biliyoruz ancak duyarlı tasarım, erişilebilirlik açısından da avantaj sağlar.

Udacity gibi bir siteyi düşünün:

Udacity sitesi

Küçük yazıları okumakta zorlanan az gören bir kullanıcı, sayfayı %400'e kadar yakınlaştırabilir. Site duyarlı bir şekilde tasarlandığından kullanıcı arayüzü, "daha küçük görüntü alanı" (aslında daha büyük sayfa) için kendini yeniden düzenler. Bu, ekran büyütme özelliğine ihtiyaç duyan masaüstü kullanıcıları ve mobil ekran okuyucu kullanıcıları için mükemmeldir. Yani, herkes kazanacak. İşte aynı sayfa %400'e büyütülmüş:

Udacity'nin sitesi %400 yakınlaştırıldı

Aslında, yalnızca duyarlı bir şekilde tasarlayarak WebAIM kontrol listesinin 1.4.4 numaralı kuralını karşılıyoruz. Bu kurala göre, bir sayfa "… metin boyutu iki katına çıkarıldığında okunaklı ve işlevsel olmalıdır."

Duyarlı tasarımın tümünü incelemek bu kılavuzun kapsamı dışındadır. Ancak duyarlı deneyiminize fayda sağlayacak ve kullanıcılarınızın içeriğinize daha iyi erişmesini sağlayacak birkaç önemli noktayı burada bulabilirsiniz.

Görüntü alanı meta etiketini kullanma

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width ayarı, ekranın cihazdan bağımsız piksel cinsinden genişliğiyle eşleşir ve initial-scale=1 ayarı, CSS pikselleri ile cihazdan bağımsız pikseller arasında 1:1 ilişki oluşturur. Bu işlem, tarayıcıya içeriğinizi ekran boyutuna sığdırması talimatını verir. Böylece kullanıcılar yalnızca sıkıştırılmış metin görmez.

Daha fazla bilgi için İçeriği görüntü alanına göre boyutlandırma başlıklı makaleyi inceleyin.

Kullanıcıların yakınlaştırmasına izin ver

Yakınlaştırmayı önlemek için görüntü alanı meta etiketini maximum-scale=1 veya user-scaleable=no olarak ayarlayarak kullanabilirsiniz. Bunu yapmaktan kaçının ve kullanıcılarınızın gerektiğinde yakınlaştırmasına izin verin.

Esneklik göz önünde bulundurularak tasarlama

Belirli ekran boyutlarını hedeflemekten kaçının ve bunun yerine esnek bir ızgara kullanın. İçerik gerektirdiğinde düzende değişiklikler yapın. Yukarıdaki Udacity örneğinde gördüğümüz gibi bu yaklaşım, tasarımın daha küçük bir ekrandan mı yoksa daha yüksek bir yakınlaştırma düzeyinden mi kaynaklandığına bakılmaksızın azaltılmış alana yanıt vermesini sağlar.

Duyarlı web tasarımıyla ilgili temel bilgiler başlıklı makalede bu teknikler hakkında daha fazla bilgi edinebilirsiniz.

Metin için göreli birimler kullanma

Esnek ızgaranızdan en iyi şekilde yararlanmak için metin boyutu gibi öğeler için piksel değerleri yerine em veya rem gibi göreli birimler kullanın. Bazı tarayıcılar metnin yeniden boyutlandırılmasını yalnızca kullanıcı tercihlerinde destekler. Metin için piksel değeri kullanıyorsanız bu ayar kopyanızı etkilemez. Ancak, her yerde göreli birimler kullandıysanız site kopyası, kullanıcının tercihini yansıtacak şekilde güncellenir.

Bu, kullanıcı görüntüyü yakınlaştırdıkça tüm sitenin yeniden düzenlenmesini ve sitenizi kullanmaları için ihtiyaç duydukları okuma deneyimini oluşturmalarını sağlar.

Görsel görünümün kaynak siparişle bağlantısını kesmeyin

Sitenizde klavyeyle gezinen bir ziyaretçi, HTML dokümanındaki içeriğin sırasını izler. Flexbox ve Grid gibi modern düzen yöntemleri kullanılırken görsel oluşturmanın kaynak sırayla eşleşmemesini sağlamak kolaydır. Bu, klavyeyi kullanarak gezinen kullanıcılar için sayfanın etrafında rahatsız edici sıçramalara neden olabilir.

İçerikler arasında geçiş yaparak tasarımınızı her ayrılma noktasında test ettiğinizden emin olun. Sayfadaki akış yine de anlamlı mı?

Kaynak ve görsel ekran bağlantısının kesilmesi hakkında daha fazla bilgi edinin.

Uzamsal ipuçlarıyla kendinize iyi bakın

Mikro metin yazarken bir öğenin sayfadaki yerini belirten dillerden kaçının. Örneğin, gezinme ekranın üst kısmındayken mobil sürümde "solunuzda" gezinme hakkında bilgi vermek anlamsızdır.

Dokunma hedeflerinin dokunmatik ekranlı cihazlarda yeterince büyük olduğundan emin olun

Dokunmatik ekranlı cihazlarda, dokunma hedeflerinizin diğer bağlantılara dokunmadan kolayca etkinleştirilebilecek kadar büyük olduğundan emin olun. Dokunulabilir öğeler için ideal boyut 48 pikseldir. Dokunma hedefleri hakkında daha fazla bilgi edinin.