Web tasarımına yönelik talepler, artan web erişilebilirliğini içerir. Ancak siteyi birden fazla cihaz uyumluluğuna sahip tüm büyük tarayıcılar için optimize etmek yeterli değil mi? Google Lighthouse'u kullanarak web sitenizin performansını, erişilebilirliğini, en iyi uygulamalarını ve SEO'sunu kolayca ölçebilirsiniz. Peki erişilebilirlik neden önemlidir?

CDC'ye (Hastalık Kontrol ve Önleme Merkezleri) göre, 60 milyondan fazla Amerikalı engelli yaşıyor. Web İçeriği Erişilebilirlik Yönergelerini izleyerek, erişilebilir bir web sitesi oluşturmaya katkıda bulunacak bazı ön değerlendirmeleri sunabilirsiniz. HTML ve CSS kullanarak web erişilebilirliğine başlamak için ihtiyacınız olan her şey burada.

Uygun Semantik ile Yapılandırılmış HTML

Web sitesini görsel olarak çekici hale getirirken yardımcı teknoloji kullanıcılarının kafası karışmamalıdır. WordPress gibi birçok içerik yönetim sistemi HTML'yi uygulasa da, doğru şekilde uygulandığını tekrar kontrol etmek ve onaylamak sizin sorumluluğunuzdadır.

Örneğin, bir

Daha fazla oku: 10 Dakikada Öğrenebileceğiniz Basit HTML Kodu Örnekleri

Semantik HTML'nin geliştirilmesi, onunla birlikte ek işlevler alacağınız için daha kolaydır. Mobilde harika çalışıyor. Ayrıca anahtar kelimelere önem verdiğinizde

veya etiketi, SEO'ya yardımcı olur.

Ekran Okuyucu Kullanıcıları için Yapılandırılmış İçerik

İşte semantik HTML'ye karşı iyi bir HTML örneği. kötü.

İyi anlamsal HTML
benim başlığım

HTML ve CSS kullanarak nasıl erişilebilir bir web sitesi oluşturabileceğiniz aşağıda açıklanmıştır

ikinci başlığım

Kötü anlamsal HTML
benim başlığım

HTML ve CSS kullanarak nasıl erişilebilir bir web sitesi oluşturabileceğiniz aşağıda açıklanmıştır

İlk durumda, ekran okuyucular için gezinmek oldukça kolaydır. Başlık ve paragraf hakkında bilgi veren başlığı okuyacaktır. Her elemandan sonra bir saniye duracaktır. Enter/Return'ü kullanarak bazı başlıkları atlayabilir veya bir öncekine dönebilirsiniz. Başlık etiketini kullanarak bir içindekiler tablosu da oluşturabilirsiniz.

Semantik HTML yerine sunumsal HTML yazdığınızda (ikinci durumda), satır gereksiz yere kesiliyor ve kötü bir deneyime neden oluyor. Potansiyel seçiciler olmadığı için basamaklanması ve manipüle edilmesi çok daha zor olan dev bir blok hazırlamak gibi.

Erişilebilir Web Sitesi için Dil ve Düzenler

Genişletilmiş kısaltmalar ve kısaltmalar ile kesin bir dil kullanmalısınız. Mümkünse, 9-5 -> 9'dan 5'e yazarak tirelerden kaçınmaya çalışın. Daha önce sayfa düzenlerini oluşturmak için HTML tabloları kullanılıyordu. Oldukça karmaşık bir düzen oluşturan iç içe tablolar nedeniyle doğru okumaları engelliyordu. İşte modern bir web sitesi yapısı:

Bu bir başlık



Ana sayfa içeriği

içeren makale

Yazı Başlığı

makale içeriği



Web sitesi altbilgisi

Gördüğünüz gibi, bu düzen ekran okuyucu dostudur. İşaretleme, açık ve özlü bir kodla anlaşılabilir. Ayrıca, bakımı kolaydır ve indirme sırasında daha az bant genişliği gerektirir. Kaynak kodunu mantıksal olarak yerleştirdiğinizden emin olun; tüm farkı yaratacak.

Kullanıcı Arabirimi Denetimlerini, Tabloları ve Alternatif Metni Yeniden Düşünün

En yaygın olarak, UI kontrolleri web belgenizin düğmeleri, form ve bağlantı kontrolleridir. Temel kural, klavye ile manipüle edilebilmeleridir. Sekme tuşunu kullanarak diğer seçeneklere atlayabileceğiniz ve bir sonuca ulaşmak için Enter/Return tuşuna basabileceğiniz bazı varsayılan stilleri (farklı tarayıcılarda farklılık gösterebilir) vardır. Metin etiketlerini "buraya tıklayın" yerine ayırt edici ve anlamlı bağlantı metinleri ekleyerek yönetebilirsiniz.

Erişilebilir tablolar oluşturmak için tablo başlıkları ekleyin

ve kapsam özniteliğini kullanarak satırları veya sütunları belirtin. Ek olarak, veya ekran okuyuculara tablo içeriğine hızlı bir genel bakış sağlamak için özet niteliği.

Alternatif metin, resmin veya videonun bağlamsal bilgilerini web tarayıcılarına ve ekran okuyucularına verir. Görseliniz dekoratif amaçlıysa alt etiketini boş bırakmak daha iyidir. Aksi takdirde, görüntünün ayrıntılı bir açıklamasını vermek çok yardımcı olur.

Çoğu durumda, ekran okuyucu alternatif metni, dosya adını ve başlık özelliğini okur (bunu atlayabilirsiniz). Ayrıca, alternatif metin kullanmak istemiyorsanız veya aynı etiketi birden çok resme eklemek istiyorsanız, işte size kısa bir ipucu:

Kırmızı bir çiçek...

Bu kimliğe atıfta bulunmak için aria-labelledby niteliğini kullandınız. Ekran okuyucuların, o paragraf biçimindeki alternatif metni kullanmasına olanak tanır.

Daha İyi Erişilebilirlik için Standart CSS

Erişilebilir sayfa özelliklerine stil vermek, tasarımınızın sayfanın temel içeriğine göre davranması gerektiği anlamına gelir. Örneğin, bir

,

, ve

eleman, tipik bir CSS olmalıdır:

h1 {
yazı tipi boyutu: 4rem;
}
p, li {
yazı tipi boyutu: 1.5rem;
renk: mavi;
}

Yazı tipi boyutu, harf aralığı, yazı tipi ailesi vb. rahat bir okumaya yardımcı olmalıdır. Başlıklar gövde metninden farklı olmalıdır (varsayılan stil de iyidir). Ek olarak, metin, metinden zıt bir renge sahip olmalıdır. CSS ile seçtiğiniz arka plan.

Metni, Bağlantıları ve Etiketleri Şekillendirme

Erişilebilir bir CSS ile mikro etkileşimler mümkündür. Bağlantıları doğru bir şekilde vurgulamak için metni vurgulamak kadar küçük olabilir. kullanabilirsiniz ve ayırt edici bir şekilde etiketleyin. kullanarak noktalı alt çizgi ekleyebilirsiniz. öğe.

Standart bağlantının altı, varsayılan bir renkle vurgulanmalıdır: mavi ve daha önce ziyaret edilen bir bağlantı, varsayılan renk: mor (özelleştirebilirsiniz).

a {
renk: #ff0000;
}
bir: aktif {
renk: #000000;
arka plan rengi: #a60000;
}
a: üzerine gelin, a: ziyaret edildi, a: odak {
renk: #a60000;
metin-dekorasyon: yok;
}

Bu nedenle, fare işaretçisindeki bir değişiklikle odaklanan metni vurgulamalısınız. İşaretçi imleci ve anahat, web erişilebilirliğinde önemli bir rol oynar.

Form öğelerine ve etiketlerine temiz bir görünüm vermek için CSS'yi kullanın. Ayrıca, çoğu tarayıcıda tutarlı olan odak/fareyle üzerine gelme durumlarına karar verin. Bu küçük ipuçlarının insanların web sayfanızı anlamalarına yardımcı olduğunu unutmayın.

Renk Kontrastı ve Değerleri Gizleme

Web sitesinin renk düzenini, ön plan (metin/resim) rengi arka plan rengiyle kontrast oluşturacak şekilde ayarlayın öncelikle, görme bozukluğu (ör. renk körlüğü) olan kişilerin içeriği okuması daha zor olduğu için uygun şekilde. Kullanabilirsiniz Renk Kontrast Denetleyicisi WCAG kriterlerine göre iyi bir renk şeması elde etmek için. Ayrıca, uyarılar veya şartlar ve koşullar (yalnızca kırmızı bir uyarı değil) ile birlikte işaretleme işaretleri (yıldız işareti gibi) eklemeye çalışın.

Kaynak kod sırası düzgün bir şekilde yazılana kadar ekran okuyucuların endişelenecek hiçbir şeyi yoktur. İçeriği ekran okuyuculardan gizledikleri için display: none veya görünürlük: gizli özelliklerini kullanmaktan kaçınmaya çalışın.

Stili Geçersiz Kılmayı Kolaylaştırın

Kilit nokta, siteyi ne kadar iyi tasarlarsanız tasarlayın, kullanıcıların stili geçersiz kılmak için çeşitli nedenleri vardır. Örneğin, bazıları daha büyük bir metin boyutu isteyebilir veya okunabilirlik için metni ve arka plan rengini değiştirmek isteyebilir. Dolayısıyla içerik alanınız bunu tamamen kaldırabilmelidir.

Özetleme: HTML ve CSS'yi Birleştirin

Artık semantik HTML ile başlamanın ve erişilebilir bir web sitesi için doğru sırada mantıklı bir kaynak kodu yazmanın temellerini biliyorsunuz. HTML'ye odaklanın ve tamamlandıktan sonra erişilebilir bir CSS oluşturmaya doğru ilerleyin.

Yukarıdaki teknikleri kullanarak kullanıcı deneyimini geliştirebilir ve güzel bir kitleye hizmet verebilirsiniz. Bu nedenle, duyarlı ve erişilebilir web siteleri oluşturmaya başlayın.

Web Sitesi Nasıl Yapılır: Yeni Başlayanlar İçin

Bugün size sıfırdan eksiksiz bir web sitesi yapma sürecinde rehberlik edeceğim. Bu kulağa zor geliyorsa endişelenmeyin. Her adımda sana rehberlik edeceğim.

Sonrakini Oku

Yazar hakkında

Tüm Hikayeyi Okumak için Genişletin