Anlamsal (Semantic) HTML Yoluyla Erişebilirlik

web tasarım Anlamsal (Semantic) HTML Yoluyla Erişebilirlik

div ve span - Neden bu kadar fazla kullanıyoruz?

Web geliştiricileri olarak div ve span gibi anlamsal elemanları kullanmayı çok seviyoruz.  Eğer sayfalarımızı bu elemanlarla inşa edersek, biliyoruz ki; stiller ve karşıt tarayıcıların davranışları üzerinde tam kontrolümüz olacak ve "CSS" reset kullanmamıza gerek kalmayacak.

Tam kontrol, avantaj gibi görünebilir, ancak daha yararlı ve daha az kapsamlı başka anlamsal elemanlar da var. Tarayıcılar anlamsal elemanları kendilerine has stillerle ve davranışlarla işliyorlar. Örneğin, button elemanı, a elemanından, ul elemanı da ol elemanından farklı davranıyor. Bunlar, daha kullanışlı ve erişilebilir web siteleri için kestirmeler ve beraberlerinde, genel etkileşimler için tutarlılık ve iyi test edilmiş elemanlar getiriyorlar.

Anlamsal Elemanlar Kullanışlılığa Yardım Ediyorlar

Tarayıcıların, kullanışlılığa yardımlarını anlamamız için verilebilecek en güzel örnek <select> seçenek menüsü. Safari'nin masaüstünde, tarayıcı <select> elemanını, dokunmatik ekrandakinden farklı işliyor.

iOS alıcısı, sayfa içerisindeki karışık bir arayüzden çok daha iyi bir deneyim. Menüler çok daha temiz görünüyor ve seçenekleri okuması çok daha kolay. Kaydırma ve tıklama davranışları, işletim sisteminin geri kalanıyla tutarlı ve bu, arayüzün anlaşılmasını oldukça kolaylaştırıyor. Bütün menü büyütülmüş, bu sayede kaydırma ve tıklama davranışları için motor kontrolüne gerek kalmıyor. Kullanışlılık demek, erişebilirlik demek.

Diğer anlamsal HTML elemanlarını kullanmak yerine, div veya span elemanlarını kullanarak aslında tarayıcıların bizim için yaptığı şeyi zorlaştırıyoruz. Klavye navigasyonlu seçenek menüleri için div kullanmamıza hiç gerek yok. select kullanarak bütün sorumluluğu tarayıcıya yıkabiliriz.

erişebilirlik kullanışlılık

İşin büyük kısmını tarayıcıya bırakarak aslında gelecek dostu bir davranış sergilemiş oluruz. Gelecekte, farklı etkileşim beklentileri olan cihazlar çıkacak. Bu olduğu zaman, cihazların tarayıcıları bu etkileşimler yerine bizim web sitelerimize ayak uyduracaklar. Böylece zamanımızı, her yeni cihaza JavaScript kodları yazmak yerine, çok daha eğlenceli şeyler yapmaya ayırabiliriz.

HTML Erişebilirliği Nasıl Etkiliyor

Destekleyici teknolojiler, anlamsal HTML'i, her elemanın kullanıcısına nasıl en iyi şekilde iletilebileceğini anlamak için kullanıyor.

Ekran Okuyucuları (Screen Readers) İçin

Anlamsal HTML, ekran okuyucularına içeriği verir. Ekran okuyucuları bir destekleyici teknoloji örneğidir; kullanan insan için ekranın içeriğini okur. Her web sitesinin doğrusal bir sayfa kaynağı vardır. Gören kullanıcılar, istedikleri içeriğe yöndirilebilmek için görsel işaretleri kullanabilirler. Ekran okuyucuları içerikleri seslendirdikleri için, görsel işaretler o kadar da kullanışlı olmuyor.

Ekran okuyucuları navigasyon için, insanların farklı türdeki (linkler, formlar, başlıklar, listeler ve paragraflar gibi)  içeriklere ulaşabilmesi için alternatif yöntemler kullanıyorlar. Eğer içeriklerimizin tamamını div ler ve span larla doldurursak, ekran okuyucularına değerli içerikleri indeksleme şansını vermemiş oluyoruz.

Klavye Navigasyonları İçin

Klavye navigasyonları da anlamsal HTML'den yardım alıyorlar. Formlar, seçenek menüleri, navigasyonlar, videolar ve seslere ulaşmak için yalnızca klavyeye güvenmek oldukça zor. Örneğin, seçenek menüleri ve navigasyonlar için, yalnızca mouse ile menüyü açıp seçim yapmak fazla dikkat isteyen bir şey.

Yine, anlamsal HTML kullanarak, etkileşimin büyük bir kısmını tarayıcıya bırakabiliriz. Anlamsal form elemanları, işaret kutucuğunun işaretlenip işaretlenmediğini veya, hangi satırın hangi bilgiyle doldurulması gerektiğini bildirebilir. Bu basit tutum, bir insanın formu kullanabilmesi ve web sitenizi acı içinde terk etmesi arasında büyük bir fark yaratabilir.

1.Anlamsal HTML elemanlarını gerektiği yerde kullanın

div kullanmaya karar vermeden önce, div yerine kullanabilecek daha güzel bir eleman olup olmadığına bakın. Bu elemanın rolü ne? İnsanlar bu elemanla tam olarak nasıl etkileşim kurmalılar?

nav, header veya main gibi sınıf isimleri mi kullanıyorsunuz? Bu seçenekler için HTML5 elemanları zaten var. Spesifik elemanlar kullanarak CSS yazmayı kolaylaştırabilir, ve bir web tasarımı minimum efor sarf ederek geliştirebilirsiniz.

2.Yapıyı ve stili birbirinden ayırın

CSS kod yazma

HTML elemanlarını, CSS de nasıl şekillendiklerine göre seçmeyin. Bu günlerde en yaygın pratik sınıf isimleri yerine CSS ayırıcılarını (CSS selectors) kullanmak. Bütün elemanlarınız büyük ve kalın görünsün diye, bütün içeriğinizi <h1> elemanıyla yazamazsınız. Hala stil vermek için HTML elemanlarını kullanmak çok daha kolay. Stilini düşünmeden, yalnızca içeriğe bakmak, önyargımız olmadan doğru anlamsal elemanları seçmek için çok daha mantıklı bir yol. Örneğin, eleman buton gibi görünsün diye div elemanına .btn sınıfı atamak yerine, button elemanının da "buton" gibi göründüğünü göz önünde bulundurmak gerek.

3.Çalışmanızı test edin

 Web sayfasını andıran bir çalışmanız olduğunda, deneyiminizi test edin. Seçtiğiniz anlamsal HTML elemanlarının, internetin geri kalanındaki kullanımlarla aynı şekilde davrandığından emin olun. karşıt tarayıcıyı test edin. Karşıt cihazı test edin. Destekleyici teknolojiyle test edin. Destekleyici teknolojiyle test etmek eskiden olduğu kadar pahalı değil. Bunun için akıllı telefonlarınızı bile kullanabilirsiniz. Ziyaretçileriniz size teşekkür edeceklerdir.

Tarih: 2018-02-11 21:46 - 8 ay 6 gün önce

Neden Kimse Web Siteme Gelmiyor?

Neden Kimse Web Siteme Gelmiyor?

Web Tasarımı İçin Öğrenilebilirliği Anlamak

Web Tasarımı İçin Öğrenilebilirliği Anlamak