چک‌لیست دسترس‌پذیری WCAG 2.2 AA برای فروشگاه اینترنتی

چک‌لیست WCAG 2.2 AA برای فروشگاه‌های Shopify و WooCommerce به تفکیک نوع صفحه: متن جایگزین، کنتراست، برچسب‌ها، صفحه‌کلید، فوکوس، اندازه هدف و معیارهای جدید 2.2.

تیم تحریریه FixReports11 دقیقه مطالعه

چک‌لیست WCAG 2.2 AA برای یک فروشگاه اینترنتی با خطاهایی شروع می‌شود که در بیشتر تمپلیت‌های فروشگاهی دیده می‌شوند: نبود متن جایگزین (alt)، متن با کنتراست پایین، لینک‌ها و دکمه‌های بدون نام دسترس‌پذیر، فیلدهای فرم بدون برچسب، تله‌های صفحه‌کلید و فوکوس نامرئی. سپس WCAG 2.2 بررسی‌هایی در سطح AA اضافه می‌کند که فروشگاه‌ها را به‌شدت تحت تأثیر قرار می‌دهند: عناصر فوکوس‌شده‌ای که زیر نوارهای چسبان (sticky) پنهان می‌شوند (2.4.11)، اهداف لمسی کوچک‌تر از 24 × 24 پیکسل CSS (2.5.8) و فرایندهای ورود به حساب که کاربر را مجبور می‌کنند چیزی را به خاطر بسپارد یا دوباره تایپ کند (3.3.8). هر نوع صفحه (صفحه اصلی، کالکشن، محصول، سبد خرید) را با صفحه‌کلید و یک ابزار بررسی خودکار آزمایش کنید، سپس تمپلیت‌های قالب را اصلاح کنید تا همه صفحات این اصلاح را به ارث ببرند.

نکات کلیدی

  • WCAG 2.2 در 5 اکتبر 2023 به توصیه‌نامه رسمی W3C (W3C Recommendation) تبدیل شد. ویرایش فعلی تاریخ 12 دسامبر 2024 را دارد و به‌عنوان ISO/IEC 40500:2025 (در زبانه جدید باز می‌شود) تصویب شده است.
  • در WebAIM Million 2026 (در زبانه جدید باز می‌شود) (داده‌های فوریه 2026)، 95.9% از صفحات اصلی یک میلیون وب‌سایت برتر خطاهای قابل تشخیص WCAG 2 داشتند.
  • شش خطای رایج‌تر عبارت بودند از متن با کنتراست پایین (83.9% صفحات)، نبود متن جایگزین (53.1%)، نبود برچسب فرم (51%)، لینک‌های خالی (46.3%)، دکمه‌های خالی (30.6%) و مشخص نبودن زبان صفحه (13.5%).
  • صفحات اصلی Shopify در این نمونه که 42,516 صفحه بودند، به‌طور میانگین 75.1 خطای شناسایی‌شده داشتند، در برابر 56.1 برای کل صفحات.
  • WCAG 2.2 چهار معیار سطح AA (2.4.11، 2.5.7، 2.5.8، 3.3.8) و دو معیار سطح A (3.2.6، 3.3.7) اضافه می‌کند و 4.1.1 Parsing را حذف می‌کند.

در WCAG 2.2 چه چیزهایی برای فروشگاه‌های اینترنتی تغییر کرد؟

WCAG 2.2 نه معیار موفقیت جدید اضافه کرد که شش مورد از آن‌ها در سطح A یا AA هستند و معیار 4.1.1 Parsing را به‌عنوان منسوخ کنار گذاشت (W3C WAI (در زبانه جدید باز می‌شود)).

معیار جدیدسطحمعنای آن در یک فروشگاه
2.4.11 Focus Not Obscured (Minimum)AAلینک یا دکمه فوکوس‌شده نباید به‌طور کامل زیر هدر چسبان، نوار چسبان «افزودن به سبد خرید»، بنر کوکی یا ویجت گفتگو پنهان شود
2.5.7 Dragging MovementsAAهر چیزی که به کشیدن (drag) نیاز دارد، مانند اسلایدر بازه قیمت، به جایگزینی نیاز دارد که با یک لمس ساده کار کند
2.5.8 Target Size (Minimum)AAاهداف کلیک و لمس دست‌کم 24 × 24 پیکسل CSS هستند، یا طوری فاصله دارند که دایره‌ای 24 پیکسلی دور هر کدام با همسایه‌هایش تماس نداشته باشد
3.2.6 Consistent HelpAلینک‌های راهنما، اطلاعات تماس یا گفتگو در همه صفحات با همان ترتیب نسبی ظاهر می‌شوند
3.3.7 Redundant EntryAدر یک فرایند، یک اطلاعات را دو بار نخواهید؛ آن را خودکار پر کنید یا اجازه دهید کاربر آن را انتخاب کند
3.3.8 Accessible Authentication (Minimum)AAورود به حساب نباید به حفظ کردن یا رونویسی وابسته باشد، مگر اینکه جایگزین یا ابزار کمکی مانند امکان چسباندن (paste) و مدیرهای رمز عبور وجود داشته باشد

سه معیار دیگر (2.4.12، 2.4.13 و 3.3.9) در سطح AAA هستند. از آنجا که 2.2 همه معیارهای 2.1 به جز 4.1.1 را حفظ کرده است، رعایت 2.2 AA، سطح 2.1 AA را هم پوشش می‌دهد.

کدام معیارهای WCAG بیشتر از همه در تمپلیت‌های فروشگاهی رعایت نمی‌شوند؟

هر سال همان چند مورد تکرار می‌شوند: کنتراست، متن جایگزین، برچسب فرم‌ها و نام لینک‌ها و دکمه‌ها، به‌علاوه مشکلات صفحه‌کلید و فوکوس که ابزارهای خودکار فقط بخشی از آن‌ها را تشخیص می‌دهند.

معیارچه چیزی در فروشگاه‌ها رد می‌شودراه اصلاح
1.1.1 Non-text Content (A)تصاویر محصول بدون متن جایگزین یا با نام فایل به‌عنوان متن جایگزین؛ تصاویر لینک‌دار بدون متنمحصول نمایش‌داده‌شده را توصیف کنید (رنگ، سبک، زاویه). alt="" را فقط برای تصاویر تزئینی به کار ببرید. قالب‌های Shopify باید image.alt را در خروجی قرار دهند
1.4.3 Contrast (Minimum) (AA)متن بدنه خاکستری روشن، متن placeholder، برچسب‌های حراج، متن روی تصاویر هیرو4.5:1 برای متن معمولی، 3:1 برای متن بزرگ (حدود 24 px، یا 18.5 px پررنگ) (W3C (در زبانه جدید باز می‌شود))
2.4.4 Link Purpose (A)، 4.1.2 Name, Role, Value (A)لینک‌های سبد خرید، جستجو و شبکه‌های اجتماعی که فقط آیکون دارند؛ فلش‌های اسلایدر؛ دکمه‌های بستن «X» بدون نامبه هر کنترل متن قابل مشاهده یا aria-label بدهید، مثلاً «سبد خرید، 2 کالا»
1.3.1 Info and Relationships (A)، 3.3.2 Labels or Instructions (A)فیلدهای خبرنامه و جستجو که فقط متن placeholder دارند؛ فیلدهای تعداد بدون برچسباز <label for> منطبق با id فیلد استفاده کنید؛ نمونه‌رنگ‌های رادیویی را در یک fieldset با legend گروه‌بندی کنید
2.1.1 Keyboard (A)، 2.1.2 No Keyboard Trap (A)منوهایی که فقط با hover کار می‌کنند، نمونه‌رنگ‌هایی که با div ساخته شده‌اند، پاپ‌آپ‌هایی که با صفحه‌کلید بسته نمی‌شونداز عناصر واقعی button و a استفاده کنید؛ کلید Escape لایه‌های رویی را می‌بندد و فوکوس را برمی‌گرداند
2.4.7 Focus Visible (AA)outline: none در CSS قالبیک استایل :focus-visible اضافه کنید که در برابر پس‌زمینه به‌وضوح دیده شود

WebAIM همچنین دریافت که از هر چهار تصویر لینک‌دار، یکی متن جایگزین نداشت و 45% از تصاویر فاقد متن جایگزین، لینک بودند (WebAIM (در زبانه جدید باز می‌شود)). در شبکه محصولات یک کالکشن، این معمولاً همان لینک تصویر محصول است.

در صفحه اصلی چه چیزهایی را بررسی کنید؟

هدر، بخش هیرو و هر چیزی را که به‌صورت پاپ‌آپ ظاهر می‌شود بررسی کنید، چون هر بازدیدکننده‌ای اول با آن‌ها روبه‌رو می‌شود.

  • لینک پرش (skip link). لینکی مانند «پرش به محتوا» به‌عنوان نخستین عنصر قابل فوکوس (2.4.1 Bypass Blocks، A).
  • آیکون‌های هدر. آیکون‌های جستجو، حساب کاربری و سبد خرید نام دسترس‌پذیر دارند و نام سبد خرید شامل تعداد کالاهاست.
  • منو. با Enter یا Space باز می‌شود، زیرمنوها با Tab در دسترس‌اند، با Escape بسته می‌شود و به hover وابسته نیست (2.1.1). طبق الزامات Theme Store (در زبانه جدید باز می‌شود) در Shopify، همه بخش‌های صفحه، از جمله منوهای کشویی، باید با صفحه‌کلید قابل دسترسی باشند.
  • اسلایدر هیرو. اگر اسلایدها بیش از پنج ثانیه به‌طور خودکار حرکت می‌کنند، کنترلی برای توقف فراهم کنید (2.2.2 Pause, Stop, Hide، A).
  • نوار اطلاع‌رسانی و متن روی تصاویر. کنتراست را اندازه بگیرید؛ رنگ‌های برند اغلب به 4.5:1 نمی‌رسند.
  • پاپ‌آپ‌ها و بنرهای کوکی. فوکوس را به داخل پاپ‌آپ منتقل کنید، برای فیلد ایمیل برچسب بگذارید، امکان بستن با Escape را فراهم کنید و مطمئن شوید یک بنر چسبان هرگز عنصر فوکوس‌شده را به‌طور کامل نمی‌پوشاند (2.4.11). W3C ویژگی CSS scroll-padding را یکی از راه‌های دور نگه داشتن عناصر فوکوس‌شده از نوارهای چسبان می‌داند (W3C (در زبانه جدید باز می‌شود)).
  • زبان صفحه. عنصر html ویژگی lang درستی دارد (3.1.1 Language of Page، A).

در صفحات کالکشن چه چیزهایی را بررسی کنید؟

صفحات کالکشن معمولاً در کارت‌های محصول، فیلترها و نمونه‌رنگ‌ها مشکل دارند.

  • کارت‌های محصول. لینک تصویر متن جایگزین دارد، یا تصویر از فناوری‌های کمکی پنهان است و لینک عنوان، نام محصول را منتقل می‌کند.
  • فیلترها. هر چک‌باکس برچسب دارد و هر گروه یک سرتیتر یا legend دارد. پنل فیلتر با صفحه‌کلید باز می‌شود، کار می‌کند و بسته می‌شود. تعداد نتایج به‌روزشده را به‌صورت پیام وضعیت اعلام کنید (4.1.3 Status Messages، AA).
  • اسلایدرهای قیمت. فیلدهای عددی برای حداقل و حداکثر قیمت اضافه کنید تا فیلتر بدون کشیدن (2.5.7) و بدون ماوس (2.1.1) کار کند.
  • نمونه‌رنگ‌ها. هر نمونه‌رنگ نام متنی دارد و «ناموجود» فقط با رنگ نشان داده نمی‌شود (1.4.1 Use of Color، A). نمونه‌رنگ‌ها اندازه 24 × 24 پیکسل CSS یا قاعده فاصله‌گذاری را رعایت می‌کنند (2.5.8).
  • مرتب‌سازی و صفحه‌بندی. منوی کشویی مرتب‌سازی برچسب دارد؛ لینک‌های صفحه‌ها و دکمه‌های «بارگذاری بیشتر» حداقل اندازه هدف را رعایت می‌کنند.

در صفحات محصول چه چیزهایی را بررسی کنید؟

تصمیم خرید در صفحه محصول گرفته می‌شود، بنابراین هر کنترلی را که بین عکس‌ها و دکمه «افزودن به سبد خرید» قرار دارد آزمایش کنید.

  • گالری. هر تصویر متن جایگزین دارد، تصاویر بندانگشتی دکمه‌هایی با نام‌هایی مانند «نمایش تصویر 2» هستند و فلش‌ها بدون کشیدن کار می‌کنند (2.5.7).
  • انتخابگرهای واریانت. گزینه‌های سایز و رنگ در یک گروه برچسب‌دار قرار دارند (1.3.1)، گزینه انتخاب‌شده برای صفحه‌خوان‌ها اعلام می‌شود (4.1.2) و سایزهای ناموجود به‌صورت متنی مشخص شده‌اند.
  • تعداد. فیلد تعداد برچسب دارد و دکمه‌های منفی و مثبت نام دارند و 2.5.8 را رعایت می‌کنند. Theme Store در Shopify اکنون اهداف لمسی دست‌کم 24 × 24 پیکسل CSS را الزامی می‌داند و بهترین شیوه‌های دسترس‌پذیری (در زبانه جدید باز می‌شود) آن، اندازه 44 × 44 را برای کنترل‌های اصلی توصیه می‌کند.
  • افزودن به سبد خرید. پیام‌های موفقیت و خطا اعلام می‌شوند (4.1.3). شکایت کمیسیون تجارت فدرال آمریکا (FTC) علیه یک ارائه‌دهنده اورلی (overlay) به سایتی اشاره کرد که در آن صفحه‌خوان افزوده شدن کالا به سبد خرید را اعلام نمی‌کرد و یک تصویر امتیاز 5 ستاره به‌صورت دکمه «previous» خوانده می‌شد (شکایت FTC (در زبانه جدید باز می‌شود)).
  • امتیازها، زبانه‌ها و آکاردئون‌ها. امتیازها متنی مانند «4.5 از 5 ستاره» دارند. آکاردئون‌ها باز یا بسته بودن خود را اعلام می‌کنند.
  • نوار چسبان افزودن به سبد خرید. وقتی کاربر صفحه‌کلید با Tab در صفحه پایین می‌رود، این نوار نباید عنصر فوکوس‌شده را به‌طور کامل بپوشاند (2.4.11).
  • ویدیو. ویدیوهای محصول که گفتار دارند، زیرنویس دارند (1.2.2 Captions (Prerecorded)، A).

در سبد خرید و هنگام ورود به حساب چه چیزهایی را بررسی کنید؟

سبد خرید آخرین صفحه‌ای است که بیشتر قالب‌ها به‌طور کامل کنترل می‌کنند، بنابراین آن را تا دکمه تسویه‌حساب آزمایش کنید، سپس بررسی کنید که ورود به حساب کاربری به حافظه یا تایپ دوباره وابسته نباشد.

  • کشوی سبد خرید (cart drawer). فوکوس به داخل کشو منتقل می‌شود، تا وقتی باز است همان‌جا می‌ماند و وقتی با Escape بسته می‌شود به دکمه سبد خرید برمی‌گردد، همان‌طور که بهترین شیوه‌های Shopify توضیح می‌دهند.
  • اقلام سبد خرید. هر فیلد تعداد با نام محصول برچسب‌گذاری شده و هر دکمه حذف می‌گوید چه چیزی را حذف می‌کند، مانند «حذف پیراهن کتان، سایز M».
  • فیلدهای کد تخفیف و یادداشت. برچسب دارند و خطاها به‌صورت متنی توصیف می‌شوند (3.3.1 Error Identification، A).
  • دکمه تسویه‌حساب. با Tab در دسترس است، فوکوس آن به‌وضوح دیده می‌شود و پشت عناصر چسبان پنهان نمی‌شود.
  • ورود به حساب (3.3.8). حساب‌های مشتری در Shopify به‌طور پیش‌فرض از ورود بدون رمز عبور با کد یک‌بارمصرف (در زبانه جدید باز می‌شود) استفاده می‌کنند. به گفته W3C، کدها باید قابل چسباندن یا پر شدن خودکار باشند و مسدود کردن چسباندن یا مدیرهای رمز عبور این معیار را نقض می‌کند؛ CAPTCHAهای تشخیص شیء در سطح AA مجازند، اما CAPTCHAهای معمایی یا ریاضی به روش دیگری نیاز دارند (W3C (در زبانه جدید باز می‌شود)).

در اینجا تفاوت پلتفرم‌ها اهمیت دارد. در Shopify، checkout.liquid برای مراحل اطلاعات، ارسال و پرداخت دیگر پشتیبانی نمی‌شود (در زبانه جدید باز می‌شود)، بنابراین بیشتر نشانه‌گذاری صفحه تسویه‌حساب متعلق به Shopify است، نه قالب شما؛ اپ‌ها و سفارشی‌سازی‌هایی را که به تسویه‌حساب اضافه می‌کنید آزمایش کنید. در WooCommerce، تسویه‌حساب یک برگه در سایت WordPress شماست. WooCommerce می‌گوید فرانت‌اند هسته آن تا حد زیادی با WCAG 2.2 AA منطبق است (بیانیه آخرین بار در 1 آوریل 2025 به‌روزرسانی شده)، اما قالب و افزونه‌های شما همچنان می‌توانند این انطباق را از بین ببرند (WooCommerce (در زبانه جدید باز می‌شود)).

چگونه یک فروشگاه را با این چک‌لیست آزمایش کنید؟

در هر نوع صفحه، یک اسکن خودکار را با یک خرید فقط با صفحه‌کلید و یک بررسی کوتاه با صفحه‌خوان ترکیب کنید.

  1. اسکن خودکار. ابزارهایی مانند axe، WAVE یا Lighthouse مشکلات کنتراست، متن جایگزین، برچسب‌ها و لینک‌های خالی را پیدا می‌کنند. Theme Store در Shopify میانگین امتیاز دسترس‌پذیری Lighthouse دست‌کم 90 را در صفحات اصلی، کالکشن و محصول می‌خواهد. این یک حداقل است، نه انطباق: به گفته W3C، ابزارها به‌تنهایی نمی‌توانند دسترس‌پذیری را تعیین کنند (در زبانه جدید باز می‌شود).
  2. خرید فقط با صفحه‌کلید. بدون ماوس، از صفحه اصلی و از طریق منو یا جستجو به یک محصول برسید، فیلتر کنید، یک واریانت انتخاب کنید، آن را به سبد خرید اضافه کنید، سبد را باز کنید و به دکمه تسویه‌حساب برسید.
  3. بررسی نمونه‌ای با صفحه‌خوان. با VoiceOver یا NVDA به نام محصول، قیمت، وضعیت واریانت و پیام تأیید افزودن به سبد خرید گوش دهید.
  4. پس از تغییرات دوباره آزمایش کنید. به‌روزرسانی‌های قالب و اپ‌های جدید می‌توانند اصلاحات را خنثی کنند.

اسکن رایگان ما مرحله 1 را روی یک صفحه اصلی، کالکشن، محصول، سبد خرید و صفحه محتوایی در Chromium واقعی با axe-core پوشش می‌دهد. گزارش رفع مشکلات دسترس‌پذیری تا 25 صفحه را آزمایش می‌کند، مرحله 2 را به‌صورت آزمون خرید فقط با صفحه‌کلید تا دکمه تسویه‌حساب اضافه می‌کند، کد پیش و پس از اصلاح را ارائه می‌دهد و شامل چک‌لیستی برای مرحله 3 است که به فردی با صفحه‌خوان نیاز دارد. هیچ‌کدام انطباق با ADA یا WCAG را تضمین نمی‌کنند.

پرسش‌های متداول

آیا WCAG 2.2 برای فروشگاه‌های اینترنتی در آمریکا الزام قانونی دارد؟

وزارت دادگستری ایالات متحده هیچ مقرره‌ای بر اساس ADA (قانون آمریکایی‌های دارای معلولیت) ندارد که یک استاندارد وب برای کسب‌وکارهای خصوصی تعیین کند و راهنمای وب 2022 (در زبانه جدید باز می‌شود) این وزارتخانه، WCAG را به‌عنوان راهنمایی مفید معرفی می‌کند. اخطارنامه‌های دسترس‌پذیری (demand letters) معمولاً به WCAG 2.1 یا 2.2 AA استناد می‌کنند، پس درباره تعهدات مشخص خود با یک وکیل مشورت کنید.

آیا رعایت WCAG 2.2 AA به معنای رعایت WCAG 2.1 AA هم هست؟

بله، از نظر عملی. WCAG 2.2 همه معیارهای موفقیت WCAG 2.1 را حفظ می‌کند، به جز 4.1.1 Parsing که W3C آن را به‌عنوان منسوخ حذف کرده است.

حداقل اندازه هدف در WCAG 2.2 چقدر است؟

طبق معیار 2.5.8، اهداف باید دست‌کم 24 × 24 پیکسل CSS باشند، مگر اینکه دایره‌ای 24 پیکسلی که مرکز آن روی هر هدف کوچک‌تر قرار می‌گیرد، با اهداف دیگر یا دایره‌های آن‌ها تماس نداشته باشد. لینک‌های درون جمله‌ها، کنترل‌های مرورگر بدون استایل، نمایش‌های ضروری و اهدافی که یک کنترل معادل دارای این شرایط دارند، مستثنا هستند.

آیا امتیاز دسترس‌پذیری 100 در Lighthouse یعنی فروشگاه من منطبق است؟

خیر. ابزارهای خودکار فقط بخشی از خطاها را تشخیص می‌دهند و WebAIM یادآوری می‌کند که نبود خطاهای شناسایی‌شده به این معنا نیست که صفحه دسترس‌پذیر یا منطبق است.

آیا ورود با رمز عبور معیار 3.3.8 را نقض می‌کند؟

نه به‌خودی‌خود. فیلد رمز عبور زمانی این معیار را رعایت می‌کند که کاربران بتوانند در آن متن بچسبانند و از مدیر رمز عبور استفاده کنند؛ چیزی که باعث نقض معیار می‌شود، مسدود کردن چسباندن یا تکمیل خودکار است.

هر چند وقت یک بار باید فروشگاهم را دوباره آزمایش کنم؟

پس از هر به‌روزرسانی قالب، نصب اپ جدید یا تغییر عمده در تمپلیت‌ها دوباره آزمایش کنید و مسیر خرید را به‌طور منظم به‌صورت نمونه‌ای بررسی کنید، چون اپ‌ها می‌توانند بدون هشدار نشانه‌گذاری جدیدی به صفحه تزریق کنند.

منابع

همه راهنماها