M

MLOG

Türkçe

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

WCAG İlkeleri: POUR

WCAG, genellikle POUR kısaltmasıyla hatırlanan dört temel ilkeye dayanmaktadı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ı:

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

Ek Test İpuçları:

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.

Kaçınılması Gereken Yaygın Erişilebilirlik Hataları

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