Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sayfa öğelerinin her ekranda kullanılabilir olmasını planlar: simge düğmelerine ekran okuyucular için ad verilmesi, uzun kelimeler dar ekranda taştığında satırın kırılması, kartın tamamı tıklanabilir yapılırken dikkat edilenler ve WordPress blok düzenleyicisinde renk ve yazı ayarlarının sınırlanması.
Web Tasarım Sürecinde Simge Düğmelerine Ekran Okuyucular İçin Ad Nasıl Verilir?
Simge düğmesi, üzerinde yazı bulunmayan ve yalnızca bir simgeyle gösterilen düğmedir. Menüyü açan üç çizgi, arama simgesi, kapatma çarpısı ve sosyal medya simgeleri bu türdendir. Ekran okuyucu, ekrandaki öğeleri sesli okuyan yardımcı yazılımdır. Web tasarım sürecinde bu düğmelerin her biri için ekran okuyucuya söylenecek bir ad belirlenir. Bu ada erişilebilir ad denir.
Adı olmayan bir düğmeye gelindiğinde ekran okuyucu yalnızca ‘düğme’ der. Bazı durumlarda simge dosyasının adını ya da anlamı olmayan bir karakteri okur. Kullanıcı düğmenin ne yaptığını öğrenemez. Sesli komutla gezinen ziyaretçiler de düğmeyi adıyla çağıramaz. PageSpeed Insights raporunun Erişilebilirlik başlığı altında adsız düğmeler ve adsız bağlantılar ayrı uyarılar olarak sıralanır. Her uyarı, düğmenin sayfadaki yerini de gösterir.
Ad iki yolla verilir. Birinci yolda düğmenin içine ekranda görünmeyen bir yazı konur. Yazı gözle görülmez ama ekran okuyucu onu okur. İkinci yolda düğmeye, yalnızca yardımcı yazılımların okuduğu bir ad bilgisi kodla eklenir. İki yolda da simgenin kendisi ekran okuyucudan gizlenir. Böylece aynı düğme için iki ayrı şey okunmaz ve duyuru tek olur.
Ad, simgenin görünüşünü değil düğmenin yaptığı işi söyler. ‘Üç çizgi’ yerine ‘Menüyü aç’, ‘Çarpı’ yerine ‘Pencereyi kapat’ yazılır. Sosyal medya simgelerinde ad, hesabın bulunduğu platformun adıdır. Bağlantı yeni sekmede açılıyorsa bu bilgi de ada eklenir. Ad kısa tutulur ve sayfanın diliyle yazılır. Düğmenin yanında görünen bir yazı varsa ad bu yazıyla başlar.
Bazı düğmeler her basışta durum değiştirir. Menü düğmesi aynı dokunuşla menüyü açar ve kapatır. Bu düğmelerde açık ya da kapalı durumu da ayrı bir bilgiyle koda yazılır. Ekran okuyucu düğmenin adını okuduktan sonra menünün o an açık ya da kapalı olduğunu bildirir. Fareyle üzerine gelince çıkan ipucu yazısı ad yerine kullanılmaz, çünkü dokunmatik ekranda görünmez.
Web tasarım denetiminde her simge düğmesi ayrı denenir. Tarayıcının geliştirici araçlarındaki Erişilebilirlik bölmesi, seçilen öğenin hesaplanan adını gösterir. Ardından sayfa yalnızca klavyeyle gezilir ve her düğmede odak çerçevesinin göründüğüne bakılır. Son adımda telefonun kendi ekran okuyucusu açılır. Düğmeler parmakla tek tek seçilir ve okunan adlar dinlenir. Her düğmede duyulan ad ve görülen eksikler denetim tablosuna yazılır.
Uzun Kelimeler Dar Ekranda Taşınca Satır Nasıl Kırılır?
Tarayıcı satırları normalde kelimeler arasındaki boşluklardan böler. Kelime bulunduğu kutudan uzunsa bölünecek bir boşluk bulamaz ve kutunun dışına taşar. Türkçede eklerle uzayan kelimeler, büyük yazılmış başlıklar, e-posta adresleri ve uzun site adresleri bu soruna yol açabilir. Taşan yazı sayfayı yana kaydırır ya da yanındaki öğenin üstüne biner. Telefonda yazının bir kısmı ekranın dışında kalır.
İlk adım sorunlu yerleri bulmaktır. Tarayıcının geliştirici araçlarındaki cihaz görünümü, sayfayı dar telefon genişliklerinde gösterir. Sayfa en dar genişlikte baştan sona kaydırılır ve yatay kaydırma çubuğu çıkıp çıkmadığına bakılır. Ardından telefonun yazı boyutu ayarı büyütülerek deneme tekrarlanır. Büyük yazı boyutunda, normal boyutta sığan kelimeler de taşabilir. Deneme yatay ve dikey ekran konumunda ayrı ayrı yapılır.
Birinci çözüm, sığmayan kelimenin satır sonunda bölünmesine izin veren bir yazı ayarıdır. Bu ayar yalnızca kutuya sığmayan kelimeyi böler; sığan kelimelere dokunmaz. Bölme herhangi bir harften yapılabildiği için kelime hece kuralına uymadan ikiye ayrılabilir. Ayar, e-posta ve site adreslerinin taşmasını önler. Her kelimeyi gerektiğinde harften bölen daha sert ayar düz metinde kullanılmaz.
İkinci çözüm, tarayıcının kelimeyi heceden bölüp satır sonuna kısa çizgi koymasıdır. Bu otomatik heceleme, sayfanın kodda tanımlanan diline göre çalışır. Dil Türkçe olarak tanımlanmamışsa kelimeler yanlış yerden bölünür ya da hiç bölünmez. WordPress’te sayfanın dili çoğunlukla genel ayarlardaki site dili seçeneğinden gelir. Bazı tarayıcılarda Türkçe heceleme desteği bulunmayabilir. Bu yüzden heceleme ayarı tek başına bırakılmaz, birinci çözümle birlikte tanımlanır.
Üçüncü yol, uzun kelimenin içine elle görünmez bir bölme işareti koymaktır. Bu işarete yumuşak tire denir. Kelime satıra sığdığında işaret görünmez. Sığmadığında kelime işaretin bulunduğu yerden bölünür ve satır sonunda kısa çizgi çıkar. İşaret hecenin bittiği yere konur. Yöntem, yazısı değişmeyen başlıklarda ve düğme yazılarında tek tek uygulanır. Yazı sonradan değişirse işaretin yeri de yeniden kontrol edilir.
Bazı taşmalar yazı ayarıyla değil sayfa düzeniyle giderilir. Başlıkların yazı boyutu telefon genişliği için ayrıca küçültülür. Düğmelere sabit genişlik verilmez ve yazının iki satıra inmesine izin verilir. Uzun site adresleri metinde açık hâliyle yazılmaz; sayfanın adını taşıyan kısa bir bağlantı metniyle verilir. Web tasarım tesliminden önce her sayfa bu kontrolden geçirilir.
Kartın Tamamı Tıklanabilir Yapılırken Nelere Dikkat Edilir?
Kart; görsel, başlık, kısa açıklama ve düğmeden oluşan kutu biçimindeki tasarım öğesidir. Kartın tamamını tıklanabilir yapmak, ziyaretçinin kartın herhangi bir yerine dokunarak ilgili sayfaya gitmesini sağlar. Bu yapı telefonda dokunma alanını büyütür. Kurulurken üç konu birlikte ele alınır. Bunlar bağlantının kodda nasıl kurulduğu, ekran okuyucunun ne okuduğu ve karta klavyeyle nasıl ulaşıldığıdır.
Birinci yöntem, kartın bütün içeriğini tek bir bağlantının içine almaktır. Bu durumda ekran okuyucu bağlantıya gelindiğinde başlığı, açıklamayı ve düğme yazısını tek bir uzun bağlantı adı olarak okur. Kartın içinde ikinci bir bağlantı ya da düğme varsa iç içe bağlantı oluşur. İç içe bağlantı kod kurallarına aykırıdır ve tarayıcılar bu yapıyı farklı biçimlerde düzeltir.
İkinci yöntemde kartta tek bir gerçek bağlantı bulunur ve bu bağlantı başlığa konur. Bağlantının tıklama alanı görünmez bir katmanla kartın tamamına yayılır. Ekran okuyucu bağlantının adı olarak yalnızca başlığı okur. Kartta ikinci bir bağlantı gerekiyorsa o bağlantı katmanın üstüne çıkarılır ve ayrı tıklanır. Görsel ile düğme ise ayrı bağlantı olarak eklenmez.
Bağlantının gerçek bir bağlantı öğesi olması Google için de gereklidir. Google, adresi kodda yazılı olan bağlantıları izler. Tıklamayı yalnızca JavaScript ile algılayıp sayfa açan kartları bağlantı olarak izleyemeyebilir. Bu durumda kartın gittiği sayfa tarama sırasında bulunamayabilir. Bağlantının adresi de sayfanın kanonik adresiyle aynı yazılır. Başlıktaki bağlantının metni ise Google’ın hedef sayfa hakkında okuduğu bağlantı metni olur.
Görsel, başlık ve düğme ayrı ayrı aynı sayfaya bağlanırsa klavyeyle gezen ziyaretçi aynı hedefe üç kez uğrar. Ekran okuyucu da aynı bağlantıyı üç kez duyurur. Tek bağlantılı kartta her kart için tek bir durak olur. Klavyeyle karta gelindiğinde kartın çevresinde görünür bir odak çerçevesi çıkar. Fareyle üzerine gelindiğinde kartın gölgesi ya da kenar rengi değişir.
Görünmez katman kartın üstünü kapladığı için kart içindeki yazı fareyle seçilip kopyalanamayabilir. Açıklamada kopyalanması gereken bir bilgi varsa o bölüm de katmanın üstüne alınır. Web tasarım denetiminde kartlar fareyle, klavyeyle ve telefonda dokunarak ayrı ayrı denenir. Sayfa parmakla kaydırılırken kartın yanlışlıkla açılıp açılmadığına da bakılır. Yan yana duran kartlar arasında yeterli boşluk bırakılır.
WordPress Blok Düzenleyicisinde Renk ve Yazı Ayarları Nasıl Sınırlanır?
WordPress blok düzenleyicisi, yazı ve sayfa içeriğinin bloklar hâlinde hazırlandığı düzenleme ekranıdır. Her blokta yazı rengi, arka plan rengi, yazı boyutu ve satır aralığı için ayarlar bulunur. Düzenleyicinin renk seçicisi istenen her tonun seçilmesine izin verir. Bu ayarlar sınırlanmazsa her yazar kendi rengini ve boyutunu seçer. Zamanla yazılar arasında renkler ve boyutlar farklılaşır, sitenin tasarımında belirlenen düzen bozulur.
Sınırlar temada tanımlanır. Blok temalarında bu iş temanın ayar dosyasıyla yapılır; dosya, düzenleyicide hangi seçeneklerin görüneceğini belirler. Klasik temalarda aynı sınırlar temanın işlev dosyasına eklenen tanımlarla konur. Değişiklik bir alt temada yapılır. Böylece ana tema güncellendiğinde ayarlar silinmez. Tanımlanan sınırlar düzenleyiciyi açan bütün kullanıcılar için geçerli olur. Blok temalarında aynı seçenekler Site Düzenleyici’nin Stiller bölümünden de değiştirilebilir.
Renkler için önce sitenin kurumsal renklerinden oluşan bir palet tanımlanır. Paletteki her renge ‘Ana renk’ ya da ‘Koyu metin’ şeklinde anlaşılır bir ad verilir. Ardından özel renk seçici kapatılır. Bu ayardan sonra yazar yalnızca paletteki renkleri seçebilir. Renk geçişleri ve çift tonlu görsel filtreleri de aynı dosyada kapatılır ya da hazır seçeneklerle sınırlanır.
Yazı ayarlarında da aynı sıra izlenir. Önce küçük, orta, büyük ve çok büyük adlarıyla birkaç hazır yazı boyutu tanımlanır. Sonra elle boyut girme seçeneği kapatılır. Yazı tipi listesi sitenin kullandığı yazı tipleriyle sınırlanır. Satır aralığı ve harf aralığı ayarları gerekmiyorsa düzenleyicide gösterilmez. Boyutlar ekran daraldıkça kendiliğinden küçülecek biçimde de tanımlanabilir.
Sınırlar blok türüne göre ayrıca ayarlanabilir. Düğme bloğunda iki renk seçeneği bırakılırken paragraf bloğunda renk ayarı tamamen kaldırılabilir. Paletteki renkler seçilirken yazı ile zemin arasındaki karşıtlık, erişilebilirlik ölçütlerinin istediği düzeye göre ölçülür. Bu düzeye ulaşmayan renk çiftleri palete metin rengi olarak eklenmez. Böylece okunması güç bir renk seçeneği düzenleyicide yer almaz.
Sınırlar yalnızca bundan sonraki seçimleri etkiler. Daha önce yazılara verilmiş özel renkler ve boyutlar içerikte kalır. Bu değerler yazılar tek tek açılarak bulunur ve paletteki karşılıklarıyla değiştirilir. Web tasarım çalışmasında sınırlar tanımlandıktan sonra bir yazar hesabıyla deneme yazısı açılır. Düzenleyicide yalnızca izin verilen seçeneklerin göründüğü kontrol edilir. Eksik kalan ayarlar aylık iş listesinde ayrı bir madde olur.
Sitemdeki menü düğmesinin ekran okuyucu için bir adı olup olmadığını nasıl anlarım?
Sayfayı bilgisayarda açın, menü düğmesine sağ tıklayıp İncele’yi seçin. Geliştirici araçlarında Erişilebilirlik bölmesine geçin. Bölmede düğmenin adı yazıyorsa ad tanımlıdır. Ad alanı boşsa ekran okuyucu yalnızca ‘düğme’ der. Ad İngilizce ya da anlamsız görünüyorsa düğmenin ayarından Türkçe bir adla değiştirilmesi gerekir.
Telefonda başlığımdaki uzun kelime ekrandan taşıyor; metni değiştirmeden nasıl düzeltebilirim?
Başlığın yazı boyutunu yalnızca telefon genişliği için küçültün; sayfa düzenleyicinizde yazı boyutu çoğunlukla her ekran genişliği için ayrı girilir. Kelime yine sığmıyorsa sığmayan kelimenin satır sonunda bölünmesine izin veren ayarı açtırın. Heceden bölünmesini isterseniz kelimenin içine yumuşak tire eklenebilir.
Hizmet kartlarımda görsel, başlık ve düğme ayrı ayrı aynı sayfaya gidiyor; bunu değiştirmeli miyim?
Bu yapıda klavyeyle gezen ziyaretçi aynı hedefe üç kez uğrar ve ekran okuyucu aynı bağlantıyı üç kez duyurur. Kartta başlıktaki tek bağlantıyı bırakıp tıklama alanını kartın tamamına yaymak bu tekrarı kaldırır. Görsel ve düğme kartta yerinde kalır; yalnızca ayrı bağlantı olmaktan çıkar.
Blog yazarlarımın yazılara istedikleri rengi vermesini nasıl engelleyebilirim?
Temanızın ayarlarında kurumsal renklerinizden bir palet tanımlatın ve özel renk seçiciyi kapattırın. Bundan sonra düzenleyicide yalnızca paletteki renkler görünür. Aynı işlem yazı boyutları için de yapılabilir. Daha önce yazılara verilmiş renkler kendiliğinden değişmez; bu yazıların ayrıca açılıp düzeltilmesi gerekir.