Click here to read this post in english
Ekran okuyucu kullanan kullanıcılar, interneti gezinirken bazı zorluklarla karşılaşabilirler. Bu nedenle, web geliştiricilerin, bu kullanıcıların deneyimini iyileştirmek için belirli adımlar atmaları önemlidir. İşte ekran okuyucu kullanıcılarının daha iyi bir deneyim yaşamasını sağlamak için web geliştiricilerin yapması gereken bazı önemli adımlar:
Doğru HTML Kullanımı #
Web sayfalarınızı oluştururken, semantik HTML etiketlerini doğru bir şekilde kullanın. Başlıklar için <h1> ile <h6>, listeler için <ul>, <ol>, <li>, ve içerik bölmeleri için <section>, <article>, <aside> gibi etiketler kullanın.
<h1>Ana Başlık</h1>
<p>Bu bir paragraf.</p>
<ul>
<li>Madde 1</li>
<li>Madde 2</li>
</ul>
Alternatif Metinler #
Resimlerinizi <img> etiketi ile eklerken, her resim için uygun bir alternatif metin (alt attribute) ekleyin. Bu, ekran okuyucular için önemlidir, çünkü resimleri görüntüleyemezler.
<img src="image.jpg" alt="Güzel bir manzara resmi">
Formları Etiketlemek #
Form alanlarına <label> etiketleri ekleyerek kullanıcıların ne girmeleri gerektiğini anlamalarını sağlayın. Ayrıca, form alanlarını gruplamak için <fieldset> ve <legend> kullanabilirsiniz.
<label for="username">Kullanıcı Adı:</label>
<input type="text" id="username" name="username">
Farklı bir yaklaşım olarak, aria-labelledby özelliğini de kullanabilirsiniz.
<label id="username-label">Kullanıcı Adı:</label>
<input type="text" aria-labelledby="username-label">
Aria Etiketlerini Kullanmak #
ARIA (Accessible Rich Internet Applications) etiketlerini kullanarak, ekran okuyucular için daha iyi erişilebilirlik sağlayın. Özellikle dinamik içerikler ve SPA’lar (Single Page Applications) için önemlidir.
<div role="navigation">
<!-- Navigasyon menüsü içeriği -->
</div>
Aria etiketlerinin nasil kullanildigini ogrenmek icin MDN sayfasina bakabilirsiniz.
sr-only Sınıfı #
sr-only sınıfı, içeriği görüntülemeyen, ancak ekran okuyucular tarafından okunabilen içerikler için kullanılır. Bu genellikle görsel öğelerin yanında bulunan metinleri gizlemek için kullanılır, ancak ekran okuyucular tarafından hala erişilebilir olmasını sağlar.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Bu CSS, içeriği ekranda görünmez hale getirir, ancak ekran okuyucular için hala erişilebilir kalır.
Örneğin, bir butonun yanında bulunan görsel ikonun alternatif metni için sr-only sınıfını kullanabilirsiniz:
<button>
<span class="sr-only">Daha fazla bilgi</span>
<i class="fas fa-info-circle"></i>
</button>
Ya da, linkin açıklama metni için sr-only sınıfını kullanabilirsiniz:
<a href="page.html">
<span class="sr-only">Daha fazla bilgi almak için</span> tıklayın
</a>
Toparlamak Gerekirse #
Karanlığa bürüneceğine, sende bir ışık yak!
Ekran okuyucu kullanıcılarının web sitelerindeki deneyimlerini iyileştirmek, web geliştiricilerin önemli bir sorumluluğudur. Doğru HTML kullanımı, alternatif metinler, net ve açık metinler, bağlantı tanımlama, odak durumunu belirtme, ARIA etiketleri, klavye erişilebilirliği ve sürekli test ve geri bildirimler, bu hedefe ulaşmada temel adımlardır. Bu yönergeleri takip ederek, daha erişilebilir ve kullanıcı dostu web siteleri oluşturabiliriz.