HTML, CSS ve Erişilebilir Web Arayüzü: Siteniz Telefonda Herkes İçin Okunuyor mu?

Web sitesi denince çoğu işletme sahibinin aklına renkler ve fotoğraflar gelir. Oysa sitenin telefonda rahat okunması, yaşlı bir müşterinin yazıyı büyütebilmesi, güneş altında ekrana bakan birinin doğru düğmeye basabilmesi, tasarımdan önce HTML ve CSS’in nasıl yazıldığına bağlıdır. Bu yazıda bu iki temel dilin işletme açısından ne anlama geldiğini ve sitenizi kod bilmeden nasıl sınayabileceğinizi anlatıyoruz.

HTML iskelettir, CSS görünüş

HTML sayfanın içeriğini ve yapısını tarif eder: bu bir başlık, bu bir paragraf, bu bir düğme, bu bir form alanı. CSS ise bu yapının nasıl görüneceğini belirler: renkler, yazı boyutu, boşluklar, telefonda ve bilgisayarda yerleşim. İkisi de klasik anlamda programlama dili değildir; biri işaretleme, öbürü biçim dilidir. Ama doğru yazılmaları sitenin hızını, arama motorlarınca anlaşılmasını ve herkes tarafından kullanılabilmesini belirler.

Sorun şu ki yanlış yazılmış HTML de ekranda çoğu zaman düzgün görünür. Başlık gibi duran bir yazı aslında büyütülmüş sıradan bir metin olabilir; düğme gibi duran bir alan aslında tıklanabilir bir resim olabilir. Göz bunu fark etmez; ama ekran okuyucu kullanan bir ziyaretçi ve sayfayı okuyan arama motoru bu farkı hemen yaşar.

Erişilebilirlik kimin işine yarar?

Erişilebilirlik, sitenin engelli kişiler ya da zor koşullardaki kullanıcılar tarafından da rahatça kullanılabilmesidir. Yalnızca görme engelli kullanıcıları düşünmek konuyu daraltır; fayda çok daha geniştir:

• Gözlüğü yanında olmayan ve yazıyı büyütmek isteyen orta yaş üstü müşteriler
• Sahilde ya da çarşıda güneş altında telefona bakan biri
• Kırmızı ile yeşili ayırt edemeyen renk körü kullanıcılar
• Bir elinde poşet, telefonu tek eliyle kullanan müşteri
• Ekran okuyucu ya da yalnızca klavyeyle gezinen ziyaretçiler

Bu alanda uluslararası kabul gören ölçüt, WCAG adıyla bilinen web içeriği erişilebilirlik yönergeleridir. Kamu kurumları ya da yurt dışına satış yapan firmalar için bu yönergelere uyum bir yükümlülük de olabilir; size ne düştüğünü ilgili mevzuattan teyit edin.

Kod bilmeden kendi sitenizi sınayın

1. Yazıyı büyütün. Telefonun yazı boyutunu büyük ayara getirin ya da iki parmakla yakınlaştırın. Yakınlaştırma engellenmişse ya da metin kutusundan taşıyorsa sorun vardır.
2. Güneşe çıkın. Siteyi dışarıda açın. Açık gri zemin üzerindeki açık gri yazı içeride şık durur, dışarıda okunmaz.
3. Başparmakla dokunun. Telefon numarası, yol tarifi ve form düğmesi birbirine çok yakınsa yanlış yere basarsınız.
4. Bilgisayarda yalnızca Tab tuşunu kullanın. Fare olmadan menüde gezinip formu gönderebiliyor musunuz, hangi öğede olduğunuz görünüyor mu?
5. Formu boş gönderin. Hata mesajı hangi alanın eksik olduğunu söylüyor mu, yoksa yalnızca kırmızı bir çerçeve mi beliriyor?
6. Görselleri düşünün. Ürün fotoğrafı yüklenmediğinde ya da ekran okuyucu onu okuduğunda, neyin fotoğrafı olduğunu anlatan bir alt metin var mı?

Hız da erişilebilirliğin parçasıdır

İskenderun’da mobil veriyle, kapalı bir çarşının içinden ya da zayıf sinyalde siteye giren müşteri için ağır bir sayfa, hiç açılmayan bir sayfadır. Hızı en çok bozanlar genellikle büyük boyutlu fotoğraflar, gereksiz yazı tipi dosyaları, kullanılmayan eklenti kodları ve açılışta kendiliğinden oynayan videolardır. Özenle yazılmış HTML ve CSS ile görseller telefona uygun boyutta gönderilir, ekranın aşağısındaki görseller kaydırıldıkça yüklenir, yazı tipi yüklenene kadar metin görünür kalır. Google da sıralamada sayfa deneyimini, yani hız ve sayfanın yüklenirken yerinden oynamaması gibi ölçüleri dikkate alır.

Hazır sayfa düzenleyicilerin bedeli

Sürükle bırak site kurucular hızlı başlangıç sağlar; ama arka planda iç içe geçmiş çok sayıda gereksiz HTML ve CSS üretebilir. Bu hem hızı hem erişilebilirliği zayıflatır ve düzeltmek için çoğu zaman aracın kendisini bırakmak gerekir. Bu, düzenleyicilerin hiç kullanılmaması gerektiği anlamına gelmez; ama siteyi sık güncelleyecekseniz, eklediğiniz her yeni sayfanın telefonda nasıl açıldığını yukarıdaki sınamalarla kontrol etmeyi alışkanlık edinin. Bu seçimin daha geniş bir değerlendirmesini WordPress mi, özel yazılım mı yazısında bulabilirsiniz.

Geliştiriciye sorulacaklar

• Sayfalardaki başlık sırası görünüşe göre değil, anlama göre mi kuruldu?
• Formlardaki her alanın görünür bir etiketi var mı?
• Yazı ve zemin arasındaki renk karşıtlığı WCAG ölçütlerine göre denetlendi mi?
• Görsellerin alt metinlerini yönetim panelinden girebiliyor muyuz?
• Telefondaki hız hangi araçla, hangi bağlantı koşulunda ölçüldü?

Erişilebilirlik bir kerelik bir ayar değildir; panelden eklenen her yeni görsel ve sayfa da aynı özeni ister. Siteyi güncelleyecek kişiye alt metnin ve başlık düzeninin nasıl girileceğini göstermek, teslimin parçası olmalıdır. Bir işletme sitesinde içerik olarak nelerin bulunması gerektiğini ise işletme web sitesinde olması gerekenler yazısında topladık.

İskenderun’da yeni bir site ya da mevcut sitenizin yenilenmesini düşünüyorsanız, önce telefonda nasıl göründüğüne birlikte bakalım. Sitelerin önce mobil görünümle tasarlandığı süreci web tasarım sayfasında adım adım bulabilirsiniz.