1997'de Web'i Değiştiren İki Fikir, Bugün Kalanı

1997'nin web tartışması iki başlık etrafında döndü: şirketlerin interneti kurumsal bir broşürden fazlası olarak görmeye başlaması ve semantik kodlamanın yeniden gündeme gelmesi. Bu iki fikirden biri tuttu, diğerinin önerdiği çözüm yolu yanlış çıktı. Hangisinin hangisi olduğuna bakmak, bugün arayüz tarafında verdiğimiz kararların nereden geldiğini de anlatıyor.

Broşür sitelerin asıl sorunu ilgisizlik değildi

1990'ların ortasında bir şirket sitesi genelde şuydu: adres, telefon, birkaç paragraf tanıtım, belki ürün fotoğrafı. Müşteri ürünün stokta olup olmadığını göremiyor, siparişinin nerede olduğunu takip edemiyordu. Bu, şirketlerin web'i önemsememesiyle açıklandı o dönem. Açıklama eksik.

Stok bilgisi sitede yoktu çünkü stok bilgisi başka bir yerdeydi: depodaki bir deftere, muhasebe programına, en iyi durumda şirket içi bir veritabanına yazılıydı. Siteye stok göstermek, o kaydı okuyabilecek bir bağlantı kurmak demekti. 1997'de bunun maliyeti, bir sayfa tasarlamanın maliyetinin yanında büyüktü. Tasarım tarafı ucuzladığı için sitelerde tasarım vardı; entegrasyon pahalı kaldığı için sitelerde cevap yoktu. Bugün de aynı yerde takılıyor: arayüzde "stokta kalan 2 ürün" yazısını koymak beş dakika, o sayının doğru olması bambaşka bir iş.

Kaynak metnin en işe yarar tavsiyesi şu: siteyi yöneten kişi kendi sitesinden alışveriş yapsın. Yirmi dokuz yıl sonra hâlâ en ucuz kullanılabilirlik testi bu, ve hâlâ atlanıyor.

Semantik kodlama tam olarak neyi kodluyordu

HTML'in ilk tasarımındaki fikir, etiketin bir şeyin ne olduğunu söylemesiydi, nasıl göründüğünü değil. h2 "ikinci düzey başlık" anlamına gelir, "büyük ve kalın yazı" anlamına gelmez. ul "bu bir liste" der, "sola girintili, önünde nokta olan satırlar" demez.

Bu ayrımın ne işe yaradığı, ancak sayfayı sizin ekranınızdan başka bir şey okuduğunda ortaya çıkıyor. Ekran okuyucu başlıkları gezinme noktası olarak kullanabiliyor, çünkü hangi satırın başlık olduğu yazılı. Arama motoru belgenin iskeletini çıkarabiliyor. Yazı tipini küçük bulan biri büyütebiliyor, çünkü boyut belgenin içine gömülü değil.

1990'ların ortasında bu fikir büyük ölçüde terk edildi. Yerine font etiketi, hizalamayı taşıyan tablolar, boşluk açmak için konulan saydam tek piksellik görseller geldi. Belge artık kendi yapısını anlatmıyor, belirli bir tarayıcıda belirli bir çözünürlükte nasıl görünmesi gerektiğini anlatıyordu. Semantik kodlamanın 1997'de yeniden konuşulması, bu kaybın fark edilmesiydi.

Cihaz başına stil dosyası fikri neden çöktü

Teşhis doğruydu, reçete kısmen yanlıştı. Reçete şöyleydi: içerik HTML'de dursun, görünüm CSS'e çıksın, sonra her cihaz sınıfı için ayrı bir stil dosyası bağlayın. CSS 2.1 bu düşünceye uygun bir ortam listesi tanımlıyordu: screen, print, handheld, tv, projection, aural.

Bu liste bugün yok. Media Queries Level 4 handheld, tv ve projection'ı kullanımdan kaldırdı, elde screen, print ve speech kaldı. Sebebi basit: cihazlar kategorilere bölünmüyor. 430 piksellik bir telefon da, 27 inçlik bir monitör de kendini screen diye tanıtıyor, aradaki her şey de öyle.

Cihaz sınıfı başına ayrı dosya yerine tek stil dosyası ve içinde ölçüye bağlı kesme noktaları kullanmayı daha güvenilir bulurum, ve bunun gerekçesi estetik değil bakım. Kaynak metin, içerik-sunum ayrımının faydaları arasına "bakım ve güncelleme maliyeti azalır" satırını koyuyor, hemen üstünde de cihaz başına ayrı dosya öneriyor. İkisi aynı anda doğru olamaz. k tane cihaz sınıfı için k tane dosya tutuyorsanız, eklediğiniz her yeni bileşen k yerde düzenleme ister; dört sınıf, dört kat düzenleme. Ayrımın kazandırdığı bakım tasarrufu, dosya sayısıyla geri çarpılıp gidiyor. Tek dosyada aynı bileşen bir kere tanımlanır, kesme noktası sadece değişen özelliği ezer.

HTML5 etiketi kullanmak erişilebilirlik demek değil

Modern yazılarda sık rastlanan kısa yol şu: HTML5 ve CSS3 ile erişilebilirlik kendiliğinden geliyor. Gelmiyor. section ya da article yazmak, ekran okuyucuya div yazmaktan belirgin biçimde fazla bir şey söylemiyor; işe yarayanlar nav, main, h2 gibi gerçekten gezinme noktası üreten etiketler.

Fark en net butonda görünüyor. Yerleşik button etiketiyle hazır gelen davranışlar var: klavyeyle odaklanabilir, Enter ve Boşluk tuşuna basınca tetiklenir, disabled durumunda tıklanamaz, form içindeyse formu gönderir. Aynı işi div ile yapmaya kalkarsanız geri koymanız gerekenler:

• tabindex="0", yoksa klavyeyle hiç ulaşılamaz
• role="button", yoksa ekran okuyucu onu okunacak bir metin sanar
• Enter ve Boşluk için tuş dinleyicisi, ikisi ayrı ayrı
• Devre dışı durumu için aria-disabled ve tıklamayı gerçekten engelleyen bir kontrol

Dördünü de yazarsanız yerleşik butonun davranışına yaklaşırsınız, eşitlemezsiniz. Yazmazsanız ortaya fareyle çalışan, klavyeyle çalışmayan bir arayüz çıkar, ve bu çoğu testte görünmez çünkü testi yapan kişi fare kullanıyordur.

1997'den geriye ne kaldı

Kalan şey ilke: bir şeyi ne olduğuna göre işaretlemek, nasıl görünmesini istediğinize göre değil. Bu ilke hem semantik HTML'de hem bugünün tasarım sistemlerinde aynı yerde duruyor. Çöken şey ise ilkenin 1997'deki uygulaması, yani dünyayı sabit cihaz sınıflarına bölüp her birine bir dosya yazma alışkanlığı. Teşhisin doğru, reçetenin yanlış olabileceği durumlara iyi bir örnek, ve web tarihinde bunun tek örneği değil.