Belge

Dijital erişilebilirlik için içerik oluşturup tasarlarken yapının yanı sıra birçok destekleyici HTML öğesi de göz önünde bulundurulmalıdır. Erişilebilirlik hakkında bilgi edinme kursunda birçok öğeyi ele alıyoruz.

Bu modülde, diğer modüllerin hiçbirine tam olarak uymayan ancak anlaşılması yararlı olan çok özel öğelere odaklanılır.

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 konusuyla 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 uygulamada gösterilmez.

Kullanıcılar çok sayfalı web sitelerinde olduğu gibi sayfalar arasında gezinmediğinden, tek sayfalık uygulamalarda (SPA'lar) <title> biraz farklı bir şekilde ele alınır. SPA'lar için document.title mülkünün değeri, JavaScript çerçevesine bağlı olarak manuel olarak veya yardımcı bir paket tarafından eklenebilir. Güncellenen sayfa başlıklarını ekran okuyucu kullanıcılarına duyurmak için ek çalışmalar yapmanız gerekebilir.

Açıklayıcı sayfa başlıkları hem kullanıcılar hem de arama motoru optimizasyonu (SEO) için iyidir ancak çok fazla anahtar kelime eklemekten kaçının. Başlık, AT kullanıcısı bir sayfayı ziyaret ettiğinde ilk duyurulan şey olduğundan doğru, benzersiz, açıklayıcı ve kısa olmalıdır.

Sayfa başlıkları yazarken, önce iç sayfayı veya önemli içeriği "ön yüklemek", ardından önceki sayfaları veya bilgileri eklemek de en iyi uygulamadır. Bu sayede, AT kullanıcılarının daha önce duydukları bilgileri dinlemeleri gerekmez.

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), sayfanın tamamı için varsayılan dili ayarlar. Bu özellik, <html> etiketine eklenir. AT'ye hangi dili kullanması gerektiğini bildirdiği için her sayfaya geçerli bir dil özelliği eklenmelidir.

Çoğu genişletilmiş dil kodlarını desteklemediğinden, daha geniş bir AT kapsamı için iki karakterli ISO dil kodlarını kullanmanız önerilir.

Bir dil özelliği tamamen eksik olduğunda AT, varsayılan olarak kullanıcının programlanmış dilini kullanır. Örneğin, bir AT İspanyolca olarak ayarlandıysa ancak kullanıcı İngilizce bir web sitesini veya uygulamayı ziyaret ettiyse AT, İngilizce metni İspanyolca aksan ve ritimiyle okumaya çalışır. Bu kombinasyon, kullanılamayan bir dijital ürüne ve hayal kırıklığına uğramış bir kullanıcıya neden olur.

Yapılmaması gerekenler:
<html>...</html>
Yapılması gerekenler
<html lang="en">...</html>

lang özelliğiyle ilişkilendirilmiş yalnızca bir dil olabilir. Bu, sayfada birden fazla dil olsa bile <html> özelliğinin yalnızca bir dil içerebileceği anlamına gelir. lang değerini sayfanın birincil diline ayarlayın.

Yapılmaması gerekenler:
<html lang="ar,en,fr,pt">...</html>
 Birden fazla dil desteklenmez.
Yapılması gerekenler
<html lang="ar">...</html>
 Yalnızca sayfanın birincil dilini ayarlayın. Bu durumda dil Arapça'dır.

Bölüm dili

İçeriğin kendisinde dil geçişleri için dil özelliğini (lang) de kullanabilirsiniz. Tam sayfa dil özelliğiyle aynı temel kurallar geçerlidir. Tek fark, bu özelliği <html> etiketine değil, uygun sayfa içi öğeye eklemenizdir.

<html> öğesine eklediğiniz dilin, kapsanan tüm öğelere uygulanacağını unutmayın. Bu nedenle, sayfanın birincil dilini her zaman üst düzey lang özelliğine ayarlayın.

Farklı bir dilde yazılmış sayfa içi öğeler için bu lang özelliği 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.

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>), sayfa içinde başka bir HTML sayfasını veya üçüncü taraf içeriğini barındırmak için kullanılır. Temel olarak, ana sayfaya başka bir web sayfası yerleştirir. iFrame'ler genellikle reklamlar, yerleştirilmiş videolar, web analizi ve etkileşimli içerikler için kullanılır.

<iframe>'ünüzü erişilebilir hale getirmek için göz önünde bulundurmanız gereken birkaç nokta vardır. Öncelikle, farklı içeriğe sahip her <iframe>, üst öğe 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 özelliğini "otomatik" veya "evet" olarak ayarlamak iyi bir fikirdir. Bu sayede, görme yetisi düşük kullanıcılar <iframe> içindeki içeriği kaydırarak görmeyebilecekleri içeriklere ulaşabilir. İdeal olarak <iframe> kapsayıcının yüksekliği ve genişliği de esnek olmalıdır.

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 test etme

Belge erişilebilirliği hakkındaki bilgilerinizi test edin.

Siteniz, birden fazla dilin tek bir sayfada gösterildiği çok dilli bir online ders kitabıysa Yardımcı teknolojiye metnin dilini bildirmenin en iyi yolu nedir?

Endişelenmeyin, AT her dili otomatik olarak okuyabilir.
Bazı yapay zeka destekli araçlar dil algılama becerilerine sahip olsa da bu araçların doğru tahminde bulunacağını garanti edemezsiniz.
Tüm dilleri <html> öğesine dahil edin. Örneğin <html lang="en,lt,pl,pt">
lang özelliğiyle ilişkilendirilmiş yalnızca bir dil olabilir.
<html> için birincil lang'ü ve farklı dildeki içeriklere sahip öğelerde ek dilleri ayarlayın.
AT, belgeyi okumak için öncelikle <html> dil özelliğini kullanır. Çok dilli metniniz varsa ilgili öğeye (ör. bölüm veya paragraf) doğru iki harfli ISO kodunu içeren bir lang özelliği eklediğinizden emin olun.