Semantik ile erişilebilirlik (a11y) arasındaki fark…

Semantik, makinelerin (tarayıcılar, ayrıştırıcılar, arama robotları) içerik yapısını ve anlamını anlamasına yardımcı olur. Erişilebilirlik (a11y), içeriğin çeşitli fiziksel veya bilişsel sınırlamaları olan insanlar tarafından anlaşılır ve kullanışlı olmasını amaçlar.

Semantik etiketler

<article>, <nav>, <aside>, <footer>, <h1>-<h6> gibi semantik HTML etiketlerinin kullanımı, sayfa öğelerine anlam kazandırır. Örneğin:

<article>
  <h2>Makale başlığı</h2>
  <p>Makale metni...</p>
</article>

Bu, tarayıcıların belge yapısını doğru şekilde yorumlamasına yardımcı olur.

Erişilebilirlik (a11y)

Erişilebilirlik birçok yönü kapsar:

Semantik: Semantik etiketlerin doğru kullanımı, erişilebilirliğin bir parçasıdır çünkü yardımcı teknolojilerin (ekran okuyucular) içerik yapısını ve amacını anlamasına yardımcı olur.
ARIA-özellikleri: aria-label, aria-describedby, aria-hidden, role gibi ek özellikler, HTML semantiği yeterli olmadığında yardımcı teknolojilere ek bilgi sağlar.
```
<button aria-label="Diyalog kutusunu kapat">
  <img src="close.svg" alt="">
</button>
```
Kontrast: Görme engelli kişiler için metin ve arka plan arasında yeterli kontrast.
Klavyeyle gezinme: Sayfada gezinme ve öğelerle etkileşim kurma imkanı, sadece klavye kullanılarak.
Görseller için alternatif metin (alt): Görüntünün içeriğini, görmeyen kullanıcılar için açıklama.
```
<img src="cat.jpg" alt="Kara kedi pencere pervazında uyuyor.">
```
Başlık yapısı: Ekran okuyucularla kolay gezinme için mantıksal başlık hiyerarşisi (<h1> - <h6>).

İlişki

Semantik, erişilebilirlik için önemli bir temel oluşturur. İyi yapılandırılmış, semantik öğelerle donatılmış bir sayfa, erişilebilir hale getirmeyi çok kolaylaştırır. Ancak, semantik tek başına yeterli değildir; ARIA özellikleri, odak yönetimi ve yeterli kontrast sağlama gibi ek önlemler genellikle gereklidir.

Semantik ile erişilebilirlik (a11y) arasındaki fark nedir?