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.
![Kırmızı körlüğü simülasyonu.](https://web.dev/static/learn/design/accessibility/image/simulated-protanopia-re-1d45e86addd67.png?authuser=5&hl=tr)
![Mavi körlüğü simülasyonu](https://web.dev/static/learn/design/accessibility/image/simulated-tritanopia-bl-84fb927cae768.png?authuser=5&hl=tr)
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:
- Sistem Tercihleri
- Erişilebilirlik
- Görüntülü Reklam Ağı
- Renk Filtreleri
- 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:
- Sistem Tercihleri
- Erişilebilirlik
- 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:
- Sistem Tercihleri
- Erişilebilirlik
- 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.
![Açık sol nokta com.](https://web.dev/static/learn/design/accessibility/image/clearleft-dot-com-5486d64205cac.png?authuser=5&hl=tr)
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
CSS ile bir geliştirici, yazı tipi boyutu gibi bir kullanıcı tercihinin
body { font-size: 12px; }
kullanmanız yeterlidir.Bir kullanıcının yazı tipi boyutu tercihinin üzerine yazmamak için?
px
gibi mutlak birimler.rem
gibi göreli birimler.Dünyadaki herkes fare kullanır.
Alt özelliği boş olan resimler ne işe yarar?