Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sitenizin görünüşünün ve kullanımının planlanmasıdır. Sayfaların düzenini, menüleri, düğmeleri ve formları hazırlarız. Sitenin her ekran boyunda düzgün görünmesi, ziyaretçinin aradığını kolayca bulması ve sayfaların çabuk yüklenmesi için çalışırız.
Web Tasarım Sürecinde Simge Düğmelerine Ekran Okuyucular İçin Ad Nasıl Verilir?
Simge düğmesi, üzerinde yazı olmayan ve yalnızca küçük bir resimle gösterilen düğmedir. Menüyü açan üç çizgi, arama büyüteci, kapatma çarpısı ve sosyal medya simgeleri bu türden düğmelerdir. Ekran okuyucu ise ekrandaki yazıları ve düğmeleri sesli okuyan bir yardımcı programdır. Görme güçlüğü olan kişiler siteleri bu programla gezer. Program bir düğmeye geldiğinde o düğmenin adını okur. Simge düğmesinde okunacak bir yazı olmadığı için bu ad ayrıca verilir. Bu ada erişilebilir ad denir. Web tasarım sürecinde sayfadaki her simge düğmesine bir erişilebilir ad verilir.
Adı olmayan bir düğmeye gelindiğinde ekran okuyucu yalnızca ‘düğme’ der. Bazen simge dosyasının adını ya da anlamı olmayan bir işareti okur. Kullanıcı düğmenin ne işe yaradığını anlayamaz. Sesli komutla siteyi gezen kişi de düğmeyi adıyla çağıramaz. Google’ın sayfa ölçüm aracı PageSpeed Insights, raporunun Erişilebilirlik bölümünde adı olmayan düğmeleri ve bağlantıları ayrı uyarılar olarak gösterir. Her uyarı, düğmenin sayfadaki yerini de belirtir. Bu uyarılar, sitenin herkes tarafından kullanılıp kullanılamadığını gösteren denetimlerin bir parçasıdır.
Ad iki yolla verilir. Birinci yolda düğmenin içine ekranda görünmeyen kısa bir yazı konur. Bu yazıyı göz görmez ama ekran okuyucu okur. İkinci yolda düğmeye, yalnızca yardımcı programların okuduğu bir ad bilgisi eklenir. İki yolda da simge resmi ekran okuyucudan gizlenir; böylece aynı düğme için iki şey okunmaz. 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 simgelerinin adı, hesabın bulunduğu platformun adıdır. Bağlantı yeni sekmede açılıyorsa bu bilgi de ada eklenir.
Menü düğmesi aynı dokunuşla menüyü hem açar hem kapatır. Bu tür düğmelerde menünün açık ya da kapalı olduğu da ayrı bir bilgiyle belirtilir. Ekran okuyucu, düğmenin adından sonra bu durumu da söyler. Fareyle üzerine gelince çıkan küçük açıklama yazısı ad yerine kullanılmaz, çünkü telefonda görünmez. Denetimde tarayıcının geliştirici araçlarındaki Erişilebilirlik bölümü açılır ve her düğmenin adı okunur. Sonra sayfa yalnızca klavyeyle gezilir ve her düğmenin çevresinde çerçeve çıktığına bakılır. Son olarak telefonun kendi ekran okuyucusu açılır ve adlar dinlenir. Bulunan eksikler denetim tablosuna yazılır.
Uzun Kelimeler Telefon Ekranından Taşarsa Satır Nasıl Bölünür?
Tarayıcı, yazıyı satırlara bölerken kelimeler arasındaki boşlukları kullanır. Bir 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 harflerle yazılmış başlıklar, e-posta adresleri ve uzun site adresleri bu soruna yol açabilir. Taşan yazı sayfanın yana kaymasına ya da yanındaki öğenin üstüne binmesine neden olur. Telefonda yazının bir bölümü ekranın dışında kalır ve okunamaz. Ekran daraldıkça satıra sığan kelime sayısı azaldığı için bu sorun en çok telefonlarda görülür.
İlk iş sorunlu yerleri bulmaktır. Tarayıcının geliştirici araçlarında cihaz görünümü denen bir bölüm vardır. Bu bölüm sayfayı telefon genişliğinde gösterir. Sayfa en dar telefon genişliğinde baştan sona kaydırılır ve yana kayma olup olmadığına bakılır. Sonra telefonun yazı boyutu ayarı büyütülür ve aynı deneme tekrarlanır. Büyük yazı boyutunda, normalde sığan kelimeler de taşabilir. Deneme, telefon dik ve yan tutulduğunda ayrı ayrı yapılır. Taşan her yer, bulunduğu sayfanın adıyla birlikte bir listeye not edilir.
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 hece kuralına bakmadan herhangi bir harften yapılabilir. Bu yüzden ayar en çok e-posta ve site adreslerinde işe yarar. Her kelimeyi gerektiğinde harften bölen daha sert ayar düz yazıda kullanılmaz. İkinci çözüm otomatik hecelemedir. Tarayıcı kelimeyi heceden böler ve satır sonuna kısa çizgi koyar. Heceleme, sayfanın tanımlı diline göre çalışır; bu yüzden sayfanın dili Türkçe olarak tanımlanır. Bazı tarayıcılarda Türkçe heceleme bulunmayabilir, bu nedenle iki ayar birlikte kullanılır.
Üçüncü yol yumuşak tiredir. Yumuşak tire, kelimenin içine elle konan ve normalde görünmeyen bir bölme işaretidir. Kelime satıra sığarsa işaret görünmez. Sığmazsa kelime o yerden bölünür ve satır sonunda kısa çizgi çıkar. Bu yöntem, yazısı değişmeyen başlıklarda ve düğmelerde kullanılır. Bazı taşmalar ise sayfa düzeniyle giderilir. Başlıklar telefonda daha küçük yazılır. Düğmelere sabit genişlik verilmez ve yazının iki satıra inmesine izin verilir. Uzun site adresleri yazıda açık hâliyle değil, kısa bir bağlantı yazısıyla verilir. Web tasarım tesliminden önce her sayfa bu kontrolden geçer.
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çiminde bir sayfa öğesidir. Hizmetlerin ya da yazıların sıralandığı sayfalarda kullanılır. Kartın tamamını tıklanabilir yapmak, ziyaretçinin kartın herhangi bir yerine dokunarak ilgili sayfaya gitmesini sağlar. Telefonda dokunulacak alan böylece büyür. Bu yapı kurulurken üç konuya birlikte bakılır. Birincisi bağlantının nasıl kurulduğu, ikincisi ekran okuyucunun ne okuduğu, üçüncüsü karta klavyeyle nasıl gelindiğidir. Bu üç konudan biri atlanırsa kart bir grup kullanıcı için düzgün çalışmaz.
Birinci yöntem, kartın bütün içeriğini tek bir bağlantının içine koymaktır. Bu yöntemde ekran okuyucu başlığı, açıklamayı ve düğme yazısını tek ve çok uzun bir bağlantı adı olarak okur. Kartın içinde ikinci bir bağlantı varsa iç içe bağlantı oluşur. İç içe bağlantı kurallara aykırıdır ve tarayıcılar bunu 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 yalnızca başlığı okur. Kartta ikinci bir bağlantı gerekiyorsa o bağlantı bu katmanın üstüne alınır.
Kartın bağlantısının gerçek bir bağlantı olması Google için de önemlidir. Google, adresi sayfanın kodunda yazılı olan bağlantıları izler. Tıklamayı yalnızca JavaScript ile yakalayıp sayfa açan kartları bağlantı olarak izleyemeyebilir. JavaScript, sayfaya hareket ve etkileşim katan bir programlama dilidir. Böyle bir durumda kartın gittiği sayfayı Google bulamayabilir. Başlıktaki bağlantının yazısı ise Google’ın hedef sayfa hakkında okuduğu bağlantı yazısı olur. Bu yüzden başlık, gittiği sayfanın konusunu açıkça söyler. Bağlantının adresi de hedef sayfanın asıl adresiyle aynı yazılır.
Görsel, başlık ve düğme ayrı ayrı aynı sayfaya bağlanırsa klavyeyle gezen kişi aynı hedefe üç kez uğrar. Ekran okuyucu da aynı bağlantıyı üç kez söyler. 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 çerçeve çı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ı seçilip kopyalanamayabilir. Web tasarım denetiminde kartlar fareyle, klavyeyle ve telefonda dokunarak ayrı ayrı denenir. Sayfa kaydırılırken kartın yanlışlıkla açılıp açılmadığına da bakılır.
WordPress Blok Düzenleyicisinde Renk ve Yazı Ayarları Nasıl Sınırlanır?
WordPress blok düzenleyicisi, yazıların ve sayfaların bloklar hâlinde hazırlandığı düzenleme ekranıdır. Blok; paragraf, başlık, görsel ya da düğme olarak sayfaya eklenen tek bir içerik parçasıdır. Her blokta yazı rengi, arka plan rengi, yazı boyutu ve satır aralığı ayarları bulunur. Renk seçici istenen her rengin seçilmesine izin verir. Bu ayarlar sınırlanmazsa her yazar kendi rengini ve boyutunu seçer. Zamanla yazılar birbirinden farklı görünür ve sitenin tasarımında belirlenen düzen bozulur. Sınırlar, yazarların yalnızca sitenin kendi renk ve yazı seçeneklerini kullanmasını sağlar.
Web tasarım çalışmasında sınırlar sitenin temasında tanımlanır. Tema, sitenin görünüşünü belirleyen tasarım dosyalarının bütünüdür. Değişiklik alt temada yapılır. Alt tema, ana temanın üzerine eklenen ve tema güncellendiğinde silinmeyen ayrı bir katmandır. Renkler için önce sitenin kurumsal renklerinden oluşan bir palet hazırlanır. Paletteki her renge ‘Ana renk’ ya da ‘Koyu yazı’ şeklinde anlaşılır bir ad verilir. Ardından serbest renk seçici kapatılır. Bundan sonra yazar yalnızca paletteki renkleri seçebilir. Renk geçişleri ve görsellere renk veren filtreler de kapatılır ya da birkaç hazır seçenekle sınırlanır.
Yazı ayarlarında da aynı sıra izlenir. 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. Boyutlar, ekran daraldıkça kendiliğinden küçülecek biçimde de ayarlanabilir. Sınırlar blok türüne göre ayrı da konabilir; düğme bloğunda iki renk bırakılırken paragraf bloğunda renk ayarı tamamen kaldırılabilir. Paletteki yazı renkleri, zeminle aralarındaki fark ölçülerek seçilir. Okunması güç renk çiftleri palete yazı rengi olarak eklenmez.
Sınırlar yalnızca bundan sonraki seçimleri etkiler. Daha önce yazılara verilmiş özel renkler ve boyutlar içerikte kalır. Bu yazılar tek tek açılır ve eski değerler paletteki karşılıklarıyla değiştirilir. Sınırlar tanımlandıktan sonra yazar yetkisi olan bir hesapla deneme yazısı açılır. Düzenleyicide yalnızca izin verilen renklerin ve boyutların göründüğü kontrol edilir. Bu deneme, web tasarım işinin son kontrollerinden biridir. Eksik kalan ayarlar aylık iş listesine ayrı bir madde olarak yazılır ve bir sonraki çalışmada tamamlanır.
Web tasarım sırasında menü düğmesinin ekran okuyucu için adı olup olmadığı nasıl anlaşılır?
Sayfayı bilgisayarda açın, menü düğmesine sağ tıklayıp İncele’yi seçin. Açılan geliştirici araçlarında Erişilebilirlik bölümüne geçin. Orada düğmenin adı yazıyorsa ad tanımlıdır. Ad alanı boşsa ekran okuyucu yalnızca ‘düğme’ der. Web tasarım denetiminde bu tür düğmelere, yaptığı işi söyleyen Türkçe bir ad verilir.
Web tasarım tesliminden sonra telefonda başlıktaki uzun kelime taşarsa ne yapılır?
Önce başlığın yazı boyutu yalnızca telefon genişliği için küçültülür. Kelime yine sığmazsa, sığmayan kelimenin satır sonunda bölünmesine izin veren yazı ayarı açılır. Kelimenin heceden bölünmesi istenirse içine yumuşak tire konur. Web tasarım kontrolünde sayfalar dar telefon ekranında ve büyük yazı boyutunda ayrıca denenir.
Web tasarım işinde kartın tamamı tıklanabilir yapılınca ekran okuyucu neyi okur?
Kartta başlığa konan tek bir bağlantı varsa ve tıklama alanı görünmez bir katmanla kartın tamamına yayıldıysa ekran okuyucu yalnızca başlığı okur. Kartın bütün içeriği tek bağlantıya alındıysa başlığı, açıklamayı ve düğme yazısını tek uzun ad olarak okur. Web tasarım sürecinde bu yüzden başlıktaki tek bağlantı yöntemi kullanılır.
Web tasarım sonrasında blog yazarlarının istediği rengi seçmesi nasıl engellenir?
Temada kurumsal renklerden oluşan bir palet tanımlanır ve serbest renk seçici kapatılır. Bundan sonra düzenleyicide yalnızca paletteki renkler görünür. Aynı işlem yazı boyutları için de yapılır. Daha önce yazılara verilmiş renkler kendiliğinden değişmez; bu yazılar ayrıca açılıp düzeltilir. Web tasarım işinde bu ayar bir yazar hesabıyla denenir.