Web Tasarımlarında Erişilebilirlik

Erişilebilir Web Siteleri Tasarlamak Dönüşümlerinizi Artırır

Web tasarımlarında erişilebilirlik, bir web sitesinin kullanıcı deneyiminin mümkün olduğu kadar insana ulaşabilmesinin bir ölçüsüdür. Çoğunlukla web tasarımlarının erişilebilirliğinden konuşurken engelli insanların internete nasıl erişebileceği üzerine tartışıyoruz.

Web tasarımlarındaki erişilebilirliğin en genel sembollerinden biri ekran okuyucularıdır. İsminden de anladığımız gibi ekran okuyucuları, bilgisayar kullanan insanlar için ekrandaki içeriği sesli olarak okuyan destekleyici bir teknolojidir. Ekran okuyucuları genellikle görme engelli veya zayıf görüş sorunu yaşayan insanlar arasında yaygındır ama aynı zamanda okuma eylemini yorucu gören, öğrenme zorluğu çeken veya yalnızca içeriği okumak yerine dinlemeyi tercih eden insanlar tarafından da kullanılabilir.

Erişilebilirliğin yalnızca engelli insanlar için geçerli bir kavram olmaması gibi, erişilebilirlikle ilgili tek geliştirme de ekran okuyucuları değildir. Belirli bir ihtiyaç grubu için web sitesini erişilebilir yapmanın diğer insanlara da yararı olabilir. Geniş bir ihtiyaç skalasını karşılayan ve birçok insan tarafından kullanılabilir bir web sitesi yapmak kapsamlı tasarım olarak da adlandırılabilir.

Web sitelerimizi geniş bir ihtiyaç skalası için nasıl kullanışlı yapabileceğimizi araştırırken beş ana başlığa odaklanabiliriz: Görsel, işitsel, devinimsel, bilişsel ve harekete duyarlı destek.

Görsel Erişilebilirlik: Görmeyi kolaylaştırın

görsel erişebilirlik için anlamsal HTML kullanın

Web tasarımlarımızın görülmesini kolay yapmak görme sıkıntısı çeken insanlara yararı olacak bir geliştirme olabilir. Renk körü olan insanları veya yalnızca parlak güneş ışığı altında mobil cihazlarından web sitenize giriş yapan insanları bu alanda değerlendirebiliriz.

Ekran okuyucuları bu noktada web tasarımınızdaki içerikleri görmekte zorluk çeken insanlara yardım edebilir. Web sitelerimizi ekran okuyucuları için erişilebilir yapmak adına, içeriklerimizi tanıtmak için ilgili HTML elemanlarını kullanmayı deneyebiliriz. Örneğin sırasız listeler (unordered list) için <ul> elemanını kullanın. Bu hem kullanıcılarınızın listeyi sıradan metinlerden ayırmalarına yardım eder, hem de tarayıcılarınızın bunun için görsel işaretler ve davranışlar sunmasını mümkün kılar.

Listeleri tanımlamak için <ul> ve liste maddelerini tanımlamak için <li> elemanını kullandığımız zaman tarayıcılar kullanıcılarına bunun bir liste olduğu konusunda bilgi verebilir. Ayrıca liste içinde kaç madde olduğunu belirterek kullanıcılara bu elemanlar arasında kolaylıkla geçiş yapabilme imkanı sunabilir.

Görsel içeriklere metin alternatifleri vermek de başka bir kolay kazanç durumudur. Alternatif metinler tanımlamak için görsellerde "alt text" niteliğini kullanarak hem ekran okuyucuları kullanan insanlara hem de zayıf internet bağlantısı olan, resimleri görüntülemekte sıkıntı çeken insanlara daha iyi deneyimler sunabilirsiniz. Ayrıca bir arama motoru web sitenizi indekslerken içeriğin uygunluğuna bir değer biçmek için HTML'de tanımlı yapıyı kullanır.

İşitsel erişilebilirlik: Duymayı kolaylaştırın

işitsel erişebilirlik yalnızca ekran okuyucularını etkilemez

İşitsel içeriklere alternatif sağlamak işitme engelli insanlar, duyma sıkıntısı çeken insanlar ve hatta trende bir video izlemeye çalışan kulaklıksız insanlar için yararlı olabilir. Eğer alternatifler sağlanmadıysa ses veya video içerikleri tamamen erişilemez olabilirler. Altyazı tanımlamak size zaman ve para kaybı gibi gelebilir ama bunlar sosyal medyada videolar için oldukça kullanılan geliştirmeler.

Bu videolara altyazı eklemek hem cihazlarında ses sorunu olan insanlar, hem de duyma sorunu çeken insanlar için oldukça yararlıdır. Daha uzun videolar ve sesler için belge tanımlamak etkili bir metin alternatifi olabilir ve bunlar arama motorları tarafından oldukça kolay indekslenebilirler.

Devinimsel erişilebilirlik: Etkileşim kurmayı kolaylaştırın

farklı cihazlar için erişilebilirliği düşünmek web tasarımınız i

Dokunmatik ekranlar ve mobil cihazlar yaygınlaştığından insanların web tasarımlarındaki etkileşimleri konusunda daha fazla bilgi sahibi olduk. Motor kontrolü zayıf olan insanlar farelerini hareket ettirmede veya yazı yazmada ciddi zorluklar çekebiliyorlar.

Tıklanabilir elemanları, linkleri veya butonları daha büyük yaparak etkileşimli elemanların daha erişilebilir olmalarını sağlayabiliriz. Bu şekilde insanlar farelerini veya dokunmatik ekranlarını daha rahat kullanabilirler. Bir web tasarımının etkileşimlerini geliştirmenin diğer bir yolu da klavye navigasyonlarını mümkün kılmaktır.

Bilişsel Erişilebilirlik: Anlamayı kolaylaştırın

web tasarımlarınız için yazdığınız içerikler basit bir dille olu

İçeriklerin kendisinin de erişilebilir olması gerekiyor. İçeriklerinizi ve arayüzünüzü anlaşılması kolay yapmak öğrenme zorluğu çeken insanlar için yararlı olabilir. Metinsel içeriklerinizin anlaşılması kolay olması okuma zorluğu çeken insanlar için farklılık yaratabilir.

Bazı metaforları ve jargonları anlamayan, farklı dil konuşan insanlar için yalın bir yazı dili kullanmak da faydalı olabilir. Hatta stresli bir durumda olan ve bir bilgiye mümkün olduğunca hızlı ulaşmak isteyen kullanıcılar için başlıkları ve listeleri kullanmak, onları gerekli bilgiye ulaştırmak konusunda etkili olabilir.

Web Tasarımlarınıza Erişilebilirliği Dahil Etmek

Web Sitenizde Erişilebilirlik Tasarımın Planlanmasıyla Başlar

Erişilebilirlik planlanabilecek bir parça değildir, onu projenizin her adımına dahil etmeniz gerekir. Erişilebilirliği en başından projeye dahil etmek, farklı bir proje gibi sonradan erişilebilirlik geliştirmeleri yapmaktan, daha kolay, daha etkili ve daha ucuzdur. Projenizde ve sürecinizde erişilebilirlik inşa etmek işletmenizin getirileri için bir servettir:

  • Bulunabilirlik ve kullanım kolaylığı: Erişilebilirlik, herkesin web sitelerini başarılı bir şekilde kullanmasını ve bulabilmesini sağlar. Erişilebilirlik; kullanışlılığı geliştirerek web sitenizin daha etkili olmasını ve potansiyel hedef kitlenizin gelişmesini sağlar.
  • Rekabet üstünlüğü: Hitap ettiğiniz kitle ne kadar genişlerse, ulaşabildiğiniz alan da o kadar genişler. Bir web sitesi, aynı pazardaki diğer web sitelerinden daha erişilebilirse, rakiplerin web sitelerinde sorun yaşayan insanlar için bu web sitesi ayrıcalık kazanacaktır. Eğer web sitesi tercüme edilmişse veya otomatik çevirilerin kalitesini arttırmak adına basit yazılmış içerikler bulunduruyorsa, erişilebilirlik farklı dili konuşabilen insanlara da ulaşabilecek bir seviyededir.
  • Daha az masraf: Erişilebilir web siteleri, bir işletmenin diğer alanlardaki masraflarını azaltabilir. Daha erişilebilir web sitelerinde, daha çok kullanıcı, daha çok çevrimiçi görevi ve işi tamamlar.

Bir defa çalışma sürecinize erişilebilirliği dahil ettiyseniz, bir sonraki adım bunu bütün süreçlerinizde uygulamaktır.

Takımınızı Kurmak

tasarım ekibi

Bir web tasarımına eli değen herkes web erişilebilirliğinden sorumludur. Tasarım; bir ürün ortaya koyarken aldığımız kararların tümüdür. Bu demek oluyor ki, bir projeye dahil olan herkes bir bakıma tasarımcıdır. Her uzman, çalışmalarının erişilebilirliğe etkisini anlamakla yükümlüdür.

HTML kodlarını yazmaktan sorumlu olabiliriz veya olmayabiliriz ama eğer birlikte çalıştığımız geliştiriciler anlamsal (semantic) yapı üretmiyorlarsa; o zaman tasarımlarımızda inşa ettiğimiz yapıyı gerçek anlamda sunmuyorlar demektir. –Anne Gibson, bağımsız danışman.

Liderlik ve Destek

Erişilebilirliğin uzmanlığımızı nasıl etkilediğiyle ilgili dikkatli olurken aynı zamanda ürünün genel erişilebilirliğinin geliştirilebileceği anahtar noktaların tam olarak belirlenmesi de çok önemlidir.

Ürün sorumluları, erişilebilirliğin organizasyonun yaptığı şeyler üzerindeki etkisini değerlendirmeli, organizasyonun yasal görevlerini anlamalı ve potansiyel işletme yararlarına dikkat etmelidir. –Henny Swan,kullanıcı deneyimi tasarımı uzmanı.

Bazen insanlar kendilerini, erişilebilirliğe yeterli değeri vermeyen bir şirket/takım içinde buluyorlar ama erişilebilirlik konusunda yeterli bilgi ve deneyimle bizler birey olarak da bir web sitesinin erişilebilirliği üzerinde pozitif etkileri olacak çalışmalar yapabiliriz. Örneğin; bir tasarımcı arka plan ve metinlerin rengi arasında iyi bir kontrast oluşturarak metni daha okunaklı hale getirebilir.

Ne yazık ki, meslektaşlarımıza destek olmadığımız sürece, bir web sitesinin erişilebilirliği diğer alanlarda kolaylıkla zarar görebilir. Renkler kontrastlı olabilir ancak başka bir tasarımcı gelip gövde metninin 12 piksel olması gerektiğini söylerse, içerik yine okunabilirlikten uzak olacaktır. Web Tasarım takımındaki herkes projede erişilebilirliğin önemini ve rolünü anlayabilirse, mükemmel web siteleri tasarlanabilir.

Profesyonel Geliştirme

profesyonel geliştirme ve html

Erişilebilirlik konusunu öğrenmeye başladığınız zaman, organizasyonunuzdaki insanların da erişilebilirliği doğru bir şekilde uygulayabilmeleri için, yeni becerileri öğrenmeleri gerekiyor. Tasarım ekipleri, erişilebilirlik becerilerini arttırmak için internet kaynaklarından, konferanslardan ve etkinliklerden faydalanabilirler. Bu geliştirmeler başta zaman kaybı gibi görünse de, zamanla takımınızın erişilebilirlik becerileri gözle görülür biçimde gelişecektir.

Yeni beceriler demek test etme süreçlerinde, tanıdık olmayan araçlar, teknikler ve düşünme şekilleri ile boğuşmak demektir. Ümidinizi kaybetmeyin. Bu yeni becerilerin alışkanlık haline gelmesi uzun sürmeyecektir. Belki de takımınıza erişilebilirliğin farklı alanlarında destek olması için, dışarıdan bir uzmanın yardımına ihtiyaç duyabilirsiniz. Çoğu organizasyon, projelerinin başında araştırma ve test süreçlerine yardım etmeleri için erişilebilirlik uzmanlarından yardım almaktadır.

Organizasyonunuz için en iyi uzmanı bulmaya çalışıyorsanız yapabileceğiniz en iyi şey; arama motorlarına “erişilebilirlik uzmanı “yazıp, işi şansa bırakmaktır. Muhtemelen başlanabilecek en iyi yer erişilebilirlik blogları ve bilgi verici web siteleridir. Tabii bunları düşünmek istemiyorsanız erişilebilir web siteleri yapmak için, web tasarımınızı tamamen web uzmanlarına da bırakabilirsiniz.

Proje Kapsamının Belirlenmesi

hedef kitlesi

Bir projeye başlarken, kararlarınızı erişilebilirlik kaygısıyla almanız gerekiyor.

  • Ürününüzün amacı nedir?
  • Ürününüzün hedef kitlesi nedir? İhtiyaçları, kısıtlamaları ve teknolojik tercihleri nelerdir?
  • Kullanıcılarınızdan tamamlamalarını istediğiniz görevler nelerdir?
  • Kullanıcılarınıza sunmanız gereken deneyim nedir?
  • Üretim sırasında, projenize erişilebilirliği nasıl dahil edebilirsiniz?
  • Ürününüzü hangi tarayıcılarda, işletim sistemlerinde ve cihazlarda test etmelisiniz?

Planlama

Erişilebilirlik planlanabilecek bir parça değildir, onu projenizin her adımına dahil etmeniz gerekir. Erişilebilir siteler yapmak, erişilebilir olmayanlardan daha pahalı değildir ama bazı harcamalar farklılık gösterir. Takımınızı eğitmek veya çeviriler gibi alternatif materyallere bütçe ayırmanız gerekebilir. Bütün bu potansiyel harcamalarınızı en baştan düşünürseniz, harcamalarınız size “ekstra harcama” gibi gelmeyecektir.

Erişilebilirliğe harcadığınız bütçe, projenizin, takımınızın veya geliştirmek istediğiniz ürünün boyutuna bağlıdır. Ne kadar fazla projede çalışırsanız, erişilebilirlik için gerekli harcamanızı ve çalışma sürenizi o ölçüde kontrol edebilirsiniz.

Erişilebilir Web Siteleri Tasarlamak

Engelli Bireyler İçin Erişilebilir Web Tasarımı Nasıl Yapılır?

Web sitelerinin amacı insanlara erişmek olduğundan, web tasarımcıları ulaşabilecekleri bütün insanlara ulaşabilmek için her şeyi yaparlar.

Engelli insanlar sürekli ihtiyaçlarını karşılayamayacak web siteleriyle karşılaşıyorlar. Neyseki, Wikipedi, YouTube, Google ve Yahoo! gibi dünyaca ünlü web siteleri engelli kullanıcılar için de erişilebilir olmak için çalışıyorlar ama hala çoğu web sitesinin katetmesi gereken çok yol var.

Kimse web sitesini kasten erişilemez yapmaz. Web sitelerinin amacı insanlara erişmek olduğundan, web tasarımcıları ulaşabilecekleri bütün insanlara ulaşabilmek için her şeyi yaparlar. Çoğu tasarımcı ve geliştirici için, erişilebilir web siteleri yapma fikri oldukça bunaltıcı olabiliyor. Web geliştiricileri yeni teknolojileri inceleyip bunları erişilebilir yapmaktansa, bu teknolojiler erişilebilir olmadıkları için kullanamayacaklarını düşünüyorlar. İnsanlar, daha iyi arayüzler yapmak için erişilebilir arayüzü bir seçenek olarak görmüyorlar, bunun yerine bunu yapmak istedikleri şeyin önünde engel olarak görüyorlar.

Aslında, erişilebilirlik çekiciliğe ve performansa zarar verecek bir şey değil. Erişilebilir bir web sitesi; iyi tasarlanmış bir web sitesidir ve engelli kullanıcıların da bu deneyimden keyif alabilmesini sağlar. Erişilebilirlik fikriyle tasarlanmış web siteleri; çevirmeli bağlantılarda ve iPhone ve Blackberry gibi taşınabilir cihazlarda çok daha iyi çalışır. Hatta bu web sitelerinin başka bir artısı da; Google gibi arama motorlarında genellikle daha iyi indekslenmeleridir.

Web tasarımı için doğru yaklaşım, onu erişilebilirlik hedefiyle, orijinallik ve açık görüşlülük tutkusuyla tasarlamaktır. Bazen sınırları belirlemek, daha yenilikçi olmanızı sağlayabilir. Bir tasarımcı olarak, sınırlarınız anahtardır. Sınırlarınız yoksa kaybolmanız çok kolaylaşacaktır. Bu sınırları lehinize kullanmanız gerekiyor. BBC Ouch!, erişilebilirlik sınırlarıyla çalışan, başarılı ve çekici bir web sitesi örneği. Yaygın engellilik sorunlarının çevresinde dönen bu web sitesi herkes için, özellikle de engelliler için çok güçlü bir web tasarımı örneği. İlk bakışta web sitesi diğerlerinden farklı görünmüyor. Görsel olarak ilgi uyandırıcı bir tasarımı var ve medya bakımından zengin bir web sitesi. Bu web sitesi aynı zamanda yüksek kontrast ve yalnızca metinden oluşan versiyonlar da sunuyor. Bunun gibi erişilebilirlik dostu seçenekler web sitesinde oldukça yaygın.

Erişilebilir olmayan web sitelerinin kasten böyle olmaması çok talihsiz bir durum. Bu; farkındalık ve bilgi yoksunluğundan kaynaklanıyor. İnsanlar, web sitelerini herkes için tasarlamanın kolaylığını gözardı ediyorlar. Herşeyin yanlış gitmesi için ilgi ve farkındalık yoksunluğu tek başına yetiyor.

ekran okuyucuları

Bir şeylerin yanlış yola gitmesini engellemek adına, kimin için tasarım yaptığınızı bilmek çok önemli. Görme problemi olan insanları -görüşleri kısıtlı olan insanlar gibi-, renk körlerini veya kesin körlüğü olan insanları da düşünmeniz gerekiyor. Körlük sorunu yaşayan insanlar çevrimiçi yazıları ekran okuyucularına yönlendiren yazılımlar kullanabilirler ve görme problemi olanlar da ekrandaki yazıyı büyütmek için ekran büyütme yazılımlarından yararlanabilirler. Büyütülmüş metinler, özellikle de linkler, etkili bir şekilde fare kullanamadıkları için felç veya perkinson hastalarına da yardımı dokunacak bir eleman. Hiçbir şekilde fare kullanamayan bazı engelli kullanıcılar da var. Onlar için de ses tanıma yazılımlarını ve tek geçişli erişim cihazları kullanılabilir.

Aklımızda bulundurmamız gereken diğer temel grup da; yazılı kopyalara ve işaret diline itimat etmek zorunda olan duyma bozukluğu olan insanlar. Ayrıca yanıp sönen ekranlara duyarlı olan kasılma nöbetleri geçiren insanlar ve içerikleri okumakta zorluk çekebilecek disleksi hastaları gibi kullanıcıları da unutmamak gerekiyor.

Bu konuda yapabileceğiniz en iyi seçimler, yalnızca metinden oluşan sayfalar tasarlamak, yüksek kontrastlı seçenekler sunmak ve ses, video gibi medya içeriklerinizde altyazı tanımlamak gibi geliştirmeler olabilir. Kullanıcılarınızın farklı engel durumlarını düşünmek size yardımcı olabilir ama erişebilirlik için tasarım yapmayı engellilik çeşitleri için bir kontrol listesi gibi düşünmeyin.

Bir web sitesini erişilebilir yapmak demek, onu herkes için kullanımı kolay hale getirmek demektir.

Bunun sebebi, erişilebilir web sitelerinin, uygun web tasarımları için gerekli olan prensiplerle işlemesidir. Her şey esneklik ve yapıyla ilgili. Eğer web siteniz uygun yapıyı oluştururken stil sayfaları (style sheets) veya JavaScript olmadan çalışıyorsa, o halde iyi bir ürün oluşturmak yolunda iyi bir adım atmışsınız demektir.

Bu demek oluyor ki; web sitenizin, içerikleri ve yapısı için anlamsal olarak doğru HTML kodlarını kullanması gerekiyor. HTML içeriklerinin uygun biçimde oluşturulması ve yapısal olarak mantıklı olması gerekiyor. Bu özellikle de ekran okuyucuları (screen readers) kullanan insanlar için çok önemli. Ekran okuyucuları aynı zamanda Javascript veya Flash'ı da okuyamazlar, yani metinlerinizin ve linklerinizin, erişilebilirlik için eski moda HTML ile oluşturulduğundan emin olmalısınız.

Başka bir temel web tasarım elemanı da, grafikler ve görseller için alternatif metinler kullanmaktır. Ayrıca metininlerinizin ve görsellerinizin birbiriyle uyum içerisinde olduğuna dikkat edin.

Benzer şekilde, asla zayıf bir içeriği alakasız görsel elemanlarla zenginleştirmeye çalışmayın. Güzel yazılmış, temiz bir içeriğin yerine geçebilecek hiçbir şey yoktur. Çok iyi yazma yetenekleriniz olmayabilir ama yazım hatasının özrü yoktur. Yazım kontrolleri genel olarak iyi bir fikirdir. Yazım hatalarının ekran okuyucularının başarısına zarar vereceğini de unutmamak gerekir. Bunlar uygulaması zor pratikler değiller ve size zarar vermezler. Hatta hayatınızı çok daha kolaylaştırır. Yalnızca bu konuda açık fikirli olmalısınız.

Anlamsal (Semantic) HTML Yoluyla Erişebilirlik

HTML elemanlarını, CSS de nasıl şekillendiklerine göre seçmeyin.

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

erişebilirlik kullanışlılık

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.

İş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.