harborandpine.example

لديّ متجر Shopify (قالب Online Store 2.0 وقوالب Liquid) على ⁨harborandpine.example⁩. اكتشف اختبار لإمكانية الوصول هذه المشكلة وأريد إصلاحها في قالبي.

المشكلة: تركيز لوحة المفاتيح عالق في لافتة ملفات تعريف الارتباط (WCAG 2.1.2).
المكان: حالة واحدة في صفحة واحدة، مثل /.

أحد العناصر الفاشلة، كما عرضه المتصفح:
```html
Settings
```

لماذا يهم ذلك: ⁨لا يستطيع من يستخدمون لوحة المفاتيح فقط أو قارئات الشاشة التسوق إطلاقًا إذا علق التركيز (WCAG 2.1.2 No Keyboard Trap).⁩

ما يجب تغييره:
- ابحث في إعدادات تطبيق لافتة ملفات تعريف الارتباط أو الموافقة عن خيار لإمكانية الوصول أو لمصيدة التركيز، أو اطلب من المزوّد إصلاح ذلك.
- لا يجوز للنافذة المشروطة (modal) أن تُبقي التركيز داخلها إلا وهي مفتوحة، ويجب أن تُغلق بمفتاح 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"⁩).

تغيير مقترح (كود قالبك (ابحث فيه عن الترميز المعروض)):
```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 > [product] > Media)، وانقر على كل صورة واملأ حقل «النص البديل» (Alt text). ولصور الأقسام، افتح المتجر الإلكتروني > القوالب > تخصيص (Online Store > Themes > Customize) واضبط النص البديل للصورة في إعدادات القسم.
- صِف ما يهم المتسوّق: اسم المنتج، ولونه، وزاوية العرض (مثل «حقيبة قماشية بلون زيتوني، منظر أمامي»).
- يجب أن تحمل الصور الزخرفية سمة alt فارغة (⁨alt=""⁩) كي تتجاوزها قارئات الشاشة.

تغيير مقترح (⁨صور المنتجات: لوحة إدارة Shopify › المنتجات › الوسائط › النص البديل (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.
- النص النائب وحده لا يُعدّ تسمية.

تغيير مقترح (كود قالبك (ابحث فيه عن الترميز المعروض)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

قواعد لإجابتك:
- اعرض التعديل الدقيق قبل التغيير وبعده، وحدّد الملف أو الإعداد الذي يُطبَّق فيه. إذا احتجت إلى رؤية ملفي أولًا، فاطلب مني لصقه.
- حافظ على التصميم المرئي وعلى كل السلوك الحالي كما هو.
- لا تختلق أسماء منتجات أو أسعارًا أو نصوصًا؛ استخدم عناصر نائبة يمكنني ملؤها.
- اختم بطريقة أتحقق بها من الإصلاح بنفسي.
- اذكر كيفية التأكد من الإصلاح باستخدام لوحة المفاتيح وقارئ الشاشة.

لديّ متجر Shopify (قالب Online Store 2.0 وقوالب Liquid) على ⁨harborandpine.example⁩. اكتشف اختبار لإمكانية الوصول هذه المشكلة وأريد إصلاحها في قالبي.

المشكلة: ⁨يجب أن يكون لعنصر select اسم قابل للوصول⁩ (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>⁩ مرتبطًا بقائمة الاختيار، أو سمة aria-label مثل ⁨aria-label="Sort by"⁩.

تغيير مقترح (كود قالبك (ابحث فيه عن الترميز المعروض)):
```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"⁩.
- إذا كان الرابط يحيط بصورة، فامنح الصورة نصًا بديلًا ذا معنى بدلًا من ذلك.

تغيير مقترح (كود قالبك (ابحث فيه عن الترميز المعروض)):
```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 على الأقل.
- انتبه خصوصًا إلى شارات التخفيضات، والنص النائب، وروابط التذييل، والأزرار الموضوعة فوق الصور.

تغيير مقترح (⁨إعدادات القالب › الألوان (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 للتحكم في الحجم).

تغيير مقترح (كود قالبك (ابحث فيه عن الترميز المعروض)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

قواعد لإجابتك:
- اعرض التعديل الدقيق قبل التغيير وبعده، وحدّد الملف أو الإعداد الذي يُطبَّق فيه. إذا احتجت إلى رؤية ملفي أولًا، فاطلب مني لصقه.
- حافظ على التصميم المرئي وعلى كل السلوك الحالي كما هو.
- لا تختلق أسماء منتجات أو أسعارًا أو نصوصًا؛ استخدم عناصر نائبة يمكنني ملؤها.
- اختم بطريقة أتحقق بها من الإصلاح بنفسي.
- اذكر كيفية التأكد من الإصلاح باستخدام لوحة المفاتيح وقارئ الشاشة.