harborandpine.example

Saya mengendalikan kedai Shopify (tema Online Store 2.0, templat Liquid) di harborandpine.example. Ujian kebolehcapaian menemui masalah ini dan saya mahu membaikinya dalam tema saya.

Masalah: Fokus papan kekunci terperangkap dalam sepanduk kuki (WCAG 2.1.2).
Lokasi: 1 kejadian pada 1 halaman, contohnya /.

Satu elemen yang gagal, seperti yang dipaparkan oleh pelayar:
```html
Settings
```

Mengapa ia penting: Pengguna papan kekunci sahaja dan pengguna pembaca skrin tidak dapat membeli-belah langsung jika fokus terperangkap (WCAG 2.1.2 No Keyboard Trap).

Apa yang perlu diubah:
- Semak tetapan aplikasi sepanduk kuki atau persetujuan anda untuk pilihan kebolehcapaian atau perangkap fokus, atau minta vendor membaikinya.
- Modal hanya boleh menahan fokus di dalamnya semasa ia terbuka, dan mesti ditutup dengan kekunci Escape serta mengembalikan fokus ke tempat asalnya.

Peraturan untuk jawapan anda:
- Tunjukkan suntingan yang tepat dalam bentuk sebelum dan selepas, dan namakan fail atau tetapan tempat ia perlu dibuat. Jika anda perlu melihat fail saya dahulu, minta saya menampalnya.
- Kekalkan reka bentuk visual dan semua kelakuan sedia ada tanpa perubahan.
- Jangan reka nama produk, harga atau teks; gunakan pemegang tempat yang boleh saya isi.
- Akhiri dengan cara saya boleh menyemak pembaikan itu sendiri.
- Sertakan cara mengesahkannya dengan papan kekunci dan pembaca skrin.

Saya mengendalikan kedai Shopify (tema Online Store 2.0, templat Liquid) di harborandpine.example. Ujian kebolehcapaian menemui masalah ini dan saya mahu membaikinya dalam tema saya.

Masalah: Pilihan produk tidak dapat dipilih dengan papan kekunci (WCAG 2.1.1).
Lokasi: 1 kejadian pada 1 halaman, contohnya /products/trail-daypack.

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

Mengapa ia penting: Pembeli yang hanya menggunakan papan kekunci, termasuk ramai pengguna pembaca skrin, tidak dapat melepasi langkah ini (WCAG 2.1.1).

Apa yang perlu diubah:
- Bina pemilih pilihan daripada butang radio asli (atau <select>) dengan label yang kelihatan; gayakan label itu sebagai petak warna.
- Jika anda mengekalkan elemen tersuai, setiap pilihan memerlukan tabindex="0", role="radio" dengan aria-checked di dalam role="radiogroup", serta pengendalian kekunci anak panah dan Space. Butang radio asli memberi semua ini secara automatik.

Cadangan perubahan (Borang 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>
```

Peraturan untuk jawapan anda:
- Tunjukkan suntingan yang tepat dalam bentuk sebelum dan selepas, dan namakan fail atau tetapan tempat ia perlu dibuat. Jika anda perlu melihat fail saya dahulu, minta saya menampalnya.
- Kekalkan reka bentuk visual dan semua kelakuan sedia ada tanpa perubahan.
- Jangan reka nama produk, harga atau teks; gunakan pemegang tempat yang boleh saya isi.
- Akhiri dengan cara saya boleh menyemak pembaikan itu sendiri.
- Sertakan cara mengesahkannya dengan papan kekunci dan pembaca skrin.

Saya mengendalikan kedai Shopify (tema Online Store 2.0, templat Liquid) di harborandpine.example. Ujian kebolehcapaian menemui masalah ini dan saya mahu membaikinya dalam tema saya.

Masalah: Butang mesti mempunyai teks yang boleh dikenal pasti (WCAG 4.1.2).
Lokasi: 41 kejadian pada 9 halaman, contohnya /, /collections/all, /products/trail-daypack, /cart.

Satu elemen yang gagal, seperti yang dipaparkan oleh pelayar:
```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 ia penting: WCAG 4.1.2 menetapkan setiap kawalan mesti mempunyai nama. Butang tanpa nama selalunya termasuk pelaras kuantiti, butang tutup dan anak panah gelangsar.

Apa yang perlu diubah:
- Cari butang dalam contoh di bawah.
- Tambah teks yang kelihatan, teks yang tersembunyi secara visual, atau aria-label yang menyatakan fungsi butang itu (contohnya aria-label="Close" atau aria-label="Increase quantity").

Cadangan perubahan (Kod tema anda (cari markup yang dipaparkan di dalamnya)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Peraturan untuk jawapan anda:
- Tunjukkan suntingan yang tepat dalam bentuk sebelum dan selepas, dan namakan fail atau tetapan tempat ia perlu dibuat. Jika anda perlu melihat fail saya dahulu, minta saya menampalnya.
- Kekalkan reka bentuk visual dan semua kelakuan sedia ada tanpa perubahan.
- Jangan reka nama produk, harga atau teks; gunakan pemegang tempat yang boleh saya isi.
- Akhiri dengan cara saya boleh menyemak pembaikan itu sendiri.
- Sertakan cara mengesahkannya dengan papan kekunci dan pembaca skrin.

Saya mengendalikan kedai Shopify (tema Online Store 2.0, templat Liquid) di harborandpine.example. Ujian kebolehcapaian menemui masalah ini dan saya mahu membaikinya dalam tema saya.

Masalah: Imej mesti mempunyai teks alternatif (WCAG 1.1.1).
Lokasi: 22 kejadian pada 7 halaman, contohnya /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

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

Mengapa ia penting: WCAG 1.1.1 menetapkan alternatif teks untuk imej yang bermakna. Tanpanya, pengguna pembaca skrin tidak dapat mengetahui produk yang dipaparkan dalam foto.

Apa yang perlu diubah:
- Dalam pentadbir Shopify, buka Produk > [produk] > Media, klik setiap imej dan isikan 'Teks alt' (Alt text). Untuk imej bahagian (section), buka Kedai Dalam Talian > Tema > Sesuaikan dan tetapkan teks alt imej dalam tetapan bahagian.
- Huraikan apa yang penting kepada pembeli: nama produk, warna dan sudut yang dipaparkan (contohnya 'Beg tote kanvas berwarna zaitun, pandangan hadapan').
- Imej hiasan sepatutnya mempunyai atribut alt kosong (alt="") supaya pembaca skrin melangkaunya.

Cadangan perubahan (Foto produk: pentadbir Shopify › Produk › Media › Teks alt (Alt text). Imej lain: kod tema anda):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Peraturan untuk jawapan anda:
- Tunjukkan suntingan yang tepat dalam bentuk sebelum dan selepas, dan namakan fail atau tetapan tempat ia perlu dibuat. Jika anda perlu melihat fail saya dahulu, minta saya menampalnya.
- Kekalkan reka bentuk visual dan semua kelakuan sedia ada tanpa perubahan.
- Jangan reka nama produk, harga atau teks; gunakan pemegang tempat yang boleh saya isi.
- Akhiri dengan cara saya boleh menyemak pembaikan itu sendiri.
- Sertakan cara mengesahkannya dengan papan kekunci dan pembaca skrin.

Saya mengendalikan kedai Shopify (tema Online Store 2.0, templat Liquid) di harborandpine.example. Ujian kebolehcapaian menemui masalah ini dan saya mahu membaikinya dalam tema saya.

Masalah: Elemen borang mesti mempunyai label (WCAG 4.1.2).
Lokasi: 7 kejadian pada 6 halaman, contohnya /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Satu elemen yang gagal, seperti yang dipaparkan oleh pelayar:
```html
<input type="number" value="1" min="1">
```

Mengapa ia penting: WCAG 1.3.1, 3.3.2 dan 4.1.2 menetapkan medan borang mesti mempunyai label. Medan pendaftaran surat berita dan medan carian ialah punca yang biasa.

Apa yang perlu diubah:
- Berikan setiap medan elemen <label for="field-id">, atau sekurang-kurangnya aria-label.
- Teks pemegang tempat sahaja tidak dikira sebagai label.

Cadangan perubahan (Kod tema anda (cari markup yang dipaparkan di dalamnya)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Peraturan untuk jawapan anda:
- Tunjukkan suntingan yang tepat dalam bentuk sebelum dan selepas, dan namakan fail atau tetapan tempat ia perlu dibuat. Jika anda perlu melihat fail saya dahulu, minta saya menampalnya.
- Kekalkan reka bentuk visual dan semua kelakuan sedia ada tanpa perubahan.
- Jangan reka nama produk, harga atau teks; gunakan pemegang tempat yang boleh saya isi.
- Akhiri dengan cara saya boleh menyemak pembaikan itu sendiri.
- Sertakan cara mengesahkannya dengan papan kekunci dan pembaca skrin.

Saya mengendalikan kedai Shopify (tema Online Store 2.0, templat Liquid) di harborandpine.example. Ujian kebolehcapaian menemui masalah ini dan saya mahu membaikinya dalam tema saya.

Masalah: Elemen select mesti mempunyai nama boleh capai (WCAG 4.1.2).
Lokasi: 1 kejadian pada 1 halaman, contohnya /collections/all.

Satu elemen yang gagal, seperti yang dipaparkan oleh pelayar:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Mengapa ia penting: WCAG 4.1.2 menetapkan menu pilihan mesti mempunyai nama boleh capai.

Apa yang perlu diubah:
- Tambah <label> yang dipautkan kepada select itu, atau aria-label seperti aria-label="Sort by".

Cadangan perubahan (Kod tema anda (cari markup yang dipaparkan di dalamnya)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Peraturan untuk jawapan anda:
- Tunjukkan suntingan yang tepat dalam bentuk sebelum dan selepas, dan namakan fail atau tetapan tempat ia perlu dibuat. Jika anda perlu melihat fail saya dahulu, minta saya menampalnya.
- Kekalkan reka bentuk visual dan semua kelakuan sedia ada tanpa perubahan.
- Jangan reka nama produk, harga atau teks; gunakan pemegang tempat yang boleh saya isi.
- Akhiri dengan cara saya boleh menyemak pembaikan itu sendiri.
- Sertakan cara mengesahkannya dengan papan kekunci dan pembaca skrin.

Saya mengendalikan kedai Shopify (tema Online Store 2.0, templat Liquid) di harborandpine.example. Ujian kebolehcapaian menemui masalah ini dan saya mahu membaikinya dalam tema saya.

Masalah: Pautan mesti mempunyai teks yang boleh dikenal pasti (WCAG 2.4.4, 4.1.2).
Lokasi: 36 kejadian pada 9 halaman, contohnya /, /collections/all, /products/trail-daypack, /cart.

Satu elemen yang gagal, seperti yang dipaparkan oleh pelayar:
```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 ia penting: WCAG 2.4.4 dan 4.1.2 menetapkan pautan mesti mempunyai nama boleh capai yang menerangkan tujuannya.

Apa yang perlu diubah:
- Cari pautan dalam contoh di bawah. Kebanyakannya ialah ikon atau imej di dalam tag <a>.
- Tambah teks yang tersembunyi secara visual di dalam pautan, atau aria-label seperti aria-label="Instagram" atau aria-label="Cart".
- Jika pautan membalut imej, berikan teks alt yang bermakna kepada imej itu sebagai gantinya.

Cadangan perubahan (Kod tema anda (cari markup yang dipaparkan di dalamnya)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Peraturan untuk jawapan anda:
- Tunjukkan suntingan yang tepat dalam bentuk sebelum dan selepas, dan namakan fail atau tetapan tempat ia perlu dibuat. Jika anda perlu melihat fail saya dahulu, minta saya menampalnya.
- Kekalkan reka bentuk visual dan semua kelakuan sedia ada tanpa perubahan.
- Jangan reka nama produk, harga atau teks; gunakan pemegang tempat yang boleh saya isi.
- Akhiri dengan cara saya boleh menyemak pembaikan itu sendiri.
- Sertakan cara mengesahkannya dengan papan kekunci dan pembaca skrin.

Saya mengendalikan kedai Shopify (tema Online Store 2.0, templat Liquid) di harborandpine.example. Ujian kebolehcapaian menemui masalah ini dan saya mahu membaikinya dalam tema saya.

Masalah: Elemen mesti memenuhi ambang minimum nisbah kontras warna (WCAG 1.4.3).
Lokasi: 22 kejadian pada 9 halaman, contohnya /, /collections/all, /products/trail-daypack, /cart.

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

Mengapa ia penting: WCAG 1.4.3 menetapkan nisbah kontras sekurang-kurangnya 4.5:1 untuk teks biasa dan 3:1 untuk teks besar. Harga, lencana dan sepanduk yang pudar sukar dibaca oleh orang yang mempunyai penglihatan terhad, dan oleh semua orang dalam cahaya terang.

Apa yang perlu diubah:
- Buka elemen yang gagal yang disenaraikan di bawah dan catat warna latar depan dan latar belakang dalam ringkasan kegagalan.
- Dalam Kedai Dalam Talian > Tema > Sesuaikan > Tetapan tema > Warna, gelapkan warna teks atau cerahkan latar belakang bagi skema warna yang terjejas sehingga nisbahnya sekurang-kurangnya 4.5:1.
- Beri perhatian khusus kepada lencana jualan, teks pemegang tempat, pautan kaki halaman dan butang di atas imej.

Cadangan perubahan (Tetapan tema › Warna, atau fail CSS tema anda):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Peraturan untuk jawapan anda:
- Tunjukkan suntingan yang tepat dalam bentuk sebelum dan selepas, dan namakan fail atau tetapan tempat ia perlu dibuat. Jika anda perlu melihat fail saya dahulu, minta saya menampalnya.
- Kekalkan reka bentuk visual dan semua kelakuan sedia ada tanpa perubahan.
- Jangan reka nama produk, harga atau teks; gunakan pemegang tempat yang boleh saya isi.
- Akhiri dengan cara saya boleh menyemak pembaikan itu sendiri.
- Sertakan cara mengesahkannya dengan papan kekunci dan pembaca skrin.

Saya mengendalikan kedai Shopify (tema Online Store 2.0, templat Liquid) di harborandpine.example. Ujian kebolehcapaian menemui masalah ini dan saya mahu membaikinya dalam tema saya.

Masalah: Semua kandungan halaman sepatutnya berada di dalam landmark.
Lokasi: 18 kejadian pada 9 halaman, contohnya /, /collections/all, /products/trail-daypack, /cart.

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

Mengapa ia penting: Landmark membolehkan pengguna pembaca skrin melompat ke bahagian lain halaman. Ini amalan terbaik yang menyokong WCAG 1.3.1 dan 2.4.1.

Apa yang perlu diubah:
- Balut kandungan yang terkeluar (bar pengumuman, pop timbul, widget sembang) dalam landmark yang sesuai atau letakkannya di dalam <main>.

Peraturan untuk jawapan anda:
- Tunjukkan suntingan yang tepat dalam bentuk sebelum dan selepas, dan namakan fail atau tetapan tempat ia perlu dibuat. Jika anda perlu melihat fail saya dahulu, minta saya menampalnya.
- Kekalkan reka bentuk visual dan semua kelakuan sedia ada tanpa perubahan.
- Jangan reka nama produk, harga atau teks; gunakan pemegang tempat yang boleh saya isi.
- Akhiri dengan cara saya boleh menyemak pembaikan itu sendiri.
- Sertakan cara mengesahkannya dengan papan kekunci dan pembaca skrin.

Saya mengendalikan kedai Shopify (tema Online Store 2.0, templat Liquid) di harborandpine.example. Ujian kebolehcapaian menemui masalah ini dan saya mahu membaikinya dalam tema saya.

Masalah: Tahap heading sepatutnya hanya meningkat satu tahap pada satu masa.
Lokasi: 7 kejadian pada 7 halaman, contohnya /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Satu elemen yang gagal, seperti yang dipaparkan oleh pelayar:
```html
<h3>Trail Daypack 22L</h3>
```

Mengapa ia penting: Pengguna pembaca skrin menavigasi menggunakan heading. Ini amalan terbaik yang menyokong WCAG 1.3.1.

Apa yang perlu diubah:
- Laraskan tahap heading dalam bahagian yang terjejas supaya ia mengikut urutan tanpa melangkau tahap.
- Ubah tag sahaja, bukan gaya visual (gunakan kelas CSS untuk saiz).

Cadangan perubahan (Kod tema anda (cari markup yang dipaparkan di dalamnya)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Peraturan untuk jawapan anda:
- Tunjukkan suntingan yang tepat dalam bentuk sebelum dan selepas, dan namakan fail atau tetapan tempat ia perlu dibuat. Jika anda perlu melihat fail saya dahulu, minta saya menampalnya.
- Kekalkan reka bentuk visual dan semua kelakuan sedia ada tanpa perubahan.
- Jangan reka nama produk, harga atau teks; gunakan pemegang tempat yang boleh saya isi.
- Akhiri dengan cara saya boleh menyemak pembaikan itu sendiri.
- Sertakan cara mengesahkannya dengan papan kekunci dan pembaca skrin.