Erişilebilir web uygulaması tasarımı, olumlu bir kullanıcı deneyimi ve genel uygulama kullanıcı memnuniyeti sağlamanın temel bileşenlerinden biridir. Erişilebilir bir web uygulaması, farklı engellere sahip kişilere ve farklı coğrafi konumlardaki kişilere eşit erişim sağlar. İşitsel, bilişsel, konuşma veya görsel becerileriyle ilgili sınırlamaları ve kısa süreli engellilik, yavaş internet bağlantısı, hatta parlak güneş ışığı gibi geçici kısıtlamaları olan kullanıcıların web uygulamanıza erişebilmeleri gerekir. Web uygulamanızın ön ucunu oluştururken erişilebilirlik sorunlarını ve derleme işleminin ilerleyen aşamalarında işleri yeniden yapma ihtiyacını önlemek için erişilebilirlik çözümlerini en baştan kullanın. Uygulama içeriğinizin web tarayıcıları ve ekran okuyucular tarafından kaydırılabildiğinden ve aynı zamanda kullanıcılar için olumlu bir kullanıcı deneyimi sağladığından emin olun.
Erişilebilirlik, birçok ülke ve sektörde yasal bir yükümlülüktür. Bu yönergeleri anlamanız ve ön uç tasarımınıza erişilebilirlik çözümlerini dahil etmeniz gerekir. Çeşitli iş örnekleri, web içeriği için erişilebilirliğin de önemini vurgular.
MDN ve WCAG gibi kaynaklar, web uygulamanızın erişilebilirliğini artırmaya yönelik temel yönergeler ve öneriler sağlar. Web.dev'de Erişilebilirlik Öğrenme kursuna da katılabilirsiniz.
Çeşitli bileşenler arasındaki karşılıklı bağımlılık, bir web uygulamasını farklı kullanıcılar için erişilebilir hale getirmenin temel unsurlarından biridir.
Renk ve kontrast
Renk kullanımı, bir web uygulamasının erişilebilirliğini değerlendirirken birincil faktördür. Ön uç kullanıcıları sayfadaki içeriği algılayabilmelidir ve renk ve kontrast, kullanıcıların içerikle ilgili algısını önemli ölçüde etkilemelidir. Görüntüleme koşulları ve görmeyle ilgili engeller geçici, durumsal veya kalıcı olabilir ancak web uygulamanızın ön ucunu oluştururken dikkate alınmalıdır. Kullanıcıya yönelik arayüzde kullanılan renkler arasında doğru kontrast veya parlaklık farkı oluşturmak, web uygulamanızı farklı kullanıcılar için daha erişilebilir hale getirebilir. Kontrast oranı, arka plan ve metin arasındaki parlaklık farkını sağlar.
Kontrastı ölçmek amacıyla, arka plan üzerindeki metin veya simgeler için minimum kontrast bulunduğundan emin olmak üzere kontrast oranı formülünü kullanabilirsiniz. Dikkate alınması gereken pek çok renk algılama bozukluğu biçimi vardır, ancak yeni renk modelleri gri tonlamalı görüntülense bile içeriğin doğru bir şekilde algılanmasını sağlayabilir.
Erişilebilirlik için renk ve kontrastı desteklemek amacıyla genellikle koyu bir tema kullanılması önerilir. Beyaz ışık ve okuma güçlüğü nedeniyle görsel giriş için genellikle koyu temalar tercih edilir. İçerik odaklı uygulamalar çok sayıda metin ve resim içerdiğinden, kullanıcılarınızın farklı ihtiyaçlarını karşılamak için renk ve kontrast oranını akıllıca kullanmanız çok önemlidir.
web.dev adresinden renk ve kontrast hakkında daha fazla bilgi edinin.
Yazı biçimi
Tipografi, metnin farklı kullanıcılar tarafından okunabilir ve okunaklı olması için yapılan seçim ve düzenlenmeyi ifade eder. En çok değişen erişilebilirlik ayarlarından biri, cihazlarda varsayılan yazı tipi boyutudur. Bazı kullanıcılar, ekrana daha küçük yazı tipi boyutuyla daha fazla metin sığdırmak veya metni olabildiğince büyük yapmak isteyebilir. Bu nedenle tipografinin esnek ve okunabilir olması çok önemlidir. Ayrıca, tek tek metin karakterleri okuyucu tarafından ayırt edilebilir ve genel metin okunaklı olmalıdır. Uygulamanızın ön uç tasarımı sırasında hem okunabilirlik hem de okunabilirlik içeren yazı tipleri seçtiğinizden emin olun.
Yazı tipi
Web uygulamanız için seçtiğiniz yazı tipi veya yazı tipi ailesi, geniş bir okuyucu kitlesi tarafından görsel olarak erişilebilir olmalıdır. Yazı tipi, uygulamanızın metninde kullanılan harflerin görsel tasarımıdır. Birçok çalışmada, web içeriğinin erişilebilirliğini değerlendirirken yazı tipinin önemi açıklanmaktadır. Marka, kullanıcı arayüzü tasarım hedefleriniz ve okuma kolaylığı arasındaki dengeyi bulmak, uygulamanızı daha geniş bir kullanıcı yelpazesi için daha keyifli hale getirir. Ön ucunuzu oluştururken yazı tipi seçeneklerinin yanı sıra içlerindeki yazı tipi seçeneklerinin, uygulamanızın erişilebilirliğine ve genel tasarımına nasıl katkıda bulunduğunu düşünün.
Yazı tipi boyutu
Az gören veya renk algılama engeli olan kullanıcılara yardımcı olmak için tarayıcı yakınlaştırmasına izin vermeyi düşünün. Web uygulamanızdaki metnin yazı tipi farklı okuyucular tarafından görülebilmelidir. px değerinden rem değerine geçilerek yazı tipi boyutu varyasyonları sağlanabilir. Rem birimleri, Wep uygulamasının kök öğesine göreli yazı tipi boyutuna olanak tanır. Bu, web uygulamanızın genel erişilebilirliğini artıracak çok yönlü bir seçenektir.
Yapı ve düzen
Çeşitli yapısal ve düzen özellikleri, arayüzün erişilebilirliğini etkiler. Dikkate alınması gereken düzen özellikleri arasında, metin bloğu aralığı ve hizalamasının yanı sıra, metin satırları ile tek tek harfler arasındaki boşluk yer alır. Izgaraları kullanın ve tasarımınıza dahil etmek istediğiniz bileşenleri görselleştirin. İçeriğin düzeni ve yapısı, kullanıcılar için ilgi çekici ve keyifli olmalıdır. Karmaşık düzenler veya birden fazla metin bloğu bulunan yoğun arka planlar, ADHD'yi kullananlar gibi bazı kullanıcılar için zor olabilir. Ön uç tasarım sürecinde kapsayıcılığa öncelik verdiğinizden emin olun.
ARIA ve HTML
Erişilebilir Zengin İnternet Uygulamaları (ARIA), web uygulamalarını kullanıcılar için daha erişilebilir hale getirmeye yardımcı olan bir dizi yönerge ve özellik içerir. ARIA, HTML'yi tamamlar ve erişilebilir JavaScript widget'ları, canlı içerik güncellemeleri ve hata mesajları gibi özellikler sağlar. ARIA'nın doğru kullanımı, web uygulamanızı gerçekten daha erişilebilir hale getirmek için çok önemlidir. ARIA'nın yanlış kullanımı hatalara yol açabilir ve uygulamanızın kullanıcılar için daha az erişilebilir olmasına yol açabilir.
Braille ve metin okuma (TTS) ile uyumlu alternatif biçimler kullanmak için mümkün olduğunda ARIA etiketlerini kullanın. ARIA rolleri ve etiketleri, erişilebilirlik ağacını dom ağacından farklı olduğunda değiştirmenize olanak tanır. Bu etiketler, tıklanabilir düğme olarak kullanılan div gibi standart olmayan etiketler kullanırken de önemlidir. HTML öğesinde erişilebilirlik desteği olmadığında ARIA gerekir. İçerik odaklı uygulamanızı tasarlarken, uygulamanızın mümkün olduğunca fazla kullanıcıya ulaşmasına yardımcı olmak için ekran okuyucuların ve diğer yardımcı cihazların doğru şekilde desteklendiğinden emin olun.
web.dev'de ARIA ve HTML hakkında daha fazla bilgi edinin.
Uluslararası hale getirme
Enternasyonalizasyon, bir web uygulamasının farklı dil ve kültürel arka planlardan gelen kullanıcılar için erişilebilir olacak şekilde tasarlanmasını ifade eder. Web uygulamanız önemli kod değişikliklerine gerek kalmadan farklı dillere, coğrafi bölgelere ve kültürel tercihlere uyum sağlayabilmelidir. Uluslararasılaştırmanın temel bileşenleri arasında çok dilli destek, yerelleştirme, içerik ayırma, tarih ve saat biçimlendirmesi, metin yönü ve dil müzakeresi yer alır.
Web uygulamanızı uluslararası hale getirerek geniş bir küresel kitle için kapsayıcı ve kullanıcı dostu bir deneyim oluşturabilirsiniz. Uluslararasılaştırma, çeşitli kullanıcı tabanına sahip veya uluslararası genişleme hedefi olan tüm web uygulamaları için olmazsa olmazdır.
Mantıksal özellikler
CSS'de stil oluştururken top / down / left/ right gibi özellikler yerine start/ end değerini kullandığınızdan emin olun. Bu, menülerin ve site düzenlerinin RTL dilleri için uygun şekilde değişmesini sağlar.
Alternatif içerik
İçeriğiniz için özel işaretleme sağlamak amacıyla, başlıkta alternatif belgelerin bağlantılarını içeren HTML etiketine lang özelliğini ekleyin. Bu, tanımlanan dil varsayılan tarayıcı dilinden farklıysa tarayıcının doğru sayfayı seçmesini sağlar. Web tarayıcılarının ve arama motorlarının sayfanın dilini anlamasına yardımcı olur. Bu da içeriğin doğru şekilde oluşturulması ve etkili bir SEO için önemlidir.
Uluslararası
JavaScript'teki Intl nesnesi, çok dilli ve kültürel açıdan duyarlı web uygulamaları oluşturmak için önemli bir araçtır. Web uygulamalarında uluslararasılaştırma ve yerelleştirme becerileri sağlar, ayrıca arayüzünüzün ve içeriğinizin tüm dünyadaki kullanıcılar için anlaşılır ve kültürel açıdan uygun olmasını sağlar. Uluslararası nesne tarafından sağlanan özellikler arasında tarih ve saat biçimlendirmesi, sayı biçimlendirmesi ve dize harmanlaması bulunur.
web.dev'de uluslararasılaştırma hakkında daha fazla bilgi edinin.
Formlar
HTML formları, içerik odaklı web uygulamalarının önemli bir parçasıdır. Kullanıcı etkileşimini etkinleştirir ve kullanıcı bilgilerini toplamak için yapılandırılmış bir yöntem sağlarlar. HTML formları geniş bir kitle tarafından erişilebilir değilse bu durum kullanıcılarda hayal kırıklığına ve memnuniyetsizliğe yol açabilir.
HTML formlarını erişilebilir hale getirmek için tüm form alanlarında semantik HTML öğeleri kullanın. Bu, yardımcı teknolojilerin her bir alanın amacını anlamasına ve kullanıcıların bunları tamamlamasını kolaylaştırmaya yardımcı olur. Ayrıca tüm form alanlarını açık bir şekilde etiketlediğinizden emin olun. Bu, kullanıcıların doğru ve yararlı bilgiler sağlamasına yardımcı olur. HTML formlarınızın erişilebilirliğini test etmek de önemlidir. Bu, uygulamanızın içeriğini tüketmek için bu tür teknolojilere ihtiyaç duyan bir kullanıcının deneyimini simüle eden yardımcı teknolojiler kullanılarak yapılabilir.