Erişilebilirlik, web sitenizin kod ve renk düzeninin çok ötesine geçer. Erişilebilirlik, en önemli kısımlarından biri olan içeriğiniz de dahil olmak üzere sitenizin her yönü için geçerlidir. Erişilebilirlikle ilgili en iyi uygulamaları kullanmak sitenizi birçok yönden iyileştirebilir. Örneğin, ziyaretçilerinizin önündeki engelleri ortadan kaldıracak ve SEO sıralamanızı iyileştirebilir.
Erişilebilirlik konusunda yeniyseniz, kontrol edin Web Erişilebilirliği nedir?
Yeni içerik oluşturmak veya mevcut içeriğinizi erişilebilir olacak şekilde düzenlemek, bu faydalı ipuçlarıyla daha az zorlayıcı olacaktır.
1. Başlıklar ve başlıklar
Sayfa başlıkları anlamlı ve benzersiz olmalıdır:
- Sayfa başlığı, sayfanın ana konusu olmalıdır.
- Farklı sayfalar asla aynı başlığı paylaşmamalıdır.
Net ve açıklayıcı sayfa başlıkları kullanın:
- Sayfa başlığı sayfanın amacını açıklamalıdır.
- Sayfa başlıkları, web sitesi ziyaretçisini yönlendirmeye yardımcı olur.
- Sayfa başlıkları site haritasında ve arama sonuçlarında gösterilir. Sayfa başlığı, ziyaretçilerin aradıkları içeriği hızla bulmalarına yardımcı olmalıdır.
İçerik bölümlerini başlıklarla ayırın:
- Altı başlık stili vardır: H1, H2, H3, H4, H5 ve H6.
- Başlıklar hiyerarşiktir ve önem sırasına göre sıralanmıştır: H1 en önemli başlık, H6 ise en az önemli başlıktır.
- Her sayfanın bir başlığı (H1) olmalıdır.
- Sayfa başına yalnızca bir H1 olmalıdır, ancak sayfa başına başka başlık sınırlaması yoktur.
- Başlıkları uygun sırayla kullanın:
- Boyutuna göre bir başlık seçmeyin; Başlıkları içerik bağlamında seviyelerine göre kullanın.
- Başlık sıralamasını yukarıdan aşağıya atlamayın. Örneğin, bir H4, doğrudan bir H2’yi takip etmemelidir.
- Başlık etiketleri asla boş bırakılmamalıdır.
2. Metin
Açık ve özlü bir dil kullanın:
- Sadece dokuz yıllık okulu olan biri için yaz.
- Genel bir kitlenin anlayacağı açık ve basit bir dille yazın.
- Jargon ve sektöre özgü dilden kaçının.
- Sektöre özel dil gerektiğinde, bağlam sağlamak için tanımı ekleyerek terimleri açıklayın.
- Kısaltmaları açıklayın.
- Aynı kısaltma, farklı bağlamlarda farklı anlamlara gelebilir. Ziyaretçilerinizin kısaltmaların bağlamını anlamasına yardımcı olmak için, ne anlama geldiklerini açıklayan tanımlar ekleyin.
Net talimatlar sağlayın:
- Birçok ziyaretçi renkleri algılamakta güçlük çeker; örneğin, kısmi görüşe sahip insanlar genellikle sınırlı renk görüşü yaşarlar.
- “Mavi bağlantıya tıklayın” gibi yalnızca renge dayanan talimatlardan kaçının.
- Bilgi iletmek için yalnızca renkten başka yollar kullanın. Örneğin, metin etiketleri yoksa, renk körlüğü olan biri için renkli çizgiler içeren bir grafiği anlamak zor olabilir.
Duyusal özellikler:
- Şekli, boyutu algılayamayan veya mekansal konum veya yönelimle ilgili bilgileri kullanamayan engelli ziyaretçiler var.
- Yalnızca duyusal özelliklere dayanan talimatlardan kaçının, örneğin “Tıklayın. yuvarlak üzerindeki düğme ayrıldı”
3. Bağlantılar
Bağlantı metni benzersiz olmalı ve bağlantının amacını açıklamalıdır:
- Belirsiz bağlantılardan kaçının.
- “Daha fazlasını okuyun” veya “Daha fazlasını öğrenin” gibi bağlantı metinlerinden kaçının. Bunun yerine, bağlantının amacını açıklayın. Örneğin, “Hizmetlerimiz hakkında daha fazla bilgi edinin”, bağlantının amacını netleştirir.
- Bağlantı metnini paylaşan bağlantılar aynı hedefe gitmelidir. Örneğin, “Hakkımızda” metnine sahip iki bağlantı aynı sayfaya bağlanmalıdır.
Bağlantılar yeni bir pencerede veya sekmede açılmamalıdır:
- Bağlantıların yeni bir pencerede açılması gerekiyorsa, ziyaretçiye bağlantıya tıklamanın yeni bir pencere açacağını önceden bildirin. Örneğin, bağlantı metnine “(yeni pencerede açılır)” eklenmesi bu gereksinimin karşılanmasına yardımcı olacaktır.
4. Görüntüler
Alternatif metin (alternatif metin de denir):
- Alternatif metin, resmi doğru bir şekilde tanımlayan bir veya iki cümle olmalıdır.
- “resmi” veya “resmi” eklemeyin.
- Doğru gramer kullanın.
- Anahtar kelimeleri kullanmayı sınırlayın. Anahtar kelimeler gerekli değildir.
- Alternatif metin, resmin yanındaki metinle aynı bilgileri sağlamamalıdır.
- Ekran okuyucular, alternatif metni ziyaretçiye okuyarak görüntüyü görselleştirebilir.
Metin olmayan içeriği açıklamak için bir metin alternatifi sağlayın:
- Alternatif metin yazarken resmi çevreleyen metni göz önünde bulundurun.
- Dekoratif görseller alternatif metin gerektirmez.
- Dekoratif görseller tamamen estetik amaçlıdır, içeriğe bilgi eklemez ve herhangi bir işlevsellik taşımaz.
- Bir görüntünün dekoratif olup olmadığından emin değilseniz, alternatif metni ekleyin.
- SVG’lere alternatif metin eklemeyi unutmayın.
Resim başlıkları:
- Resimlerde başlık niteliklerini kullanmayın.
- Alternatif metin kullanılırken resim başlıkları gereksiz ve gereksizdir.
Resim başlıkları:
- Resim başlıkları ek bağlam ekler.
- Destekleyici bilgi gerektirebilecek ve bir başlıktan yararlanabilecek resimlere örnek olarak infografikler, haritalar, grafikler ve çizelgeler verilebilir.
Metin resmi yok:
- Metni bir görüntünün parçası olarak kullanmayın.
- Ziyaretçiler düz metni daha okunaklı olacak şekilde ayarlayabilir ancak metin bir görüntünün parçası olduğunda okunabilirliği artıramaz.
- Metin görüntünün bir parçasıysa, ekran okuyucular metni bir ziyaretçiye okuyamaz.
- Bazı istisnalar logolar, bilgi grafikleri, ekran görüntüleri, haritalar, grafikler ve çizelgeleri içerir.
Bağlantılı resimler:
- Bağlantılı resimlerin bir eylemi vardır ve alternatif metin gerektirir.
- Alternatif metinde bağlantının amacını açıklayın.
Renk kontrastı:
- Bilgi grafikleri, grafikler, çizelgeler ve bağlantılı simgeler gibi bilgileri ileten görsellerin kontrast oranı en az 3:1 olmalıdır. Örneğin, simgenin rengi arka plan rengine çok benziyorsa, bir ziyaretçi bir sosyal medya simgesini gözden kaçırabilir.
- bu Webaim renk kontrastı denetleyicisi bir ön plan renginin arka plan rengine göre en az 3:1 kontrast oranına sahip olup olmadığını değerlendirmek için kullanışlı bir araçtır.
5. Videolar
Altyazılar:
- Altyazı, sesli videolar için bir gerekliliktir.
- YouTube ve Vimeo gibi bazı hizmetler videolara altyazı ekler, ancak bunlar ekibiniz tarafından manuel olarak düzenlenmesini gerektirebilir. Otomatik altyazı oluşturma genellikle sözcükleri atlar veya yanlış sözcükleri ekler.
Transkript:
- Transkriptler aslında video için bir komut dosyasıdır.
- Transkriptler, videoyu herhangi bir nedenle izleyemeyen ziyaretçiler için bir metin alternatifi sunar.
- Transkriptler, görme engelli ziyaretçiler için sesli olmayan videolara bağlam sağlar.
- Çevreleyen içerik video için bir metin alternatifiyse, transkript gerekli değildir.
Açıklamalar:
- Açıklamalar, bir video sırasında oluşan görsel bilgileri sesli olarak açıklar.
- Açıklamalar, görsel veya bilişsel bozuklukları olan ziyaretçiler için bağlam sağlamaya yardımcı olur.
Arka plan sesi:
- Arka plan sesi, konuşma içeriğine müdahale etmemelidir. İnsanlar konuşurken sesi kısın veya arka plan sesini kaldırın.
İşaret dili:
- Videolarınızı daha da erişilebilir kılmak için işaret dili eklemeyi düşünün.
6. Tablolar
- Tablolar, uygun ARIA özellikleri bir web geliştiricisinden yardım gerektirebilecek erişilebilir olması.
- Ekran okuyucu kullanılırken tablo hücreleri mantıklı bir sırayla okunmalıdır; bu, elde edilmesi zor olabilir ve bir web geliştiricisinden yardım gerektirebilir.
- Görsel görünüm, bir web geliştiricisi tarafından ek stil gerektirebilecek tüm ekran boyutlarına uyacak şekilde esnek olmalıdır.
- Karmaşık tablolardan kaçının veya basitleştirin.
- Bazı ekran okuyucular karmaşık tabloları desteklemez.
- Tablo hücreleri asla boş olmamalıdır
- Tablo hücreleri uygun başlıklarla ilişkilendirilmelidir.
- Uygun işaretlemeyi kullanarak bir başlık satırı belirtin.
- Başlık hücrelerini şununla işaretleyin:
<th>ve veri hücreleri ile
<td>.
- Tablo hakkında daha fazla bilgi sağlamak için bir başlık ekleyin.
- Altyazılar, ziyaretçilerin tablonun konusunu anlamasına yardımcı olur.
- Kullan
<caption>başlık eklemek için etiketleyin.
7. Açılır modlar ve bindirmeler
- Otomatik olarak görüntülenen açılır pencerelerden kaçının. Otomatik açılır pencereler ziyaretçiler için rahatsız edicidir.
- Pop-up’lar, yalnızca ziyaretçi, açılır pencereyi açan bir düğme veya bağlantıya tıklayarak etkileşimi tetiklediğinde görüntülenmelidir. Örneğin, bir arama düğmesi, ziyaretçi düğmeyi tıklattığında arama formunu açılır bir modda görüntüler.
8. iFrame’ler
- Bir iFrame’in içeriği de erişilebilir olmalıdır.
- iFrame’ler genellikle üçüncü taraf web sitelerindendir ve yalnızca yaratıcıları tarafından düzenlenebilir, bu nedenle yalnızca erişilebilir iFrame’leri kullandığınızdan emin olun.
- Tüm iFrame’ler bir başlık gerektirir.
- Başlık, iFrame’in amacının kısa bir açıklaması olmalıdır.
- Örnek iFrame kodu:
<iframe src="https://www.orbitmedia.com/blog/accessible-content-tips/myiframe.html" title="Your title goes here">
- iFrame yerleştirme kodları, HTML sunum özelliklerine sahip olmamalıdır. Örneğin, kaldır
frameborder="0"iFrame yerleştirme kodundan.
9. PDF’ler ve diğer indirilebilir içerikler
- PDF’ler, Word belgeleri ve diğer indirilebilir dosyalar da erişilebilir olmalıdır.
- Adobe, PDF’lerin erişilebilirliğini oluşturmak ve doğrulamak için kullanılabilecek kaynaklara sahiptir. Daha fazla bilgi bulabilirsiniz burada.
- Microsoft, erişilebilir Word belgeleri oluşturmaya ilişkin yönergeler sağlar burada.
- Erişilebilir dokümanlar oluşturma hakkında daha fazla bilgiyi Google Drive’da bulabilirsiniz. burada.
Diğer ipuçları
- Ziyaretçilere erişilebilirliğin sizin için önemli olduğunu bildirmek için web sitenizin alt bilgisindeki bir sayfaya bir erişilebilirlik bildirimi ekleyin. Kontrol et SiteImprove erişilebilirlik bildirimi oluşturucu bir esinti yaratmak için.
- Web sitenizin, ziyaretçilerin göz atabileceği bir site haritasına sahip olduğundan emin olun.
- Formları kısa tutun ve ziyaretçilerinizin hatalardan kaçınmalarına yardımcı olacak talimatlar sağlayın.
Çok sayıda sayfa ve gönderi türü içeren büyük bir web siteniz varsa, bu karışıma erişilebilirlik eklemek göz korkutucu gelebilir, ancak olması gerekmiyor. Erişilebilirlik hakkında bilgi sahibi olmak için bu ipuçlarını bir sayfaya uygulayarak küçük başlayın. Ek olarak, bir ekleyebilirsiniz erişilebilirlik beyanı ziyaretçilerinize erişilebilirliğin siteniz için devam eden bir çalışma olduğunu bildirmek için web sitenize.
Erişilebilirlik hakkında bir sorunuz varsa, aşağıdaki yorumlara bırakın.