harborandpine.example

harborandpine.example adresinde bir Shopify mağazası (Online Store 2.0 teması, Liquid şablonları) yönetiyorum. Bir erişilebilirlik testi bu sorunu buldu ve bunu temamda düzeltmek istiyorum.

Sorun: Klavye odağı çerez bildiriminde hapsoluyor (WCAG 2.1.2).
Nerede: 1 sayfada 1 tekrar, örneğin /.

Hatalı öğelerden biri, tarayıcının oluşturduğu haliyle:
```html
Settings
```

Neden önemli: Odak hapsolursa yalnızca klavye kullananlar ve ekran okuyucu kullananlar hiç alışveriş yapamaz (WCAG 2.1.2 No Keyboard Trap).

Neyin değişmesi gerekiyor:
- Çerez veya onay bildirimi uygulamanızın ayarlarında bir erişilebilirlik veya odak tuzağı seçeneği olup olmadığına bakın ya da sağlayıcıdan sorunu düzeltmesini isteyin.
- Bir modal, odağı yalnızca açıkken içinde tutabilir; Escape tuşuyla kapanmalı ve odağı geldiği yere geri vermelidir.

Yanıtınız için kurallar:
- Yapılacak değişikliği birebir, önce ve sonra hali olarak gösterin ve değişikliğin hangi dosyaya veya ayara yapılacağını belirtin. Önce dosyamı görmeniz gerekiyorsa yapıştırmamı isteyin.
- Görsel tasarımı ve mevcut tüm davranışları aynı bırakın.
- Ürün adı, fiyat veya metin uydurmayın; benim doldurabileceğim yer tutucular kullanın.
- Sonunda düzeltmeyi kendim nasıl kontrol edebileceğimi anlatın.
- Bunun klavyeyle ve bir ekran okuyucuyla nasıl doğrulanacağını da ekleyin.

harborandpine.example adresinde bir Shopify mağazası (Online Store 2.0 teması, Liquid şablonları) yönetiyorum. Bir erişilebilirlik testi bu sorunu buldu ve bunu temamda düzeltmek istiyorum.

Sorun: Ürün seçenekleri klavyeyle seçilemiyor (WCAG 2.1.1).
Nerede: 1 sayfada 1 tekrar, örneğin /products/trail-daypack.

Hatalı öğelerden biri, tarayıcının oluşturduğu haliyle:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Neden önemli: Ekran okuyucu kullananların birçoğu dahil, yalnızca klavye kullanan müşteriler bu adımı geçemiyor (WCAG 2.1.1).

Neyin değişmesi gerekiyor:
- Seçenek seçicileri görünür etiketli yerel radyo butonlarından (veya bir <select> öğesinden) oluşturun; etiketi renk örneği gibi biçimlendirin.
- Özel öğeleri korursanız her seçeneğin tabindex="0", bir role="radiogroup" içinde aria-checked ile role="radio" ve ok tuşları ile Space desteğine ihtiyacı vardır. Yerel radyo butonları bunların hepsini kendiliğinden sağlar.

Önerilen değişiklik (Temanızın ürün formu (varyant seçici)):
```html
<fieldset class="variant-picker">
  <legend>Size</legend>
  <input type="radio" id="size-s" name="Size" value="S" class="visually-hidden">
  <label for="size-s" class="size-option">S</label>
  <input type="radio" id="size-m" name="Size" value="M" class="visually-hidden">
  <label for="size-m" class="size-option">M</label>
</fieldset>
```

Yanıtınız için kurallar:
- Yapılacak değişikliği birebir, önce ve sonra hali olarak gösterin ve değişikliğin hangi dosyaya veya ayara yapılacağını belirtin. Önce dosyamı görmeniz gerekiyorsa yapıştırmamı isteyin.
- Görsel tasarımı ve mevcut tüm davranışları aynı bırakın.
- Ürün adı, fiyat veya metin uydurmayın; benim doldurabileceğim yer tutucular kullanın.
- Sonunda düzeltmeyi kendim nasıl kontrol edebileceğimi anlatın.
- Bunun klavyeyle ve bir ekran okuyucuyla nasıl doğrulanacağını da ekleyin.

harborandpine.example adresinde bir Shopify mağazası (Online Store 2.0 teması, Liquid şablonları) yönetiyorum. Bir erişilebilirlik testi bu sorunu buldu ve bunu temamda düzeltmek istiyorum.

Sorun: Butonların ayırt edilebilir bir metni olmalıdır (WCAG 4.1.2).
Nerede: 9 sayfada 41 tekrar, örneğin /, /collections/all, /products/trail-daypack, /cart.

Hatalı öğelerden biri, tarayıcının oluşturduğu haliyle:
```html
<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></button>
```

Neden önemli: WCAG 4.1.2, her kontrolün bir adı olmasını ister. Adı olmayan butonlar arasında çoğu zaman adet artırma/azaltma butonları, kapatma butonları ve slider okları bulunur.

Neyin değişmesi gerekiyor:
- Aşağıdaki örneklerde butonları bulun.
- Butonun ne yaptığını söyleyen görünür bir metin, görsel olarak gizli bir metin veya bir aria-label ekleyin (örneğin aria-label="Close" veya aria-label="Increase quantity").

Önerilen değişiklik (Tema kodunuz (gösterilen işaretleme kodunu içinde arayın)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Yanıtınız için kurallar:
- Yapılacak değişikliği birebir, önce ve sonra hali olarak gösterin ve değişikliğin hangi dosyaya veya ayara yapılacağını belirtin. Önce dosyamı görmeniz gerekiyorsa yapıştırmamı isteyin.
- Görsel tasarımı ve mevcut tüm davranışları aynı bırakın.
- Ürün adı, fiyat veya metin uydurmayın; benim doldurabileceğim yer tutucular kullanın.
- Sonunda düzeltmeyi kendim nasıl kontrol edebileceğimi anlatın.
- Bunun klavyeyle ve bir ekran okuyucuyla nasıl doğrulanacağını da ekleyin.

harborandpine.example adresinde bir Shopify mağazası (Online Store 2.0 teması, Liquid şablonları) yönetiyorum. Bir erişilebilirlik testi bu sorunu buldu ve bunu temamda düzeltmek istiyorum.

Sorun: Görsellerin alternatif metni olmalıdır (WCAG 1.1.1).
Nerede: 7 sayfada 22 tekrar, örneğin /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Hatalı öğelerden biri, tarayıcının oluşturduğu haliyle:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Neden önemli: WCAG 1.1.1, anlam taşıyan görseller için bir metin alternatifi ister. Bu olmadan ekran okuyucu kullanan biri, bir fotoğrafın hangi ürünü gösterdiğini anlayamaz.

Neyin değişmesi gerekiyor:
- Shopify yönetici panelinde Ürünler > [ürün] > Medya bölümünü açın, her görsele tıklayın ve “Alternatif metin” alanını doldurun. Bölüm görselleri için Online Mağaza > Temalar > Özelleştir bölümünü açın ve görselin alternatif metnini bölüm ayarlarında belirleyin.
- Bir müşteri için önemli olanı açıklayın: ürün adı, renk ve gösterilen açı (örneğin “Zeytin yeşili kanvas çanta, önden görünüm”).
- Dekoratif görsellerde, ekran okuyucuların onları atlaması için boş bir alt özniteliği (alt="") olmalıdır.

Önerilen değişiklik (Ürün fotoğrafları: Shopify yönetici paneli › Ürünler › Medya › Alternatif metin. Diğer görseller: tema kodunuz):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Yanıtınız için kurallar:
- Yapılacak değişikliği birebir, önce ve sonra hali olarak gösterin ve değişikliğin hangi dosyaya veya ayara yapılacağını belirtin. Önce dosyamı görmeniz gerekiyorsa yapıştırmamı isteyin.
- Görsel tasarımı ve mevcut tüm davranışları aynı bırakın.
- Ürün adı, fiyat veya metin uydurmayın; benim doldurabileceğim yer tutucular kullanın.
- Sonunda düzeltmeyi kendim nasıl kontrol edebileceğimi anlatın.
- Bunun klavyeyle ve bir ekran okuyucuyla nasıl doğrulanacağını da ekleyin.

harborandpine.example adresinde bir Shopify mağazası (Online Store 2.0 teması, Liquid şablonları) yönetiyorum. Bir erişilebilirlik testi bu sorunu buldu ve bunu temamda düzeltmek istiyorum.

Sorun: Form öğelerinin etiketi olmalıdır (WCAG 4.1.2).
Nerede: 6 sayfada 7 tekrar, örneğin /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Hatalı öğelerden biri, tarayıcının oluşturduğu haliyle:
```html
<input type="number" value="1" min="1">
```

Neden önemli: WCAG 1.3.1, 3.3.2 ve 4.1.2, form alanlarının etiketi olmasını ister. Bülten kayıt ve arama alanları bu sorunun en sık görüldüğü yerlerdir.

Neyin değişmesi gerekiyor:
- Her alana bir <label for="field-id"> öğesi veya en azından bir aria-label verin.
- Yer tutucu metin tek başına etiket sayılmaz.

Önerilen değişiklik (Tema kodunuz (gösterilen işaretleme kodunu içinde arayın)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Yanıtınız için kurallar:
- Yapılacak değişikliği birebir, önce ve sonra hali olarak gösterin ve değişikliğin hangi dosyaya veya ayara yapılacağını belirtin. Önce dosyamı görmeniz gerekiyorsa yapıştırmamı isteyin.
- Görsel tasarımı ve mevcut tüm davranışları aynı bırakın.
- Ürün adı, fiyat veya metin uydurmayın; benim doldurabileceğim yer tutucular kullanın.
- Sonunda düzeltmeyi kendim nasıl kontrol edebileceğimi anlatın.
- Bunun klavyeyle ve bir ekran okuyucuyla nasıl doğrulanacağını da ekleyin.

harborandpine.example adresinde bir Shopify mağazası (Online Store 2.0 teması, Liquid şablonları) yönetiyorum. Bir erişilebilirlik testi bu sorunu buldu ve bunu temamda düzeltmek istiyorum.

Sorun: Select öğesinin erişilebilir bir adı olmalıdır (WCAG 4.1.2).
Nerede: 1 sayfada 1 tekrar, örneğin /collections/all.

Hatalı öğelerden biri, tarayıcının oluşturduğu haliyle:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Neden önemli: WCAG 4.1.2, seçim menülerinin erişilebilir bir adı olmasını ister.

Neyin değişmesi gerekiyor:
- Seçim menüsüne bağlı bir <label> ya da aria-label="Sort by" gibi bir aria-label ekleyin.

Önerilen değişiklik (Tema kodunuz (gösterilen işaretleme kodunu içinde arayın)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Yanıtınız için kurallar:
- Yapılacak değişikliği birebir, önce ve sonra hali olarak gösterin ve değişikliğin hangi dosyaya veya ayara yapılacağını belirtin. Önce dosyamı görmeniz gerekiyorsa yapıştırmamı isteyin.
- Görsel tasarımı ve mevcut tüm davranışları aynı bırakın.
- Ürün adı, fiyat veya metin uydurmayın; benim doldurabileceğim yer tutucular kullanın.
- Sonunda düzeltmeyi kendim nasıl kontrol edebileceğimi anlatın.
- Bunun klavyeyle ve bir ekran okuyucuyla nasıl doğrulanacağını da ekleyin.

harborandpine.example adresinde bir Shopify mağazası (Online Store 2.0 teması, Liquid şablonları) yönetiyorum. Bir erişilebilirlik testi bu sorunu buldu ve bunu temamda düzeltmek istiyorum.

Sorun: Bağlantıların ayırt edilebilir bir metni olmalıdır (WCAG 2.4.4, 4.1.2).
Nerede: 9 sayfada 36 tekrar, örneğin /, /collections/all, /products/trail-daypack, /cart.

Hatalı öğelerden biri, tarayıcının oluşturduğu haliyle:
```html
<a href="/cart"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4h2l2.4 11h11l2-8H6.5"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle></svg></a>
```

Neden önemli: WCAG 2.4.4 ve 4.1.2, bağlantıların amaçlarını açıklayan erişilebilir bir ada sahip olmasını ister.

Neyin değişmesi gerekiyor:
- Aşağıdaki örneklerde bağlantıları bulun. Çoğu, bir <a> etiketinin içindeki simge veya görsellerdir.
- Bağlantının içine görsel olarak gizli bir metin ya da aria-label="Instagram" veya aria-label="Cart" gibi bir aria-label ekleyin.
- Bağlantı bir görseli sarıyorsa bunun yerine görsele anlamlı bir alternatif metin verin.

Önerilen değişiklik (Tema kodunuz (gösterilen işaretleme kodunu içinde arayın)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Yanıtınız için kurallar:
- Yapılacak değişikliği birebir, önce ve sonra hali olarak gösterin ve değişikliğin hangi dosyaya veya ayara yapılacağını belirtin. Önce dosyamı görmeniz gerekiyorsa yapıştırmamı isteyin.
- Görsel tasarımı ve mevcut tüm davranışları aynı bırakın.
- Ürün adı, fiyat veya metin uydurmayın; benim doldurabileceğim yer tutucular kullanın.
- Sonunda düzeltmeyi kendim nasıl kontrol edebileceğimi anlatın.
- Bunun klavyeyle ve bir ekran okuyucuyla nasıl doğrulanacağını da ekleyin.

harborandpine.example adresinde bir Shopify mağazası (Online Store 2.0 teması, Liquid şablonları) yönetiyorum. Bir erişilebilirlik testi bu sorunu buldu ve bunu temamda düzeltmek istiyorum.

Sorun: Öğeler asgari renk kontrastı oranı eşiklerini karşılamalıdır (WCAG 1.4.3).
Nerede: 9 sayfada 22 tekrar, örneğin /, /collections/all, /products/trail-daypack, /cart.

Hatalı öğelerden biri, tarayıcının oluşturduğu haliyle:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Neden önemli: WCAG 1.4.3, normal metin için en az 4,5:1, büyük metin için en az 3:1 kontrast oranı ister. Soluk fiyatlar, rozetler ve banner’lar az gören kişiler için ve parlak ışıkta herkes için zor okunur.

Neyin değişmesi gerekiyor:
- Aşağıda listelenen hatalı öğeleri açın ve hata özetindeki ön plan ve arka plan renklerini not edin.
- Online Mağaza > Temalar > Özelleştir > Tema ayarları > Renkler bölümünde, etkilenen renk şeması için oran en az 4,5:1 olana kadar metin rengini koyulaştırın veya arka planı açın.
- İndirim rozetlerine, yer tutucu metinlere, alt bilgi bağlantılarına ve görsellerin üzerindeki butonlara özellikle dikkat edin.

Önerilen değişiklik (Tema ayarları › Renkler veya temanızın CSS dosyası):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Yanıtınız için kurallar:
- Yapılacak değişikliği birebir, önce ve sonra hali olarak gösterin ve değişikliğin hangi dosyaya veya ayara yapılacağını belirtin. Önce dosyamı görmeniz gerekiyorsa yapıştırmamı isteyin.
- Görsel tasarımı ve mevcut tüm davranışları aynı bırakın.
- Ürün adı, fiyat veya metin uydurmayın; benim doldurabileceğim yer tutucular kullanın.
- Sonunda düzeltmeyi kendim nasıl kontrol edebileceğimi anlatın.
- Bunun klavyeyle ve bir ekran okuyucuyla nasıl doğrulanacağını da ekleyin.

harborandpine.example adresinde bir Shopify mağazası (Online Store 2.0 teması, Liquid şablonları) yönetiyorum. Bir erişilebilirlik testi bu sorunu buldu ve bunu temamda düzeltmek istiyorum.

Sorun: Sayfa içeriğinin tamamı landmark’ların içinde yer almalıdır.
Nerede: 9 sayfada 18 tekrar, örneğin /, /collections/all, /products/trail-daypack, /cart.

Hatalı öğelerden biri, tarayıcının oluşturduğu haliyle:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Neden önemli: Landmark’lar, ekran okuyucu kullananların sayfanın bölümleri arasında hızla geçiş yapmasını sağlar. Bu, WCAG 1.3.1 ve 2.4.1’i destekleyen bir iyi uygulamadır.

Neyin değişmesi gerekiyor:
- Dışarıda kalan içerikleri (duyuru çubukları, pop-up’lar, sohbet widget’ları) uygun landmark’ın içine alın veya <main> içine yerleştirin.

Yanıtınız için kurallar:
- Yapılacak değişikliği birebir, önce ve sonra hali olarak gösterin ve değişikliğin hangi dosyaya veya ayara yapılacağını belirtin. Önce dosyamı görmeniz gerekiyorsa yapıştırmamı isteyin.
- Görsel tasarımı ve mevcut tüm davranışları aynı bırakın.
- Ürün adı, fiyat veya metin uydurmayın; benim doldurabileceğim yer tutucular kullanın.
- Sonunda düzeltmeyi kendim nasıl kontrol edebileceğimi anlatın.
- Bunun klavyeyle ve bir ekran okuyucuyla nasıl doğrulanacağını da ekleyin.

harborandpine.example adresinde bir Shopify mağazası (Online Store 2.0 teması, Liquid şablonları) yönetiyorum. Bir erişilebilirlik testi bu sorunu buldu ve bunu temamda düzeltmek istiyorum.

Sorun: Başlık seviyeleri yalnızca birer birer artmalıdır.
Nerede: 7 sayfada 7 tekrar, örneğin /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Hatalı öğelerden biri, tarayıcının oluşturduğu haliyle:
```html
<h3>Trail Daypack 22L</h3>
```

Neden önemli: Ekran okuyucu kullananlar sayfada başlıklar aracılığıyla gezinir. Bu, WCAG 1.3.1’i destekleyen bir iyi uygulamadır.

Neyin değişmesi gerekiyor:
- Etkilenen bölümlerdeki başlık seviyelerini, seviye atlamadan sırayla ilerleyecek şekilde düzenleyin.
- Görsel stili değil, yalnızca etiketi değiştirin (boyut için CSS sınıfları kullanın).

Önerilen değişiklik (Tema kodunuz (gösterilen işaretleme kodunu içinde arayın)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Yanıtınız için kurallar:
- Yapılacak değişikliği birebir, önce ve sonra hali olarak gösterin ve değişikliğin hangi dosyaya veya ayara yapılacağını belirtin. Önce dosyamı görmeniz gerekiyorsa yapıştırmamı isteyin.
- Görsel tasarımı ve mevcut tüm davranışları aynı bırakın.
- Ürün adı, fiyat veya metin uydurmayın; benim doldurabileceğim yer tutucular kullanın.
- Sonunda düzeltmeyi kendim nasıl kontrol edebileceğimi anlatın.
- Bunun klavyeyle ve bir ekran okuyucuyla nasıl doğrulanacağını da ekleyin.