Erişilebilirlik

Sayfalarınızın farklı ekran boyutlarına uyum sağlamasına izin vermek, web sitenize mümkün olduğunca çok kişi tarafından erişilebilir olmanın yollarından yalnızca biridir. Aklınızda bulundurmanız gereken bu diğer faktörlerden bazılarını göz önünde bulundurun.

Renk görme bozukluğu

İnsanlar renkleri farklı şekilde algılar. Kırmızı körlüğü olan kişiler kırmızıyı farklı bir renk olarak algılamaz. Döteranopiada yeşil eksiktir. Sarı-mavi rengi olan kişiler için renk mavidir.

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

Firefox'un Erişilebilirlik sekmesinde, bir dizi seçenek içeren Simüle etiketli bir açılır menü bulunur.

Farklı renk görüşünün simülasyonlarının bulunduğu bir web sitesini görüntüleme.

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. İşletim sistemi düzeyinde farklı görüş türlerinin emülasyonu da 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ştir

Seçeneklerden birini belirleyin.

Genel olarak, farklı öğeleri birbirinden 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 renk yapabilirsiniz (veya yapmanız gerekir). Bununla birlikte, bağlantıların altını çizmek veya bağlantıları kalın yapmak gibi başka stil göstergeleri de uygulamanız gerekir.

Yapılmaması gerekenler:

a {
  color: red;
}

Yapılması gerekenler

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. Kötü renk kontrastı, web'deki en yaygın erişilebilirlik sorunlarından biridir. Neyse ki, tasarım sürecinin başında fark edebilirsiniz.

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

• tota11y, tarayıcınızın araç çubuğuna ekleyebileceğiniz bir yer işareti uygulamasıdır.
• VisBug, önde gelen 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.
• Chrome Geliştirici Araçları'nı kullanarak düşük kontrastlı metinleri de keşfedip düzeltebilirsiniz.
• Microsoft'un Edge tarayıcısında renk seçiciyi kullanarak metin rengi kontrastını test edebilirsiniz.

color ve background-color öğelerini CSS'nizde her zaman birlikte tanımlamak iyi bir fikirdir. Arka plan renginin, tarayıcının varsayılanı olacağını varsaymayın. Kullanıcılar, tarayıcılarının kullandığı renkleri değiştirebilir ve değiştirebilir.

Yapılmaması gerekenler:

body {
  color: black;
}

Yapılması gerekenler

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

Yüksek kontrast

Bazı kullanıcılar işletim sistemlerini yüksek kontrast modu kullanacak şekilde ayarlar. Bunu 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.

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

Tarayıcı Desteği

• . 96
• . 96
• . giriş
• . 14.1

Kaynak

Not: CSS özel özellikleri, renk bildirimlerini gruplandırmanın harika bir yoludur. Özel mülk değerlerinizi güncellemek için prefers-contrast medya özelliğini kullanın.

Kullanıcılar, işletim sistemlerinde ters çevrilmiş renklerin kullanılmasını da tercih edebilir.

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 çevrilmiş olarak göz atan kullanıcılar için de anlamlı olduğundan 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 renk seçeneğini ayarlamakla kalmaz, aynı zamanda varsayılan yazı tipi boyutunu da ayarlayabilir. Gözleri kayboldukça tarayıcı veya işletim sistemlerinde varsayılan yazı tipi boyutunu değiştirebilir ve yıllar geçtikçe sayıları yükseltebilir.

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ızın varsayılan metin boyutu ayarını değiştirmeyi deneyin. Bu işlemi tarayıcı tercihlerinizde yapabilirsiniz. Ya da yakınlaştırarak bu işlemi bir web sayfasını ziyaret ederken de yapabilirsiniz. Varsayılan yazı tipi boyutu%200 artırılırsa web siteniz çalışmaya devam ediyor mu? Peki ya %400?

Web sitenizi, yazı tipi boyutu% 400'e kadar yükseltilmiş bir masaüstü bilgisayardan ziyaret eden bir kullanıcının, küçük ekran cihazından sitenizi ziyaret eden bir kullanıcıyla aynı düzende görmesi gerekir.

Bir masaüstü cihazda ve bir mobil cihazda görüntülenen aynı web sitesi. Masaüstü tarayıcısının yazı tipi boyutu %400'e yükseltildi.

Klavyeyle gezinme

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

:hover ve :focus sözde sınıfları ile stilize edilen bağlantılar, kullanıcıların fare, dokunmatik yüzey veya klavye kullanmasına bakılmaksızın bu stilleri görüntüler. Yalnızca klavyeyle gezinebileceğiniz şekilde bağlantılarınızın stilini belirlemek için :focus-visible sözde sınıfını kullanın. Bu stilleri daha kolay fark edilebilir 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ı sekmeleri, doküman yapısında göründükleri sırayla odaklanır. Bu da görsel sırayla eşleşmelidir.

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 klavyeyle gezinen kullanıcıların kafasını karıştırabilir.

Sekme sırasının anlamlı 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 Sekmeleme Sırasını Göster seçeneği bulunur. Bunu etkinleştirdiğinizde odaklanılabilir her bir öğeye sayı yerleştirilir.

Not: İçeriği yeniden sıralamanın neden olduğu sorunlar hakkında daha fazla bilgi edinin.

Az hareket

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

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

Tarayıcı Desteği

• . 74
• . 79
• . 63
• . 10.1

Kaynak

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 özelliğinden etkilenmemesi gereken bir öğenin renginde geçişler kullanıyorsanız. Ayrıca opaklığın ve çapraz geçişin geçişinde de sakınca yoktur. Hareketin azaltılması, animasyonun olmadığı anlamına gelmez.

Ses

Kullanıcılar, web'i farklı şekilde deneyimliyor. Web sitenizi herkes ekranda görmüyor. Ekran okuyucular gibi yardımcı teknolojiler, bilgi çıktılarını ekranda sesli kelimelere 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, o anda erişilmekte olan web sayfasında yararlı anlamsal bilgiler olması gerekir.

Daha önce, yalnızca simge içeren düğmelerin, görmeyen kullanıcılar için düğmenin amacını belirtmek üzere nasıl bir özellik içermesi gerektiğini öğrenmiştiniz. Bu, güçlü, temel HTML'nin öneminin yalnızca bir örneğidir.

Başlıklar

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

Yapılmaması gerekenler:

<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>

Yapılması gerekenler

<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 nokta öğeleri kullanın. Ekran okuyucu kullanıcıları doğrudan bu önemli noktalara atlayabilir.

Yapılmaması gerekenler:

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

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

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

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

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

Yapılması gerekenler

<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. <label> öğesinde for özelliğini ve form alanında karşılık gelen id özelliğini kullanarak etiketi bir form alanıyla ilişkilendirebilirsiniz.

Yapılmaması gerekenler:

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

Yapılması gerekenler

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

Not: Erişilebilirlik ve formlar hakkında daha fazla bilgi için Formları Öğrenme kursundaki Erişilebilirlik modülüne göz atın.

Resimler

Her zaman alt özelliğini kullanarak görsellerin metin açıklamasını sağlayın.

Yapılmaması gerekenler:

<img src="dog.jpg">

Yapılması gerekenler

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

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

Yapılmaması gerekenler:

<img src="texture.png">

Yapılması gerekenler

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

Jake Archibald, harika alt metinleri 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" gibi ifadeler kullanmaktan kaçının veya "daha fazla" ifadesini ekleyin.

Yapılmaması gerekenler:

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

Yapılması gerekenler

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

ARIA

Anlamlı semantik HTML kullanmak, web sayfalarınızın ekran okuyucular gibi yardımcı teknolojiler ve sesli asistanlar gibi diğer ses çıkışları için daha erişilebilir olmasını sağlar.

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

ARIA, Erişilebilir Zengin İnternet Uygulamaları anlamına gelir. Sözlüğün sözlüğü, 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 özel işlev eklerseniz ARIA'yı o kadar iyi anlamanız gerekir. Yerel HTML öğelerine bağlı kalırsanız ARIA'ya ihtiyacınız olmayabilir.

Mümkünse ekran okuyucuyu gerçek kullanıcılarıyla test edin. Bu, hem çocuğunuzun web'de nasıl gezindiğini daha iyi anlamanızı sağlamakla kalmaz, aynı zamanda erişilebilirliği göz önünde bulundurarak tasarım yaparken tahmin yürütme zorunluluğunu ortadan kaldırır.

Gerçek kişilerle test yapmak, yaptığınız varsayımları ortaya çıkarmanın harika bir yoludur. Sonraki modülde, kullanıcıların web sitelerinizle olan farklı yolları, varsayımlarda bulunmanın çok kolay olduğu başka bir alan hakkında bilgi edineceksiniz.

Öğrendiklerinizi sınayın

Erişilebilirlik bilginizi test edin

CSS ile bir geliştirici, en kötüsünü yapmak için yazı tipi boyutu gibi bir kullanıcı tercihinin üzerine yazabilir.

Doğru

Yalnızca body { font-size: 12px; } kullanmanız yeterlidir.

Yanlış

Kullanıcı tercihlerinin etkisi güçlü olsa da tam kontrol sağlamaz.

Bir kullanıcının yazı tipi boyutu tercihinin üzerine yazmamak için

px gibi mutlak birimler.

Bunlar kullanılırken kullanıcının yazı tipi boyutu tercihi dikkate alınmaz.

rem gibi göreli birimler.

Bunlar, geliştiricilerin, kullanıcının yazı tipi boyutu tercihlerini de kapsayan uzunluklarda oluşturmalarına olanak tanır.

Herkes fare kullanır.

Doğru

Kimileri seslerini, klavyelerini, oyun kumandalarını, ekran okuyucularını veya diğer etkileşim yöntemlerini kullanır.

Yanlış

Popüler farenin birçok alternatifi vardır.

Alt özelliği boş olan bir resmin işlevi nedir?

Tarayıcı, bunları kullanıcı için otomatik olarak ekler.

Hiçbir tarayıcıda sunulan bir özellik değildir.

Resim sunu amaçlı olarak değerlendiriliyor.

Resmin, içeriği tüketmede önemli olmadığı varsayılır.

"Boş dize" sesli olarak okur nasıl aktaracağımızı göreceğiz.

Böyle bir şey olmaz.

Nothing

Mutlaka bir şey olur.