Dijital erişilebilirlik için geliştirme ve tasarım yaparken yapının yanı sıra dikkate alınması gereken birçok destekleyici HTML öğesi vardır. Erişilebilirlik Eğitimi kursu boyunca birçok konuya değineceğiz.
Bu modül, diğer modüllerden hiçbirine tam olarak uymayan ancak anlaşılması faydalı olan çok spesifik öğelere odaklanıyor.
Sayfa başlığı
HTML <title> öğesi, kullanıcının karşılaşacağı sayfanın veya ekranın içeriğini tanımlar. HTML belgesinin <head> bölümünde bulunur ve <h1> veya sayfanın ana konusuna eşdeğerdir. Başlık içeriği, tarayıcı sekmesinde görüntülenir ve kullanıcıların hangi sayfayı ziyaret ettiklerini anlamalarına yardımcı olur ancak web sitesinde veya uygulamada gösterilmez.
Tek sayfalık bir uygulamada (SPA) <title>, kullanıcılar çok sayfalı web sitelerinde olduğu gibi sayfalar arasında gezinmediğinden biraz daha farklı bir şekilde işlenir. SPA'larda document.title özelliğinin değeri, JavaScript çerçevesine bağlı olarak manuel olarak veya bir yardımcı paket ile eklenebilir. Güncellenen sayfa başlıklarını ekran okuyucu kullanıcısına duyurmak için ek çalışma gerekebilir.
Açıklayıcı sayfa başlıkları hem kullanıcılar hem de arama motoru optimizasyonu (SEO) için faydalıdır, ancak aşırıya kaçmayın ve çok fazla anahtar kelime eklemeyin. Başlık, AT kullanıcısı bir sayfayı ziyaret ettiğinde duyurulan ilk şey olduğundan doğru, benzersiz ve açıklayıcı olduğu kadar kısa ve öz olmalıdır.
Sayfa başlıklarını yazarken, önce iç sayfayı veya önemli içeriği "önden yüklemek", ardından ondan önceki sayfaları veya bilgileri eklemek de en iyi uygulamadır. Bu sayede, AT kullanıcılarının önceden duymuş oldukları bilgileri uzun süre kafalarına takmak zorunda kalmazlar.
<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. AT'ye hangi dilde kullanılması gerektiğini işaret ettiğinden her sayfaya geçerli bir dil özelliği eklenmelidir.
Çoğu genişletilmiş dil kodlarını desteklemediğinden daha geniş AT kapsamı için iki karakterli ISO dil kodları kullanmanız önerilir.
Bir dil özelliği tamamen eksik olduğunda AT varsayılan olarak kullanıcının programlanmış diline ayarlanır. Örneğin, AT İspanyolca olarak ayarlıyken bir kullanıcı İngilizce bir web sitesini veya uygulamayı ziyaret ederse AT, İngilizce metni İspanyolca aksan ve kadansla okumaya çalışır. Bu kombinasyon, dijital ürünün kullanılamaz hale getirilmesine ve kullanıcının hayal kırıklığına uğramasına yol açar.
<html>...</html>
<html lang="en">...</html>
lang özelliği yalnızca bir dille ilişkilendirilebilir. Bu, sayfada birden fazla dil olsa bile <html> özelliğinin yalnızca bir dile sahip olabileceği anlamına gelir. lang dilini sayfanın birincil diline ayarlayın.
<html lang="ar,en,fr,pt">...</html>Birden fazla dil desteklenmez.
<html lang="ar">...</html>Yalnızca sayfanın birincil dilini ayarlayın. Bu örnekte, dil Arapçadır.
Bölüm dili
Ayrıca, içeriğin kendisindeki dil değişiklikleri için dil özelliğini (lang) de kullanabilirsiniz. Tam sayfa dil özelliği için aynı temel kurallar geçerlidir. Tek fark, bu özelliği <html> etiketi yerine ilgili sayfa içi öğeye eklemenizdir.
<html> öğesine eklediğiniz dilin, içerdiği tüm öğelere kademeli olarak indiğini unutmayın. Bu nedenle, her zaman ilk olarak sayfa üst düzey lang özelliğinin birincil dilini ayarlayın.
Farklı bir dilde yazılmış sayfa içi öğeler için bu lang özelliğini uygun sarmalayıcı öğesine ekleyin. Bu işlem, üst düzey dil ayarını söz konusu öğe kapatılana kadar 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>
iFrames
iFrame öğesi (<iframe>), başka bir HTML sayfasını veya üçüncü tarafın içeriğini sayfada barındırmak için kullanılır. Esasen üst sayfaya başka bir web sayfası yerleştirir. iFrame'ler yaygın olarak reklamlar, yerleşik videolar, web analizleri ve etkileşimli içerik için kullanılır.
<iframe> cihazınızı erişilebilir hale getirmek için dikkat etmeniz gereken birkaç nokta vardır. Öncelikle, 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> etiketi ayarlarında kaydırma işlemini "auto" veya "yes" olarak ayarlamanız önerilir. Bu sayede az gören kullanıcılar <iframe> içindeki içeriği kaydırarak başka şekilde göremeyebilirler. İdeal olarak, <iframe> kapsayıcısının yüksekliği ve genişliği de 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>
Öğrendiklerinizi sınayın
Doküman erişilebilirliği bilginizi test edin.
Siteniz çok dilli, tek bir sayfada birden fazla dilin gösterildiği bir çevrimiçi ders kitabı olmalıdır. Yardımcı teknolojilere kopyanın dilini bildirmenin en iyi yolu nedir?
<html> öğesine dahil edin. Örneğin <html lang="en,lt,pl,pt">lang özelliği, kendisiyle ilişkili yalnızca bir dile sahip olabilir.<html> için birincil lang ve farklı dilde içeriği olan öğelerde ek diller ayarlayın.<html> dil özelliğini kullanır. Çok dilli metniniz varsa karşılık gelen öğeye (bölüm veya paragraf gibi) iki harfli doğru ISO kodu ile bir lang özelliği eklediğinizden emin olun.