Technical Tutorials

Gerçekten erişilebilir web uygulamaları oluşturmak sadece yönergeleri takip etmek değil, aynı zamanda yeteneklerinden bağımsız olarak her kullanıcının içeriğinizle etkili bir şekilde gezinebileceği ve etkileşim kurabileceği garantiyi vermektedir. Bu kapsamlı kılavuzda, hem semantik HTML5 öğelerini hem de ARIA landmarları kullanarak tüm kullanıcılar için sorunsuz çalışan uygulamalar inşa etme konusunda nasıl ilerleyeceğimizi inceleyeceğiz.

Temel Kavramların Anılması: Semantik HTML5 Öğeleri

Semantik HTML5 öğeleri, erişilebilir web geliştirme için temel taşlardır. Genel div ve span öğelerinden farklı olarak, semantik öğeler içerik yapısını ve amacını anlamak için yardımcı olan içsel anlam taşır.

<header>
  <h1>Şirket Adı</h1>
  <nav>
    <ul>
      <li><a href="/">Ana Sayfa</a></li>
      <li><a href="/about">Hakkımızda</a></li>
      <li><a href="/contact">İletişim</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>Hizmetlerimiz</h2>
    <article>
      <h3>Web Geliştirme</h3>
      <p>Tepki veren, erişilebilir web siteleri oluştururuz.</p>
    </article>
  </section>
</main>

<footer>
  <p>© 2023 Şirket Adı. Tüm hakları saklıdır.</p>
</footer>

ARIA Landmark: Yapısal Semantikleri Geliştirme

ARIA (Accessible Rich Internet Applications) landmark'lar, ekran okuyucular ve diğer yardımcı teknolojilerin sayfada yer alan farklı bölgelerin düzenini ve amacını anlamasına yardımcı olan ek semantik bilgiler sağlar. Bu landmark'lar, kapsamlı bir erişilebilirlik çerçevesi oluşturmak için semantik HTML ile birlikte çalışır.

<!-- Semantik HTML ile ARIA landmark kullanımı -->
<header role="banner">
  <h1>Web Sitesi Başlığı</h1>
  <nav role="navigation">
    <!-- Navigasyon içeriği -->
  </nav>
</header>

<main role="main">
  <article role="article">
    <header>
      <h2>Makale Başlığı</h2>
    </header>
    <section role="region">
      <h3>İçerik Bölümü</h3>
      <p>Makale içeriği buraya gelir.</p>
    </section>
  </article>
</main>

<aside role="complementary">
  <h3>İlgili İçerik</h3>
  <p>Kenar çubuğu içeriği.</p>
</aside>

<footer role="contentinfo">
  <p>Alt bilgi bilgileri.</p>
</footer>

Pratik Uygulama Stratejileri

Gerçek hayattan bir örnek üzerinden hem semantik HTML hem de ARIA landmark'ların nasıl uygulanacağını inceleyelim:

<!-- Tam erişilebilir sayfa yapısı -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Erişilebilir Web Uygulaması</title>
</head>
<body>
  <header role="banner">
    <h1>Erişilebilir Uygulamam</h1>
    <nav role="navigation" aria-label="Ana navigasyon">
      <ul>
        <li><a href="#home">Ana Sayfa</a></li>
        <li><a href="#about">Hakkımızda</a></li>
        <li><a href="#services">Hizmetler</a></li>
        <li><a href="#contact">İletişim</a></li>
      </ul>
    </nav>
  </header>

  <main role="main">
    <section id="home">
      <h2>Hoş Geldiniz</h2>
      <p>Bu, erişilebilir bir web sayfasının örneğidir.</p>
    </section>

    <section id="services">
      <h2>Hizmetlerimiz</h2>
      <article>
        <h3>Hizmet Bir</h3>
        <!-- Hizmet içeriği -->
      </article>
      <article>
        <h3>Hizmet İki</h3>
        <!-- Hizmet içeriği -->
      </article>
    </section>
  </main>

  <aside role="complementary" aria-labelledby="sidebar-heading">
    <h3 id="sidebar-heading">Hızlı Bağlantılar</h3>
    <nav aria-label="Kenar çubuğu navigasyonu">
      <ul>
        <li><a href="#faq">SSS</a></li>
        <li><a href="#resources">Kaynaklar</a></li>
      </ul>
    </nav>
  </aside>

  <footer role="contentinfo">
    <p>© 2023 Şirketim. Tüm hakları saklıdır.</p>
  </footer>
</body>
</html>

Etkili Uygulama İçin En İyi Uygulamalar

ARIA landmark ve semantik HTML uygularken şu en iyi uygulamaları aklınızda bulundurun:

Semantik HTML'yi önce seçin: ARIA rolleri ekleden önce yerel semantik öğeleri kullanın
Net etiketler sağlayın: Karmaşık landmark'lar için her zaman aria-label veya aria-labelledby kullanın
Aşırı kullanımından kaçının: Yerel HTML yeterli semantik anlam sağlayamıyorsa sadece ARIA rolleri ekleyin
Doğru iç içe geçmeyi sağlayın: Landmark'lar birbirleri içinde doğru şekilde iç içe olmalıdır
Yardımcı teknolojilerle test edin: Düzenli olarak ekran okuyucular ve klavye navigasyonu ile test edin

Uygulamanızın yapısını ve kullanıcıların nasıl gezineceğini düşünün. Bu öğelerin doğru uygulanması, sadece engelli kullanıcılar değil, tüm kullanıcılar için tahmin edilebilir ve anlaşılır bir deneyim yaratır.

Sonuç

Erişilebilir web uygulamaları oluşturmak sadece teknik bir gereklilik değil, aynı zamanda herkesin kullanıcı deneyimini geliştiren bir ahlaki zorunluluktur. Semantik HTML5 öğelerini stratejik ARIA landmark'larla birleştirerek, farklı cihazlarda ve kullanıcı ihtiyaçlarında sorunsuz çalışan sağlam, kapsayıcı uygulamalar oluşturursunuz.

Erişilebilirlik yatırımı, kullanıcı memnuniyeti, SEO avantajları ve daha geniş pazar ulaşımı açısından getiriler sağlar. Bugün bu uygulamaları uygulamaya başlayın ve tüm kullanıcıları etkili ve kapsayıcı bir şekilde hizmet eden web uygulamaları inşa edin.