harborandpine.example

יש לי חנות Shopify (ערכת עיצוב Online Store 2.0, תבניות Liquid) בכתובת ⁨harborandpine.example⁩. בדיקת נגישות מצאה את הבעיה הזו, ואני רוצה לתקן אותה בתבנית שלי.

הבעיה: מיקוד המקלדת לכוד בבאנר העוגיות (WCAG 2.1.2).
מיקום: מופע אחד בעמוד אחד, למשל /.

רכיב אחד שנכשל, כפי שהדפדפן הציג אותו:
```html
Settings
```

למה זה חשוב: ⁨משתמשים במקלדת בלבד ומשתמשי קוראי מסך לא יכולים לקנות בכלל כשהמיקוד לכוד (WCAG 2.1.2 No Keyboard Trap).⁩

מה צריך לשנות:
- בודקים בהגדרות של אפליקציית באנר העוגיות או ההסכמה אם יש אפשרות לנגישות או למלכודת מיקוד, או מבקשים מהספק לתקן את זה.
- חלון מודאלי רשאי להשאיר את המיקוד בתוכו רק כל עוד הוא פתוח, והוא חייב להיסגר במקש Escape ולהחזיר את המיקוד למקום שממנו הגיע.

כללים לתשובה:
- להציג את השינוי המדויק בצורת "לפני" ו"אחרי", ולציין את הקובץ או ההגדרה שבהם הוא נעשה. אם צריך לראות קודם את הקובץ שלי, לבקש ממני להדביק אותו.
- לשמור על העיצוב החזותי ועל כל ההתנהגות הקיימת בלי שינוי.
- לא להמציא שמות מוצרים, מחירים או טקסט; להשתמש בממלאי מקום שאוכל למלא בעצמי.
- לסיים בהסבר איך אוכל לבדוק את התיקון בעצמי.
- לכלול הסבר איך לאמת את התיקון במקלדת ובקורא מסך.

יש לי חנות Shopify (ערכת עיצוב Online Store 2.0, תבניות Liquid) בכתובת ⁨harborandpine.example⁩. בדיקת נגישות מצאה את הבעיה הזו, ואני רוצה לתקן אותה בתבנית שלי.

הבעיה: אי אפשר לבחור אפשרויות מוצר במקלדת (WCAG 2.1.1).
מיקום: מופע אחד בעמוד אחד, למשל ⁨/products/trail-daypack⁩.

רכיב אחד שנכשל, כפי שהדפדפן הציג אותו:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

למה זה חשוב: ⁨קונים שמשתמשים במקלדת בלבד, כולל משתמשי קוראי מסך רבים, לא יכולים לעבור את השלב הזה (WCAG 2.1.1).⁩

מה צריך לשנות:
- בונים את בוררי האפשרויות מכפתורי רדיו מקוריים (או מ-<select>) עם תוויות גלויות, ומעצבים את התווית כדוגמית.
- אם משאירים רכיבים מותאמים אישית, כל אפשרות צריכה tabindex="0", role="radio" עם aria-checked בתוך role="radiogroup", וטיפול במקשי החיצים וב-Space. כפתורי רדיו מקוריים נותנים את כל זה בלי עבודה נוספת.

שינוי מוצע (טופס המוצר בתבנית שלכם (בורר הווריאציות)):
```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>
```

כללים לתשובה:
- להציג את השינוי המדויק בצורת "לפני" ו"אחרי", ולציין את הקובץ או ההגדרה שבהם הוא נעשה. אם צריך לראות קודם את הקובץ שלי, לבקש ממני להדביק אותו.
- לשמור על העיצוב החזותי ועל כל ההתנהגות הקיימת בלי שינוי.
- לא להמציא שמות מוצרים, מחירים או טקסט; להשתמש בממלאי מקום שאוכל למלא בעצמי.
- לסיים בהסבר איך אוכל לבדוק את התיקון בעצמי.
- לכלול הסבר איך לאמת את התיקון במקלדת ובקורא מסך.

יש לי חנות Shopify (ערכת עיצוב Online Store 2.0, תבניות Liquid) בכתובת ⁨harborandpine.example⁩. בדיקת נגישות מצאה את הבעיה הזו, ואני רוצה לתקן אותה בתבנית שלי.

הבעיה: לחצנים מוכרחים להיות עם טקסט מובן (WCAG 4.1.2).
מיקום: 41 מופעים ב-9 עמודים, למשל /, ⁨/collections/all⁩, ⁨/products/trail-daypack⁩, ⁨/cart⁩.

רכיב אחד שנכשל, כפי שהדפדפן הציג אותו:
```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>
```

למה זה חשוב: ⁨WCAG 4.1.2 דורש שלכל פקד יהיה שם. כפתורים בלי שם הם לרוב כפתורי כמות, כפתורי סגירה וחצים של סליידרים.⁩

מה צריך לשנות:
- מאתרים את הכפתורים בדוגמאות שלמטה.
- מוסיפים טקסט גלוי, טקסט מוסתר חזותית או aria-label שאומר מה הכפתור עושה (למשל ⁨aria-label="Close"⁩ או ⁨aria-label="Increase quantity"⁩).

שינוי מוצע (⁨הקוד של התבנית שלכם (מחפשים בו את ה-markup שמוצג)⁩):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

כללים לתשובה:
- להציג את השינוי המדויק בצורת "לפני" ו"אחרי", ולציין את הקובץ או ההגדרה שבהם הוא נעשה. אם צריך לראות קודם את הקובץ שלי, לבקש ממני להדביק אותו.
- לשמור על העיצוב החזותי ועל כל ההתנהגות הקיימת בלי שינוי.
- לא להמציא שמות מוצרים, מחירים או טקסט; להשתמש בממלאי מקום שאוכל למלא בעצמי.
- לסיים בהסבר איך אוכל לבדוק את התיקון בעצמי.
- לכלול הסבר איך לאמת את התיקון במקלדת ובקורא מסך.

יש לי חנות Shopify (ערכת עיצוב Online Store 2.0, תבניות Liquid) בכתובת ⁨harborandpine.example⁩. בדיקת נגישות מצאה את הבעיה הזו, ואני רוצה לתקן אותה בתבנית שלי.

הבעיה: תמונות מוכרחות להיות עם טקסט חלופי (WCAG 1.1.1).
מיקום: 22 מופעים ב-7 עמודים, למשל /, ⁨/collections/all⁩, ⁨/products/trail-daypack⁩, ⁨/products/pine-wool-beanie⁩.

רכיב אחד שנכשל, כפי שהדפדפן הציג אותו:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

למה זה חשוב: ⁨WCAG 1.1.1 דורש טקסט חלופי לתמונות בעלות משמעות. בלעדיו, משתמשי קוראי מסך לא יכולים לדעת איזה מוצר מופיע בתמונה.⁩

מה צריך לשנות:
- בממשק הניהול של Shopify, פותחים את Products > [המוצר] > Media, לוחצים על כל תמונה וממלאים את השדה 'Alt text'. לתמונות בתוך סקשנים, פותחים את Online Store > Themes > Customize ומגדירים את הטקסט החלופי של התמונה בהגדרות הסקשן.
- מתארים את מה שחשוב לקונים: שם המוצר, הצבע והזווית שמוצגת (למשל 'תיק קנבס בצבע זית, מבט מלפנים').
- לתמונות דקורטיביות צריך להיות מאפיין alt ריק (⁨alt=""⁩) כדי שקוראי מסך ידלגו עליהן.

שינוי מוצע (⁨תמונות מוצר: Shopify admin › Products › Media › Alt text. תמונות אחרות: הקוד של התבנית שלכם⁩):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

כללים לתשובה:
- להציג את השינוי המדויק בצורת "לפני" ו"אחרי", ולציין את הקובץ או ההגדרה שבהם הוא נעשה. אם צריך לראות קודם את הקובץ שלי, לבקש ממני להדביק אותו.
- לשמור על העיצוב החזותי ועל כל ההתנהגות הקיימת בלי שינוי.
- לא להמציא שמות מוצרים, מחירים או טקסט; להשתמש בממלאי מקום שאוכל למלא בעצמי.
- לסיים בהסבר איך אוכל לבדוק את התיקון בעצמי.
- לכלול הסבר איך לאמת את התיקון במקלדת ובקורא מסך.

יש לי חנות Shopify (ערכת עיצוב Online Store 2.0, תבניות Liquid) בכתובת ⁨harborandpine.example⁩. בדיקת נגישות מצאה את הבעיה הזו, ואני רוצה לתקן אותה בתבנית שלי.

הבעיה: אלמנטים של טופס מוכרחים להיות עם תוויות (WCAG 4.1.2).
מיקום: 7 מופעים ב-6 עמודים, למשל ⁨/products/trail-daypack⁩, ⁨/cart⁩, ⁨/products/pine-wool-beanie⁩, ⁨/products/enamel-camp-mug⁩.

רכיב אחד שנכשל, כפי שהדפדפן הציג אותו:
```html
<input type="number" value="1" min="1">
```

למה זה חשוב: ⁨WCAG 1.3.1, 3.3.2 ו-4.1.2 דורשים שלשדות טופס יהיו תוויות. שדות הרשמה לניוזלטר ושדות חיפוש הם המקרים הנפוצים.⁩

מה צריך לשנות:
- נותנים לכל שדה רכיב ⁨<label for="field-id">⁩, או לפחות aria-label.
- טקסט placeholder לבדו לא נחשב לתווית.

שינוי מוצע (⁨הקוד של התבנית שלכם (מחפשים בו את ה-markup שמוצג)⁩):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

כללים לתשובה:
- להציג את השינוי המדויק בצורת "לפני" ו"אחרי", ולציין את הקובץ או ההגדרה שבהם הוא נעשה. אם צריך לראות קודם את הקובץ שלי, לבקש ממני להדביק אותו.
- לשמור על העיצוב החזותי ועל כל ההתנהגות הקיימת בלי שינוי.
- לא להמציא שמות מוצרים, מחירים או טקסט; להשתמש בממלאי מקום שאוכל למלא בעצמי.
- לסיים בהסבר איך אוכל לבדוק את התיקון בעצמי.
- לכלול הסבר איך לאמת את התיקון במקלדת ובקורא מסך.

יש לי חנות Shopify (ערכת עיצוב Online Store 2.0, תבניות Liquid) בכתובת ⁨harborandpine.example⁩. בדיקת נגישות מצאה את הבעיה הזו, ואני רוצה לתקן אותה בתבנית שלי.

הבעיה: לאלמנט הנבחר צריך להיות שם נגיש (WCAG 4.1.2).
מיקום: מופע אחד בעמוד אחד, למשל ⁨/collections/all⁩.

רכיב אחד שנכשל, כפי שהדפדפן הציג אותו:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

למה זה חשוב: ⁨WCAG 4.1.2 דורש שלתפריטי בחירה יהיה שם נגיש.⁩

מה צריך לשנות:
- מוסיפים ⁨<label>⁩ שמקושר לרכיב ה-select, או aria-label כמו ⁨aria-label="Sort by"⁩.

שינוי מוצע (⁨הקוד של התבנית שלכם (מחפשים בו את ה-markup שמוצג)⁩):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

כללים לתשובה:
- להציג את השינוי המדויק בצורת "לפני" ו"אחרי", ולציין את הקובץ או ההגדרה שבהם הוא נעשה. אם צריך לראות קודם את הקובץ שלי, לבקש ממני להדביק אותו.
- לשמור על העיצוב החזותי ועל כל ההתנהגות הקיימת בלי שינוי.
- לא להמציא שמות מוצרים, מחירים או טקסט; להשתמש בממלאי מקום שאוכל למלא בעצמי.
- לסיים בהסבר איך אוכל לבדוק את התיקון בעצמי.
- לכלול הסבר איך לאמת את התיקון במקלדת ובקורא מסך.

יש לי חנות Shopify (ערכת עיצוב Online Store 2.0, תבניות Liquid) בכתובת ⁨harborandpine.example⁩. בדיקת נגישות מצאה את הבעיה הזו, ואני רוצה לתקן אותה בתבנית שלי.

הבעיה: קישורים מוכרחים להיות עם טקסט מובן (WCAG 2.4.4, 4.1.2).
מיקום: 36 מופעים ב-9 עמודים, למשל /, ⁨/collections/all⁩, ⁨/products/trail-daypack⁩, ⁨/cart⁩.

רכיב אחד שנכשל, כפי שהדפדפן הציג אותו:
```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>
```

למה זה חשוב: ⁨WCAG 2.4.4 ו-4.1.2 דורשים שלקישורים יהיה שם נגיש שמתאר את המטרה שלהם.⁩

מה צריך לשנות:
- מאתרים את הקישורים בדוגמאות שלמטה. רובם אייקונים או תמונות בתוך תג ⁨<a>⁩.
- מוסיפים בתוך הקישור טקסט מוסתר חזותית, או aria-label כמו ⁨aria-label="Instagram"⁩ או ⁨aria-label="Cart"⁩.
- אם הקישור עוטף תמונה, נותנים במקום זאת לתמונה טקסט חלופי בעל משמעות.

שינוי מוצע (⁨הקוד של התבנית שלכם (מחפשים בו את ה-markup שמוצג)⁩):
```html
<a href="/cart" aria-label="Cart">…</a>
```

כללים לתשובה:
- להציג את השינוי המדויק בצורת "לפני" ו"אחרי", ולציין את הקובץ או ההגדרה שבהם הוא נעשה. אם צריך לראות קודם את הקובץ שלי, לבקש ממני להדביק אותו.
- לשמור על העיצוב החזותי ועל כל ההתנהגות הקיימת בלי שינוי.
- לא להמציא שמות מוצרים, מחירים או טקסט; להשתמש בממלאי מקום שאוכל למלא בעצמי.
- לסיים בהסבר איך אוכל לבדוק את התיקון בעצמי.
- לכלול הסבר איך לאמת את התיקון במקלדת ובקורא מסך.

יש לי חנות Shopify (ערכת עיצוב Online Store 2.0, תבניות Liquid) בכתובת ⁨harborandpine.example⁩. בדיקת נגישות מצאה את הבעיה הזו, ואני רוצה לתקן אותה בתבנית שלי.

הבעיה: לאלמנטים צריך להיות ניגוד צבעים מספק (WCAG 1.4.3).
מיקום: 22 מופעים ב-9 עמודים, למשל /, ⁨/collections/all⁩, ⁨/products/trail-daypack⁩, ⁨/cart⁩.

רכיב אחד שנכשל, כפי שהדפדפן הציג אותו:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

למה זה חשוב: ⁨WCAG 1.4.3 דורש יחס ניגודיות של 4.5:1 לפחות לטקסט רגיל ו-3:1 לטקסט גדול. מחירים, תגיות ובאנרים חיוורים קשים לקריאה לאנשים עם ראייה ירודה, ולכולם באור חזק.⁩

מה צריך לשנות:
- פותחים את הרכיבים שנכשלו שמפורטים למטה ורושמים את צבעי החזית והרקע שמופיעים בסיכום הכשל.
- ב-Online Store > Themes > Customize > Theme settings > Colors, מכהים את צבע הטקסט או מבהירים את הרקע בערכת הצבעים הרלוונטית, עד שהיחס מגיע ל-4.5:1 לפחות.
- כדאי לשים לב במיוחד לתגיות מבצע, לטקסט placeholder, לקישורים בכותרת התחתונה ולכפתורים על גבי תמונות.

שינוי מוצע (⁨Theme settings › Colors, או קובץ ה-CSS של התבנית שלכם⁩):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

כללים לתשובה:
- להציג את השינוי המדויק בצורת "לפני" ו"אחרי", ולציין את הקובץ או ההגדרה שבהם הוא נעשה. אם צריך לראות קודם את הקובץ שלי, לבקש ממני להדביק אותו.
- לשמור על העיצוב החזותי ועל כל ההתנהגות הקיימת בלי שינוי.
- לא להמציא שמות מוצרים, מחירים או טקסט; להשתמש בממלאי מקום שאוכל למלא בעצמי.
- לסיים בהסבר איך אוכל לבדוק את התיקון בעצמי.
- לכלול הסבר איך לאמת את התיקון במקלדת ובקורא מסך.

יש לי חנות Shopify (ערכת עיצוב Online Store 2.0, תבניות Liquid) בכתובת ⁨harborandpine.example⁩. בדיקת נגישות מצאה את הבעיה הזו, ואני רוצה לתקן אותה בתבנית שלי.

הבעיה: כל תוכן העמוד צריך להיות בתוך ציוני דרך.
מיקום: 18 מופעים ב-9 עמודים, למשל /, ⁨/collections/all⁩, ⁨/products/trail-daypack⁩, ⁨/cart⁩.

רכיב אחד שנכשל, כפי שהדפדפן הציג אותו:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

למה זה חשוב: ⁨אזורי ציון דרך מאפשרים למשתמשי קוראי מסך לקפוץ בין חלקי העמוד. זו שיטה מומלצת שתומכת ב-WCAG 1.3.1 וב-2.4.1.⁩

מה צריך לשנות:
- עוטפים תוכן שנמצא מחוץ לאזורים (פסי הודעות, חלונות קופצים, וידג׳טים של צ׳אט) באזור ציון הדרך המתאים, או מציבים אותו בתוך ⁨<main>⁩.

כללים לתשובה:
- להציג את השינוי המדויק בצורת "לפני" ו"אחרי", ולציין את הקובץ או ההגדרה שבהם הוא נעשה. אם צריך לראות קודם את הקובץ שלי, לבקש ממני להדביק אותו.
- לשמור על העיצוב החזותי ועל כל ההתנהגות הקיימת בלי שינוי.
- לא להמציא שמות מוצרים, מחירים או טקסט; להשתמש בממלאי מקום שאוכל למלא בעצמי.
- לסיים בהסבר איך אוכל לבדוק את התיקון בעצמי.
- לכלול הסבר איך לאמת את התיקון במקלדת ובקורא מסך.

יש לי חנות Shopify (ערכת עיצוב Online Store 2.0, תבניות Liquid) בכתובת ⁨harborandpine.example⁩. בדיקת נגישות מצאה את הבעיה הזו, ואני רוצה לתקן אותה בתבנית שלי.

הבעיה: הדרגות של הכותרות צריכות לגדול רק באחת.
מיקום: 7 מופעים ב-7 עמודים, למשל ⁨/collections/all⁩, ⁨/products/trail-daypack⁩, ⁨/pages/about⁩, ⁨/products/pine-wool-beanie⁩.

רכיב אחד שנכשל, כפי שהדפדפן הציג אותו:
```html
<h3>Trail Daypack 22L</h3>
```

למה זה חשוב: ⁨משתמשי קוראי מסך מנווטים לפי כותרות. זו שיטה מומלצת שתומכת ב-WCAG 1.3.1.⁩

מה צריך לשנות:
- מתאימים את רמות הכותרות באזורים שנפגעו כך שיתקדמו לפי הסדר, בלי לדלג על רמות.
- משנים רק את התג, לא את הסגנון החזותי (את הגודל קובעים במחלקות CSS).

שינוי מוצע (⁨הקוד של התבנית שלכם (מחפשים בו את ה-markup שמוצג)⁩):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

כללים לתשובה:
- להציג את השינוי המדויק בצורת "לפני" ו"אחרי", ולציין את הקובץ או ההגדרה שבהם הוא נעשה. אם צריך לראות קודם את הקובץ שלי, לבקש ממני להדביק אותו.
- לשמור על העיצוב החזותי ועל כל ההתנהגות הקיימת בלי שינוי.
- לא להמציא שמות מוצרים, מחירים או טקסט; להשתמש בממלאי מקום שאוכל למלא בעצמי.
- לסיים בהסבר איך אוכל לבדוק את התיקון בעצמי.
- לכלול הסבר איך לאמת את התיקון במקלדת ובקורא מסך.