Yapının yanı sıra, bir dizi destekleyici HTML öğesi de tasarlama ve geliştirme sürecidir. Eğitim boyunca Erişilebilirlik kursunda birçok unsuru ele alıyoruz.
Bu modülde, hiçbirine uymayan çok özel unsurlara ama anlaşılması önemlidir.
Sayfa başlığı
HTML <title>
öğesi, kullanıcının gitmek üzere olduğu sayfanın veya ekranın içeriğini tanımlar
sahip olacaksınız. Bu adımları
<head>
bölümü
Bir HTML belgesidir ve <h1>
ya da sayfanın ana konusuna eşdeğerdir. İlgili içeriği oluşturmak için kullanılan
başlık içeriği tarayıcı sekmesinde görüntülenir ve kullanıcıların hangi
ancak web sitesinde veya uygulamanın kendisinde görüntülenmiyor.
Tek sayfalık uygulamada (SPA),
<title>
, kullanıcılar herhangi bir sitede gezinmediğinden biraz farklı bir şekilde ele alınır
Tıpkı çok sayfalı web sitelerinde olduğu gibi. SPA'lar için
document.title
özellikleri bağlı olarak manuel olarak veya bir yardımcı paketle eklenebilir.
JavaScript çerçevesi. Karşınızda
güncellenmiş sayfa başlıkları
bazı ek işlemler yapmanız gerekebilir.
Açıklayıcı sayfa başlıkları hem kullanıcılar hem de arama motoru optimizasyonu (SEO) ile çok fazla anahtar kelime eklememeniz gerekir. Başlık ilk olduğu için bir sayfayı ziyaret ettiğinde duyurulan şey doğru, benzersiz ve ancak kısa ve öz olmalıdır.
Sayfa başlıklarını yazarken "önden yükleme" de bir en iyi uygulamadır. iç mekan önce sayfa veya önemli içeriği ekleyin, ardından önceki sayfaları veya bilgileri ekleyin sonra. Bu şekilde, AT kullanıcıları ellerindeki bilgileri duymuşsunuzdur.
<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
), tüm sayfa için varsayılan dili ayarlar. Bu özellik <html>
etiketine eklendi. AT'ye kullanması gereken dile işaret ettiği için her sayfaya geçerli bir dil özelliği eklenmelidir.
İki karakter kullanmanız önerilir ISO dil kodları olduğundan, birçoğu AT'yi desteklemediğinden, genişletilmiş dil kodları.
Bir dil özelliği tamamen eksik olduğunda AT, varsayılan olarak kullanıcının programlanmış dili. Örneğin, AT İspanyolca olarak ayarlanırken İngilizce bir web sitesini veya uygulamayı ziyaret etmişse İspanyolca aksanlı ve kadanslı metinler yazılmalıdır. Bu kombinasyon, kullanılamaz hem de sinirli bir kullanıcıyı bulur.
<html>...</html>
<html lang="en">...</html>
"lang" özelliğiyle yalnızca tek bir dil ilişkilendirilebilir. Bunun anlamı şudur:
Birden fazla dil olsa bile <html>
özelliği yalnızca bir dile sahip olabilir.
dillerini kontrol edebilirsiniz. lang
öğesini sayfanın birincil dili olarak ayarlayın.
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
Bölüm dili
İçeriğin kendisindeki dil geçişleri için dil özelliğini (lang) de kullanabilirsiniz. Tam sayfa dil özelliği için aynı temel kurallar geçerlidir. Tek fark, özelliği <html>
etiketi yerine uygun sayfa içi öğeye eklemenizdir.
<html>
öğesine eklediğiniz dilin, tüm öğelerin
bu nedenle her zaman sayfanın birincil dilini ayarlayın
üst düzey lang
özelliğine sahip olmalıdır.
Farklı bir dilde yazılmış sayfa içi öğeler için şunu ekleyin: lang
özelliğini uygun sarmalayıcı öğesine eklediğinizden emin olun. Bu,
üst düzey dil ayarını bu öğe kapatana kadar sürdürür.
<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>
)
Başka bir HTML sayfasını veya üçüncü tarafa ait içeriği sayfada barındırmak için kullanılır. Google
ana sayfaya başka bir web sayfası yerleştirir. iFrame'ler genellikle
Reklamlar, yerleştirilmiş videolar, web analizi ve etkileşimli
içerik.
<iframe>
cihazınızı erişilebilir hale getirmek için dikkate almanı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çerikle ilgili daha fazla bilgi sağlar.
İkinci olarak, en iyi uygulama olarak, kaydırmayı "otomatik" olarak ayarlamak veya "evet" <iframe>
etiketi ayarlarında yapabilirsiniz. Bu sayede az gören kişiler, <iframe>
içinde normalde göremeyecekleri içeriğe gidebilir. İdeal olarak <iframe>
kapsayıcısının yüksekliği ve genişliği de esnektir.
<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 hakkındaki bilginizi test edin.
Siteniz, tek sayfada birden çok dilin gösterildiği çok dilli çevrimiçi bir ders kitabıdır. Yardımcı teknolojiye metnin dilini anlamanın en iyi yolu nedir?
<html>
öğesine tüm dilleri dahil edin. Örneğin <html lang="en,lt,pl,pt">
<html>
için birincil lang
ve içeriği farklı bir dilde olan tüm öğeler için ek diller ayarlayın.