WCAG yönergelerini CSS'inize uygulayarak web sitelerinizi herkes için nasıl erişilebilir hale getireceğinizi öğrenin. Küresel bir kitle için kapsayıcı tasarımlar oluşturun.
CSS'te Erişilebilirlik: WCAG Uyumuna Yönelik Pratik Bir Kılavuz
Günümüzün giderek dijitalleşen dünyasında, web erişilebilirliğini sağlamak sadece en iyi uygulama değil, aynı zamanda etik bir zorunluluktur. Erişilebilir web siteleri, yetenekleri ne olursa olsun tüm kullanıcılara eşit erişim ve fırsat sunar. Bu kılavuz, Web İçeriği Erişilebilirlik Yönergelerine (WCAG) bağlı kalarak erişilebilir ve kapsayıcı web deneyimleri oluşturmak için CSS'ten nasıl yararlanılacağına odaklanmaktadır.
WCAG Nedir ve Neden Önemlidir?
Web İçeriği Erişilebilirlik Yönergeleri (WCAG), web içeriğini engelli insanlar için daha erişilebilir hale getirmeye yönelik uluslararası kabul görmüş bir dizi tavsiyedir. World Wide Web Consortium (W3C) tarafından geliştirilen WCAG, bireylerin, kuruluşların ve hükümetlerin uluslararası düzeydeki ihtiyaçlarını karşılayan ortak bir web erişilebilirliği standardı sağlar. WCAG önemlidir çünkü:
- Herkesin web sitenize erişebilmesini ve kullanabilmesini sağlayarak kapsayıcılığı teşvik eder.
- Sadece engelli kullanıcılar için değil, tüm kullanıcılar için kullanıcı deneyimini iyileştirir.
- Web sitenizin SEO (Arama Motoru Optimizasyonu) performansını artırabilir.
- Bazı bölgelerde yasal olarak zorunlu olabilir. Örneğin, birçok ülkenin kamu web siteleri ve belirli özel sektör kuruluşları için web erişilebilirliğini zorunlu kılan yasaları vardır. Amerika Birleşik Devletleri'ndeki Engelli Amerikalılar Yasası (ADA), web siteleri için de geçerli olacak şekilde yorumlanmıştır. Avrupa'da, Avrupa Erişilebilirlik Yasası, web siteleri ve mobil uygulamalar da dahil olmak üzere geniş bir ürün ve hizmet yelpazesi için erişilebilirlik gereksinimleri belirler. Avustralya'da ise web erişilebilirliğini de kapsayan Engellilik Ayrımcılığı Yasası bulunmaktadır.
- Sosyal sorumluluk gösterir ve marka itibarınızı güçlendirir.
WCAG İlkeleri: POUR
WCAG, genellikle POUR kısaltmasıyla hatırlanan dört temel ilkeye dayanmaktadır:
- Algılanabilir: Bilgi ve kullanıcı arayüzü bileşenleri, kullanıcıların algılayabileceği şekillerde sunulmalıdır.
- İşletilebilir: Kullanıcı arayüzü bileşenleri ve gezinme, işletilebilir olmalıdır.
- Anlaşılabilir: Bilgi ve kullanıcı arayüzünün işleyişi anlaşılabilir olmalıdır.
- Sağlam: İçerik, yardımcı teknolojiler de dahil olmak üzere çok çeşitli kullanıcı aracıları tarafından güvenilir bir şekilde yorumlanabilecek kadar sağlam olmalıdır.
Erişilebilirlik için CSS Teknikleri
CSS, WCAG uyumluluğuna ulaşmada çok önemli bir rol oynar. İşte dikkate alınması gereken bazı temel CSS teknikleri:
1. Anlamsal HTML ve CSS
Anlamsal HTML elemanlarını doğru kullanmak, içeriğinize anlam ve yapı kazandırarak ekran okuyucular ve diğer yardımcı teknolojiler için daha erişilebilir hale getirir. CSS ise bu anlamsal elemanların sunumunu geliştirir.
Örnek:
Her şey için genel <div> elemanları kullanmak yerine, <article>, <nav>, <aside>, <header>, <footer>, <main>, <section> gibi anlamsal elemanları ve başlık etiketlerini (<h1> ila <h6>) kullanın.
HTML:
<article>
<h2>Makale Başlığı</h2>
<p>Makale içeriği buraya gelecek.</p>
</article>
CSS:
article {
margin-bottom: 20px;
}
h2 {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
<article> ve <h2> kullanarak, içeriğe anlamsal bir anlam kazandırırsınız, bu da yardımcı teknolojilerin yapıyı ve bağlamı anlamasına yardımcı olur.
2. Renk ve Kontrast
Düşük görme yetisine sahip veya renk körü kullanıcılar için içeriğin okunabilir olmasını sağlamak amacıyla metin ve arka plan renkleri arasında yeterli renk kontrastı olduğundan emin olun. WCAG 2.1 Seviye AA, normal metin için en az 4.5:1 ve büyük metin (18pt veya 14pt kalın) için 3:1 kontrast oranı gerektirir.
Renk kontrastını kontrol etme araçları:
- WebAIM's Color Contrast Checker: https://webaim.org/resources/contrastchecker/
- Accessible Color Palette Builder: https://www.learnui.design/tools/accessible-color-palette-builder.html
- Chrome Geliştirici Araçları: Chrome Geliştirici Araçları yerleşik renk kontrastı kontrolü sağlar.
Örnek:
/* İyi Kontrast */
body {
background-color: #000000; /* Siyah */
color: #FFFFFF; /* Beyaz */
}
/* Zayıf Kontrast */
body {
background-color: #FFFFFF; /* Beyaz */
color: #F0F0F0; /* Açık Gri */
}
İlk örnek iyi bir kontrast sağlarken, ikinci örnek zayıf bir kontrasta sahiptir ve birçok kullanıcı için okunması zor olurdu.
Rengin Ötesinde: Bilgiyi iletmek için yalnızca renge güvenmeyin. Bilginin herkes için erişilebilir olmasını sağlamak için renge ek olarak metin etiketleri, simgeler veya diğer görsel ipuçlarını kullanın. Örneğin, zorunlu form alanlarını kırmızı renkle vurgulamak yerine, kırmızı bir kenarlık ve "(zorunlu)" gibi bir metin etiketinin bir kombinasyonunu kullanın.
3. Odak Göstergeleri
Kullanıcılar web sitenizde klavyeyi kullanarak gezindiğinde (örneğin, Sekme tuşunu kullanarak), o anda hangi elemanın odakta olduğunu bilmeleri için net görsel odak göstergeleri sağlamak çok önemlidir. Varsayılan tarayıcı odak göstergesi bazı durumlarda yetersiz veya hatta görünmez olabilir. Odak göstergesini daha belirgin hale getirmek için CSS kullanın.
Örnek:
a:focus, button:focus, input:focus, textarea:focus, select:focus {
outline: 2px solid #007bff; /* Mavi bir dış çizgi */
outline-offset: 2px; /* Eleman ile dış çizgi arasında bir boşluk oluşturur */
}
Bu CSS kodu, odakta olduklarında elemanlara mavi bir dış çizgi ekler. outline-offset özelliği, eleman ile dış çizgi arasına küçük bir boşluk ekleyerek görünürlüğü artırır. Web sitenizi klavye kullanıcıları için kullanılamaz hale getirebileceğinden, uygun bir alternatif sunmadan odak göstergesini tamamen kaldırmaktan kaçının.
4. Klavye ile Gezinme
Tüm etkileşimli elemanların (bağlantılar, düğmeler, form alanları vb.) klavye kullanılarak gezinilebilir olduğundan emin olun. Bu, fare kullanamayan kullanıcılar için çok önemlidir. Mantıksal bir gezinme akışı sağlamak için HTML kaynak kodundaki elemanların sırası, sayfadaki görsel sırayla eşleşmelidir. Mantıksal bir klavye gezinme sırasını korurken elemanları görsel olarak yeniden düzenlemek için CSS kullanın.
Örnek:
CSS kullanarak ekranın sağ tarafında bir gezinme menüsü görüntülemek istediğiniz bir senaryo düşünün. Ancak, erişilebilirlik için, ekran okuyucu kullanıcılarının ana içerikten önce karşılaşması için gezinme menüsünün HTML kaynak kodunda önce görünmesini istersiniz.
HTML:
<nav>
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkında</a></li>
<li><a href="#">Hizmetler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
<main>
<h1>Ana İçerik</h1>
<p>Bu, sayfanın ana içeriğidir.</p>
</main>
CSS:
body {
display: flex;
}
nav {
order: 1; /* Gezinmeyi sağa taşır */
width: 200px;
padding: 20px;
}
main {
order: 0; /* Ana içeriği solda tutar */
flex: 1;
padding: 20px;
}
CSS'teki order özelliğini kullanarak, gezinme menüsünü HTML kaynak kodundaki orijinal konumunu korurken ekranın sağ tarafına görsel olarak yeniden düzenleyebilirsiniz. Bu, klavye kullanıcılarının önce gezinme menüsüyle karşılaşmasını sağlayarak erişilebilirliği artırır.
5. İçeriği Sorumlu Bir Şekilde Gizleme
Bazen içeriği görsel ekrandan gizlemeniz ancak ekran okuyucular için erişilebilir tutmanız gerekebilir. Örneğin, yalnızca bir simgeyle görsel olarak temsil edilen bir bağlantı veya düğme için ek bağlam sağlamak isteyebilirsiniz. display: none veya visibility: hidden kullanmaktan kaçının, çünkü bu özellikler içeriği hem görsel kullanıcılardan hem de ekran okuyuculardan gizler. Bunun yerine, içeriği görsel olarak gizlerken yardımcı teknolojiler için erişilebilir tutan bir teknik kullanın.
Örnek:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
Bu CSS sınıfı, elemanı görsel olarak gizlerken ekran okuyucular için erişilebilir tutar. Bu sınıfı, ekran okuyucular tarafından okunmasını istediğiniz ancak görsel olarak görüntülenmeyen metinlere uygulayın.
HTML Örneği:
<a href="#">Düzenle <span class="sr-only">öğesini</span></a>
Bu örnekte, "öğesini" metni görsel olarak gizlenmiştir ancak ekran okuyucular tarafından okunarak "Düzenle" bağlantısı için bağlam sağlayacaktır.
ARIA Nitelikleri (Erişilebilir Zengin İnternet Uygulamaları): Dinamik içeriğin ve karmaşık kullanıcı arayüzü bileşenlerinin erişilebilirliğini artırmak için ARIA niteliklerini akıllıca kullanın. ARIA nitelikleri, yardımcı teknolojilere ek anlamsal bilgi sağlar. Ancak, anlamsal HTML ile çözülebilecek erişilebilirlik sorunlarını düzeltmek için ARIA niteliklerini kullanmaktan kaçının. Örneğin, özel widget'ları tanımlamak ve içerik dinamik olarak değiştiğinde ekran okuyuculara durum güncellemeleri sağlamak için ARIA rollerini ve niteliklerini kullanın.
6. Duyarlı Tasarım ve Erişilebilirlik
Web sitenizin duyarlı olduğundan ve farklı ekran boyutlarına ve cihazlara uyum sağladığından emin olun. Bu, mobil cihazlarda veya tabletlerde yardımcı teknolojiler kullanabilen engelli kullanıcılar için çok önemlidir. İçeriğinizin düzenini ve sunumunu ekran boyutuna ve yönüne göre ayarlamak için CSS medya sorgularını kullanın.
Örnek:
@media (max-width: 768px) {
nav ul {
flex-direction: column; /* Küçük ekranlarda gezinme öğelerini dikey olarak sıralar */
}
}
Bu CSS kodu, gezinme öğelerinin yönünü daha küçük ekranlarda dikeye çevirmek için bir medya sorgusu kullanır, bu da mobil cihazlarda gezinmeyi kolaylaştırır.
7. Animasyonlar ve Hareket
Aşırı veya kötü uygulanmış animasyonlar bazı kullanıcılarda nöbetlere veya hareket hastalığına neden olabilir. Azaltılmış hareketi tercih eden kullanıcılar için animasyonları azaltmak veya devre dışı bırakmak için CSS kullanın. prefers-reduced-motion medya sorgusu, kullanıcının sistemin kullandığı animasyon veya hareket miktarını en aza indirmesini isteyip istemediğini algılamanıza olanak tanır.
Örnek:
@media (prefers-reduced-motion: reduce) {
.animated-element {
animation: none !important;
transition: none !important;
}
}
Bu CSS kodu, işletim sistemlerinde "azaltılmış hareket" ayarını etkinleştiren kullanıcılar için animasyonları ve geçişleri devre dışı bırakır. Kullanıcıların web sitenizdeki animasyonları manuel olarak devre dışı bırakmasına olanak tanıyan bir kontrol sağlamayı düşünün.
8. Yardımcı Teknolojilerle Test Etme
Web sitenizin erişilebilir olduğundan emin olmanın en etkili yolu, onu ekran okuyucular, ekran büyütücüler ve konuşma tanıma yazılımı gibi yardımcı teknolojilerle test etmektir. Web sitenizin erişilebilirliği hakkında kapsamlı bir anlayış elde etmek için çeşitli yardımcı teknolojiler kullanın.
Popüler Ekran Okuyucular:
- NVDA (NonVisual Desktop Access): Windows için ücretsiz ve açık kaynaklı bir ekran okuyucu.
- JAWS (Job Access With Speech): Windows için popüler bir ticari ekran okuyucu.
- VoiceOver: macOS ve iOS için yerleşik bir ekran okuyucu.
Ek Test İpuçları:
- Klavye ile Gezinme: Tüm etkileşimli elemanların klavye kullanılarak erişilebilir olduğunu ve odak sırasının mantıklı olduğunu test edin.
- Form Erişilebilirliği: Form alanlarının doğru bir şekilde etiketlendiğinden ve hata mesajlarının açık ve anlaşılır olduğundan emin olun.
- Resim Alt Metni: Tüm resimlerin, resmin içeriğini ve işlevini doğru bir şekilde aktaran açıklayıcı alt metinlere sahip olduğunu doğrulayın.
- Dinamik İçerik: Dinamik içerik güncellemelerinin ekran okuyuculara düzgün bir şekilde duyurulduğunu test edin.
Erişilebilirlik için Gelişmiş CSS Teknikleri
1. Temalandırma için Özel Özellikler (CSS Değişkenleri)
Yüksek kontrast seçeneklerine sahip erişilebilir temalar oluşturmak için CSS özel özelliklerini (değişkenlerini) kullanın. Bu, kullanıcıların web sitenizin görünümünü kendi bireysel ihtiyaçlarına göre özelleştirmelerine olanak tanır.
Örnek:
:root {
--text-color: #333;
--background-color: #fff;
--link-color: #007bff;
}
body {
color: var(--text-color);
background-color: var(--background-color);
}
a {
color: var(--link-color);
}
/* Yüksek Kontrastlı Tema */
.high-contrast {
--text-color: #fff;
--background-color: #000;
--link-color: #ff0;
}
Bu örnek, metin rengi, arka plan rengi ve bağlantı rengi için CSS özel özellikleri tanımlar. .high-contrast sınıfı, yüksek kontrastlı bir tema oluşturmak için bu değişkenleri geçersiz kılar. Daha sonra temalar arasında geçiş yapmak için <body> elemanındaki .high-contrast sınıfını değiştirmek için JavaScript kullanabilirsiniz.
2. Erişilebilir Düzenler için CSS Grid ve Flexbox
CSS Grid ve Flexbox, erişilebilir ve duyarlı düzenler oluşturmak için kullanılabilecek güçlü düzen araçlarıdır. Ancak, elemanların görsel sırasının DOM sırasıyla eşleşmesini sağlamak için bunları dikkatli kullanmak önemlidir.
Örnek:
Flexbox veya Grid kullanırken, sekme sırasının mantıksal kaldığından emin olun. order özelliği dikkatli kullanılmazsa sekme sırasını bozabilir.
3. `clip-path` ve Erişilebilirlik
`clip-path` özelliği görsel olarak ilginç şekiller ve efektler oluşturmak için kullanılabilir. Ancak, `clip-path` kullanırken dikkatli olun çünkü bazen içeriği gizleyebilir veya etkileşimi zorlaştırabilir. Kırpılmış içeriğin erişilebilir kaldığından ve kırpmanın klavye ile gezinmeye veya ekran okuyucu erişimine müdahale etmediğinden emin olun.
4. `content` Özelliği ve Erişilebilirlik
CSS'deki `content` özelliği, bir elemanın öncesine veya sonrasına oluşturulmuş içerik eklemek için kullanılabilir. Ancak, oluşturulan içerik her zaman ekran okuyucular için erişilebilir değildir. `content` özelliğini akıllıca kullanın ve yardımcı teknolojilere ek anlamsal bilgi sağlamak için ARIA niteliklerini kullanmayı düşünün.
Gerçek Dünya Örnekleri ve Vaka İncelemeleri
Bu ilkelerin çeşitli bölgelerde ve bağlamlarda nasıl uygulandığını göstermek için bazı gerçek dünya örneklerini inceleyelim.
- Devlet Web Siteleri: Birleşik Krallık, Kanada ve Avustralya da dahil olmak üzere birçok ülkenin devlet web siteleri için katı erişilebilirlik yönergeleri vardır. Bu web siteleri genellikle anlamsal HTML, renk kontrastı ve klavye ile gezinme konularında en iyi uygulamaları sergileyerek WCAG uyumluluğunun örnek modelleri olarak hizmet eder.
- E-ticaret Platformları: Amazon ve Alibaba gibi küresel e-ticaret devleri, daha geniş bir kitleye ulaşmak için erişilebilirliğe büyük yatırım yapmaktadır. Genellikle resimler için alternatif metin, ürün taraması için klavye ile gezinme ve daha iyi okunabilirlik için ayarlanabilir yazı tipi boyutları gibi özellikler uygularlar.
- Eğitim Kurumları: Dünya çapındaki üniversiteler ve kolejler, erişilebilir çevrimiçi öğrenme ortamları oluşturmaya giderek daha fazla odaklanmaktadır. Engelli öğrencilere uyum sağlamak için genellikle videolar için transkriptler, sesli içerik için altyazılar ve ders materyallerinin erişilebilir versiyonlarını sunarlar.
Kaçınılması Gereken Yaygın Erişilebilirlik Hataları
- Yetersiz Renk Kontrastı: Düşük görme yetisine sahip kullanıcılar için okunması zor olan renk kombinasyonları kullanmak.
- Resimler için Eksik Alt Metin: Resimler için açıklayıcı alt metin sağlamamak, bu da onları ekran okuyucu kullanıcıları için erişilemez hale getirir.
- Zayıf Klavye ile Gezinme: Klavye kullanılarak gezinmesi zor veya imkansız web siteleri oluşturmak.
- Düzen için Tablo Kullanımı: Anlamsal HTML elemanları yerine düzen amacıyla HTML tabloları kullanmak.
- Odak Göstergelerini Görmezden Gelme: Görsel odak göstergesini kaldırmak veya gizlemek, klavye kullanıcılarının hangi elemanın odakta olduğunu bilmesini zorlaştırır.
- Bilgiyi İletmek için Yalnızca Renge Güvenme: Renk körlüğü olan kullanıcılar için erişilemez hale getirerek, bilgiyi iletmenin tek yolu olarak renk kullanmak.
- Yardımcı Teknolojilerle Test Etmemek: Erişilebilirlik sorunlarını belirlemek ve düzeltmek için web sitenizi ekran okuyucular gibi yardımcı teknolojilerle test etmemek.
Sonuç: Daha İyi Bir Web için Erişilebilirliği Benimsemek
Erişilebilirlik sadece teknik bir gereklilik değildir; herkes için kapsayıcı ve erişilebilir bir web oluşturmanın temel bir yönüdür. Bu CSS tekniklerini uygulayarak ve WCAG yönergelerine bağlı kalarak, yalnızca görsel olarak çekici değil, aynı zamanda yetenekleri ne olursa olsun tüm kullanıcılar için kullanılabilir ve keyifli web siteleri oluşturabilirsiniz. Erişilebilirliği web geliştirme sürecinizin ayrılmaz bir parçası olarak benimseyin ve daha kapsayıcı ve adil bir dijital dünyaya katkıda bulunacaksınız.
Kaynaklar ve İleri Okuma
- Web İçeriği Erişilebilirlik Yönergeleri (WCAG): https://www.w3.org/WAI/standards-guidelines/wcag/
- Web Erişilebilirlik İnisiyatifi (WAI): https://www.w3.org/WAI/
- WebAIM: https://webaim.org/
- Deque University: https://dequeuniversity.com/