- Katılım
- 21 May 2023
- Mesajlar
- 777
- Tepki
- 17
- Puan
- 18
Örnek site aramak çoğu zaman ekran görüntüsü galerilerinde bitiyor. Güzel duran bir tasarımın hangi kararı doğru verdiğini o görüntülerden anlamak ise mümkün değil.
Aşağıda örneğe bakmanın işe yarar iki yolunu topluyoruz: aynı sitenin bozuk ve düzeltilmiş hâlini yan yana koyan resmî bir gösterim ile belirli sayfa türleri için yazılmış, gerekçesi açıklanmış tasarım desenleri.
Aynı sitenin iki hâli
W3C'nin erişilebilirlik girişimi tam olarak bunun için bir kaynak yayımlıyor. Öncesi ve sonrası gösterimi, erişilebilir olmayan bir siteyi ve aynı sitenin elden geçirilmiş sürümünü gösteren çok sayfalı bir kaynak.
Yöntem şu: her sayfada, tıklanarak açılabilen satır içi notlar var. Bu notlar başlıca erişilebilirlik engellerini ya da yapılan onarımları işaretliyor. Her sayfaya ayrıca bir değerlendirme raporu eşlik ediyor; rapor geliştiriciye içerik erişilebilirlik kılavuzlarına uyum düzeyini bildiriyor.
Kaynak kendi sınırını da yazıyor: gösterim, erişilebilirliğin bazı yönlerini örneklemek için hazırlandı, her engel türünü ya da her gereksinimi kapsamıyor.
Gösterimdeki beş sayfa
Örnek site rastgele seçilmiş sayfalardan oluşmuyor; her sayfa farklı bir tasarım sorununu taşıyor.
- Ana sayfa: Öne çıkanlar ve tanıtım blokları.
- Haber sayfası: Haber metinleri ve uzun içerik.
- Bilet sayfası: Tablolar ve tablo içindeki bilgi.
- Anket sayfası: Formlar ve etkileşim.
- Şablon: Diğer bütün sayfaların üretildiği iskelet.
Bu beşlinin hem erişilemez hem erişilebilir sürümü ayrı ayrı yayımlanıyor. Yani "ana sayfa nasıl olmalı" sorusunun cevabı yerine, aynı ana sayfanın iki kararla nasıl değiştiğini görüyorsunuz. Sayfa iskeletini kâğıt üzerinde kurmayı wireframe yazımızda anlatmıştık; buradaki şablon sayfası aynı işin kodlanmış hâli.
Örneği okumanın yolları
Kaynak, kendisinin nasıl kullanılabileceğini de sayıyor. Sunum hazırlarken somut öncesi-sonrası karşılaştırmaları anlatmak, belirli bir engelin nedenini ve nasıl giderildiğini öğrenmek, değerlendirme raporlarını kendi raporlarınız için biçim örneği almak bunların arasında.
En öğretici olanı üçüncüsü: engellerin gerçek etkisini kavramak. Erişilemez sayfaları farklı tarayıcı ayarlarıyla ya da ekran okuyucu gibi yardımcı teknolojilerle gezmek sorunu görünür kılıyor; ardından aynı gezinti düzeltilmiş sayfalarda tekrarlanıyor.
Püf nokta' Alıntı:
Arayüz ögelerinin anlamının makineye nasıl aktarıldığını arayüz yazımızda ele almıştık; gösterimdeki notların işaret ettiği onarımların çoğu tam olarak bu katmanda yapılıyor.
Sayfa türüne göre örnekler
İkinci kaynak türü desen kütüphaneleri. GOV.UK tasarım sisteminin desen bölümü desenleri şöyle tanımlıyor: belirli, kullanıcı odaklı görevler ve sayfa türleri için en iyi uygulama sayılan tasarım çözümleri.
Bölümdeki her desen yazılı rehberlikle destekleniyor ve mümkün olduğunda kodlanmış örnek içeriyor. Desenler çoğu zaman bir ya da birden çok bileşen kullanıyor ve bunların bağlama nasıl uyarlanacağını açıklıyor.
Somut bir örnek, hizmete giriş sayfası deseni. Giriş noktasının kullanıcıya, hizmetin ne yaptığını ve ihtiyacını karşılayıp karşılamayacağını anlamasına yetecek kadar bilgi vermesi; hizmete giren, istenen eylemle tutarlı metin taşıyan bir düğme içermesi; kullanıcıların çoğunun başlamadan önce bilmek isteyeceği bilgileri, örneğin ücreti ve yaklaşık süreyi barındırması bekleniyor.
Desen ayrıca hizmete ulaşmanın diğer yollarının, örneğin telefon ya da basılı formun sayfada belirtilmesini ve kullanıcının tamamlamak için ihtiyaç duyacağı belgelerin listelenmesini istiyor. Uygunluk koşulları içinse ayrı bir uyarı var: karmaşık uygunluk bilgisi giriş sayfasına yığılmıyor, sorular hizmetin içinde soruluyor.
İki ayrıntı daha var ki gündelik sitelerde de karşılığı bulunuyor. Birincisi adlandırma: hizmetin adı, kullanıcı için çözdüğü sorunu yansıtmalı. İkincisi liste yükü; gereken belgeler giriş sayfasını karmaşıklaştıracaksa ayrı bir "neye ihtiyacınız var" sayfasına taşınabiliyor.
Sayfanın ne kadar hızlı açıldığı da örneğin parçası; ölçütleri performans yazımızda bulabilirsiniz.
Sık Sorulan Sorular
Web sitesi örnekleri nereden bulunur?
Galeri sayfaları yerine, kararlarını gerekçesiyle yayımlayan kaynaklara bakın: öncesi-sonrası gösterimi ve resmî desen kütüphaneleri.
Öncesi ve sonrası gösterimi nedir?
Erişilebilir olmayan bir siteyi ve aynı sitenin elden geçirilmiş sürümünü, satır içi notlarla birlikte gösteren çok sayfalı kaynak.
Gösterimde hangi sayfalar var?
Ana sayfa, haber sayfası, tablolu bilet sayfası, formlu anket sayfası ve diğer sayfaların üretildiği şablon.
Desen ne demek?
Belirli kullanıcı görevleri ve sayfa türleri için en iyi uygulama sayılan, yazılı rehberlik ve kodlu örnekle desteklenen tasarım çözümü.
Bu örnekler her siteye uyar mı?
Gösterim her engeli kapsamadığını kendisi yazıyor; desenler ise bağlama uyarlanmak üzere tarif ediliyor.
Özetle
İşe yarar örnek, güzel görüneni değil kararı gösterendir. W3C'nin gösterimi aynı beş sayfayı iki sürümde yayımlayıp aradaki farkı notlarla işaretliyor; tasarım sistemleri ise sayfa türü bazında, gerekçesi yazılı çözümler sunuyor. İkisini birlikte okuduğunuzda elinizde kopyalanacak bir tasarım değil, kendi sayfanıza uygulanacak bir ölçüt kalıyor.
Kendi ana sayfanızın "öncesi" sürümünde bugün hangi engel duruyor olabilir?
Güncelleme: 5 Eylül 2026. W3C WAI öncesi-sonrası gösterimi ile GOV.UK tasarım sisteminin desen bölümü ve hizmete giriş deseni kontrol edildi.
Dijital Dünyanıza Yön Veren Pusula
