Anlamsal HTML

100'den fazla HTML öğesi ve özel öğeler oluşturma olanağıyla, içeriğinizi işaretlemenin sayısız yolu vardır; ama bazı yönler (özellikle anlamsal) diğerlerinden daha iyidir.

Anlamsal, "anlamla ilgili" anlamına gelir. Anlamsal HTML yazma, içeriğinizi her öğenin görünümüne değil, anlamına göre yapılandırmak için HTML öğelerini kullanmak anlamına gelir.

Bu seride henüz çok fazla HTML öğesi ele alınmamıştır. Ancak, aşağıdaki iki kod snippet'i, anlamsal işaretlemenin, içeriğe nasıl bağlam sağlayabileceğini, HTML bilmeden bile gösterilmektedir. Kaydırma işlemini önlemek için her ikisi de ipsum lorem yerine kelime sayısı kullanır. "Otuz kelime"yi genişletmek için hayal gücünüzü kullanabilirsiniz. 30 kelimeye böleriz:

İlk kod snippet'i, anlamsal değeri olmayan iki öğe olan <div> ve <span> öğelerini kullanıyor.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</div>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

Bu kelimelerin ne anlama geldiğine dair bir fikriniz var mı? Pek sayılmaz.

Bu kodu semantik öğelerle yeniden yazalım:

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

Hangi kod bloğu anlam aktardı? Sadece <div> ve <span> öğelerinin anlamsal olmayan öğelerini kullanarak, ilk kod bloğundaki içeriğin neyi temsil ettiğini gerçekten anlayamazsınız. Anlamsal öğelerle ikinci kod örneği, kodlayıcı olmayan bir kişinin bir HTML etiketiyle hiç karşılaşmadan amacı ve anlamı çözmesi için yeterli bağlam sağlar. Geliştiricinin, içeriği anlamasa bile (ör. yabancı dildeki içerik) sayfanın ana hatlarını anlaması için kesinlikle yeterli bağlam bilgisi sağlanır.

İkinci kod bloğunda, semantik öğeler anlam ve yapı sağladığından içeriği anlamadan bile mimariyi anlayabiliriz. İlk başlığın sitenin banner'ı olduğunu görebilirsiniz. <h1> büyük olasılıkla site adıdır. Altbilgi, site alt bilgisidir: Beş kelime, bir telif hakkı beyanı veya işletme adresi olabilir.

Anlamsal işaretleme yalnızca işaretlemeyi geliştiricilerin okumasını kolaylaştırmak için değildir; otomatik araçların işaretlemeyi çözmesine yardımcı olmak açısından büyük önem taşır. Geliştirici araçları, anlamsal öğelerin makine tarafından okunabilir bir yapı sağladığını da gösterir.

Erişilebilirlik nesne modeli (AOM)

Tarayıcı, alınan içeriği ayrıştırırken doküman nesne modelini (DOM) ve CSS nesne modelini (CSSOM) oluşturur. Ardından bir erişilebilirlik ağacı oluşturuyor. Ekran okuyucular gibi yardımcı cihazlar, içeriği ayrıştırıp yorumlamak için AOM'yi kullanır. DOM, dokümandaki tüm düğümleri içeren bir ağaçtır. AOM, DOM'nin anlamsal bir sürümü gibidir.

Bu doküman yapılarının her ikisinin de Firefox erişilebilirlik panelinde nasıl oluşturulduğunu karşılaştıralım:

Şekil 2'de, ikinci kod bloğunda dört önemli nokta rolü vardır. "Gezinme" için <header>, <main>, <footer> ve <nav> olarak adlandırılmış, anlamsal yer işaretlerini kullanır. Önemli noktalar, web içeriğinin yapısını sağlar ve ekran okuyucunun içeriğin önemli bölümlerini klavyeyle gezebilmesini sağlar.

<header> ve <footer>, başka önemli noktalara iç içe yerleştirilmediğinde sırasıyla banner ve contentinfo rollerini içeren önemli noktalardır. Chrome'un AOM'si bunu şu şekilde gösterir:

Chrome geliştirici araçlarına baktığınızda, anlamsal öğelerin kullanıldığı erişilebilirlik nesne modeli ile kullanmadığı zamanların erişilebilirlik nesne modeli arasında önemli bir fark olduğunu göreceksiniz.

Anlamsal öğe kullanımının erişilebilirliğe yardımcı olduğu ve anlamsız öğeler kullanmanın erişilebilirliği azalttığı açıkça görülüyor. HTML genellikle varsayılan olarak erişilebilir durumdadır. Geliştiriciler olarak görevimiz, HTML'nin varsayılan erişilebilir doğasını korumak ve kullanıcılarımız için erişilebilirliği en üst düzeye çıkarmaktır. AOM'yi geliştirici araçlarında inceleyebilirsiniz.

role özelliği

role özelliği, bir öğenin doküman bağlamında sahip olduğu rolü açıklar. role özelliği genel bir özelliktir. Diğer bir deyişle, bu serideki hemen hemen her şeyin tanımlandığı whatWG HTML spesifikasyonu yerine ARIA spesifikasyonu tarafından tanımlanan tüm öğelerde geçerlidir.

Anlamsal öğelerin her biri, bazıları bağlama bağlı olarak örtülü bir rol oynar. Firefox erişilebilirlik geliştirici araçları ekran görüntüsünde gördüğümüz gibi, üst düzey <header>, <main>, <footer> ve <nav> önemli noktalarıyken, <main> içine iç içe yerleştirilmiş <header> bölümü bir bölümdü. Chrome ekran görüntüsünde bu öğeler listeleniyor ARIA rolleri: <main> main, <nav> navigation ve dokümanın altbilgisi olduğu için <footer> contentinfo. Dokümanın üst bilgisi <header> olduğunda varsayılan rol banner olur ve bu rol, bölümü global site üstbilgisi olarak tanımlar. Bir bölüm öğesi içine <header> veya <footer> yerleştirildiğinde bu, önemli bir rol değildir. Her iki geliştirici aracı ekran görüntüleri bunu gösteriyor.

AOM'nin oluşturulmasında öğe rol adları önemlidir. Öğelerin anlamları veya "rol", yardımcı teknolojiler ve bazı durumlarda arama motorları için önemlidir. Yardımcı teknoloji kullanıcıları, içerikler arasında gezinmek ve içeriğin anlamını anlamak için semantiğinden yararlanır. Öğenin rolü, kullanıcının aradığı içeriğe hızlı bir şekilde erişmesini sağlar ve daha da önemlisi, rol, ekran okuyucu kullanıcısına odaklandıktan sonra etkileşimli bir öğeyle nasıl etkileşim kuracağı konusunda bilgi verir.

Düğmeler, bağlantılar, aralıklar ve onay kutuları gibi tüm etkileşimli öğelerin dolaylı rolleri vardır, tümü klavye sekme sırasına otomatik olarak eklenir ve tümü varsayılan kullanıcı işlemi desteğine sahiptir. Örtülü rol veya açık role değeri, kullanıcıyı öğeye özel varsayılan kullanıcı etkileşimleri beklemesi konusunda bilgilendirir.

role özelliğini kullanarak, etiketin belirttiğinden farklı bir rol de dahil olmak üzere herhangi bir öğeye rol verebilirsiniz. Örneğin <button>, dolaylı button rolüne sahiptir. role="button" ile herhangi bir öğeyi semantik olarak düğmeye dönüştürebilirsiniz: <p role="button">Click Me</p>.

Bir öğeye role="button" eklendiğinde ekran okuyuculara öğenin bir düğme olduğu bildirilir ancak öğenin görünümü veya işlevi değişmez. button öğesi, herhangi bir çalışma yapmanıza gerek kalmadan pek çok özellik sunar. button öğesi, dokümanın sekme sıralama sırasına otomatik olarak eklenir. Yani varsayılan olarak klavyeden odaklanılabilir. Hem Enter hem de Boşluk tuşu düğmeyi etkinleştirir. Düğmeler ayrıca HTMLButtonElement arayüzü tarafından sağlanan tüm yöntem ve özelliklere de sahiptir. Düğmeniz için anlamsal düğmeyi kullanmazsanız tüm bu özellikleri tekrar programlamanız gerekir. <button> ile çalışmak çok daha kolay.

Anlamsal olmayan kod bloğu için AOM ekran görüntüsüne geri dönün. Anlamsal olmayan öğelerin örtülü rollerinin olmadığını unutmayın. Her öğeye bir rol atayarak anlamsal olmayan sürümü anlamsal hale getirebiliriz:

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

role özelliği, herhangi bir öğeye anlam eklemek için kullanılabilir ancak bunun yerine ihtiyacınız olan örtülü role sahip öğeleri kullanmanız gerekir.

Anlamsal öğeler

Kendinize "Bu işaretleme bölümünün işlevini en iyi şekilde temsil eden öğe hangisidir?" diye sorarsınız. iş için en uygun unsuru seçmenize katkıda bulunur. Etiketlerin anlamsal anlamı olduğundan, seçtiğiniz öğe ve dolayısıyla kullandığınız etiketler görüntülediğiniz içeriğe uygun olmalıdır.

HTML, içeriğin görünümünü tanımlamak için değil, içeriği yapılandırmak için kullanılmalıdır. Görünüm, CSS'nin alanıdır. Bazı öğeler belirli bir şekilde görünecek şekilde tanımlanmış olsa da kullanıcı aracısı stil sayfasının bir öğeyi varsayılan olarak nasıl gösterdiğine bağlı olarak bir öğe kullanmayın. Bunun yerine, her öğeyi öğenin semantik anlamı ve işlevine göre seçin. HTML'yi mantıksal, anlamsal ve anlamlı bir şekilde kodlamak, CSS'nin amaçlandığı gibi uygulanmasını sağlamaya yardımcı olur.

Kodladığınızda iş için doğru öğeleri seçmek, HTML'nizi yeniden düzenlemeniz veya üzerinde yorum yapmanız gerekmeyeceği anlamına gelir. Bir iş için doğru öğeyi kullanmayı düşünürseniz, çoğunlukla o iş için doğru öğeyi seçersiniz. Aksi takdirde, muhtemelen gerekli olmayacaktır. Her bir öğenin anlamını ve doğru öğeyi seçmenin neden önemli olduğunu bilirseniz, genellikle çok fazla çaba sarf etmeden doğru seçimi yapabilirsiniz.

Sonrasında anlamsal öğeleri kullanarak doküman yapısına göz atın.

Öğrendiklerinizi sınayın

Anlamsal HTML bilginizi test edin.