harborandpine.example

Nagpapatakbo ako ng isang Shopify store (Online Store 2.0 theme, mga Liquid template) sa harborandpine.example. Nakita ng isang accessibility test ang problemang ito at gusto ko itong ayusin sa aking theme.

Problema: Naiipit ang keyboard focus sa cookie banner (WCAG 2.1.2).
Saan: 1 paglitaw sa 1 page, halimbawa /.

Isang bumabagsak na elemento, gaya ng pagkaka-render ng browser:
```html
Settings
```

Bakit ito mahalaga: Hindi talaga makakapamili ang mga gumagamit ng keyboard lang at ng screen reader kapag naiipit ang focus (WCAG 2.1.2 No Keyboard Trap).

Ang kailangang baguhin:
- Tingnan sa mga setting ng iyong cookie o consent banner app kung may opsyon para sa accessibility o focus trap, o hilingin sa vendor na ayusin ito.
- Maaaring panatilihin ng isang modal ang focus sa loob nito habang bukas lang ito, at dapat itong magsara gamit ang Escape key at ibalik ang focus sa pinanggalingan nito.

Mga patakaran para sa iyong sagot:
- Ipakita ang eksaktong pagbabago bilang bago at pagkatapos, at pangalanan ang file o setting kung saan ito ilalagay. Kung kailangan mo munang makita ang aking file, hilingin sa akin na i-paste ito.
- Panatilihing pareho ang visual design at ang lahat ng kasalukuyang behaviour.
- Huwag mag-imbento ng pangalan ng produkto, presyo o text; gumamit ng mga placeholder na mapupunan ko.
- Tapusin sa kung paano ko mismo masusuri ang ayos.
- Isama kung paano ito kumpirmahin gamit ang keyboard at isang screen reader.

Nagpapatakbo ako ng isang Shopify store (Online Store 2.0 theme, mga Liquid template) sa harborandpine.example. Nakita ng isang accessibility test ang problemang ito at gusto ko itong ayusin sa aking theme.

Problema: Hindi mapili ang mga opsyon ng produkto gamit ang keyboard (WCAG 2.1.1).
Saan: 1 paglitaw sa 1 page, halimbawa /products/trail-daypack.

Isang bumabagsak na elemento, gaya ng pagkaka-render ng browser:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Bakit ito mahalaga: Hindi makalampas sa hakbang na ito ang mga mamimiling keyboard lang ang gamit, kasama ang maraming gumagamit ng screen reader (WCAG 2.1.1).

Ang kailangang baguhin:
- Buuin ang mga option picker mula sa mga native radio button (o isang <select>) na may nakikitang label; gawing swatch ang istilo ng label.
- Kung pananatilihin mo ang mga custom na elemento, kailangan ng bawat opsyon ang tabindex="0", role="radio" na may aria-checked sa loob ng role="radiogroup", at paghawak sa mga arrow key at Space. Libre mong makukuha ang lahat ng ito sa mga native radio.

Isang mungkahing pagbabago (Ang product form ng iyong theme (variant picker)):
```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>
```

Mga patakaran para sa iyong sagot:
- Ipakita ang eksaktong pagbabago bilang bago at pagkatapos, at pangalanan ang file o setting kung saan ito ilalagay. Kung kailangan mo munang makita ang aking file, hilingin sa akin na i-paste ito.
- Panatilihing pareho ang visual design at ang lahat ng kasalukuyang behaviour.
- Huwag mag-imbento ng pangalan ng produkto, presyo o text; gumamit ng mga placeholder na mapupunan ko.
- Tapusin sa kung paano ko mismo masusuri ang ayos.
- Isama kung paano ito kumpirmahin gamit ang keyboard at isang screen reader.

Nagpapatakbo ako ng isang Shopify store (Online Store 2.0 theme, mga Liquid template) sa harborandpine.example. Nakita ng isang accessibility test ang problemang ito at gusto ko itong ayusin sa aking theme.

Problema: Dapat may malinaw na text ang mga button (WCAG 4.1.2).
Saan: 41 paglitaw sa 9 page, halimbawa /, /collections/all, /products/trail-daypack, /cart.

Isang bumabagsak na elemento, gaya ng pagkaka-render ng 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>
```

Bakit ito mahalaga: Hinihingi ng WCAG 4.1.2 na may pangalan ang bawat control. Kadalasang kasama sa mga button na walang pangalan ang mga quantity stepper, close button at arrow ng slider.

Ang kailangang baguhin:
- Hanapin ang mga button sa mga halimbawa sa ibaba.
- Magdagdag ng nakikitang text, visually hidden na text, o aria-label na nagsasabi kung ano ang ginagawa ng button (halimbawa aria-label="Close" o aria-label="Increase quantity").

Isang mungkahing pagbabago (Ang code ng iyong theme (hanapin dito ang ipinapakitang markup)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Mga patakaran para sa iyong sagot:
- Ipakita ang eksaktong pagbabago bilang bago at pagkatapos, at pangalanan ang file o setting kung saan ito ilalagay. Kung kailangan mo munang makita ang aking file, hilingin sa akin na i-paste ito.
- Panatilihing pareho ang visual design at ang lahat ng kasalukuyang behaviour.
- Huwag mag-imbento ng pangalan ng produkto, presyo o text; gumamit ng mga placeholder na mapupunan ko.
- Tapusin sa kung paano ko mismo masusuri ang ayos.
- Isama kung paano ito kumpirmahin gamit ang keyboard at isang screen reader.

Nagpapatakbo ako ng isang Shopify store (Online Store 2.0 theme, mga Liquid template) sa harborandpine.example. Nakita ng isang accessibility test ang problemang ito at gusto ko itong ayusin sa aking theme.

Problema: Dapat may alternatibong text ang mga larawan (WCAG 1.1.1).
Saan: 22 paglitaw sa 7 page, halimbawa /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Isang bumabagsak na elemento, gaya ng pagkaka-render ng browser:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Bakit ito mahalaga: Hinihingi ng WCAG 1.1.1 ang text alternative para sa mga makabuluhang larawan. Kung wala ito, hindi malalaman ng gumagamit ng screen reader kung aling produkto ang nasa larawan.

Ang kailangang baguhin:
- Sa Shopify admin, buksan ang Products > [product] > Media, i-click ang bawat larawan at punan ang 'Alt text'. Para sa mga larawan ng section, buksan ang Online Store > Themes > Customize at itakda ang alt text ng larawan sa mga setting ng section.
- Ilarawan ang mahalaga sa isang mamimili: pangalan ng produkto, kulay at ang anggulong ipinapakita (halimbawa 'Canvas tote in olive, front view').
- Dapat may walang lamang alt attribute (alt="") ang mga dekoratibong larawan para laktawan ang mga ito ng mga screen reader.

Isang mungkahing pagbabago (Mga larawan ng produkto: Shopify admin › Products › Media › Alt text. Iba pang larawan: ang code ng iyong theme):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Mga patakaran para sa iyong sagot:
- Ipakita ang eksaktong pagbabago bilang bago at pagkatapos, at pangalanan ang file o setting kung saan ito ilalagay. Kung kailangan mo munang makita ang aking file, hilingin sa akin na i-paste ito.
- Panatilihing pareho ang visual design at ang lahat ng kasalukuyang behaviour.
- Huwag mag-imbento ng pangalan ng produkto, presyo o text; gumamit ng mga placeholder na mapupunan ko.
- Tapusin sa kung paano ko mismo masusuri ang ayos.
- Isama kung paano ito kumpirmahin gamit ang keyboard at isang screen reader.

Nagpapatakbo ako ng isang Shopify store (Online Store 2.0 theme, mga Liquid template) sa harborandpine.example. Nakita ng isang accessibility test ang problemang ito at gusto ko itong ayusin sa aking theme.

Problema: Dapat may label ang mga form element (WCAG 4.1.2).
Saan: 7 paglitaw sa 6 page, halimbawa /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Isang bumabagsak na elemento, gaya ng pagkaka-render ng browser:
```html
<input type="number" value="1" min="1">
```

Bakit ito mahalaga: Hinihingi ng WCAG 1.3.1, 3.3.2 at 4.1.2 na may label ang mga form field. Ang mga newsletter sign-up at search field ang karaniwang may ganitong problema.

Ang kailangang baguhin:
- Bigyan ang bawat field ng <label for="field-id"> element, o kahit man lang ng aria-label.
- Hindi ibinibilang na label ang placeholder text lang.

Isang mungkahing pagbabago (Ang code ng iyong theme (hanapin dito ang ipinapakitang markup)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Mga patakaran para sa iyong sagot:
- Ipakita ang eksaktong pagbabago bilang bago at pagkatapos, at pangalanan ang file o setting kung saan ito ilalagay. Kung kailangan mo munang makita ang aking file, hilingin sa akin na i-paste ito.
- Panatilihing pareho ang visual design at ang lahat ng kasalukuyang behaviour.
- Huwag mag-imbento ng pangalan ng produkto, presyo o text; gumamit ng mga placeholder na mapupunan ko.
- Tapusin sa kung paano ko mismo masusuri ang ayos.
- Isama kung paano ito kumpirmahin gamit ang keyboard at isang screen reader.

Nagpapatakbo ako ng isang Shopify store (Online Store 2.0 theme, mga Liquid template) sa harborandpine.example. Nakita ng isang accessibility test ang problemang ito at gusto ko itong ayusin sa aking theme.

Problema: Dapat may accessible name ang select element (WCAG 4.1.2).
Saan: 1 paglitaw sa 1 page, halimbawa /collections/all.

Isang bumabagsak na elemento, gaya ng pagkaka-render ng browser:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Bakit ito mahalaga: Hinihingi ng WCAG 4.1.2 na may accessible name ang mga select menu.

Ang kailangang baguhin:
- Magdagdag ng <label> na naka-link sa select, o ng aria-label gaya ng aria-label="Sort by".

Isang mungkahing pagbabago (Ang code ng iyong theme (hanapin dito ang ipinapakitang markup)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Mga patakaran para sa iyong sagot:
- Ipakita ang eksaktong pagbabago bilang bago at pagkatapos, at pangalanan ang file o setting kung saan ito ilalagay. Kung kailangan mo munang makita ang aking file, hilingin sa akin na i-paste ito.
- Panatilihing pareho ang visual design at ang lahat ng kasalukuyang behaviour.
- Huwag mag-imbento ng pangalan ng produkto, presyo o text; gumamit ng mga placeholder na mapupunan ko.
- Tapusin sa kung paano ko mismo masusuri ang ayos.
- Isama kung paano ito kumpirmahin gamit ang keyboard at isang screen reader.

Nagpapatakbo ako ng isang Shopify store (Online Store 2.0 theme, mga Liquid template) sa harborandpine.example. Nakita ng isang accessibility test ang problemang ito at gusto ko itong ayusin sa aking theme.

Problema: Dapat may malinaw na text ang mga link (WCAG 2.4.4, 4.1.2).
Saan: 36 paglitaw sa 9 page, halimbawa /, /collections/all, /products/trail-daypack, /cart.

Isang bumabagsak na elemento, gaya ng pagkaka-render ng 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>
```

Bakit ito mahalaga: Hinihingi ng WCAG 2.4.4 at 4.1.2 na may accessible name ang mga link na naglalarawan sa layunin nito.

Ang kailangang baguhin:
- Hanapin ang mga link sa mga halimbawa sa ibaba. Karamihan ay mga icon o larawan sa loob ng <a> tag.
- Magdagdag ng visually hidden na text sa loob ng link, o ng aria-label gaya ng aria-label="Instagram" o aria-label="Cart".
- Kung may larawan sa loob ng link, bigyan na lang ng makabuluhang alt text ang larawan.

Isang mungkahing pagbabago (Ang code ng iyong theme (hanapin dito ang ipinapakitang markup)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Mga patakaran para sa iyong sagot:
- Ipakita ang eksaktong pagbabago bilang bago at pagkatapos, at pangalanan ang file o setting kung saan ito ilalagay. Kung kailangan mo munang makita ang aking file, hilingin sa akin na i-paste ito.
- Panatilihing pareho ang visual design at ang lahat ng kasalukuyang behaviour.
- Huwag mag-imbento ng pangalan ng produkto, presyo o text; gumamit ng mga placeholder na mapupunan ko.
- Tapusin sa kung paano ko mismo masusuri ang ayos.
- Isama kung paano ito kumpirmahin gamit ang keyboard at isang screen reader.

Nagpapatakbo ako ng isang Shopify store (Online Store 2.0 theme, mga Liquid template) sa harborandpine.example. Nakita ng isang accessibility test ang problemang ito at gusto ko itong ayusin sa aking theme.

Problema: Dapat umabot ang mga elemento sa minimum na threshold ng color contrast ratio (WCAG 1.4.3).
Saan: 22 paglitaw sa 9 page, halimbawa /, /collections/all, /products/trail-daypack, /cart.

Isang bumabagsak na elemento, gaya ng pagkaka-render ng browser:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Bakit ito mahalaga: Hinihingi ng WCAG 1.4.3 ang contrast ratio na hindi bababa sa 4.5:1 para sa normal na text at 3:1 para sa malaking text. Mahirap basahin ang malalabong presyo, badge at banner para sa mga taong malabo ang paningin, at para sa lahat kapag maliwanag ang paligid.

Ang kailangang baguhin:
- Buksan ang mga bumagsak na elementong nakalista sa ibaba at tandaan ang kulay ng foreground at background sa buod ng pagkabigo.
- Sa Online Store > Themes > Customize > Theme settings > Colors, padilimin ang kulay ng text o paliwanagin ang background para sa apektadong color scheme hanggang umabot ang ratio sa hindi bababa sa 4.5:1.
- Bigyang-pansin lalo ang mga sale badge, placeholder text, link sa footer at mga button sa ibabaw ng larawan.

Isang mungkahing pagbabago (Theme settings › Colors, o ang CSS file ng iyong theme):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Mga patakaran para sa iyong sagot:
- Ipakita ang eksaktong pagbabago bilang bago at pagkatapos, at pangalanan ang file o setting kung saan ito ilalagay. Kung kailangan mo munang makita ang aking file, hilingin sa akin na i-paste ito.
- Panatilihing pareho ang visual design at ang lahat ng kasalukuyang behaviour.
- Huwag mag-imbento ng pangalan ng produkto, presyo o text; gumamit ng mga placeholder na mapupunan ko.
- Tapusin sa kung paano ko mismo masusuri ang ayos.
- Isama kung paano ito kumpirmahin gamit ang keyboard at isang screen reader.

Nagpapatakbo ako ng isang Shopify store (Online Store 2.0 theme, mga Liquid template) sa harborandpine.example. Nakita ng isang accessibility test ang problemang ito at gusto ko itong ayusin sa aking theme.

Problema: Nararapat na nasa loob ng mga landmark ang lahat ng nilalaman ng page.
Saan: 18 paglitaw sa 9 page, halimbawa /, /collections/all, /products/trail-daypack, /cart.

Isang bumabagsak na elemento, gaya ng pagkaka-render ng browser:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Bakit ito mahalaga: Sa pamamagitan ng mga landmark, nakakalipat-lipat sa page ang mga gumagamit ng screen reader. Best practice ito na sumusuporta sa WCAG 1.3.1 at 2.4.1.

Ang kailangang baguhin:
- Ilagay ang mga nakahiwalay na nilalaman (announcement bar, pop-up, chat widget) sa angkop na landmark o sa loob ng <main>.

Mga patakaran para sa iyong sagot:
- Ipakita ang eksaktong pagbabago bilang bago at pagkatapos, at pangalanan ang file o setting kung saan ito ilalagay. Kung kailangan mo munang makita ang aking file, hilingin sa akin na i-paste ito.
- Panatilihing pareho ang visual design at ang lahat ng kasalukuyang behaviour.
- Huwag mag-imbento ng pangalan ng produkto, presyo o text; gumamit ng mga placeholder na mapupunan ko.
- Tapusin sa kung paano ko mismo masusuri ang ayos.
- Isama kung paano ito kumpirmahin gamit ang keyboard at isang screen reader.

Nagpapatakbo ako ng isang Shopify store (Online Store 2.0 theme, mga Liquid template) sa harborandpine.example. Nakita ng isang accessibility test ang problemang ito at gusto ko itong ayusin sa aking theme.

Problema: Nararapat na isa-isang antas lang ang pagtaas ng mga heading.
Saan: 7 paglitaw sa 7 page, halimbawa /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Isang bumabagsak na elemento, gaya ng pagkaka-render ng browser:
```html
<h3>Trail Daypack 22L</h3>
```

Bakit ito mahalaga: Nagna-navigate ang mga gumagamit ng screen reader gamit ang mga heading. Best practice ito na sumusuporta sa WCAG 1.3.1.

Ang kailangang baguhin:
- Ayusin ang mga antas ng heading sa mga apektadong section para sunod-sunod ang mga ito nang walang nilalaktawang antas.
- Ang tag lang ang baguhin, hindi ang visual na istilo (gumamit ng mga CSS class para sa laki).

Isang mungkahing pagbabago (Ang code ng iyong theme (hanapin dito ang ipinapakitang markup)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Mga patakaran para sa iyong sagot:
- Ipakita ang eksaktong pagbabago bilang bago at pagkatapos, at pangalanan ang file o setting kung saan ito ilalagay. Kung kailangan mo munang makita ang aking file, hilingin sa akin na i-paste ito.
- Panatilihing pareho ang visual design at ang lahat ng kasalukuyang behaviour.
- Huwag mag-imbento ng pangalan ng produkto, presyo o text; gumamit ng mga placeholder na mapupunan ko.
- Tapusin sa kung paano ko mismo masusuri ang ayos.
- Isama kung paano ito kumpirmahin gamit ang keyboard at isang screen reader.