Erişilebilirlik

Sayfalarınızın farklı ekran boyutlarına yanıt vermesine izin vermek, web sitenize mümkün olduğunca fazla kullanıcı tarafından erişilebilmesini sağlamanın yalnızca bir yoludur. Aklınızda bulundurmanız gereken diğer faktörlerden bazılarını düşünün.

Renk körlüğü

Farklı kişiler renkleri farklı şekilde algılar. Kırmızı renk körlüğü olan kişiler kırmızıyı farklı bir renk olarak algılamaz. Yeşil körlüğünde yeşil eksiktir. Mavi renktedir.

Bazı araçlar, renk şemalarınızın farklı renk gören kişilere nasıl göründüğü konusunda size genel bir fikir verebilir.

Firefox'un Erişilebilirlik sekmesinde, seçeneklerin listesini içeren Simüle et etiketli bir açılır liste bulunur.

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

Bunlar tarayıcıya özgü araçlardır. İşletim sistemi düzeyinde farklı görüş türlerini emüle etmek de mümkündür.

Mac'te şu konuma gidin:

1. Sistem Tercihleri
2. Erişilebilirlik
3. Görüntülü Reklam Ağı
4. Renk Filtreleri
5. Renk Filtrelerini Etkinleştir

Seçeneklerden birini belirleyin.

Genel olarak, farklı öğeleri birbirinden ayırt etmek için yalnızca renklerden yararlanmak iyi bir fikir değildir. Örneğin, bağlantılarınızı çevreleyen metnin rengine göre farklı bir renk yapabilirsiniz (ve bunu yapmanız gerekir). Ancak, bağlantıların altını çizmek veya bağlantıları kalın hale getirmek gibi başka stil göstergeleri de uygulamalısınız.

a {
  color: red;
}

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

Renk kontrastı

Bazı renk kombinasyonları soruna neden olabilir. Ön plan rengi ile arka plan rengi arasında yeterli kontrast yoksa metnin okunması zorlaşır. Zayıf renk kontrastı, web'de en yaygın erişilebilirlik sorunlarından biridir ancak neyse ki bu sorunu tasarım sürecinin erken aşamalarında tespit edebilirsiniz.

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

• tota11y, tarayıcınızın araç çubuğuna ekleyebileceğiniz bir yer işareti uygulamasıdır.
• VisBug, başlıca tüm masaüstü tarayıcılarda kullanılabilen bir tarayıcı uzantısıdır.
• Firefox'un Erişilebilirlik Denetleyicisi, görsel kontrastla ilgili sorunları kontrol edebilir.
• Ayrıca Chrome Geliştirici Araçları ile düşük kontrastlı metinleri keşfedip düzeltebilirsiniz.
• Microsoft Edge tarayıcısında metin rengi kontrastını renk seçiciyi kullanarak test edebilirsiniz.

CSS'nizde color ve background-color öğelerini her zaman birlikte tanımlamak iyi bir fikirdir. Arka plan renginin, tarayıcının varsayılan rengi olacağını düşünmeyin. Kullanıcılar, tarayıcılarının kullandığı renkleri değiştirebilir ve 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 modunu kullanacak şekilde ayarlar. Bunu işletim sisteminizde deneyebilirsiniz.

Mac'te şu konuma gidin:

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

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

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

Kullanıcılar, ters renkleri kullanmak için işletim sistemlerinde bir tercih de belirleyebilir.

Mac'te şu konuma gidin:

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

Renkleri ters çevirme seçeneğini belirleyin.

Ters renklerle gezinen kullanıcılar için web sitenizin anlamlı olduğundan emin olun. Kutu gölgelerine dikkat edin. Renkler ters çevrildiğinde bu gölgelerin ayarlanması gerekebilir.

Yazı tipi boyutu

Kullanıcılar tarayıcılarında tek ayar renk değildir, varsayılan yazı tipi boyutunu da ayarlayabilirler. Görme yetisi azaldıkça tarayıcı veya işletim sistemlerindeki varsayılan yazı tipi boyutunu değiştirebilir, yıllar geçtikçe daha fazla rakamlara ulaşabilirler.

Göreli yazı tipi boyutlarını kullanarak bu ayarlara yanıt verebilirsiniz. px gibi birimler 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. Bu işlemi tarayıcı tercihlerinizden yapabilirsiniz. Ayrıca, yakınlaştırma yaparak bu işlemi bir web sayfasını ziyaret ederken de yapabilirsiniz. Varsayılan yazı tipi boyutu%200 artırılsa web siteniz çalışmaya devam ediyor mu? %400'e ne dersin?

Yazı tipi boyutu% 400'e getirilerek masaüstü bilgisayardan web sitenizi ziyaret eden bir kullanıcı, küçük ekranlı bir cihazdan sitenizi ziyaret eden bir kullanıcının sayfa düzeniyle aynı düzene sahip olmalıdır.

Klavyeyle gezinme

Web sayfalarında gezinmek için herkes fare veya dokunmatik yüzey kullanmaz. Bir sayfada gezinmenin başka bir yolu da klavyedir. tab tuşu özellikle yararlıdır. Kullanıcılar bir bağlantıdan veya form alanından diğerine hızlı bir şekilde geçebilir.

Stil özellikleri :hover ve :focus sahte sınıflarla ayarlanan bağlantılar, kullanıcının fare, dokunmatik yüzey veya klavye kullanmasından bağımsız olarak bu stilleri görüntüler. Bağlantılarınızı yalnızca klavyeyle gezinmeye yönelik olarak biçimlendirmek için :focus-visible sözde sınıfı kullanın. Bu stilleri daha dikkat çekici hale getirebilirsiniz.

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

Bağlantıdan bağlantıya veya form alanından form alanına kullanıcı sekmelerinde, bu öğeler doküman yapısında göründükleri sıraya göre odaklanır. Görsel sıralama da buna uygun olmalıdır.

CSS order özelliğine dikkat edin. Öğeleri HTML'deki sıralarından farklı bir görsel sırada yerleştirmek için bunu flexbox ve ızgara ile birlikte kullanabilirsiniz. Bu güçlü bir özelliktir ancak klavye kullanırken 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ısının geliştirici araçlarının Erişilebilirlik panelinde Sekme Sırasını Göster seçeneği bulunur. Bu özellik etkinleştirildiğinde, odaklanılabilir her öğeye sayı yerleştirilir.

Azaltılmış hareket

Animasyon ve hareket, web tasarımlarına hayat vermenin harika yollarıdır. Ancak bu hareketler bazı kişilerde kafa karıştırıcı olabilir ve hatta mide bulantısına neden olabilir.

Kullanıcının daha az hareket etmeyi tercih edip etmeyeceğini bildiren bir özellik sorgusu var. Adı prefers-reduced-motion. CSS geçişleri veya animasyonları kullandığınız her yerde bunu 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 ekranda hareket etmek içindir. Bir öğenin renginde, prefers-reduced-motion ürününden etkilenmemesi gereken geçişler kullanıyorsanız. Opaklığın ve çapraz geçişin geçişi de kullanılabilir. Hareketin azaltılması, animasyonun olmadığı anlamına gelmez.

Ses

Kullanıcılar web'de farklı bir deneyim yaşar. Web sitenizi herkes ekranda görmüyor. Ekran okuyucular gibi yardımcı teknolojiler bilgi çıktısını ekrana dönüştürerek sözlü konuşmaya dönüşür.

Ekran okuyucular, web tarayıcıları da dahil olmak üzere her türlü uygulamayla çalışır. Web tarayıcısının ekran okuyucuyla sorunsuz bir şekilde iletişim kurabilmesi için, erişilmekte olan web sayfasında yararlı semantik bilgilerin olması gerekir.

Yalnızca simge düğmelerinin, görme engelli kullanıcılara düğmenin amacını belirtmek için nasıl bir özellik içermesi gerektiğini öğrenmiştiniz. Bu, güçlü bir temel HTML'nin önemine dair yalnızca bir örnektir.

Başlık

<h1>, <h2>, <h3> gibi başlıkları makul bir şekilde kullanın. Ekran okuyucular bu başlıkları kullanarak dokümanınızın ana hatlarını oluşturabilir. Bu ana hatlarıyla klavye kısayollarıyla gezinebilirsiniz.

<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 noktalar kullanın. Bunun ardından ekran okuyucu kullanıcıları doğrudan bu önemli noktalara atlayabilir.

<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ında ilişkilendirilmiş bir <label> öğesi bulunduğundan emin olun. <label> öğesindeki for özelliğini ve form alanında karşılık gelen id özelliğini kullanarak etiketi bir 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

Resimler için her zaman alt özelliğini kullanarak metin açıklamaları 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 yine de alt özelliğini eklemeniz gerekir ancak bu özelliğe boş bir değer de 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ılar içinde açıklayıcı metin sağlamaya çalışın. "Burayı tıklayın" veya "daha fazla" gibi ifadeler kullanmaktan kaçını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ı teknolojiler ve sesli asistanlar gibi diğer ses çıkışları için daha erişilebilir hale getirir.

Karşılık gelen bir HTML öğesine sahip olmayan bazı arayüz widget'ları: atlı karıncalar, sekmeler, akordeonlar vb. Bunların HTML, CSS, JavaScript ve ARIA kombinasyonuyla sıfırdan oluşturulması gerekir.

ARIA, Erişilebilir Zengin İnternet Uygulamaları anlamına gelir. Kelime dağarcığı, uygun bir HTML öğesi olmadığında anlamsal bilgiler sağlamanıza olanak tanır.

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

JavaScript ile ne kadar çok ısmarlama işlev eklerseniz ARIA'yı o kadar iyi anlamanız gerekir. Yerel HTML öğeleri kullanmaya devam ederseniz herhangi bir ARIA'ya ihtiyacınız olmayabilir.

Mümkünse, gerçek ekran okuyucu kullanıcılarıyla test edin. Böylece hem çocukların web'de nasıl gezindiklerini daha iyi anlayabilir hem de erişilebilirliği göz önünde bulundurarak tasarım yaparken tahminlerden kurtulabilirsiniz.

Gerçek kişilerle test etmek, varsayımlarınızı ortaya çıkarmanın harika bir yoludur. Bir sonraki modülde, varsayımlarda bulunmanın çok kolay olduğu başka bir alan olan, kullanıcıların web sitelerinizle etkileşime girdiği farklı yolları öğreneceksiniz.

Öğrendiklerinizi sınayın

Erişilebilirlik bilginizi test edin