harborandpine.example

Saya mengelola toko Shopify (tema Online Store 2.0, template Liquid) di harborandpine.example. Sebuah uji aksesibilitas menemukan masalah ini dan saya ingin memperbaikinya di tema saya.

Masalah: Fokus keyboard terjebak di banner cookie (WCAG 2.1.2).
Lokasi: 1 kemunculan di 1 halaman, misalnya /.

Satu elemen yang gagal, seperti yang dirender browser:
```html
Settings
```

Mengapa ini penting: Pengguna yang hanya memakai keyboard dan pengguna pembaca layar sama sekali tidak bisa berbelanja jika fokus terjebak (WCAG 2.1.2 No Keyboard Trap).

Yang perlu diubah:
- Periksa pengaturan aplikasi banner cookie atau persetujuan Anda untuk opsi aksesibilitas atau jebakan fokus, atau minta vendornya memperbaikinya.
- Modal hanya boleh menahan fokus di dalamnya selama terbuka, dan harus dapat ditutup dengan tombol Escape serta mengembalikan fokus ke tempat asalnya.

Aturan untuk jawaban Anda:
- Tunjukkan perubahan yang tepat dalam bentuk sebelum dan sesudah, dan sebutkan file atau pengaturan tempat perubahan itu dilakukan. Jika Anda perlu melihat file saya lebih dulu, minta saya menempelkannya.
- Pertahankan desain visual dan semua perilaku yang ada tetap sama.
- Jangan mengarang nama produk, harga, atau teks; gunakan placeholder yang bisa saya isi.
- Akhiri dengan cara saya dapat mengecek perbaikannya sendiri.
- Sertakan cara memastikannya dengan keyboard dan pembaca layar.

Saya mengelola toko Shopify (tema Online Store 2.0, template Liquid) di harborandpine.example. Sebuah uji aksesibilitas menemukan masalah ini dan saya ingin memperbaikinya di tema saya.

Masalah: Opsi produk tidak dapat dipilih dengan keyboard (WCAG 2.1.1).
Lokasi: 1 kemunculan di 1 halaman, misalnya /products/trail-daypack.

Satu elemen yang gagal, seperti yang dirender browser:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Mengapa ini penting: Pembeli yang hanya memakai keyboard, termasuk banyak pengguna pembaca layar, tidak dapat melewati langkah ini (WCAG 2.1.1).

Yang perlu diubah:
- Buat pemilih opsi dari tombol radio bawaan (atau <select>) dengan label yang terlihat; beri gaya pada label sebagai swatch.
- Jika Anda tetap memakai elemen kustom, setiap opsi memerlukan tabindex="0", role="radio" dengan aria-checked di dalam role="radiogroup", serta penanganan tombol panah dan Space. Tombol radio bawaan sudah menyediakan semua ini tanpa usaha tambahan.

Usulan perubahan (Formulir produk tema Anda (pemilih varian)):
```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>
```

Aturan untuk jawaban Anda:
- Tunjukkan perubahan yang tepat dalam bentuk sebelum dan sesudah, dan sebutkan file atau pengaturan tempat perubahan itu dilakukan. Jika Anda perlu melihat file saya lebih dulu, minta saya menempelkannya.
- Pertahankan desain visual dan semua perilaku yang ada tetap sama.
- Jangan mengarang nama produk, harga, atau teks; gunakan placeholder yang bisa saya isi.
- Akhiri dengan cara saya dapat mengecek perbaikannya sendiri.
- Sertakan cara memastikannya dengan keyboard dan pembaca layar.

Saya mengelola toko Shopify (tema Online Store 2.0, template Liquid) di harborandpine.example. Sebuah uji aksesibilitas menemukan masalah ini dan saya ingin memperbaikinya di tema saya.

Masalah: Tombol harus memiliki teks yang dapat dikenali (WCAG 4.1.2).
Lokasi: 41 kemunculan di 9 halaman, misalnya /, /collections/all, /products/trail-daypack, /cart.

Satu elemen yang gagal, seperti yang dirender browser:
```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>
```

Mengapa ini penting: WCAG 4.1.2 mensyaratkan setiap kontrol memiliki nama. Tombol tanpa nama sering kali berupa tombol penambah/pengurang jumlah, tombol tutup, dan panah slider.

Yang perlu diubah:
- Temukan tombol dalam contoh di bawah.
- Tambahkan teks yang terlihat, teks yang tersembunyi secara visual, atau aria-label yang menyebutkan fungsi tombol (misalnya aria-label="Close" atau aria-label="Increase quantity").

Usulan perubahan (Kode tema Anda (cari markup yang ditampilkan di dalamnya)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Aturan untuk jawaban Anda:
- Tunjukkan perubahan yang tepat dalam bentuk sebelum dan sesudah, dan sebutkan file atau pengaturan tempat perubahan itu dilakukan. Jika Anda perlu melihat file saya lebih dulu, minta saya menempelkannya.
- Pertahankan desain visual dan semua perilaku yang ada tetap sama.
- Jangan mengarang nama produk, harga, atau teks; gunakan placeholder yang bisa saya isi.
- Akhiri dengan cara saya dapat mengecek perbaikannya sendiri.
- Sertakan cara memastikannya dengan keyboard dan pembaca layar.

Saya mengelola toko Shopify (tema Online Store 2.0, template Liquid) di harborandpine.example. Sebuah uji aksesibilitas menemukan masalah ini dan saya ingin memperbaikinya di tema saya.

Masalah: Gambar harus memiliki teks alternatif (WCAG 1.1.1).
Lokasi: 22 kemunculan di 7 halaman, misalnya /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Satu elemen yang gagal, seperti yang dirender browser:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Mengapa ini penting: WCAG 1.1.1 mensyaratkan alternatif teks untuk gambar yang bermakna. Tanpa itu, pengguna pembaca layar tidak dapat mengetahui produk mana yang ditampilkan sebuah foto.

Yang perlu diubah:
- Di admin Shopify, buka Produk > [produk] > Media, klik setiap gambar dan isi teks alt ('Alt text'). Untuk gambar section, buka Toko Online > Tema > Sesuaikan dan atur teks alt gambar di pengaturan section.
- Jelaskan apa yang penting bagi pembeli: nama produk, warna, dan sudut yang ditampilkan (misalnya 'Tas tote kanvas warna zaitun, tampak depan').
- Gambar dekoratif sebaiknya memiliki atribut alt kosong (alt="") agar dilewati pembaca layar.

Usulan perubahan (Foto produk: admin Shopify › Produk › Media › teks alt (Alt text). Gambar lain: kode tema Anda):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Aturan untuk jawaban Anda:
- Tunjukkan perubahan yang tepat dalam bentuk sebelum dan sesudah, dan sebutkan file atau pengaturan tempat perubahan itu dilakukan. Jika Anda perlu melihat file saya lebih dulu, minta saya menempelkannya.
- Pertahankan desain visual dan semua perilaku yang ada tetap sama.
- Jangan mengarang nama produk, harga, atau teks; gunakan placeholder yang bisa saya isi.
- Akhiri dengan cara saya dapat mengecek perbaikannya sendiri.
- Sertakan cara memastikannya dengan keyboard dan pembaca layar.

Saya mengelola toko Shopify (tema Online Store 2.0, template Liquid) di harborandpine.example. Sebuah uji aksesibilitas menemukan masalah ini dan saya ingin memperbaikinya di tema saya.

Masalah: Elemen formulir harus memiliki label (WCAG 4.1.2).
Lokasi: 7 kemunculan di 6 halaman, misalnya /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Satu elemen yang gagal, seperti yang dirender browser:
```html
<input type="number" value="1" min="1">
```

Mengapa ini penting: WCAG 1.3.1, 3.3.2, dan 4.1.2 mensyaratkan kolom formulir memiliki label. Kolom pendaftaran newsletter dan kolom pencarian adalah penyebab yang umum.

Yang perlu diubah:
- Berikan setiap kolom elemen <label for="field-id">, atau setidaknya aria-label.
- Teks placeholder saja tidak dihitung sebagai label.

Usulan perubahan (Kode tema Anda (cari markup yang ditampilkan di dalamnya)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Aturan untuk jawaban Anda:
- Tunjukkan perubahan yang tepat dalam bentuk sebelum dan sesudah, dan sebutkan file atau pengaturan tempat perubahan itu dilakukan. Jika Anda perlu melihat file saya lebih dulu, minta saya menempelkannya.
- Pertahankan desain visual dan semua perilaku yang ada tetap sama.
- Jangan mengarang nama produk, harga, atau teks; gunakan placeholder yang bisa saya isi.
- Akhiri dengan cara saya dapat mengecek perbaikannya sendiri.
- Sertakan cara memastikannya dengan keyboard dan pembaca layar.

Saya mengelola toko Shopify (tema Online Store 2.0, template Liquid) di harborandpine.example. Sebuah uji aksesibilitas menemukan masalah ini dan saya ingin memperbaikinya di tema saya.

Masalah: Elemen select harus memiliki nama aksesibel (WCAG 4.1.2).
Lokasi: 1 kemunculan di 1 halaman, misalnya /collections/all.

Satu elemen yang gagal, seperti yang dirender browser:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Mengapa ini penting: WCAG 4.1.2 mensyaratkan menu pilihan (select) memiliki nama aksesibel.

Yang perlu diubah:
- Tambahkan <label> yang terhubung ke select, atau aria-label seperti aria-label="Sort by".

Usulan perubahan (Kode tema Anda (cari markup yang ditampilkan di dalamnya)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Aturan untuk jawaban Anda:
- Tunjukkan perubahan yang tepat dalam bentuk sebelum dan sesudah, dan sebutkan file atau pengaturan tempat perubahan itu dilakukan. Jika Anda perlu melihat file saya lebih dulu, minta saya menempelkannya.
- Pertahankan desain visual dan semua perilaku yang ada tetap sama.
- Jangan mengarang nama produk, harga, atau teks; gunakan placeholder yang bisa saya isi.
- Akhiri dengan cara saya dapat mengecek perbaikannya sendiri.
- Sertakan cara memastikannya dengan keyboard dan pembaca layar.

Saya mengelola toko Shopify (tema Online Store 2.0, template Liquid) di harborandpine.example. Sebuah uji aksesibilitas menemukan masalah ini dan saya ingin memperbaikinya di tema saya.

Masalah: Tautan harus memiliki teks yang dapat dikenali (WCAG 2.4.4, 4.1.2).
Lokasi: 36 kemunculan di 9 halaman, misalnya /, /collections/all, /products/trail-daypack, /cart.

Satu elemen yang gagal, seperti yang dirender browser:
```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>
```

Mengapa ini penting: WCAG 2.4.4 dan 4.1.2 mensyaratkan tautan memiliki nama aksesibel yang menjelaskan tujuannya.

Yang perlu diubah:
- Temukan tautan dalam contoh di bawah. Sebagian besar berupa ikon atau gambar di dalam tag <a>.
- Tambahkan teks yang tersembunyi secara visual di dalam tautan, atau aria-label seperti aria-label="Instagram" atau aria-label="Cart".
- Jika tautan membungkus gambar, berikan teks alt yang bermakna pada gambar tersebut sebagai gantinya.

Usulan perubahan (Kode tema Anda (cari markup yang ditampilkan di dalamnya)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Aturan untuk jawaban Anda:
- Tunjukkan perubahan yang tepat dalam bentuk sebelum dan sesudah, dan sebutkan file atau pengaturan tempat perubahan itu dilakukan. Jika Anda perlu melihat file saya lebih dulu, minta saya menempelkannya.
- Pertahankan desain visual dan semua perilaku yang ada tetap sama.
- Jangan mengarang nama produk, harga, atau teks; gunakan placeholder yang bisa saya isi.
- Akhiri dengan cara saya dapat mengecek perbaikannya sendiri.
- Sertakan cara memastikannya dengan keyboard dan pembaca layar.

Saya mengelola toko Shopify (tema Online Store 2.0, template Liquid) di harborandpine.example. Sebuah uji aksesibilitas menemukan masalah ini dan saya ingin memperbaikinya di tema saya.

Masalah: Elemen harus memenuhi ambang batas minimum rasio kontras warna (WCAG 1.4.3).
Lokasi: 22 kemunculan di 9 halaman, misalnya /, /collections/all, /products/trail-daypack, /cart.

Satu elemen yang gagal, seperti yang dirender browser:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Mengapa ini penting: WCAG 1.4.3 mensyaratkan rasio kontras minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar. Harga, badge, dan banner yang samar sulit dibaca oleh orang dengan penglihatan rendah, dan oleh semua orang di bawah cahaya terang.

Yang perlu diubah:
- Buka elemen gagal yang tercantum di bawah dan catat warna latar depan dan latar belakangnya di ringkasan kegagalan.
- Di Toko Online > Tema > Sesuaikan > Pengaturan tema > Warna, gelapkan warna teks atau terangkan latar belakang untuk skema warna yang terdampak hingga rasionya minimal 4,5:1.
- Beri perhatian khusus pada badge diskon, teks placeholder, tautan footer, dan tombol di atas gambar.

Usulan perubahan (Pengaturan tema › Warna, atau file CSS tema Anda):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Aturan untuk jawaban Anda:
- Tunjukkan perubahan yang tepat dalam bentuk sebelum dan sesudah, dan sebutkan file atau pengaturan tempat perubahan itu dilakukan. Jika Anda perlu melihat file saya lebih dulu, minta saya menempelkannya.
- Pertahankan desain visual dan semua perilaku yang ada tetap sama.
- Jangan mengarang nama produk, harga, atau teks; gunakan placeholder yang bisa saya isi.
- Akhiri dengan cara saya dapat mengecek perbaikannya sendiri.
- Sertakan cara memastikannya dengan keyboard dan pembaca layar.

Saya mengelola toko Shopify (tema Online Store 2.0, template Liquid) di harborandpine.example. Sebuah uji aksesibilitas menemukan masalah ini dan saya ingin memperbaikinya di tema saya.

Masalah: Semua konten halaman sebaiknya berada di dalam landmark.
Lokasi: 18 kemunculan di 9 halaman, misalnya /, /collections/all, /products/trail-daypack, /cart.

Satu elemen yang gagal, seperti yang dirender browser:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Mengapa ini penting: Landmark memungkinkan pengguna pembaca layar melompat ke berbagai bagian halaman. Ini adalah praktik terbaik yang mendukung WCAG 1.3.1 dan 2.4.1.

Yang perlu diubah:
- Bungkus konten yang tercecer (bar pengumuman, pop-up, widget chat) dengan landmark yang sesuai atau letakkan di dalam <main>.

Aturan untuk jawaban Anda:
- Tunjukkan perubahan yang tepat dalam bentuk sebelum dan sesudah, dan sebutkan file atau pengaturan tempat perubahan itu dilakukan. Jika Anda perlu melihat file saya lebih dulu, minta saya menempelkannya.
- Pertahankan desain visual dan semua perilaku yang ada tetap sama.
- Jangan mengarang nama produk, harga, atau teks; gunakan placeholder yang bisa saya isi.
- Akhiri dengan cara saya dapat mengecek perbaikannya sendiri.
- Sertakan cara memastikannya dengan keyboard dan pembaca layar.

Saya mengelola toko Shopify (tema Online Store 2.0, template Liquid) di harborandpine.example. Sebuah uji aksesibilitas menemukan masalah ini dan saya ingin memperbaikinya di tema saya.

Masalah: Level heading sebaiknya hanya naik satu tingkat.
Lokasi: 7 kemunculan di 7 halaman, misalnya /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Satu elemen yang gagal, seperti yang dirender browser:
```html
<h3>Trail Daypack 22L</h3>
```

Mengapa ini penting: Pengguna pembaca layar bernavigasi melalui heading. Ini adalah praktik terbaik yang mendukung WCAG 1.3.1.

Yang perlu diubah:
- Sesuaikan level heading di bagian yang terdampak agar berurutan tanpa melompati level.
- Ubah tag-nya saja, bukan gaya visualnya (gunakan class CSS untuk ukuran).

Usulan perubahan (Kode tema Anda (cari markup yang ditampilkan di dalamnya)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Aturan untuk jawaban Anda:
- Tunjukkan perubahan yang tepat dalam bentuk sebelum dan sesudah, dan sebutkan file atau pengaturan tempat perubahan itu dilakukan. Jika Anda perlu melihat file saya lebih dulu, minta saya menempelkannya.
- Pertahankan desain visual dan semua perilaku yang ada tetap sama.
- Jangan mengarang nama produk, harga, atau teks; gunakan placeholder yang bisa saya isi.
- Akhiri dengan cara saya dapat mengecek perbaikannya sendiri.
- Sertakan cara memastikannya dengan keyboard dan pembaca layar.