Erişilebilirlik için tasarlama
Erişilebilirlik, nispeten büyük bir konudur. Bunu tek bir Learn modülünde tamamen ele alamıyoruz. Ancak, oluşturduğunuz her sayfada uygulamak isteyeceğiniz bazı temel tenetler vardır. Erişilebilir bir sayfayı baştan tasarlamak, erişilebilir hale getirmek için var olan bir sayfaya geri dönmekten her zaman daha kolaydır.
HTML'yi tasarlandığı gibi kullanma
HTML, düğmeler, bağlantılar ve form denetimleri dahil olmak üzere sayfa oluşturmak için kullanabileceğiniz birçok öğe sağlar. Bu öğelerin her biri tıklanabilir, bağlanabilir veya odağı kabul etme gibi yerleşik işlevlere sahiptir.
Not
Odak, kontrol elemanının klavyeden girdi alabilmesi anlamına gelen bir web geliştirme terimidir. Düğme odağı kabul ederek birinin Ara Çubuğu'na tıklayarak etkinleştirmesine veya "tıklamasına" olanak tanıyabilir.
CSS ve JavaScript ile herhangi bir öğenin herhangi bir denetim türü gibi görünmesini sağlamak mümkündür. Örneğin, öğesini <span> oluşturmak için kullanabilir <button> ve <b> olabilir<a>. Bu özellik sayfanızı şekillendirmek veya düzenlemek için bazı kısayollar sağlasa da, yerleşik işlevselliği kaldırır. Ekran okuyucu gibi araçlar, olarak <span>kullanıldığını anlayamaz<a>. Klavyeyle göz atan bir kişi, bir öğenin benzetimini <div> yapmak için programlanmış bir <button> öğeye odaklanamaz.
Genellikle atlanan bir diğer HTML öğesi de üst bilgilerdir (<h1> aracılığıyla <h6>). Görsel açıdan üst bilgi etiketleri en büyükten en küçük metin boyutuna başlar. Bu kural, birçok geliştiricinin üst bilgi öğelerini kullanmasına ve bunun yerine stilize <div> veya diğer genel öğelere yol açar.
Ne yazık ki stilize edilmiş genel öğeler yapısal değil yalnızca görsel bilgileri taşır. Ekran okuyucu kullanıcıları, bilgileri bulmak ve bir sayfaya göz atmak için büyük ölçüde başlıklara güvenir . Açıklayıcı başlık içeriği yazmak ve anlamsal başlık etiketlerini kullanmak, ekran okuyucu kullanıcıları için kolayca gezinilebilen bir site oluşturmak için önemlidir.
En iyi yöntem olarak, sayfada denetim oluştururken her zaman uygun HTML'yi kullanmanız gerekir. Köprü istiyorsanız, <a>kullanın veya bir düğme için kullanın <button> .
İyi görsel ipuçları kullanma
Geliştiriciler genellikle ekran okuyucuları tek erişilebilirlik aracı olarak düşünür. Ancak, kullanıcılar çok sayıda başka araç kullanabilir veya hiç araç kullanmayabilir. Tarayıcıyı kullanan kullanıcılar, sayfanızla nasıl etkileşim kuracaklarını anlamak için belirli görsel ipuçlarına güvenir.
CSS'nin en iyi özelliklerinden biri, belirli görüntü öğelerini kaldırmak da dahil olmak üzere bir sayfanın nasıl görüntüleneceği üzerinde tam denetim sağlamasıdır. Örneğin, bir metin kutusundan ana hattı kaldırabilir veya köprüden alt çizgiyi kaldırabilirsiniz. Ne yazık ki, bu tür ipuçlarını kaldırmak, ona bağımlı olan birinin denetimin türünü tanımasını daha zor hale getirebilir.
Klavyeyi göz önünde bulundurun
Bazı kullanıcılar fare veya izleme yüzeyi/dokunmatik yüzey kullanamaz. Bunun yerine, bu kullanıcılar bir öğeden diğerine sekme tuşuyla klavye etkileşimlerini kullanır. Sayfalarınızın içeriğinizi mantıksal sırada sunması önemlidir; böylece klavye kullanıcısı aşağı doğru ilerledikçe her etkileşimli öğeye erişebilir.
Kullanıcı sekmeyle bir sayfada gezindiğinde, denetimlerin HTML kaynağında listelenme sırasına göre odak bir denetimden diğerine taşınır. Sayfanızın denetimleri HTML kaynağında, sayfaya göz atmasını beklediğiniz sırada listelenmeli ve css'nin sayfayı kullanıcılara görsel olarak yerleştirmesine güvenilmelidir.
Örneğin, iki sütunlu bir form oluşturduğunuzu düşünün. Formu dolduran biri için doğal akışın ne olduğunu göz önünde bulundurmak ve ardından denetimleri bu sırada listelemek isteyeceksiniz. Ardından CSS'yi kullanarak sütunları oluşturabilir ve denetimleri uygun konumlarında görüntüleyebilirsiniz.
Klavye gezintisi büyük ölçüde anlamsal HTML'ye dayanır. Bazı denetimler (düğmeler gibi) odağı kabul eder ancak div öğeler kabul etmez. HTML'de zaten var olan denetimleri yeniden oluşturuyorsanız, birinin sayfanızı klavyeyle kullanmasını zorlaştırmış olursunuz.
Önemli
Klavye gezintisi el ile test edilmelidir ve bunu oluşturduğunuz her sayfada yapmalısınız. WebAIM'de klavye gezinti stratejileri hakkında daha fazla bilgi bulunur.