Erişilebilirlik

Sayfalarınızın farklı ekran boyutlarına yanıt vermesine izin vermek, web sitenizin mümkün olduğunca çok kişi tarafından erişilebilir olmasını sağlamanın yalnızca bir yoludur. Aklınızda bulundurmanız gereken diğer faktörlerden bazılarını göz önünde bulundurun.

Renk görme bozukluğu

Farklı insanlar renkleri farklı şekilde algılar. Protanopi olan kişiler kırmızıyı ayrı bir renk olarak algılamaz. Yeşil körlüğünde yeşil renk eksiktir. Mavi körlüğü olan kişiler için mavi renktedir.

Bazı araçlar, renk şemalarınızın farklı türde renk görme yetisine sahip kullanıcılara nasıl görüneceği hakkında genel bir fikir verebilir.

Firefox'un Erişilebilirlik sekmesinde, Simüle et etiketli bir açılır liste ve seçenekler listesi bulunur.

Chrome Geliştirici Araçları'ndaki oluşturma sekmesi, görme bozukluklarını emüle etmenize olanak tanır.

Bunlar tarayıcıya özgü araçlardır. Ayrıca, işletim sistemi düzeyinde farklı görme türlerini taklit etmek de mümkündür.

Mac'te şu adrese gidin:

1. Sistem Tercihleri
2. Erişilebilirlik
3. Görüntülü Reklam Ağı
4. Renk Filtreleri
5. Renk filtrelerini etkinleştirme

Seçeneklerden birini belirleyin.

Genel olarak, farklı öğeleri ayırt etmek için yalnızca renge güvenmek iyi bir fikir değildir. Örneğin, bağlantılarınızı çevreleyen metinden farklı bir renkte yapabilirsiniz ve yapmanız gerekir. Ancak bağlantıların altını çizme veya kalınlaştırma gibi başka stil göstergeleri de uygulamanız gerekir.

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

Renk kontrastı

Bazı renk kombinasyonları sorunlara neden olabilir. Ön plan rengi ile arka plan rengi arasında yeterli kontrast yoksa metin okunamaz. Kötü renk kontrastı, web'deki en yaygın erişilebilirlik sorunlarından biridir ancak neyse ki tasarım sürecinin başlarında tespit edilebilir.

Metin ve arka plan renklerinizin kontrast oranını test etmek için kullanabileceğiniz bazı araçlar şunlardır:

• VisBug, tüm büyük masaüstü tarayıcılarında kullanılabilen bir tarayıcı uzantısıdır.
• Firefox'un Accessibility Inspector'ı, görsel kontrastla ilgili sorunları kontrol edebilir.
• Ayrıca Chrome Geliştirici Araçları ile düşük kontrastlı metinleri tespit edip düzeltebilirsiniz.
• Microsoft'un Edge tarayıcısında renk seçiciyi kullanarak metin-renk kontrastını test edebilirsiniz.

CSS'nizde color ve background-color değerlerini her zaman birlikte bildirmeniz önerilir. Arka plan renginin tarayıcı varsayılanı olacağını varsaymayın. Kullanıcılar, tarayıcılarının kullandığı renkleri değiştirebilir.

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

Yüksek kontrast

Bazı kullanıcılar, işletim sistemlerini yüksek kontrast modunda kullanır. Bu özelliği işletim sisteminizde deneyebilirsiniz.

Mac'te şu adrese gidin:

1. Sistem Tercihleri
2. Erişilebilirlik
3. Görüntülü Reklam Ağı

Kontrastı artırma seçeneğini belirleyin.

Kullanıcıların yüksek kontrast modunu etkinleştirip etkinleştirmediğini algılayan bir medya özelliği vardır. prefers-contrast medya özelliği için üç değer sorgulanabilir: no-preference, less ve more. Bu bilgileri, sitenizin renk paletini ayarlamak için kullanabilirsiniz.

Kullanıcılar, işletim sistemlerinde renkleri ters çevirme tercihini de ayarlayabilir.

Mac'te şu adrese gidin:

1. Sistem Tercihleri
2. Erişilebilirlik
3. Görüntülü Reklam Ağı

Renkleri ters çevirme seçeneğini belirleyin.

Web sitenizin, renkleri ters çevrilmiş şekilde göz atan kullanıcılar için anlamlı olmaya devam ettiğinden emin olun. Kutu gölgelerine dikkat edin. Renkler ters çevrildiğinde bunların ayarlanması gerekebilir.

Yazı tipi boyutu

Kullanıcılar tarayıcılarında yalnızca rengi değil, varsayılan yazı tipi boyutunu da ayarlayabilir. Görme yetileri azaldıkça tarayıcılarındaki veya işletim sistemlerindeki varsayılan yazı tipi boyutunu ayarlayabilir ve yıllar geçtikçe bu boyutu büyütebilirler.

Bu ayarlara göre yanıt vermek için göreceli yazı tipi boyutlarını kullanabilirsiniz. px gibi birimleri kullanmaktan kaçının. Bunun yerine rem veya ch gibi göreli birimler kullanın.

Tarayıcınızdaki varsayılan metin boyutu ayarını değiştirmeyi deneyin. Bunu tarayıcı tercihlerinizden yapabilirsiniz. İsterseniz bir web sayfasını ziyaret ederken yakınlaştırarak da yapabilirsiniz. Varsayılan yazı tipi boyutu%200 artırıldığında web siteniz hâlâ çalışıyor mu? %400'e ne dersin?

Yazı tipi boyutu% 400'e çıkarılmış bir masaüstü bilgisayarda web sitenizi ziyaret eden bir kullanıcı, sitenizi küçük ekranlı bir cihazda ziyaret eden bir kullanıcıyla aynı düzeni görmelidir.

Klavyeyle gezinme

Web sayfalarında gezinmek için herkes fare veya dokunmatik yüzey kullanmaz. Klavye de sayfada gezinmenin bir başka yoludur. Özellikle tab tuşu bu konuda çok faydalıdır. Kullanıcılar bir bağlantıdan veya form alanından diğerine hızlıca geçebilir.

:hover ve :focus sözde sınıflarıyla stil verilen bağlantılar, fare, dokunmatik yüzey veya klavye kullanılıp kullanılmadığına bakılmaksızın bu stilleri gösterir. Bağlantılarınızı yalnızca klavye ile gezinme için stilize etmek üzere :focus-visible sözde sınıfını kullanın. Bu stilleri daha da belirgin hale getirebilirsiniz.

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

Kullanıcı bağlantıdan bağlantıya veya form alanından form alanına geçerken bu öğeler, doküman yapısında göründükleri sırayla odaklanır. Bu, görsel sırayla da eşleşmelidir.

CSS order özelliğini kullanırken dikkatli olun. Öğeleri HTML'deki sıralarından farklı bir görsel sırada yerleştirmek için bu özelliği flexbox ve grid ile birlikte kullanabilirsiniz. Bu özellik güçlü olsa da klavye ile gezinmeyi tercih eden kullanıcıların kafasını karıştırabilir.

Sekme sırasının mantıklı olduğundan emin olmak için klavyenizdeki tab tuşunu kullanarak web sayfalarınızı test edin.

Firefox tarayıcının geliştirici araçlarının Erişilebilirlik panelinde Sekme Sırasını Göster seçeneği bulunur. Bu ayar etkinleştirildiğinde odaklanılabilir her öğenin üzerine sayılar yerleştirilir.

İndirgenmiş hareket

Animasyon ve hareket, web tasarımlarına hayat vermenin harika yollarıdır. Ancak bu hareketler bazı kişilerde yön kaybına ve hatta mide bulantısına neden olabilir.

Kullanıcının daha az hareket tercih edip etmeyeceğini belirten bir özellik sorgusu vardır. Bu özelliğin adı prefers-reduced-motion. CSS geçişlerini veya animasyonlarını kullandığınız her yere ekleyin.

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

prefers-reduced-motion medya sorgusu özellikle ekrandaki hareket içindir. prefers-reduced-motion öğesinden etkilenmemesi gereken bir öğenin renginde geçişler kullanıyorsanız. Opaklık geçişi ve çapraz geçiş de yapabilirsiniz. İndirgenmiş hareket, animasyonun tamamen devre dışı bırakılması anlamına gelmez.

Ses

Kullanıcılar web'i farklı şekillerde deneyimler. Web sitenizi herkes ekranda görmez. Ekran okuyucular gibi yardımcı teknolojiler, ekrana verilen bilgileri konuşma diline dönüştürür.

Ekran okuyucular, web tarayıcıları da dahil olmak üzere her türlü uygulamayla çalışır. Bir web tarayıcısının ekran okuyucuyla faydalı bir şekilde iletişim kurabilmesi için erişilen web sayfasında faydalı semantik bilgiler olması gerekir.

Daha önce, yalnızca simge içeren düğmelerin, görme engelli kullanıcılara düğmenin amacını belirten bir özellik içermesi gerektiğini öğrenmiştiniz. Bu, güçlü bir temel HTML'nin önemine dair yalnızca bir örnektir.

Başlıklar

<h1>, <h2>, <h3> gibi başlıkları mantıklı bir şekilde kullanın. Ekran okuyucular, klavye kısayollarıyla gezinebileceğiniz bir doküman ana hattı oluşturmak için bu başlıkları kullanır.

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

Yapı

Sayfanızın içeriğini yapılandırmak için <main>, <nav>, <aside>, <header> ve <footer> gibi önemli yer öğelerini kullanın. Ekran okuyucu kullanıcıları daha sonra doğrudan bu önemli noktalara gidebilir.

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

Formlar

Her form alanının ilişkili bir <label> öğesi olduğundan emin olun. for öğesindeki <label> özelliğini ve form alanındaki karşılık gelen id özelliğini kullanarak bir etiketi form alanıyla ilişkilendirebilirsiniz.

<span class="formlabel">Your name</span>
<input type="text">

<label for="name">Your name</label>
<input id="name" type="text">

Resimler

alt özelliğini kullanarak her zaman resimlerin metin açıklamasını sağlayın.

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

Resim yalnızca sunum amaçlıysa alt özelliğini yine de eklemeniz gerekir ancak boş bir değer verebilirsiniz.

<img src="texture.png">

<img src="texture.png" alt="">

Jake Archibald, mükemmel alt metinler yazma hakkında bir makale yayınladı.

Bağlantılar

Bağlantılarda açıklayıcı metinler kullanmaya çalışın. "Burayı tıklayın" veya "daha fazla" gibi ifadeler kullanmayın.

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

Anlamlı semantik HTML kullanmak, web sayfalarınızı ekran okuyucular gibi yardımcı teknolojilerin yanı sıra sesli asistanlar gibi diğer ses çıkışları için daha erişilebilir hâle getirir.

Arayüzdeki bazı widget'lar (ör. carouseller, sekmeler ve akordeonlar) karşılık gelen bir HTML öğesine sahip değildir. Bunlar HTML, CSS, JavaScript ve ARIA kombinasyonuyla sıfırdan oluşturulmalıdır.

ARIA, Accessible Rich Internet Applications (Erişilebilir Zengin İnternet Uygulamaları) anlamına gelir. Bu sözlük, uygun bir HTML öğesi olmadığında semantik bilgiler sağlamanıza olanak tanır.

Henüz HTML öğesi olarak kullanılamayan arayüz öğeleri oluşturmanız gerekiyorsa ARIA hakkında bilgi edinin.

JavaScript ile ne kadar çok özel işlev eklerseniz ARIA'yı o kadar iyi anlamanız gerekir. Standart HTML öğelerini kullanırsanız ARIA'ya ihtiyacınız olmayabilir.

Mümkünse ekran okuyucu kullanan gerçek kullanıcılarla test yapın. Bu sayede, kullanıcıların web'de nasıl gezindiğini daha iyi anlayabilir ve erişilebilirlik göz önünde bulundurularak tasarım yapma konusunda tahminde bulunmak zorunda kalmazsınız.

Gerçek kullanıcılarla test yapmak, varsayımlarınızı ortaya çıkarmanın harika bir yoludur. Sonraki modülde, kullanıcıların web sitelerinizle etkileşim kurma şekilleri hakkında bilgi edineceksiniz. Bu da varsayımda bulunmanın çok kolay olduğu bir başka alandır.

Bilgilerinizi sınayın

Erişilebilirlik bilginizi test edin