Belediye Web Sitelerinde KAİK + WCAG: 10 Hızlı Düzeltme

Kısa cevap: Türkiye'de 1.398 belediye (büyükşehir, il, ilçe, belde) web sitesi işletmektedir. Cumhurbaşkanlığı 2019/12 sayılı Bilgi ve İletişim Güvenliği Tedbirleri Genelgesi, 6701 sayılı İnsan Hakları ve Eşitlik Kanunu ve 5378 sayılı Engelliler Hakkında Kanun kapsamında belediyeler web sitelerinin engelli vatandaşlara erişilebilir olmasından sorumludur. KAİK (Kamu Bilgi Sistemlerinde Erişilebilirlik Kılavuzu) WCAG 2.1 AA'yı referans alır. Bu rehber 10 hızlı düzeltmeyi kod örnekleriyle adım adım sunuyor, her biri 30 dk - 2 saat çalışma gerektirir.

Yasal çerçeve: belediye sorumluluğu

6701 sayılı İnsan Hakları ve Eşitlik Kanunu (2017)

Madde 3: Engelli bireylerin eşit hizmet hakkı vardır. Madde 4: Engellilik dahil tüm grupları kapsayan ayrımcılık yasaktır. Belediyeler kamu hizmet sağlayıcısı olarak doğrudan kapsamdadır.

5378 sayılı Engelliler Hakkında Kanun (2005)

Madde 7: Erişilebilirlik tüm kamu hizmetlerinin temel koşulu. Yıllık planlarda erişilebilirlik bütçesi ayrılması beklenir.

Cumhurbaşkanlığı 2019/12 Genelgesi

Tüm kamu kurumları bilgi sistemlerinde güvenlik + erişilebilirlik standartlarını uygulamakla yükümlü. KAİK kılavuzu bu çerçevede referans dokümandır.

KAİK kılavuzu

Cumhurbaşkanlığı Dijital Dönüşüm Ofisi yayını. WCAG 2.1 AA + EN 301 549 ile uyumlu pratik uygulama rehberi.

Yaptırım

• EYHGM (Engelli ve Yaşlı Hizmetleri Genel Müdürlüğü) idari süreç
• Vatandaş şikayetleri (CIMER, BİMER, doğrudan başvuru)
• İdare mahkemesi davası (Anayasa Madde 10: eşitlik)
• Sayıştay denetimi

10 hızlı düzeltme: kontrol listesi

Aşağıdaki 10 düzeltme çoğu belediye sitesinde uygulanması gereken temel iyileştirmelerdir. Her birinin tahmini süresi 30 dk - 2 saat arası. Toplam 1 günlük çalışma ile büyük etki sağlar.

1. Alt metin (image alt)

Sorun

Belediye sitelerinde bayraklar, başkan fotoğrafları, etkinlik görselleri alt metni olmadan kullanılır. Ekran okuyucu "image123.jpg" der.

Düzeltme

<!-- ❌ Yanlış -->
<img src="baskan.jpg">
<img src="logo.png" alt="logo">

<!-- ✅ Doğru -->
<img src="baskan.jpg" alt="Belediye Başkanı Ahmet Yılmaz, makamında">
<img src="logo.png" alt="Çankaya Belediyesi logosu">

<!-- ✅ Dekoratif (anlam taşımayan) -->
<img src="susleme.png" alt="" role="presentation">

İpucu

CMS kullanıyorsanız (WordPress, Joomla) tüm görsellere alt zorunlu alan ekleyin.

2. Klavye odağı görünür

Sorun

Tasarımcılar "outline çirkin" diye outline: none kullanır. Klavye kullanıcı odağın nerede olduğunu göremez.

Düzeltme

/* ❌ Yanlış */
*:focus { outline: none; }

/* ✅ Doğru */
*:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* Veya özel tasarım */
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.5);
  outline: none;
}

Test

Tab tuşuyla sayfada gezinin, her odaklanılan öğede görünür gösterge olmalı.

3. Form etiketleri

Sorun

Vatandaş hizmet formları (örn. cevap formu, başvuru formu) placeholder ile etiketlenir; ekran okuyucu için boş sayılır.

Düzeltme

<!-- ❌ Yanlış -->
<input type="text" placeholder="Ad Soyad">

<!-- ✅ Doğru (label görünür) -->
<label for="ad-soyad">Ad Soyad</label>
<input type="text" id="ad-soyad" name="ad_soyad" required>

<!-- ✅ Doğru (label görsel olarak gizli) -->
<label for="arama" class="visually-hidden">Site içinde ara</label>
<input type="search" id="arama" placeholder="Site içinde ara...">

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

4. Renk kontrastı

Sorun

Açık gri (#999) menü linkleri, beyaz buton üzerine açık mavi metin kontrast oranı WCAG AA 4.5:1 altında.

Düzeltme

Test aracı: webaim.org/resources/contrastchecker

CSS değişkeni ile yönetim

:root {
  --text-primary: #1a1a1a;     /* 16.9:1: AAA */
  --text-secondary: #595959;   /* 7.0:1: AAA */
  --text-muted: #767676;       /* 4.5:1: AA */
  --link-color: #1864ab;       /* 7.4:1: AAA */
}

5. Heading hiyerarşisi

Sorun

Belediye sitesinde h1 yok veya birden fazla h1; h2 atlanıp h3'e geçilir; "büyük metin" için <h2> kullanılır (semantik anlam yok).

Düzeltme

<!-- ❌ Yanlış -->
<h1>Çankaya Belediyesi</h1>
<h1>Hoşgeldiniz</h1>
<h4>Duyurular</h4>  <!-- h2 atlandı -->

<!-- ✅ Doğru -->
<h1>Çankaya Belediyesi Resmi Web Sitesi</h1>
<h2>Hoşgeldiniz</h2>
<h2>Duyurular</h2>
  <h3>Yeni park açılışı</h3>
  <h3>Otopark düzenlemesi</h3>
<h2>Hizmetler</h2>

Test

NVDA: H tuşu ile sayfada başlık başlığa gezinin. Hiyerarşi mantıklı olmalı.

6. Link metinleri

Sorun

"Devamı", "Tıklayın", "Buradan" gibi bağlamsız link metinleri ekran okuyucuda anlamsız.

Düzeltme

<!-- ❌ Yanlış -->
<p>Belediye meclis kararı yayımlandı. <a href="/meclis/karar-123">Devamı</a></p>

<!-- ✅ Doğru -->
<p>Belediye meclis kararı yayımlandı. <a href="/meclis/karar-123">Meclis kararı 123 detayını oku</a></p>

<!-- ✅ Veya aria-label ile -->
<p>Belediye meclis kararı yayımlandı. <a href="/meclis/karar-123" aria-label="Meclis kararı 123 detayını oku">Devamı</a></p>

Test

NVDA: Insert + F7 → Links, her link bağlamından bağımsız anlamlı olmalı.

7. Skip-to-content

Sorun

Belediye sitelerinde menüler genellikle 8-15 link içerir. Her sayfada klavye kullanıcı 15 Tab basarak ana içeriğe ulaşmak zorunda.

Düzeltme

<body>
  <a href="#main" class="skip-link">Ana içeriğe geç</a>

  <header>...</header>
  <nav>...</nav>

  <main id="main" tabindex="-1">
    <!-- ana içerik -->
  </main>
</body>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 12px 20px;
  text-decoration: none;
  font-weight: bold;
  z-index: 9999;
}

.skip-link:focus {
  top: 0;
}

Test

Sayfayı aç, ilk Tab basışında "Ana içeriğe geç" butonu görünmeli + Enter ile ana içeriğe odaklanmalı.

8. Hata mesajları

Sorun

Form hatalı doldurulduğunda kırmızı border görünür ama ekran okuyucu için sessiz. Kullanıcı neden gönderemediğini anlamaz.

Düzeltme

<form>
  <label for="email">E-posta</label>
  <input type="email" id="email" aria-describedby="email-error" aria-invalid="true">
  <div id="email-error" role="alert" aria-live="assertive">
    Geçersiz e-posta adresi. Örnek: ad@domain.com
  </div>
</form>

JavaScript ile dinamik hata gösterimi:

function showError(field, message) {
  const errorEl = document.getElementById(field.id + '-error');
  errorEl.textContent = message;
  field.setAttribute('aria-invalid', 'true');
  // role="alert" otomatik okur
  field.focus();
}

9. Viewport meta

Sorun

Eski belediye sitelerinde viewport meta tag yok veya user-scalable=no ile zoom devre dışı. Yaşlı vatandaşlar pinch-zoom yapamaz.

Düzeltme

<!-- ❌ Yanlış -->
<!-- viewport hiç yok -->
<meta name="viewport" content="width=device-width, user-scalable=no">

<!-- ✅ Doğru -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Önemli: Mobil cihazda 200% zoom WCAG SC 1.4.4 (Resize Text) için gerekli. user-scalable=no kullanmayın.

10. Lang attribute

Sorun

Türkçe içerik HTML tag'inde lang="tr" belirtilmemiş. Ekran okuyucu varsayılan İngilizce sesle Türkçe metni telaffuz eder ("Çankaya" → "Sankaya").

Düzeltme

<!-- ❌ Yanlış -->
<html>
<html lang="en">

<!-- ✅ Doğru -->
<html lang="tr">

<!-- ✅ Çoklu dil: bölüm bazında -->
<html lang="tr">
  <body>
    <p>Belediye başkanımız aşağıdaki mesajı verdi:</p>
    <blockquote lang="en">
      We welcome international visitors to our city.
    </blockquote>
  </body>
</html>

Test

NVDA lang attribute'una göre otomatik ses motorunu değiştirir. Türkçe için Türkçe sesi, İngilizce blok için İngilizce sesi kullanır.

cerez.io'yu kamu kurumlarında kullanmak

Yukarıdaki 10 düzeltme temel HTML/CSS seviyesinde olduğu için her belediye kendi başına yapabilir. Ancak ziyaretçiye ek görüntü ayarları (font büyütme, kontrast yükseltme, animasyon durdurma) sunmak isterseniz bir JavaScript widget kullanılabilir; widget kaynak koddaki düzeltmenin yerine geçmez.

Kamu kurumları cerez.io'nun mevcut planlarını kullanır; ayrı bir kamu paketi yoktur. Planlarda öne çıkanlar:

• Panel verileri ve rıza kayıtları Türkiye'deki sunucuda tutulur
• 13 hazır erişilebilirlik profili (bir kısmı ücretli planlarda)
• Erişilebilirlik beyanı oluşturucu
• Widget rengi ve konumu ayarlanabilir; cerez.io markası plana göre ya da eklentiyle gizlenebilir
• Plana göre birden çok alan adı (kurumsal site, alt siteler)

Ayrıntılar Kamu Kurumları Çözümü sayfasında. Kurumsal plan için teklif isteyebilirsiniz.

Sıkça Sorulan Sorular

Yukarıdaki 10 düzeltme yeterli mi?

Hayır, bu başlangıç kontrol listesidir. Tam KAİK + WCAG 2.1 AA uyumu için ek 30-50 madde gerekir (modal accessibility, dynamic content, video captions, PDF accessibility, vb.).

CMS kullanıyorum (WordPress / Joomla), tema değiştirmem gerekir mi?

Çoğu zaman hayır, tema CSS/HTML üzerinde değişiklik yeterlidir. Erişilebilir temalar (WordPress için Twenty Twenty-Four, Astra Pro Accessibility) önerilir.

Belediye sitelerinde JavaScript widget kullanmak güvenli mi?

Evet: Shadow DOM mimarisi kullanan widget'lar (cerez.io gibi) sitenizin CSS'ine müdahale etmez, sadece kullanıcı tarafında çalışır. Sunucu yükü minimal.

Tahmini düzeltme süresi?

Yukarıdaki 10 düzeltme deneyimli bir geliştirici için 1-2 gün. Yeni başlayan için 3-5 gün. Yıllık review için 1 gün ayırın.

Erişilebilirlik beyanını biz mi danışman mı hazırlamalı?

Belediye kendi adına yayımlar. Danışman / ajans yardım edebilir. cerez.io admin paneli içindeki Beyan Oluşturucu tek tıkla şablon üretir.

Şikayet aldığımızda ne yapmalıyız?

30 gün içinde yazılı yanıt verin. Çözüm sunamıyorsanız sebebini açıklayın. Çözülmezse EYHGM süreci işletilebilir. Mahkeme yoluyla idare mahkemesi davası açılabilir.

Belediye sitenizi tarayın, WCAG teknik bulgularını görün. Kamu kurumları sayfasını inceleyin ya da iletişime geçin; destek Türkçedir.

Kaynaklar:

• KAİK: Cumhurbaşkanlığı Dijital Dönüşüm Ofisi
• Cumhurbaşkanlığı 2019/12 sayılı Genelge
• 6701 sayılı İnsan Hakları Kanunu
• 5378 sayılı Engelliler Kanunu
• WCAG 2.1: w3.org/TR/WCAG21