اپنے Shopify اسٹور کو ADA قابل رسائی بنانا

2020 اور 2024 کے درمیان ای کامرس ویب سائٹس کے خلاف ADA (امریکن ود ڈس ایبلٹیز ایکٹ) کے مقدمات میں 300% اضافہ ہوا، جس میں Shopify اسٹورز اہداف کا بڑھتا ہوا حصہ بنا رہے ہیں۔ قانونی تعمیل کے علاوہ، رسائی براہ راست آمدنی پر اثر انداز ہوتی ہے: تقریباً 26% امریکی بالغ معذوری کے ساتھ رہتے ہیں، جو کہ قوت خرید میں $490 بلین کی نمائندگی کرتے ہیں۔ ایک ناقابل رسائی اسٹور ان صارفین کو مکمل طور پر خارج کر دیتا ہے۔

یہ گائیڈ عملی Shopify قابل رسائی عمل درآمد کا احاطہ کرتا ہے: مخصوص WCAG 2.1 AA معیار جو ای کامرس کے لیے سب سے زیادہ اہمیت رکھتا ہے، اپنے موجودہ اسٹور کا آڈٹ کیسے کریں، اور وہ اصلاحات جو عام خلاف ورزیوں کو دور کرتی ہیں۔

اہم ٹیک ویز

• WCAG 2.1 لیول AA ADA کی تعمیل کے لیے درکار معیار ہے — AAA نہیں، نہ صرف لیول A
• کی بورڈ نیویگیشن کو ہر انٹرایکٹو عنصر کے لیے کام کرنا چاہیے: نیویگیشن، پروڈکٹ کا انتخاب، کارٹ، اور چیک آؤٹ
• رنگ کے تضاد کا تناسب عام متن کے لیے 4.5:1 اور بڑے متن اور UI اجزاء کے لیے 3:1 کو پورا کرنا چاہیے
• اسکرین ریڈرز کو تمام پروڈکٹ امیجز کے لیے بامعنی Alt ٹیکسٹ اور تمام فارم فیلڈز کے لیے بامعنی لیبل موصول ہونا چاہیے
• فوکس انڈیکیٹرز کو بصری طور پر نظر آنا چاہیے — براؤزر انہیں بہت سے تھیمز میں بطور ڈیفالٹ دبا دیتے ہیں
• Shopify کے چیک آؤٹ کا انتظام Shopify کے ذریعے کیا جاتا ہے اور وہ قابل رسائی ہے، لیکن ہو سکتا ہے کہ آپ کی تھیم کا کارٹ دراز نہ ہو
• خودکار ایکسیسبیلٹی چیکرز ~30% مسائل کو پکڑتے ہیں - باقی کے لیے دستی جانچ کی ضرورت ہوتی ہے
• ایکسیسبیلٹی اوورلیز (جیسے accessiBe) WCAG کی تعمیل حاصل نہیں کرتے اور قانونی خطرہ میں اضافہ کرتے ہیں۔

ای کامرس کے لیے ADA اور WCAG کی ضروریات کو سمجھنا

ADA میں ویب سائٹس کے لیے مخصوص تکنیکی معیارات شامل نہیں ہیں۔ عدالتوں نے مستقل طور پر ویب مواد تک رسائی کے رہنما خطوط (WCAG) کو ڈی فیکٹو معیار کے طور پر لاگو کیا ہے، جس میں لیول 2.1 AA زیادہ تر تصفیوں اور فیصلوں میں قابل قبول تعمیل کا ہدف ہے۔

WCAG 2.1 چار اصولوں (POUR) کے ارد گرد ترتیب دیا گیا ہے:

1. قابل ادراک: معلومات اور UI اجزاء کو ان طریقوں سے پیش کرنے کے قابل ہونا چاہیے جس سے صارفین سمجھ سکتے ہیں (بصری مواد کے متبادل، آڈیو کے لیے سرخیاں، کافی برعکس)
2. آپریبل: UI اجزاء اور نیویگیشن قابل عمل ہونا ضروری ہے (کی بورڈ قابل رسائی، کاموں کو مکمل کرنے کے لیے کافی وقت، کوئی ضبط پیدا کرنے والا مواد نہیں)
3. قابل فہم: معلومات اور UI آپریشن قابل فہم ہونا چاہیے (پڑھنے کے قابل زبان، قابل پیشن گوئی برتاؤ، ان پٹ مدد)
4. مضبوط: مواد اتنا مضبوط ہونا چاہیے کہ معاون ٹیکنالوجیز سے اس کی تشریح کی جا سکے۔

ای کامرس سائٹس پر عام طور پر قانونی رسائی کی خلاف ورزیاں:

قابل رسائی آڈٹ: ٹولز اور عمل

خودکار ٹیسٹنگ ٹولز:

خودکار ٹولز ساختی مسائل تلاش کرتے ہیں: الٹ ٹیکسٹ غائب، فارم لیبل غائب، کنٹراسٹ کی ناکامیاں۔ وہ تلاش نہیں کر سکتے ہیں: بامعنی Alt متن کا معیار، منطقی کی بورڈ فوکس آرڈر، اسکرین ریڈر کا تجربہ، علمی پیچیدگی۔

دستی جانچ کا عمل:

مرحلہ 1 — صرف کی بورڈ نیویگیشن ٹیسٹ: اپنے ماؤس کو منقطع کریں۔ صرف Tab (آگے کی طرف)، Shift+Tab (پیچھے کی طرف)، درج کریں (ایکٹیویٹ کریں)، اسپیس (منتخب/اسکرول) اور تیر والے بٹنوں (اجزاء کے اندر) کا استعمال کرتے ہوئے اپنے اسٹور کو نیویگیٹ کریں۔ ان کاموں کو مکمل کریں:

• پروڈکٹ کے زمرے میں براؤز کریں۔
• ایک پروڈکٹ منتخب کریں۔
• سائز/رنگ کی مختلف قسم کا انتخاب کریں۔
• ٹوکری میں شامل کریں۔
• ٹوکری پر جائیں۔
• چیک آؤٹ پر آگے بڑھیں۔

ہر کام صرف کی بورڈ سے مکمل ہونا چاہیے۔

مرحلہ 2 - اسکرین ریڈر ٹیسٹ: NVDA (مفت، ونڈوز) یا وائس اوور (بلٹ ان، Mac/iOS) استعمال کریں۔ اسکرین ریڈر فعال کے ساتھ اپنے ہوم پیج، پروڈکٹ کا صفحہ، اور اپنی کارٹ کو نیویگیٹ کریں۔ کے لیے سنیں:

• کیا ہر تصویر کو معنی خیز بیان کیا گیا ہے؟
• کیا تمام بٹنوں پر ان کی کارروائی کا لیبل لگا ہوا ہے؟
• کیا پڑھنے کا حکم منطقی ہے؟
• کیا غلطی کے پیغامات کا اعلان کیا جاتا ہے؟

مرحلہ 3 - زوم ٹیسٹ: براؤزر زوم کو 200% اور 400% تک بڑھا دیں۔ صفحہ کو دوبارہ بہنا چاہیے اور قابل استعمال رہنا چاہیے — 200% پر کوئی افقی اسکرولنگ نہیں، کوئی مواد اوورلیپ نہیں، کوئی چھوٹا متن نہیں۔

مرحلہ 4 - رنگ کے برعکس ٹیسٹ: یہ توثیق کرنے کے لیے ax DevTools یا WebAIM کنٹراسٹ چیکر کا استعمال کریں تمام ٹیکسٹ کنٹراسٹ کی ضروریات کو پورا کرتا ہے: 4.5:1 نارمل ٹیکسٹ کے لیے، 3:1 بڑے ٹیکسٹ کے لیے (18pt+ یا 14pt+ بولڈ)، 3:1 UI اجزاء کے لیے (بٹن، آئیکنز، فارم بارڈرز)۔

تصویر تک رسائی: مصنوعات کی تصاویر کے لیے Alt متن

Shopify اسٹورز پر آلٹ ٹیکسٹ واحد سب سے عام رسائی کی خلاف ورزی ہے۔ ہر تصویر میں ALT متن ہونا ضروری ہے جو وہی معلومات فراہم کرتا ہے جو دیکھنے والے صارف کو تصویر دیکھنے سے حاصل ہوتی ہے۔

** Shopify پروڈکٹ امیجز کے لیے Alt ٹیکسٹ گائیڈ لائنز**:

** وضاحت کریں کہ خریداری کے فیصلوں کے لیے کیا اہمیت ہے**:

• پروڈکٹ کا نام اور اہم امتیازی خصوصیات
• رنگ، مواد، اور قابل ذکر بصری خصوصیات
• اگر استعمال میں دکھایا گیا ہو تو سیاق و سباق (مثال کے طور پر، "لکڑی کی میز پر بلیو سیرامک مگ")
• تصویر میں نظر آنے والا کوئی بھی متن

کیا نہیں کرنا چاہیے:

• "image001.jpg" — فائل کے نام متبادل متن نہیں ہیں۔
• "مصنوعات کی تصویر" - عام وضاحتیں کوئی معلومات نہیں دیتی ہیں۔
• کلیدی الفاظ بھرنا - "بلیو مگ بلیو سیرامک کافی مگ بہترین بلیو مگ" - یہ نقصان دہ ہے
• ہر معمولی تفصیل کو بیان کرنا - جامع اور متعلقہ ہو۔

** شاپائف میں آلٹ ٹیکسٹ کا نفاذ**:

Shopify ایڈمن کے ذریعے پروڈکٹ کی تصاویر میں Alt متن شامل کریں:

1. منتظم > مصنوعات > [پروڈکٹ] > تصویر پر کلک کریں۔
2. "Image Alt text" فیلڈ میں Alt text درج کریں۔
3. محفوظ کریں۔

بلک Alt ٹیکسٹ اپ ڈیٹس کے لیے، Shopify بلک ایڈیٹر استعمال کریں:

1. منتظم > مصنوعات > تمام مصنوعات منتخب کریں > مصنوعات میں ترمیم کریں۔ 2۔ "پروڈکٹ امیج Alt ٹیکسٹ" کالم شامل کریں۔
2. ترمیم کریں اور محفوظ کریں۔

آرائشی تصاویر:

خالص آرائشی تصاویر (پس منظر کے نمونے، آرائشی تقسیم کرنے والے) میں خالی Alt متن (alt="") ہونا چاہیے۔ یہ اسکرین ریڈرز کو بغیر تفصیل کے "تصویر" کا اعلان کرنے کے بجائے تصویر کو مکمل طور پر چھوڑنے کے لیے کہتا ہے۔

کی بورڈ نیویگیشن: اپنے اسٹور کو مکمل طور پر چلانے کے قابل بنانا

کی بورڈ کی رسائی کے لیے ضروری ہے کہ ہر متعامل عنصر — بٹن، لنکس، فارم فیلڈز، ڈراپ ڈاؤن مینو، موڈلز — تک رسائی حاصل کی جا سکتی ہے، چالو کیا جا سکتا ہے اور صرف کی بورڈ کا استعمال کرتے ہوئے نیویگیٹ کیا جا سکتا ہے۔

** شاپائف تھیمز میں فوکس مینجمنٹ**:

زیادہ تر 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 تھیمز میں ہوور ٹرگرڈ ڈراپ ڈاؤن ہوتے ہیں جو کی بورڈ صارفین کے لیے ناقابل رسائی ہیں۔ درست کریں: ماؤس ہوور کے علاوہ Enter/Space/arrow keys کے لیے keydown ایونٹس پر ڈراپ ڈاؤنز کھلنے کو یقینی بنائیں۔

موڈل اور دراز کی بورڈ مینجمنٹ:

جب موڈل یا کارٹ دراز کھلتا ہے، تو کی بورڈ فوکس موڈل کی طرف جانا چاہیے۔ جب یہ بند ہوجاتا ہے، تو توجہ اس عنصر پر واپس آنی چاہیے جس نے اسے متحرک کیا۔ موڈل کے اندر تمام فوکس ایبل عناصر قابل رسائی ہونے چاہئیں۔ توجہ موڈل سے نہیں بچنا چاہیے۔

// 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 (Accessible Rich Internet Applications) کے اوصاف معنوی خلا کو پُر کرتے ہیں جہاں صرف HTML ناکافی ہے۔ تاہم، ARIA کا پہلا اصول ہے: "اگر HTML اسے کر سکتا ہے تو ARIA کا استعمال نہ کریں۔"

** Shopify اسٹورز کے لیے عام ARIA پیٹرن**:

<!-- 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، مناسب لیبلز، کی بورڈ نیویگیشن، فوکس مینجمنٹ، اور کلر کنٹراسٹ۔ یہ اصلاحات تمام صارفین کو فائدہ پہنچاتی ہیں، SEO کو بہتر بناتی ہیں (اسکرین ریڈرز اور سرچ کرالر کی ایک جیسی ضروریات ہیں) اور حقیقی قانونی تحفظ فراہم کرتے ہیں۔

اکثر پوچھے گئے سوالات

.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 کلر کنٹراسٹ کا احاطہ کرتا ہے - فرنٹ اینڈ ڈیولپمنٹ کی مہارت اور ایکسیسبیلٹی ٹیسٹنگ طریقہ کار دونوں کی ضرورت ہے۔

ECOSIRE کی Shopify سروسز میں آپ کے قابل رسائی کسٹمر بیس کو بڑھاتے ہوئے آپ کے اسٹور کو ADA قانونی چارہ جوئی سے بچانے کے لیے ایکسیسبیلٹی آڈٹ، WCAG 2.1 AA remediation، اور جاری ایکسیسبیلٹی مانیٹرنگ شامل ہے۔

اپنے Shopify اسٹور کے لیے ایک جامع WCAG 2.1 AA آڈٹ شیڈول کرنے کے لیے ہماری ایکسیسبیلٹی ٹیم سے رابطہ کریں۔