CSS ile Erişilebilirlik
Düzen, hareket ve modern araç setini zaten kullanıyorsunuz. CSS’te erişilebilirlik, insanların hissettiği katmandır: klavye odağı nerede görünüyor? Metin okunabiliyor mu? Dönen bir animasyon rahatsız ediyor mu? Bu oturum bir HTML yığını değil (landmark, alt, ARIA). Odak, kontrast ve hareketi kullanılabilir tutan stil alışkanlıklarıdır.
Odak görünür kalmalı
Klavye kullanıcıları Tab ile bağlantılar ve kontroller arasında gezer. Odak halkası kaybolursa yolunu kaybederler. :focus-visible tercih edin: fare tıklamaları sakin kalsın, klavye odağı net dursun:
:root {
--focus-ring: #2563eb;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 3px;
}
.text-link:focus:not(:focus-visible) {
outline: none;
}
:focus-visible, halkanın gerçekten yardımcı olduğu durumları hedefler (çoğunlukla klavye). Yüksek kontrastlı bir halka ve hafif bir outline-offset kullanın ki halka kenarlıklarla çarpışmasın.
Yerine koyacak bir şey yoksa outline: none yok
Varsayılan outline’ı kaldırmak yalnızca daha net özel bir odak stili verdiğinizde doğrudur. Çıplak *:focus { outline: none; } klasik bir tuzaktır:
/* Bad: keyboard users lose the only cue */
.bad-button:focus {
outline: none;
}
/* Good: custom ring that still shows focus */
.good-button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0f766e;
}
Tarayıcı outline’ını bastırıyorsanız, odaklı kontrolü başka bir şey işaretlemelidir — box-shadow, kenarlık rengi veya her temada hâlâ bariz duran bir arka plan kayması.
Kontrast bir CSS tercihidir
Marka renkleri tasarım tahtasında keskin, güneşte telefonda soluk görünür. Ön plan / arka plan çiftlerini yalnızca süs değil, erişilebilirlik kararı gibi ele alın:
:root {
--surface: #0f172a;
--text: #f8fafc;
--muted: #cbd5e1;
--accent: #38bdf8;
--accent-text: #0c4a6e;
}
.hero {
background: var(--surface);
color: var(--text);
}
.hero .lede {
color: var(--muted);
}
.hero .cta {
background: var(--accent);
color: var(--accent-text);
font-weight: 700;
}
Gövde metni ve düğmelerde güçlü kontrast hedefleyin. Dekoratif griler ikincil etiketlerde daha yumuşak olabilir; asıl metin ve kontroller okunabilir kalmalıdır. Paleti yayınlamadan önce çiftleri bir kontrast denetleyicisiyle kontrol edin.
Azaltılmış harekete saygı gösterin
Animasyonlar ve büyük dönüşümler rahatsızlık verebilir. Zorunlu olmayan hareketi prefers-reduced-motion ile kapayın:
.banner {
transition: transform 0.4s ease, opacity 0.4s ease;
}
.banner.is-shown {
transform: translateY(0);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.banner,
.banner.is-shown {
transition: none;
transform: none;
}
.spinner {
animation: none;
}
}
İşletim sisteminden hareket azaltmasını isteyen kullanıcı yine son arayüz durumunu görmeli — yalnızca yolculuk olmadan. Gerekli opacity veya düzen değişikliklerini tutun; sonsuz dönüşleri ve büyük kaymaları kaldırın.
Yüksek kontrast ve forced-colors
Bazı ortamlar paletinizi ezer (Windows High Contrast / forced-colors). Kırılgan süslemeleri yumuşatın, gerçek kenarlıkları koruyun:
.card {
border: 1px solid #e2e8f0;
background: #fff;
box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}
@media (forced-colors: active) {
.card {
border: 1px solid CanvasText;
background: Canvas;
box-shadow: none;
color: CanvasText;
}
.card a {
color: LinkText;
}
}
Canvas, CanvasText ve LinkText gibi sistem renk anahtar sözcükleri, renkleri marka rehberiniz değil kullanıcı belirlediğinde kontrollerin görünür kalmasına yardım eder.
CSS tarafı kontrol listesi
📊 CSS accessibility habits
| Practice | CSS habit | Avoid |
|---|---|---|
| Keep focus findable | :focus-visible + strong ring / shadow |
outline: none with no replacement |
| Readable type | High-contrast text/background tokens | Light grey on white for body copy |
| Kind motion | @media (prefers-reduced-motion: reduce) |
Endless spins for everyone |
| Survive high contrast | Real borders; forced-colors tweaks |
Shadow-only “edges” |
| Reachable controls | Comfortable padding / hit area | Tiny icon-only targets with no focus style |
Landmark’lar, etiketler ve alt metin hâlâ HTML’indir. CSS, stil uygulandıktan sonra bu kontrollerin algılanabilir kalıp kalmadığını sahiplenir.
Atla bağlantıları ve focus-within
Bir atla bağlantısı (skip link) yinelenen kromun üzerinden atlar. Odakta görünecek şekilde stil verin. :focus-within, bir çocuk odaklandığında tüm grubu da vurgulayabilir:
.skip-link {
position: absolute;
left: 1rem;
top: -3rem;
padding: 0.5rem 0.75rem;
background: #111827;
color: #fff;
border-radius: 0.375rem;
z-index: 20;
}
.skip-link:focus-visible {
top: 1rem;
outline: 3px solid #fbbf24;
outline-offset: 2px;
}
.nav:focus-within {
box-shadow: inset 0 0 0 2px #2563eb;
}
Atla bağlantısı odaklanana kadar ekran dışında kalır, sonra barizleşir. Nav halkası, Tab çubuktaki bir çocuk bağlantıya indiğinde yardımcı olur.
Kendiniz deneyin
- Bağlantı ve düğmelere bir
:focus-visiblehalkası ekleyin; sayfada Tab ile gezinin ve odağın her zaman göründüğünü doğrulayın. - Düşük kontrastlı bir çifti daha koyu metin veya daha derin bir yüzeyle düzeltin.
- Bir transition veya animation’ı
prefers-reduced-motion: reduceile sarın ve işletim sistemi ayarını (veya DevTools emülasyonunu) değiştirin. - forced-colors emülasyonunda kartların hâlâ gerçek bir kenarlığı olduğunu doğrulayın.
- Yalnızca klavye odağında görünen bir skip link stilleyin.
Sık yapılan hatalar
- Özel odak stili olmadan site genelinde
outline: none(veyaoutline: 0) - Gövde metni ve birincil düğmelerde kontrastı düşüren şık marka renkleri
prefers-reduced-motionkapısı olmadan herkes için büyük animasyonlar- Hâlâ Tab alan odaklanabilir bir kontrolü yalnızca
opacity: 0ile gizlemek - Bu CSS dersini anlamsal HTML ve ARIA’nın tam yerine koymak
Özet
- Klavye odağını görünür tutun —
:focus-visibletercih edin; daha güçlü bir işaret yokken outline’ı silmeyin - Renk kontrastını metin ve kontroller için zorunluluk sayın
prefers-reduced-motione uyun veforced-colorsiçin stilleri güçlendirin- Skip link’leri stilleyin; grubun ortak bir işarete ihtiyacı olduğunda
:focus-withinkullanın - Sonraki: CSS Özeti ve Sonraki Adımlar (
summary) — mini projeden önce kursu toplayın
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek