جعل متجر Shopify الخاص بك ADA متاحًا للوصول

زادت الدعاوى القضائية الصادرة عن قانون الأمريكيين ذوي الإعاقة (ADA) ضد مواقع التجارة الإلكترونية بنسبة 300% بين عامي 2020 و2024، وتشكل متاجر Shopify حصة متزايدة من الأهداف. وبعيدًا عن الامتثال القانوني، تؤثر إمكانية الوصول بشكل مباشر على الإيرادات: إذ يعيش ما يقرب من 26% من البالغين في الولايات المتحدة من ذوي الإعاقة، وهو ما يمثل 490 مليار دولار من القوة الشرائية. يستبعد المتجر الذي يتعذر الوصول إليه هؤلاء العملاء تمامًا.

يغطي هذا الدليل التنفيذ العملي لإمكانية الوصول إلى Shopify: معايير WCAG 2.1 AA المحددة الأكثر أهمية للتجارة الإلكترونية، وكيفية تدقيق متجرك الحالي، والإصلاحات التي تعالج الانتهاكات الأكثر شيوعًا.

الوجبات الرئيسية

• WCAG 2.1 المستوى AA هو المعيار المطلوب للامتثال لـ ADA — وليس AAA، وليس المستوى A فقط
• يجب أن يعمل التنقل عبر لوحة المفاتيح مع كل عنصر تفاعلي: التنقل واختيار المنتج وعربة التسوق والخروج
• يجب أن تصل نسبة تباين الألوان إلى 4.5:1 للنص العادي و3:1 للنص الكبير ومكونات واجهة المستخدم
• يجب أن تتلقى برامج قراءة الشاشة نصًا بديلاً ذا معنى لجميع صور المنتج وتسميات ذات معنى لجميع حقول النماذج
• يجب أن تكون مؤشرات التركيز مرئية بشكل مرئي — تقوم المتصفحات بقمعها افتراضيًا في العديد من السمات
• تتم إدارة عملية الدفع في Shopify بواسطة Shopify ويمكن الوصول إليها، ولكن قد لا يكون درج سلة التسوق الخاص بك متاحًا
• تكتشف أدوات فحص إمكانية الوصول الآلية ما يقرب من 30% من المشكلات — ويلزم إجراء اختبار يدوي للباقي
• لا تحقق تراكبات إمكانية الوصول (مثل AccessiBe) امتثال WCAG وتزيد من المخاطر القانونية

فهم متطلبات ADA وWCAG للتجارة الإلكترونية

لا يتضمن ADA معايير فنية محددة لمواقع الويب. طبقت المحاكم باستمرار إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) باعتبارها المعيار الفعلي، مع كون المستوى 2.1 AA هو هدف الامتثال المقبول في غالبية التسويات والأحكام.

يتم تنظيم WCAG 2.1 حول أربعة مبادئ (POUR):

1. يمكن إدراكها: يجب أن تكون المعلومات ومكونات واجهة المستخدم قابلة للعرض بطرق يمكن للمستخدمين إدراكها (بدائل المحتوى المرئي، والتسميات التوضيحية للصوت، والتباين الكافي)
2. قابلة للتشغيل: يجب أن تكون مكونات واجهة المستخدم والتنقل قابلة للتشغيل (إمكانية الوصول إلى لوحة المفاتيح، وتوفير الوقت الكافي لإكمال المهام، وعدم وجود محتوى يسبب النوبات)
3. مفهومة: يجب أن تكون المعلومات وتشغيل واجهة المستخدم مفهومة (لغة قابلة للقراءة، وسلوك يمكن التنبؤ به، ومساعدة الإدخال)
4. قوي: يجب أن يكون المحتوى قويًا بما يكفي لتفسيره بواسطة التقنيات المساعدة

انتهاكات إمكانية الوصول الأكثر شيوعًا التي يتم التقاضي بشأنها على مواقع التجارة الإلكترونية:

تدقيق إمكانية الوصول: الأدوات والعمليات

أدوات الاختبار الآلي:

تجد الأدوات التلقائية مشكلات هيكلية: النص البديل المفقود، وتسميات النماذج المفقودة، وفشل التباين. لا يمكنهم العثور على: جودة نص بديل ذات معنى، وترتيب تركيز لوحة المفاتيح المنطقي، وتجربة قارئ الشاشة، والتعقيد المعرفي.

عملية الاختبار اليدوي:

الخطوة 1 - اختبار التنقل باستخدام لوحة المفاتيح فقط: افصل الماوس الخاص بك. انتقل إلى متجرك باستخدام مفتاح Tab (للأمام)، وShift+Tab (للخلف)، وEnter (تنشيط)، وSpace (تحديد/تمرير)، ومفاتيح الأسهم (داخل المكونات) فقط. أكمل هذه المهام:

• تصفح إلى فئة المنتج
• اختر منتجًا
• اختر خيار الحجم/اللون
• أضف إلى السلة
• انتقل إلى السلة
• انتقل إلى الخروج

يجب أن تكون كل مهمة مكتملة باستخدام لوحة المفاتيح فقط.

الخطوة 2 - اختبار قارئ الشاشة: استخدم NVDA (مجاني، Windows) أو VoiceOver (مدمج، Mac/iOS). انتقل إلى صفحتك الرئيسية وصفحة المنتج وسلة التسوق الخاصة بك مع تنشيط قارئ الشاشة. استمع ل:

• هل كل صورة موصوفة بشكل هادف؟
• هل جميع الأزرار تحمل علامة الإجراء الخاص بها؟
• هل ترتيب القراءة منطقي؟
• هل يتم الإعلان عن رسائل الخطأ؟

الخطوة 3 - اختبار التكبير: زيادة تكبير المتصفح إلى 200% و400%. يجب أن يعاد تدفق الصفحة وتظل قابلة للاستخدام - بدون تمرير أفقي بنسبة 200%، ولا يوجد تداخل في المحتوى، ولا يوجد نص مقطوع.

الخطوة 4 - اختبار تباين الألوان: استخدم أداة DevTools أو WebAIM Contrast Checker للتحقق من أن كل النص يلبي متطلبات التباين: 4.5:1 للنص العادي، 3:1 للنص الكبير (18pt+ أو 14pt+ غامق)، 3:1 لمكونات واجهة المستخدم (الأزرار والأيقونات وحدود النموذج).

إمكانية الوصول إلى الصور: نص بديل لصور المنتج

النص البديل هو انتهاك إمكانية الوصول الأكثر شيوعًا في متاجر Shopify. يجب أن تحتوي كل صورة على نص بديل ينقل نفس المعلومات التي قد يحصل عليها المستخدم المبصر من عرض الصورة.

إرشادات النص البديل لصور منتجات Shopify:

وصف ما يهم في قرارات الشراء:

• اسم المنتج وأهم سماته المميزة
• اللون والمادة والخصائص البصرية البارزة
• السياق إذا تم عرضه قيد الاستخدام (على سبيل المثال، "كوب سيراميك أزرق على طاولة خشبية")
• أي نص ظاهر في الصورة

ما لا يجب فعله:

• "image001.jpg" — أسماء الملفات ليست نصًا بديلاً
• "صورة المنتج" - الأوصاف العامة لا تنقل أي معلومات
• حشو الكلمات الرئيسية - "الكوب الأزرق كوب القهوة الخزفي الأزرق أفضل كوب أزرق" - وهذا ضار
• وصف كل التفاصيل الصغيرة - كن موجزًا وذو صلة

تنفيذ النص البديل في Shopify:

أضف نصًا بديلًا إلى صور المنتج من خلال Shopify Admin:

1. المسؤول > المنتجات > [المنتج] > انقر على الصورة
2. أدخل نصًا بديلاً في الحقل "نص بديل للصورة".
3. احفظ

للحصول على تحديثات نص بديل مجمعة، استخدم محرر Shopify المجمع:

1. المسؤول > المنتجات > حدد جميع المنتجات > تحرير المنتجات
2. أضف عمود "النص البديل لصورة المنتج".
3. تحرير وحفظ

صور ديكور:

يجب أن تحتوي الصور المزخرفة النقية (أنماط الخلفية والفواصل المزخرفة) على نص بديل فارغ (alt=""). وهذا يخبر قارئي الشاشة بتخطي الصورة بالكامل بدلاً من الإعلان عن "صورة" بدون وصف.

التنقل عبر لوحة المفاتيح: جعل متجرك قابلاً للتشغيل بالكامل

تتطلب إمكانية الوصول إلى لوحة المفاتيح إمكانية الوصول إلى كل عنصر تفاعلي - الأزرار والروابط وحقول النماذج والقوائم المنسدلة والنماذج - وتنشيطها والتنقل فيها باستخدام لوحة المفاتيح فقط.

إدارة التركيز في سمات Shopify:

تعمل معظم سمات Shopify على منع مؤشرات التركيز للجماليات المرئية:

/* Many themes include this — it's an accessibility violation */
:focus {
  outline: none;
}

استبدل بنمط التركيز المرئي الذي لا يكسر التصميم:

/* Visible focus for keyboard users, hidden for mouse users */
:focus-visible {
  outline: 3px solid #005FCC;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Still suppress for mouse clicks (no :focus-visible means mouse/touch) */
:focus:not(:focus-visible) {
  outline: none;
}

** الوصول إلى لوحة المفاتيح في قائمة التنقل **:

يجب أن تكون قوائم التنقل المنسدلة قابلة للتشغيل باستخدام لوحة المفاتيح:

• علامة تبويب لعنصر التنقل
• أدخل أو الفضاء لفتح القائمة المنسدلة
• مفاتيح الأسهم للتنقل بين العناصر المنسدلة
• الهروب لإغلاق القائمة المنسدلة

اختبر هذا على موضوعك الحالي. تحتوي العديد من سمات Shopify على قوائم منسدلة يتم تشغيلها بالتمرير والتي لا يمكن لمستخدمي لوحة المفاتيح الوصول إليها. الإصلاح: التأكد من فتح القوائم المنسدلة في أحداث keydown لمفاتيح Enter/Space/الأسهم بالإضافة إلى تحريك الماوس.

إدارة لوحة المفاتيح المشروطة والأدراج:

عند فتح درج مشروط أو درج عربة التسوق، يجب أن ينتقل تركيز لوحة المفاتيح إلى الشكل. عند إغلاقه، يجب أن يعود التركيز إلى العنصر الذي أدى إلى تشغيله. يجب أن تكون جميع العناصر القابلة للتركيز داخل النموذج قابلة للوصول؛ يجب ألا يفلت التركيز من المشروط.

// Example: Focus management for cart drawer
function openCartDrawer() {
  const cartDrawer = document.getElementById('cart-drawer');
  cartDrawer.setAttribute('aria-hidden', 'false');
  cartDrawer.removeAttribute('inert');

  // Move focus to first focusable element in drawer
  const firstFocusable = cartDrawer.querySelector(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  firstFocusable?.focus();

  // Trap focus within drawer
  cartDrawer.addEventListener('keydown', trapFocus);
}

function closeCartDrawer(triggerElement) {
  const cartDrawer = document.getElementById('cart-drawer');
  cartDrawer.setAttribute('aria-hidden', 'true');
  cartDrawer.setAttribute('inert', '');
  cartDrawer.removeEventListener('keydown', trapFocus);

  // Return focus to trigger element
  triggerElement?.focus();
}

إمكانية الوصول إلى النموذج: التسميات والأخطاء والتعليمات

تعد النماذج منطقة إمكانية الوصول الأكثر أهمية في التجارة الإلكترونية - يجب أن يكون الوصول إلى نموذج الإضافة إلى عربة التسوق وإدخال البحث والاشتراك في النشرة الإخبارية ونماذج الخروج متاحًا بالكامل.

متطلبات تسمية النموذج:

يجب أن يكون لكل إدخال نموذج تسمية مرتبطة برمجيًا:

<!-- Correct: label explicitly associated via 'for' attribute -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>

<!-- Correct: label wraps input (implicit association) -->
<label>
  Email address
  <input type="email" name="email" required>
</label>

<!-- Wrong: placeholder is not a substitute for label -->
<input type="email" placeholder="Email address" name="email">

يختفي نص العنصر النائب عندما يكتب المستخدمون ولا يكون به تباين كافٍ في معظم المتصفحات. لا تستخدم أبدًا العنصر النائب كتسمية وحيدة.

إمكانية الوصول إلى رسالة الخطأ:

يجب أن تكون رسائل الخطأ مرتبطة برمجياً بالحقل الذي تسبب فيها:

<div>
  <label for="zip">ZIP code</label>
  <input
    type="text"
    id="zip"
    name="zip"
    aria-describedby="zip-error"
    aria-invalid="true"
  >
  <p id="zip-error" role="alert">
    Please enter a valid 5-digit ZIP code
  </p>
</div>

يتسبب role="alert" في قيام برامج قراءة الشاشة بالإعلان عن رسالة الخطأ فور ظهورها. يقوم aria-describedby بربط الخطأ بحقل الإدخال حتى يتمكن قارئو الشاشة من العثور على الخطأ عند الانتقال إلى الحقل.

محددات الحجم واللون:

يجب أن يكون من الممكن الوصول إلى محددات متغيرات المنتج (أزرار الحجم، عينات الألوان). النهج المشتركة:

<!-- Accessible radio button group for size selection -->
<fieldset>
  <legend>Size</legend>
  <div class="size-options">
    <input type="radio" id="size-s" name="size" value="S">
    <label for="size-s">Small</label>

    <input type="radio" id="size-m" name="size" value="M">
    <label for="size-m">Medium</label>

    <input type="radio" id="size-l" name="size" value="L">
    <label for="size-l">Large</label>
  </div>
</fieldset>

تحتاج عينات الألوان إلى أسماء يسهل الوصول إليها — فاللون المرئي ليس كافيًا:

<!-- Accessible color swatch -->
<input type="radio" id="color-navy" name="color" value="Navy">
<label for="color-navy">
  <span class="swatch navy" aria-hidden="true"></span>
  <span class="visually-hidden">Navy</span>
</label>

تسميات ARIA وHTML الدلالي

تعمل سمات ARIA (تطبيقات الإنترنت الغنية التي يمكن الوصول إليها) على ملء الفجوات الدلالية حيث لا يكون HTML وحده كافيًا. ومع ذلك، فإن القاعدة الأولى لـ ARIA هي: "لا تستخدم ARIA إذا كان بإمكان HTML القيام بذلك."

أنماط ARIA الشائعة لمتاجر Shopify:

<!-- Cart button with item count -->
<button aria-label="Cart, 3 items">
  <svg aria-hidden="true"><!-- cart icon --></svg>
  <span class="visually-hidden">Cart</span>
  <span class="cart-count" aria-hidden="true">3</span>
</button>

<!-- "Add to Cart" button state changes -->
<button id="add-to-cart" aria-live="polite">
  Add to Cart
</button>
<!-- After adding: -->
<button id="add-to-cart" aria-live="polite">
  Added to Cart ✓
</button>

<!-- Loading states -->
<div aria-busy="true" aria-live="polite">
  Loading products...
</div>

<!-- Expandable sections (accordion) -->
<button aria-expanded="false" aria-controls="faq-answer-1">
  What is your return policy?
</button>
<div id="faq-answer-1" hidden>
  <p>We accept returns within 30 days...</p>
</div>

** الأدوار التاريخية للتنقل **:

تأكد من أن المظهر الخاص بك يستخدم عناصر HTML المميزة المناسبة التي يتنقل مستخدمو قارئ الشاشة من خلالها:

<header role="banner"><!-- site header --></header>
<nav aria-label="Main navigation"><!-- primary navigation --></nav>
<main id="main-content"><!-- main content --></main>
<aside><!-- sidebar filters or complementary content --></aside>
<footer role="contentinfo"><!-- site footer --></footer>

تراكبات إمكانية الوصول: لماذا تفشل

تراكبات إمكانية الوصول (accessiBe وUserWay وAudioEye) عبارة عن عناصر واجهة مستخدم JavaScript تدعي أنها تجعل موقعك قابلاً للوصول تلقائيًا. فهي ليست حلاً وتزيد من المخاطر القانونية.

** لماذا تفشل التراكبات **:

1. لا يمكنهم إصلاح المشكلات الهيكلية المتعلقة بإمكانية الوصول إلى HTML - فقط العرض التقديمي على مستوى السطح
2. إنها تتعارض في كثير من الأحيان مع التقنيات المساعدة، مما يجعل التجربة أسوأ بالنسبة لمستخدمي قارئ الشاشة الفعليين
3. لم تقبل المحاكم مطالبات موفري التراكب باعتبارها امتثالًا مناسبًا لـ ADA
4. يعارض الاتحاد الوطني للمكفوفين وغيره من منظمات الدفاع عن الإعاقة صراحةً هذه التراكبات
5. واجه العديد من موفري خدمات التراكب أنفسهم دعاوى قضائية جماعية

ما يجب فعله بدلاً من ذلك:

استثمر في إصلاحات إمكانية الوصول الهيكلية: HTML الدلالي، والتسميات المناسبة، والتنقل عبر لوحة المفاتيح، وإدارة التركيز، وتباين الألوان. تفيد هذه الإصلاحات جميع المستخدمين، وتعمل على تحسين تحسين محركات البحث (لدى برامج قراءة الشاشة وبرامج زحف البحث احتياجات مماثلة)، وتوفر حماية قانونية حقيقية.

الأسئلة المتداولة

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

الخطوات التالية

يتطلب التنفيذ الشامل لإمكانية الوصول إلى Shopify - الذي يغطي التنقل عبر لوحة المفاتيح، وتوافق قارئ الشاشة، وإمكانية الوصول إلى النموذج، وتباين ألوان WCAG - خبرة في تطوير الواجهة الأمامية ومنهجية اختبار إمكانية الوصول.

تتضمن خدمات Shopify من ECOSIRE عمليات تدقيق إمكانية الوصول، ومعالجة WCAG 2.1 AA، ومراقبة إمكانية الوصول المستمرة لحماية متجرك من دعاوى ADA مع توسيع قاعدة العملاء التي يمكن الوصول إليها.

اتصل بفريق إمكانية الوصول لدينا لتحديد موعد لإجراء تدقيق شامل لـ WCAG 2.1 AA لمتجر Shopify الخاص بك.