Belge

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.

Yapılmaması gerekenler:
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
Yapılması gerekenler
<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.

Yapılmaması gerekenler:
<html>...</html>
Yapılması gerekenler
<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.

Yapılmaması gerekenler:
<html lang="ar,en,fr,pt">...</html>
Birden çok dil desteklenmez.
Yapılması gerekenler
<html lang="ar">...</html>
Yalnızca sayfanın birincil dilini ayarlayın. Bu örnekte dil Arapçadır.

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.

Yapılmaması gerekenler:
<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>
Yapılması gerekenler
<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.

Yapılmaması gerekenler:
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
Yapılması gerekenler
<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?

Merak etmeyin, AT her dili otomatik olarak okuyabilir.
Bazı AT'lerin dil algılama becerileri olabilir ancak AT'nin doğru tahminde bulunacağını garanti edemezsiniz.
<html> öğesine tüm dilleri dahil edin. Örneğin <html lang="en,lt,pl,pt">
lang özelliği, kendisiyle ilişkilendirilmiş yalnızca bir dil içerebilir.
<html> için birincil lang ve içeriği farklı bir dilde olan tüm öğeler için ek diller ayarlayın.
AT, dokümanı okumak için birincil olarak <html> dil özelliğini kullanacaktır. Çok dilli metniniz varsa ilgili öğeye (bölüm veya paragraf gibi) iki harfli ISO kodunu doğru olan bir lang özelliği eklediğinizden emin olun.