HTML for Kids · Ders

Erişilebilirlik Temelleri

Görsellere alternatif metin ekleyin ve web sayfalarınızı kullanıcı dostu hâle getirin

Erişilebilirlik Temelleri, CoddyKit'te ücretsiz bir HTML for Kids dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML for Kids öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML for Kids kursu toplamda 4 dersten oluşur.

Sayfaları Erişilebilir Hâle Getirme

Erişilebilirlik Temelleri

Bir sonraki derse hoş geldiniz! Bugün, engelli kişiler de dâhil olmak üzere web sayfalarınızı herkes için erişilebilir hâle getirmeyi öğreneceğiz. Erişilebilirlik, kullanıcı dostu web siteleri oluşturmanın önemli bir parçasıdır.

Erişilebilirlik Nedir?

Erişilebilirlik, yetenekleri ne olursa olsun tüm kullanıcıların web sayfalarınızla etkileşim kurabilmesini sağlar. Bunlar arasında şunlar bulunur:

Görme veya işitme bozukluğu olan kişiler.
Ekran okuyucuları veya diğer yardımcı teknolojileri kullanan kişiler.
Web sitelerinde fare yerine klavye kullanarak gezinen kişiler.

Sayfalarınızı herkesin kullanımına daha uygun hâle getirmeyi öğrenelim!

Görsellere Alternatif Metin Ekleme

Görseli açıklamak için <img> etiketindeki alt özniteliğini kullanın. Bu, ekran okuyucuların görselin içeriğini görme bozukluğu olan kullanıcılara aktarmasına yardımcı olur.

Örnek:

<img src="sunrise.jpg" alt="A beautiful sunrise over the mountains" />

Anlamsal HTML Kullanma

Anlamsal etiketler olan <header>, <nav> ve <footer> gibi etiketler, yardımcı teknolojilerin sayfanızın yapısını anlamasına yardımcı olur.

Örnek:

<header>
  <h1>My Blog</h1>
</header>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>
<footer>
  <p>© 2024 My Blog</p>
</footer>

Klavye ile Gezinme

Bağlantılar ve düğmeler gibi tüm etkileşimli öğelere Tab tuşunu kullanarak erişilebildiğinden emin olun. Sekme sırasını denetlemek için tabindex özniteliğini kullanın.

Örnek:

<a href="#section1" tabindex="1">Go to Section 1</a>
<a href="#section2" tabindex="2">Go to Section 2</a>

Girdiler için Etiket Sağlama

Girdi alanları için anlaşılır açıklamalar sağlamak üzere <label> etiketini kullanın. for özniteliğini kullanarak etiketi girdiye bağlayın.

Örnek:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
</form>

Renk Kontrastı

Herkesin içeriğinizi kolayca okuyabilmesi için metin ve arka plan renkleri arasında yeterli kontrast olduğundan emin olun. Renk kontrastı oranlarını kontrol etmek için çevrim içi araçlar kullanın.

İpucu: Yüksek kontrast, görme bozukluğu olan kullanıcılar için okunabilirliği artırır.

Örnek:

<p style="color: black; background-color: white;">This text is easy to read.</p>
<p style="color: gray; background-color: lightgray;">This text is hard to read.</p>

Kendiniz Deneyin

Erişilebilir bir form oluşturalım. İşte bir örnek:

<!DOCTYPE html>
<html>
  <head>
    <title>Accessible Form</title>
  </head>
  <body>
    <h1>Sign Up</h1>
    <form>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" />
      <br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <br />
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" />
      <br />
      <button type="submit">Sign Up</button>
    </form>
  </body>
</html>

Erişilebilirlik Özeti

Harika İş!

Tebrikler! Web sayfalarınızı herkes için erişilebilir hâle getirmeyi öğrendiniz. Erişilebilirlik, modern web geliştirme sürecinin temel bir parçasıdır. Bir sonraki derste, web standartlarını karşıladığından emin olmak için HTML kodunuzu nasıl doğrulayacağınızı öğreneceğiz. Becerilerinizi geliştirmeye hazır olun!

Sıkça Sorulan Sorular

“Erişilebilirlik Temelleri” dersi ücretsiz mi?

Evet — “Erişilebilirlik Temelleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML for Kids kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML for Kids kursu toplamda 4 dersten oluşur.

“Erişilebilirlik Temelleri” dersinde ne öğreneceğim?

Görsellere alternatif metin ekleyin ve web sayfalarınızı kullanıcı dostu hâle getirin HTML for Kids ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML for Kids öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML for Kids, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Erişilebilirlik Temelleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML for Kids dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML for Kids dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML for Kids Sayfasına Dön