Yapının yanı sıra, dijital erişilebilirlik için geliştirme ve tasarım yaparken göz önünde bulundurulması gereken birçok destekleyici HTML öğesi vardır. Learn Accessibility kursunda birçok öğeyi ele alıyoruz.
Bu modülde, diğer modüllerin hiçbirine tam olarak uymayan ancak anlaşılması faydalı olan çok özel öğelere odaklanıyoruz.
Sayfa başlığı
HTML <title> öğesi, kullanıcının deneyimleyeceği sayfanın veya ekranın içeriğini tanımlar. HTML belgesinin <head> bölümünde bulunur ve sayfanın <h1> veya ana konusuna eşdeğerdir. Başlık içeriği, tarayıcı sekmesinde gösterilir ve kullanıcıların hangi sayfayı ziyaret ettiklerini anlamalarına yardımcı olur ancak web sitesinde veya uygulamanın kendisinde gösterilmez.
Tek sayfalık uygulamalarda (SPA) kullanıcılar çok sayfalı web sitelerinde olduğu gibi sayfalar arasında gezinmediğinden <title> biraz farklı şekilde işlenir. Tek sayfa uygulamalarında, JavaScript çerçevesine bağlı olarak document.title özelliğinin değeri manuel olarak veya yardımcı bir paketle eklenebilir. Ekran okuyucu kullanıcısına güncellenen sayfa başlıklarını duyurmak biraz daha fazla çalışma gerektirebilir.
Açıklayıcı sayfa başlıkları hem kullanıcılar hem de arama motoru optimizasyonu (SEO) için iyidir. Ancak aşırıya kaçıp çok fazla anahtar kelime eklemeyin. Başlık, bir AT kullanıcısı bir sayfayı ziyaret ettiğinde duyurulan ilk şey olduğundan doğru, benzersiz ve açıklayıcı olmasının yanı sıra kısa ve öz olmalıdır.
Sayfa başlıkları yazarken, önce iç sayfayı veya önemli içeriği "önceden yüklemek", ardından da önceki sayfaları veya bilgileri eklemek en iyi uygulamadır. Bu sayede, AT kullanıcıları daha önce duydukları bilgileri tekrar dinlemek zorunda kalmaz.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>
Dil
Sayfa dili
Sayfa dili özelliği (lang), sayfanın tamamı için varsayılan dili ayarlar. Bu özellik, <html> etiketine eklenir. Her sayfaya geçerli bir dil özelliği eklenmelidir. Bu özellik, AT'nin hangi dili kullanması gerektiğini belirtir.
Birçok AT, genişletilmiş dil kodlarını desteklemediğinden daha fazla AT kapsamı için iki karakterli ISO dil kodları kullanmanız önerilir.
Dil özelliği tamamen eksik olduğunda AT, kullanıcının programladığı dili varsayılan olarak kullanır. Örneğin, bir AT İspanyolca olarak ayarlanmışsa ancak bir kullanıcı İngilizce bir web sitesini veya uygulamayı ziyaret ettiyse AT, İngilizce metni İspanyolca aksan ve ritimle okumaya çalışır. Bu kombinasyon, kullanılamayan bir dijital ürün ve hayal kırıklığına uğramış bir kullanıcıyla sonuçlanır.
<html>...</html>
<html lang="en">...</html>
Lang özelliği yalnızca bir dille ilişkilendirilebilir. Bu nedenle, sayfada birden fazla dil olsa bile <html> özelliği yalnızca bir dil içerebilir. lang öğesini sayfanın birincil diline ayarlayın.
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
Bölüm dili
İçeriğin kendisinde dil geçişleri için dil özelliğini (lang) de kullanabilirsiniz. Tam sayfa dili özelliğiyle aynı temel kurallar geçerlidir. Ancak bu özelliği <html> etiketine değil, uygun sayfa içi öğeye eklersiniz.
<html> öğesine eklediğiniz dilin, içerilen tüm öğelere yansıtıldığını unutmayın. Bu nedenle, sayfanın birincil dilini her zaman en üst düzey lang özelliği olarak ayarlayın.
Farklı bir dilde yazılmış sayfa içi öğeler için lang özelliğini uygun sarmalayıcı öğeye ekleyin. Bu işlem, söz konusu öğe kapatılana kadar üst düzey dil ayarını geçersiz kılar.
<html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
"Kas sa räägid inglise keelt?" when I met someone new.</p>
</div>
</body>
</html><html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
<span lang="et">"Kas sa räägid inglise keelt?"</span>
when I met someone new.</p>
</div>
</body>
</html>iFrame'ler
iFrame öğesi (<iframe>), sayfada başka bir HTML sayfasını veya üçüncü tarafın içeriğini barındırmak için kullanılır. Temel olarak başka bir web sayfasını üst sayfanın içine yerleştirir. IFrame'ler genellikle reklamlar, yerleştirilmiş videolar, web analizi ve etkileşimli içerikler için kullanılır.
<iframe> öğenizi erişilebilir hale getirmek için göz önünde bulundurmanız gereken birkaç nokta vardır. İlk olarak, farklı içeriğe sahip her <iframe>, üst etiketin içinde bir başlık öğesi içermelidir. Bu başlık, AT kullanıcılarına <iframe> içindeki içerik hakkında daha fazla bilgi sağlar.
İkinci olarak, en iyi uygulama olarak, <iframe> etiket ayarlarında kaydırmayı "otomatik" veya "evet" olarak ayarlamanız önerilir. Bu sayede az gören kullanıcılar, aksi takdirde göremeyecekleri <iframe> içindeki içeriklere kaydırabilir. İdeal olarak, <iframe> kapsayıcısı yüksekliği ve genişliği açısından da esnek olmalıdır.
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
<iframe title="Google Pixel - Lizzo in Real Tone" src="https://www.youtube.com/embed/3obixhGZ5ds" scrolling="auto"> </iframe>