Shopify Mağazanızın ADA'sını Erişilebilir Hale Getirme

ADA (Engelli Amerikalılar Yasası) e-ticaret web sitelerine karşı açılan davalar 2020 ile 2024 arasında %300 artarken, Shopify mağazaları da büyüyen hedef payına sahip oldu. Yasal uyumluluğun ötesinde, erişilebilirlik geliri doğrudan etkiliyor: ABD'li yetişkinlerin yaklaşık %26'sı engelli yaşıyor ve bu da 490 milyar dolarlık satın alma gücüne karşılık geliyor. Erişilemeyen bir mağaza bu müşterileri tamamen dışlar.

Bu kılavuz, pratik Shopify erişilebilirlik uygulamasını kapsar: e-ticaret için en önemli olan belirli WCAG 2.1 AA kriterleri, mevcut mağazanızın nasıl denetleneceği ve en yaygın ihlallere yönelik düzeltmeler.

Önemli Çıkarımlar

• WCAG 2.1 Düzey AA, ADA uyumluluğu için gereken standarttır - AAA değil, yalnızca Düzey A değil
• Klavyeyle gezinme her etkileşimli öğe için çalışmalıdır: gezinme, ürün seçimi, alışveriş sepeti ve ödeme
• Renk kontrast oranı normal metin için 4,5:1'i, büyük metin ve kullanıcı arayüzü bileşenleri için ise 3:1'i karşılamalıdır
• Ekran okuyucular, tüm ürün görselleri için anlamlı alternatif metinler ve tüm form alanları için anlamlı etiketler almalıdır
• Odak göstergeleri görsel olarak görünür olmalıdır; tarayıcılar birçok temada varsayılan olarak bunları gizler
• Shopify'ın ödeme işlemi Shopify tarafından yönetilir ve erişilebilir durumdadır ancak temanızın sepet çekmecesi erişilemeyebilir
• Otomatik erişilebilirlik denetleyicileri sorunların ~%30'unu yakalar; geri kalanı için manuel test gerekir
• Erişilebilirlik katmanları (accessiBe gibi) WCAG uyumluluğunu sağlamaz ve yasal riski artırır

E-ticaret için ADA ve WCAG Gereksinimlerini Anlamak

ADA, web siteleri için özel teknik standartlar içermemektedir. Mahkemeler, Web İçeriği Erişilebilirlik Yönergelerini (WCAG) tutarlı bir şekilde fiili standart olarak uygulamıştır; anlaşmaların ve kararların çoğunda Düzey 2.1 AA kabul edilen uyumluluk hedefidir.

WCAG 2.1 dört ilke etrafında düzenlenmiştir (POUR):

1. Algılanabilir: Bilgiler ve kullanıcı arayüzü bileşenleri, kullanıcıların algılayabileceği şekilde sunulmalıdır (görsel içerik için alternatifler, ses için altyazılar, yeterli kontrast)
2. Çalıştırılabilir: Kullanıcı arayüzü bileşenleri ve navigasyon çalıştırılabilir olmalıdır (klavyeden erişilebilir olmalı, görevleri tamamlamak için yeterli zaman olmalı, ele geçirmeye neden olacak içerik olmamalıdır)
3. Anlaşılabilir: Bilgiler ve kullanıcı arayüzünün işleyişi anlaşılabilir olmalıdır (okunabilir dil, öngörülebilir davranış, giriş yardımı)
4. Sağlam: İçerik, yardımcı teknolojiler tarafından yorumlanabilecek kadar sağlam olmalıdır

E-ticaret sitelerinde en sık dava edilen erişilebilirlik ihlalleri:

Erişilebilirlik Denetimi: Araçlar ve Süreç

Otomatik test araçları:

Otomatik araçlar yapısal sorunları bulur: eksik alternatif metin, eksik form etiketleri, kontrast hataları. Bulamıyorlar: anlamlı alternatif metin kalitesi, mantıksal klavye odak sırası, ekran okuyucu deneyimi, bilişsel karmaşıklık.

Manuel test süreci:

Adım 1 — Yalnızca klavyeyle gezinme testi: Farenizin bağlantısını kesin. Mağazanızda yalnızca Sekme (ileri), Shift+Sekme (geri), Enter (etkinleştir), Space (seç/kaydır) ve ok tuşlarını (bileşenlerin içinde) kullanarak gezinin. Şu görevleri tamamlayın:

• Bir ürün kategorisine göz atın
• Bir ürün seçin
• Bir beden/renk çeşidi seçin
• Sepete ekle
• Sepete git
• Ödeme işlemine devam edin

Her görev yalnızca klavyeyle tamamlanabilir olmalıdır.

Adım 2 — Ekran okuyucu testi: NVDA (ücretsiz, Windows) veya VoiceOver (yerleşik, Mac/iOS) kullanın. Ekran okuyucu etkinken ana sayfanızda, bir ürün sayfasında ve sepetinizde gezinin. Şunu dinle:

• Her resim anlamlı bir şekilde tanımlanıyor mu?
• Tüm düğmeler eylemleriyle etiketlenmiş mi?
• Okuma sırası mantıklı mı?
• Hata mesajları duyuruluyor mu?

Adım 3 – Yakınlaştırma testi: Tarayıcı yakınlaştırmasını %200 ve %400'e artırın. Sayfa yeniden akıtılmalı ve kullanılabilir durumda kalmalıdır; %200'de yatay kaydırma yok, içerik çakışması yok, metin kesilmiş değil.

Adım 4 — Renk kontrastı testi: Tüm metnin kontrast gereksinimlerini karşıladığını doğrulamak için axe DevTools veya WebAIM Kontrast Denetleyicisini kullanın: normal metin için 4,5:1, büyük metin için 3:1 (18pt+ veya 14pt+ kalın), kullanıcı arayüzü bileşenleri (düğmeler, simgeler, form kenarlıkları) için 3:1.

Görsel Erişilebilirliği: Ürün Görselleri için Alternatif Metin

Alternatif metin, Shopify mağazalarında en yaygın erişilebilirlik ihlalidir. Her görselde, gören kullanıcının görseli izlerken alacağı bilgilerin aynısını aktaran bir alternatif metin bulunmalıdır.

Shopify ürün görselleri için alternatif metin yönergeleri:

Satın alma kararları için nelerin önemli olduğunu açıklayın:

• Ürün adı ve temel ayırt edici özellikler
• Renk, malzeme ve dikkate değer görsel özellikler
• Kullanımda gösteriliyorsa bağlam (ör. "Ahşap masa üzerinde mavi seramik kupa")
• Resimde görünen herhangi bir metin

Yapılmaması gerekenler:

• "image001.jpg" — dosya adları alternatif metin değildir
• "Ürün görseli" — genel açıklamalar hiçbir bilgi taşımaz
• Anahtar kelime doldurma — "mavi kupa mavi seramik kahve kupası en iyi mavi kupa" — bu zararlıdır
• Her küçük ayrıntıyı açıklamak — kısa ve öz ve konuyla alakalı olun

Shopify'da alternatif metin uygulaması:

Shopify Yöneticisi aracılığıyla ürün görsellerine alternatif metin ekleyin:

1. Yönetici > Ürünler > [Ürün] > bir görsele tıklayın
2. "Resim alternatif metni" alanına alternatif metni girin
3. Kaydet

Toplu alternatif metin güncellemeleri için Shopify toplu düzenleyicisini kullanın:

1. Yönetici > Ürünler > Tüm ürünleri seç > Ürünleri düzenle
2. "Ürün görseli alternatif metni" sütununu ekleyin
3. Düzenleyin ve kaydedin

Dekoratif görseller:

Saf dekoratif görsellerde (arka plan desenleri, dekoratif bölücüler) boş alternatif metin (alt="") bulunmalıdır. Bu, ekran okuyucularına açıklama olmadan "resim"i duyurmak yerine resmi tamamen atlamalarını söyler.

Klavyeyle Gezinme: Mağazanızı Tamamen Çalıştırılabilir Hale Getirme

Klavye erişilebilirliği, her etkileşimli öğeye (düğmeler, bağlantılar, form alanları, açılır menüler, modlar) yalnızca bir klavye kullanılarak erişilebilmesini, etkinleştirilebilmesini ve gezinilebilmesini gerektirir.

Shopify temalarında odak yönetimi:

Çoğu Shopify teması, görsel estetik için odak göstergelerini bastırır:

/* Many themes include this — it's an accessibility violation */
:focus {
  outline: none;
}

Tasarımı bozmayan görünür bir odaklama stiliyle değiştirin:

/* Visible focus for keyboard users, hidden for mouse users */
:focus-visible {
  outline: 3px solid #005FCC;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Still suppress for mouse clicks (no :focus-visible means mouse/touch) */
:focus:not(:focus-visible) {
  outline: none;
}

Gezinme menüsü klavye erişimi:

Açılır gezinme menüleri klavyeyle çalıştırılabilir olmalıdır:

• Gezinme öğesine sekme
• Açılır menüyü açmak için Enter veya Space
• Açılır öğelerde gezinmek için ok tuşları
• Açılır menüyü kapatmak için kaçış

Bunu mevcut temanızda test edin. Birçok Shopify temasında, klavye kullanıcılarının erişemeyeceği, fareyle üzerine gelindiğinde tetiklenen açılır menüler bulunur. Düzeltme: Fareyle üzerine gelmenin yanı sıra Enter/Boşluk/ok tuşları için keydown olaylarında açılır menülerin açıldığından emin olun.

Kip ve çekmece klavye yönetimi:

Bir kalıcı veya sepet çekmecesi açıldığında klavye odağının modal'a taşınması gerekir. Kapandığında odak, onu tetikleyen öğeye dönmelidir. Modun içindeki tüm odaklanılabilir öğelere erişilebilir olmalıdır; odak, modaldan kaçmamalıdır.

// Example: Focus management for cart drawer
function openCartDrawer() {
  const cartDrawer = document.getElementById('cart-drawer');
  cartDrawer.setAttribute('aria-hidden', 'false');
  cartDrawer.removeAttribute('inert');

  // Move focus to first focusable element in drawer
  const firstFocusable = cartDrawer.querySelector(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  firstFocusable?.focus();

  // Trap focus within drawer
  cartDrawer.addEventListener('keydown', trapFocus);
}

function closeCartDrawer(triggerElement) {
  const cartDrawer = document.getElementById('cart-drawer');
  cartDrawer.setAttribute('aria-hidden', 'true');
  cartDrawer.setAttribute('inert', '');
  cartDrawer.removeEventListener('keydown', trapFocus);

  // Return focus to trigger element
  triggerElement?.focus();
}

Form Erişilebilirliği: Etiketler, Hatalar ve Talimatlar

Formlar, e-ticarette en önemli erişilebilirlik alanıdır; sepete ekleme formu, arama girişi, bülten kaydı ve ödeme formlarının tümü tamamen erişilebilir olmalıdır.

Form etiketi gereksinimleri:

Her form girişinin programlı olarak ilişkilendirilmiş bir etiketi olmalıdır:

<!-- Correct: label explicitly associated via 'for' attribute -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>

<!-- Correct: label wraps input (implicit association) -->
<label>
  Email address
  <input type="email" name="email" required>
</label>

<!-- Wrong: placeholder is not a substitute for label -->
<input type="email" placeholder="Email address" name="email">

Kullanıcılar yazarken yer tutucu metin kayboluyor ve çoğu tarayıcıda kontrast yetersiz. Hiçbir zaman yer tutucuyu tek etiket olarak kullanmayın.

Hata mesajı erişilebilirliği:

Hata mesajları, onlara neden olan alanla programlı olarak ilişkilendirilmelidir:

<div>
  <label for="zip">ZIP code</label>
  <input
    type="text"
    id="zip"
    name="zip"
    aria-describedby="zip-error"
    aria-invalid="true"
  >
  <p id="zip-error" role="alert">
    Please enter a valid 5-digit ZIP code
  </p>
</div>

role="alert", ekran okuyucuların hata mesajını göründüğü anda hemen duyurmasına neden olur. aria-describedby hatayı giriş alanına bağlar, böylece ekran okuyucular alanda gezinirken hatayı bulabilir.

Boyut ve renk çeşidi seçicileri:

Ürün çeşidi seçicileri (beden düğmeleri, renk örnekleri) erişilebilir olmalıdır. Ortak yaklaşımlar:

<!-- Accessible radio button group for size selection -->
<fieldset>
  <legend>Size</legend>
  <div class="size-options">
    <input type="radio" id="size-s" name="size" value="S">
    <label for="size-s">Small</label>

    <input type="radio" id="size-m" name="size" value="M">
    <label for="size-m">Medium</label>

    <input type="radio" id="size-l" name="size" value="L">
    <label for="size-l">Large</label>
  </div>
</fieldset>

Renk örneklerinin erişilebilir adlara ihtiyacı vardır; görsel renk yeterli değildir:

<!-- Accessible color swatch -->
<input type="radio" id="color-navy" name="color" value="Navy">
<label for="color-navy">
  <span class="swatch navy" aria-hidden="true"></span>
  <span class="visually-hidden">Navy</span>
</label>

ARIA Etiketleri ve Anlamsal HTML

ARIA (Erişilebilir Zengin İnternet Uygulamaları) özellikleri, HTML'nin tek başına yetersiz olduğu anlamsal boşlukları doldurur. Ancak ARIA'nın ilk kuralı şudur: "HTML yapabiliyorsa ARIA'yı kullanmayın."

Shopify mağazaları için ortak ARIA modelleri:

<!-- Cart button with item count -->
<button aria-label="Cart, 3 items">
  <svg aria-hidden="true"><!-- cart icon --></svg>
  <span class="visually-hidden">Cart</span>
  <span class="cart-count" aria-hidden="true">3</span>
</button>

<!-- "Add to Cart" button state changes -->
<button id="add-to-cart" aria-live="polite">
  Add to Cart
</button>
<!-- After adding: -->
<button id="add-to-cart" aria-live="polite">
  Added to Cart ✓
</button>

<!-- Loading states -->
<div aria-busy="true" aria-live="polite">
  Loading products...
</div>

<!-- Expandable sections (accordion) -->
<button aria-expanded="false" aria-controls="faq-answer-1">
  What is your return policy?
</button>
<div id="faq-answer-1" hidden>
  <p>We accept returns within 30 days...</p>
</div>

Gezinme için önemli nokta rolleri:

Temanızın, ekran okuyucu kullanıcılarının gezindiği uygun önemli HTML öğelerini kullandığından emin olun:

<header role="banner"><!-- site header --></header>
<nav aria-label="Main navigation"><!-- primary navigation --></nav>
<main id="main-content"><!-- main content --></main>
<aside><!-- sidebar filters or complementary content --></aside>
<footer role="contentinfo"><!-- site footer --></footer>

Erişilebilirlik Kaplamaları: Neden Başarısız Olurlar

Erişilebilirlik katmanları (accessiBe, UserWay, AudioEye), sitenizi otomatik olarak erişilebilir kıldığını iddia eden JavaScript widget'larıdır. Bunlar çözüm değildir ve hukuki riski artırır.

Katmanlar neden başarısız oluyor:

1. Yapısal HTML erişilebilirlik sorunlarını çözemezler; yalnızca yüzey düzeyinde sunum
2. Sıklıkla yardımcı teknolojilerle çatışırlar ve gerçek ekran okuyucu kullanıcıları için deneyimi daha da kötüleştirirler
3. Mahkemeler yer paylaşımı sağlayıcılarının iddialarını yeterli ADA uyumluluğu olarak kabul etmedi
4. Ulusal Körler Federasyonu ve diğer engelli savunuculuk kuruluşları kaplamalara açıkça karşı çıkıyor
5. Birçok yer paylaşımlı sağlayıcı toplu davalarla karşı karşıya kaldı

Bunun yerine ne yapılmalı:

Yapısal erişilebilirlik düzeltmelerine yatırım yapın: anlamsal HTML, uygun etiketler, klavyede gezinme, odak yönetimi ve renk kontrastı. Bu düzeltmeler tüm kullanıcılara fayda sağlar, SEO'yu geliştirir (ekran okuyucular ve arama tarayıcılarının benzer ihtiyaçları vardır) ve gerçek yasal koruma sağlar.

Sıkça Sorulan Sorular

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

Sonraki Adımlar

Klavyeyle gezinme, ekran okuyucu uyumluluğu, form erişilebilirliği ve WCAG renk kontrastını kapsayan kapsamlı Shopify erişilebilirlik uygulaması, hem ön uç geliştirme uzmanlığını hem de erişilebilirlik testi metodolojisini gerektirir.

ECOSIRE'ın Shopify hizmetleri erişilebilir müşteri tabanınızı genişletirken mağazanızı ADA davalarından korumak için erişilebilirlik denetimlerini, WCAG 2.1 AA iyileştirmesini ve sürekli erişilebilirlik izlemeyi içerir.

Shopify mağazanız için kapsamlı bir WCAG 2.1 AA denetimi planlamak için erişilebilirlik ekibimizle iletişime geçin.