نمونه گزارش رفع مشکلات دسترس‌پذیری. Harbor & Pine فروشگاهی خیالی است که خودمان با مشکلات رایج دسترس‌پذیری ساخته‌ایم و سپس با همان موتوری تست کرده‌ایم که وب‌سایت شما را اسکن می‌کند.
اسکن رایگان وبسایتنمونه گزارش رفع مشکلات دسترس‌پذیری
harborandpine.example
- پلتفرم:
- Shopify
- تاریخ تهیه:
- 24 سپتامبر 2026
- صفحات تست‌شده:
- 9
- موتور:
- axe-core 4.13.0
خلاصه
- 9 صفحه از harborandpine.example (4 صفحه از نقشه سایت شما) را در 24 سپتامبر 2026 با axe-core 4.13.0 در برابر WCAG 2.2 سطح A و AA تست کردیم، به‌علاوه یک تست خرید فقط با صفحه‌کلید.
- 8 نوع مشکل در تست‌های خودکار WCAG رد شد (131 مورد). 8 مورد با برچسب «فوری» مشخص شده است.
- پیمایش مسدود شدخریداری که فقط از صفحه‌کلید استفاده می‌کند در این مراحل متوقف می‌شود: انتخاب گزینه‌ها و تعداد.
- 4 مورد به بررسی انسانی نیاز دارد: تست‌های خودکار آن‌ها را علامت زدند اما نتوانستند درباره‌شان تصمیم بگیرند.
- از این موارد شروع کنید: فوکوس صفحه‌کلید در بنر کوکی به دام افتاده است; گزینه‌های محصول با صفحه‌کلید قابل انتخاب نیستند; دکمه‌ها باید متن قابل تشخیص داشته باشند.
تست‌های خودکار بخشی از مشکلات دسترس‌پذیری یک سایت را پیدا می‌کنند، نه همه آن‌ها را. این گزارش آنچه را تست‌های ما پیدا کرده‌اند و روش رفع آن را توصیف می‌کند. این گزارش مشاوره حقوقی نیست و انطباق با ADA، قانون دسترس‌پذیری اروپا یا هیچ قانونی را گواهی نمی‌کند.
نمای کلی
- P1 · فوریدر صفحات کلیدی مانع بازدیدکنندگان می‌شود
- 8
- P2 · مرحله بعدموانع جدی یا متوسط
- 0
- P3 · بهبودمشکلات جزئی و روش‌های توصیه‌شده
- 2
موارد بر اساس شدت
- بحرانی
- 73
- جدی
- 58
- متوسط
- 25
- جزئی
- 0
- خطاهای تأییدشدهانواع مشکلی که در یک تست خودکار رد شدند
- 10
- نیاز به بررسیعلامت خورده، اما تصمیم با یک انسان است
- 4
- بررسی‌های قبول‌شدهقواعد خودکار بدون خطا
- 32
- تست نشدهمراحل پیمایش و بررسی‌های دستی
- 7
9 صفحه را تست کردیم که 4 صفحه از آن‌ها از نقشه سایت شما انتخاب شده‌اند. تاریخ‌های هدف پیشنهادهایی بر اساس شدت مشکل هستند؛ تاریخ‌های نهایی را با توسعه‌دهنده‌تان هماهنگ کنید.
نمای کلی وب‌سایت
از روی شواهد عمومی در صفحات تست‌شده تشخیص داده شده است. یک برچسب ممکن است اشتباه باشد؛ فقط تعیین می‌کند کدام بررسی‌های اضافی اجرا شوند.
نوع وب‌سایت
- فروشگاه اینترنتیاطمینان بالا
- روی Shopify اجرا می‌شود که یک پلتفرم فروشگاهی است
- لینک به سبد خرید
- لینک‌های محصول یا فروشگاه
- صفحه فروداطمینان متوسط
- فقط به 6 صفحه داخلی لینک داده شده است
فناوری‌های تشخیص داده‌شده
- Shopifyاطمینان بالا
فایل‌ها یا اسکریپت‌های Shopify در صفحه
بررسی‌های این سایت
- بررسی‌های عمومی: دسترس‌پذیری، سئو، سرعت، امنیت و ایمیل
- بخش تجارت الکترونیک: صفحات مجموعه، محصول و سبد خرید، و پیمایش خرید با صفحه‌کلید تا دکمه تسویه حساب
- نکات Shopify: مراحل اصلاح در قالب و پنل مدیریت؛ هدرها و کوکی‌هایی که پلتفرم مدیریت می‌کند برای اطلاع نشان داده می‌شوند
پیمایش خرید با صفحه‌کلید
سعی کردیم فقط با صفحه‌کلید (Tab، Shift+Tab، Enter، Space، Escape) خرید کنیم، همان‌طور که افرادی که نمی‌توانند از ماوس استفاده کنند این کار را می‌کنند. یک کالا را در یک نشست موقت به سبد خرید اضافه می‌کنیم و در دکمه تسویه حساب متوقف می‌شویم: هرگز وارد مرحله تسویه حساب نمی‌شویم و اطلاعات شخصی یا پرداخت تایپ نمی‌کنیم. هدف: رسیدن از صفحه اصلی به دکمه تسویه حساب، فقط با صفحه‌کلید.
01رسیدن به منوی اصلی
قبولفوکوس پس از 21 بار فشردن Tab به «Shop» در منوی ناوبری رسید.
مورد انتظار: با فشردن Tab از بالای صفحه اصلی، فوکوس به لینک‌های منوی اصلی می‌رسد.
- نکته: یک بنر کوکی فوکوس صفحه‌کلید را نگه داشت تا اینکه روی «Accept all» کلید Enter را زدیم.
نحوه بازتولید
https://harborandpine.example/
- صفحه اصلی را باز کنید.
- روی نوار آدرس مرورگر کلیک کنید، سپس چند بار پشت سر هم Tab را فشار دهید (Shift+Tab به عقب برمی‌گردد).
ترتیب فوکوسی که مشاهده کردیم
«Shop»
02باز کردن یک محصول از یک مجموعه
قبولفوکوس پس از 9 بار فشردن Tab به «Trail Daypack 22L» رسید و Enter صفحه /products/trail-daypack را باز کرد.
مورد انتظار: با Tab، فوکوس به یک محصول در شبکه محصولات مجموعه می‌رسد و Enter صفحه آن را باز می‌کند.
نحوه بازتولید
https://harborandpine.example/collections/all
- /collections/all را باز کنید.
- Tab را فشار دهید تا یک محصول در شبکه محصولات برجسته شود، سپس Enter را فشار دهید.
ترتیب فوکوسی که مشاهده کردیم
«Harbor & Pine» → «Shop» → «New arrivals» → «Our story» → body > header.site > div.icons > button → «Account» → body > header.site > div.icons > a → «FeaturedPrice, low to highPrice, high to low» → «Trail Daypack 22L»
03انتخاب گزینه‌ها و تعداد
رد شده3 گزینه محصول نمی‌توانند فوکوس صفحه‌کلید بگیرند: «S»، «M»، «L». این گزینه‌ها به ماوس پاسخ می‌دهند، اما کاربر صفحه‌کلید نمی‌تواند آن‌ها را انتخاب کند.
مورد انتظار: همه گزینه‌های محصول (اندازه، رنگ، نوع) و فیلد تعداد با Tab در دسترس هستند.
2.1.1 Keyboard · اطمینان: بالا
انتخاب گزینه‌ها و تعداد: عنصر دارای خطا، با کادر مشخص شده نحوه بازتولید
https://harborandpine.example/products/trail-daypack
- /products/trail-daypack را باز کنید.
- از بالای صفحه Tab را فشار دهید و توجه کنید کدام کنترل‌ها پیش از دکمه افزودن به سبد خرید فوکوس می‌گیرند.
ترتیب فوکوسی که مشاهده کردیم
«Harbor & Pine» → «Shop» → «New arrivals» → «Our story» → … 5 مورد دیگر … → body > header.site > div.icons > a → div.page.product > div.gallery > div.thumbs > button → div.page.product > div.gallery > div.thumbs > button → div.page.product > div.gallery > div.thumbs > button → div.page.product > div > div.swatches > button → div.page.product > div > div.swatches > button → div.page.product > div > div.swatches > button → «1» → «Add to cart»
عنصر <div class="size-option" data-fr="opt-1">S</div>04افزودن به سبد خرید با صفحه‌کلید
نیاز به بررسیEnter روی دکمه افزودن به سبد خرید کار کرد (شمارنده سبد خرید در هدر تغییر کرد، پیامی مبنی بر «افزوده شدن به سبد خرید» ظاهر شد)، اما هیچ پیام وضعیت یا پنجره گفت‌وگوی دارای فوکوسی پیدا نکردیم، بنابراین ممکن است کاربران صفحه‌خوان متوجه نشوند که کالا اضافه شده است.
مورد انتظار: Enter روی دکمه افزودن به سبد خرید کالا را اضافه می‌کند و تأیید آن اعلام می‌شود: با یک پیام وضعیت، یک پنجره گفت‌وگو که فوکوس را می‌گیرد، یا صفحه سبد خرید.
4.1.3 Status Messages · اطمینان: متوسط
افزودن به سبد خرید با صفحه‌کلید: صفحه در این مرحله نحوه بازتولید
https://harborandpine.example/products/trail-daypack
- /products/trail-daypack را باز کنید.
- Tab را فشار دهید تا دکمه افزودن به سبد خرید فوکوس بگیرد، سپس Enter را فشار دهید.
- با یک صفحه‌خوان (VoiceOver: Cmd+F5) گوش دهید که آیا تأییدی اعلام می‌شود.
05تغییر سبد خرید و رسیدن به تسویه حساب
قبولفوکوس با 12 بار فشردن Tab به همه 4 کنترل سبد خرید و دکمه تسویه حساب («Check out») رسید. ما آن دکمه را فشار ندادیم.
مورد انتظار: فیلدهای تعداد، دکمه‌های حذف و دکمه تسویه حساب همگی با Tab در دسترس هستند.
نحوه بازتولید
https://harborandpine.example/cart
- یک محصول دلخواه را به سبد خرید اضافه کنید و صفحه سبد خرید را باز کنید.
- Tab را فشار دهید و بررسی کنید که فیلدهای تعداد، دکمه‌های حذف و دکمه تسویه حساب همگی فوکوس بگیرند.
ترتیب فوکوسی که مشاهده کردیم
«Harbor & Pine» → «Shop» → «New arrivals» → «Our story» → body > header.site > div.icons > button → «Account» → body > header.site > div.icons > a → «1» → tbody > tr > td > button.remove → «2» → tbody > tr > td > button.remove → «Check out»
06تسویه حساب
تست نشدهما در دکمه تسویه حساب متوقف می‌شویم: هرگز وارد تسویه حساب نمی‌شویم، سفارشی ثبت نمی‌کنیم و اطلاعات پرداخت تایپ نمی‌کنیم. در Shopify صفحات تسویه حساب را خود Shopify اجرا می‌کند، نه قالب شما. تسویه حساب را دستی بررسی کنید (بخش «بررسی‌های دستی» را ببینید).
نقشه ادعاهای نامه
هر ادعای نامه، تطبیق‌داده‌شده با شواهد اسکن. این یک مقایسه مبتنی بر واقعیت است، نه مشاوره حقوقی.
- بازتولید شد
“Images lack alternative text, so product photos are not described.”
تصاویر بدون متن جایگزین. 10 مورد در 3 صفحه از 5 صفحه تست‌شده.
image-alt
- بازتولید شد
“Text has insufficient color contrast against its background, including sale badges and prices.”
کنتراست رنگ پایین. 16 مورد در 5 صفحه از 5 صفحه تست‌شده.
color-contrast
- بازتولید شد
“The website cannot be navigated using a keyboard alone.”
دسترسی با صفحه‌کلید و فوکوس. فوکوس صفحه‌کلید در بنر کوکی گیر می‌کند.
- بازتولید شد
“Form fields do not have labels, including the newsletter sign-up and the quantity fields in the cart.”
فیلدهای فرم بدون برچسب. 4 مورد در 3 صفحه از 5 صفحه تست‌شده.
select-name, label
- بررسی دستی
“Product videos do not have captions.”
زیرنویس ویدیو و صدا. اسکن‌های خودکار نمی‌توانند درباره زیرنویس‌ها قضاوت کنند. همه ویدیوهای محصول یا برند را از نظر زیرنویس دقیق و متن پیاده‌شده (transcript) بررسی کنید.
- بررسی دستی
“Our client is legally blind and uses screen reader software.”
سایر مشکلات. این یک ادعای کلی است. مسیرهای کلیدی (جست‌وجو، صفحه محصول، افزودن به سبد خرید، تسویه حساب) را با یک صفحه‌خوان مانند VoiceOver یا NVDA تست کنید.
برنامه اصلاح
| اولویت | مشکل | وضعیت | WCAG | موارد | مسئول | تاریخ هدف |
|---|---|---|---|---|---|---|
| P1 | فوکوس صفحه‌کلید در بنر کوکی به دام افتاده است | تأییدشده | 2.1.2 | 1 | سازنده اپ | 2026-10-08 |
| P1 | گزینه‌های محصول با صفحه‌کلید قابل انتخاب نیستند | تأییدشده | 2.1.1 | 1 | توسعه‌دهنده قالب | 2026-10-08 |
| P1 | دکمه‌ها باید متن قابل تشخیص داشته باشند | تأییدشده | 4.1.2 | 41 | توسعه‌دهنده قالب | 2026-10-08 |
| P1 | تصاویر باید متن جایگزین داشته باشند | تأییدشده | 1.1.1 | 22 | ویرایشگر محتوا | 2026-10-08 |
| P1 | عناصر فرم باید برچسب داشته باشند | تأییدشده | 4.1.2 | 7 | توسعه‌دهنده قالب | 2026-10-08 |
| P1 | عنصر select باید نام دسترس‌پذیر داشته باشد | تأییدشده | 4.1.2 | 1 | توسعه‌دهنده قالب | 2026-10-08 |
| P1 | لینک‌ها باید متن قابل تشخیص داشته باشند | تأییدشده | 2.4.4, 4.1.2 | 36 | توسعه‌دهنده قالب | 2026-10-08 |
| P1 | عناصر باید حداقل آستانه‌های نسبت کنتراست رنگ را برآورده کنند | تأییدشده | 1.4.3 | 22 | مالک فروشگاه (تنظیمات پنل مدیریت) | 2026-10-08 |
| P3 | همه محتوای صفحه باید داخل نواحی صفحه (landmarks) قرار داشته باشد | تأییدشده | روش توصیه‌شده | 18 | توسعه‌دهنده قالب | 2026-11-23 |
| P3 | سطح سرفصل‌ها باید هر بار فقط یک سطح افزایش یابد | تأییدشده | روش توصیه‌شده | 7 | توسعه‌دهنده قالب | 2026-11-23 |
نحوه رفع هر مشکل
فوکوس صفحه‌کلید در بنر کوکی به دام افتاده است
میزان کار: متوسط · مسئول: سازنده اپ · 2.1.2 No Keyboard Trap
وقتی کاربر صفحه‌کلید Tab را فشار می‌دهد، فوکوس بین چند عنصر می‌چرخد و هرگز به بقیه صفحه نمی‌رسد.
اگر فوکوس به دام بیفتد، کاربرانی که فقط از صفحه‌کلید یا صفحه‌خوان استفاده می‌کنند اصلاً نمی‌توانند خرید کنند (WCAG 2.1.2 No Keyboard Trap).
شواهد
- روش شناسایی
- تست صفحه‌کلید (پیمایش صفحه اصلی با Tab)
- وضعیت · اطمینان
- خطای تأییدشده · بالا
- زمان شناسایی
- 24 سپتامبر 2026 (UTC)
- محل
- 1 مورد در 1 صفحه
مورد انتظار: فشردن Tab از همه عناصر تعاملی عبور می‌کند و به بقیه صفحه می‌رسد.
مشاهده‌شده: پس از 40 بار فشردن Tab، فوکوس مدام بین این عناصر می‌چرخید: Settings، Accept all.
نحوه بازتولید
- صفحه اصلی را باز کنید.
- روی نوار آدرس کلیک کنید، سپس چند بار پشت سر هم Tab را فشار دهید.
- فوکوس مدام به همان چند عنصر برمی‌گردد.
عناصر دارای خطا (6 مورد نمایش داده شده)
SettingsAccept allSettingsAccept allSettingsAccept allصفحات تحت تأثیر (1)
- https://harborandpine.example/
نحوه رفع
راهنمای کلی- در تنظیمات اپ بنر کوکی یا رضایت خود به دنبال گزینه‌ای برای دسترس‌پذیری یا تله فوکوس بگردید، یا از سازنده آن بخواهید مشکل را رفع کند.
- یک پنجره مودال فقط تا زمانی که باز است می‌تواند فوکوس را در خود نگه دارد، و باید با کلید Escape بسته شود و فوکوس را به جای قبلی برگرداند.
رفع مشکل با هوش مصنوعینمایش پرامپت
این متن را همراه با فایل قالب خود در ChatGPT، Claude، Cursor یا Copilot وارد کنید. پیش از انتشار، تغییر را بازبینی کنید.
من یک فروشگاه Shopify (قالب Online Store 2.0، تمپلیت‌های Liquid) را در آدرس harborandpine.example اداره می‌کنم. یک تست دسترس‌پذیری این مشکل را پیدا کرده است و می‌خواهم آن را در قالبم رفع کنم. مشکل: فوکوس صفحه‌کلید در بنر کوکی به دام افتاده است (WCAG 2.1.2). محل: 1 مورد در 1 صفحه، برای مثال /. یکی از عناصر دارای خطا، همان‌طور که مرورگر آن را رندر کرد: ```html Settings ``` چرا اهمیت دارد: اگر فوکوس به دام بیفتد، کاربرانی که فقط از صفحه‌کلید یا صفحه‌خوان استفاده می‌کنند اصلاً نمی‌توانند خرید کنند (WCAG 2.1.2 No Keyboard Trap). آنچه باید تغییر کند: - در تنظیمات اپ بنر کوکی یا رضایت خود به دنبال گزینه‌ای برای دسترس‌پذیری یا تله فوکوس بگردید، یا از سازنده آن بخواهید مشکل را رفع کند. - یک پنجره مودال فقط تا زمانی که باز است می‌تواند فوکوس را در خود نگه دارد، و باید با کلید Escape بسته شود و فوکوس را به جای قبلی برگرداند. قواعد پاسخ شما: - تغییر دقیق را به‌صورت قبل و بعد نشان دهید و نام فایل یا تنظیمی را که تغییر در آن اعمال می‌شود بگویید. اگر لازم است ابتدا فایل من را ببینید، از من بخواهید آن را اینجا قرار دهم. - طراحی ظاهری و همه رفتارهای فعلی را بدون تغییر نگه دارید. - نام محصول، قیمت یا متنی از خودتان نسازید؛ از جای‌نگهدارهایی استفاده کنید که خودم بتوانم پر کنم. - در پایان بگویید چطور می‌توانم خودم اصلاح را بررسی کنم. - روش تأیید آن با صفحه‌کلید و صفحه‌خوان را هم توضیح دهید.
اصلاح خود را بررسی کنید
- صفحه اصلی را بارگذاری کنید، چند بار پشت سر هم Tab را فشار دهید و مطمئن شوید فوکوس به منوی اصلی و محتوا می‌رسد.
با یک بررسی خودکار صفحه‌کلید شناسایی شده است؛ آن را دستی تأیید کنید.
گزینه‌های محصول با صفحه‌کلید قابل انتخاب نیستند
میزان کار: متوسط · مسئول: توسعه‌دهنده قالب · 2.1.1 Keyboard
گزینه‌های اندازه، رنگ یا گونه محصول به ماوس پاسخ می‌دهند اما فوکوس صفحه‌کلید نمی‌گیرند، بنابراین کاربران صفحه‌کلید نمی‌توانند گونه‌ای را انتخاب کنند.
خریدارانی که فقط از صفحه‌کلید استفاده می‌کنند، از جمله بسیاری از کاربران صفحه‌خوان، نمی‌توانند از این مرحله عبور کنند (WCAG 2.1.1).
شواهد
- روش شناسایی
- پیمایش با صفحه‌کلید
- وضعیت · اطمینان
- خطای تأییدشده · بالا
- زمان شناسایی
- 24 سپتامبر 2026 (UTC)
- محل
- 1 مورد در 1 صفحه
مورد انتظار: همه گزینه‌های محصول (اندازه، رنگ، نوع) و فیلد تعداد با Tab در دسترس هستند.
مشاهده‌شده: 3 گزینه محصول نمی‌توانند فوکوس صفحه‌کلید بگیرند: «S»، «M»، «L». این گزینه‌ها به ماوس پاسخ می‌دهند، اما کاربر صفحه‌کلید نمی‌تواند آن‌ها را انتخاب کند.
نحوه بازتولید
- /products/trail-daypack را باز کنید.
- از بالای صفحه Tab را فشار دهید و توجه کنید کدام کنترل‌ها پیش از دکمه افزودن به سبد خرید فوکوس می‌گیرند.
عناصر دارای خطا (1 مورد نمایش داده شده)
<div class="size-option" data-fr="opt-1">S</div>صفحات تحت تأثیر (1)
- https://harborandpine.example/products/trail-daypack
نحوه رفع
راهنمای کلی- انتخابگرهای گزینه را با دکمه‌های رادیویی بومی (یا یک <select>) و برچسب‌های قابل مشاهده بسازید؛ برچسب را به شکل نمونه رنگ (swatch) طراحی کنید.
- اگر عناصر سفارشی را نگه می‌دارید، هر گزینه به tabindex="0"، role="radio" همراه با aria-checked داخل یک role="radiogroup"، و مدیریت کلیدهای جهت‌نما و Space نیاز دارد. دکمه‌های رادیویی بومی همه این‌ها را بدون هزینه اضافه در اختیارتان می‌گذارند.
کد
نمونه‌های پیاده‌سازی برای توسعه‌دهنده‌تان. ما به کد منبع قالب شما دسترسی نداریم، بنابراین محل فایل‌ها راهنماست، نه مسیر دقیق.
<div class="size-option" data-fr="opt-1">S</div><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>هر گزینه یک دکمه رادیویی واقعی است که با Tab در دسترس است و با کلیدهای جهت‌نما تغییر می‌کند؛ برچسب، طراحی نمونه رنگ شما را حفظ می‌کند. از نام‌ها و مقادیر گزینه‌های خودتان استفاده کنید.
رفع مشکل با هوش مصنوعینمایش پرامپت
این متن را همراه با فایل قالب خود در ChatGPT، Claude، Cursor یا Copilot وارد کنید. پیش از انتشار، تغییر را بازبینی کنید.
من یک فروشگاه Shopify (قالب Online Store 2.0، تمپلیت‌های Liquid) را در آدرس harborandpine.example اداره می‌کنم. یک تست دسترس‌پذیری این مشکل را پیدا کرده است و می‌خواهم آن را در قالبم رفع کنم. مشکل: گزینه‌های محصول با صفحه‌کلید قابل انتخاب نیستند (WCAG 2.1.1). محل: 1 مورد در 1 صفحه، برای مثال /products/trail-daypack. یکی از عناصر دارای خطا، همان‌طور که مرورگر آن را رندر کرد: ```html <div class="size-option" data-fr="opt-1">S</div> ``` چرا اهمیت دارد: خریدارانی که فقط از صفحه‌کلید استفاده می‌کنند، از جمله بسیاری از کاربران صفحه‌خوان، نمی‌توانند از این مرحله عبور کنند (WCAG 2.1.1). آنچه باید تغییر کند: - انتخابگرهای گزینه را با دکمه‌های رادیویی بومی (یا یک <select>) و برچسب‌های قابل مشاهده بسازید؛ برچسب را به شکل نمونه رنگ (swatch) طراحی کنید. - اگر عناصر سفارشی را نگه می‌دارید، هر گزینه به 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> ``` قواعد پاسخ شما: - تغییر دقیق را به‌صورت قبل و بعد نشان دهید و نام فایل یا تنظیمی را که تغییر در آن اعمال می‌شود بگویید. اگر لازم است ابتدا فایل من را ببینید، از من بخواهید آن را اینجا قرار دهم. - طراحی ظاهری و همه رفتارهای فعلی را بدون تغییر نگه دارید. - نام محصول، قیمت یا متنی از خودتان نسازید؛ از جای‌نگهدارهایی استفاده کنید که خودم بتوانم پر کنم. - در پایان بگویید چطور می‌توانم خودم اصلاح را بررسی کنم. - روش تأیید آن با صفحه‌کلید و صفحه‌خوان را هم توضیح دهید.
اصلاح خود را بررسی کنید
- مراحل بازتولید را فقط با صفحه‌کلید تکرار کنید.
- از همین گزارش درخواست تست مجدد کنید: پیمایش دوباره اجرا می‌شود.
دکمه‌ها باید متن قابل تشخیص داشته باشند
میزان کار: سریع · مسئول: توسعه‌دهنده قالب · 4.1.2 Name, Role, Value
برخی دکمه‌ها نام دسترس‌پذیر ندارند، بنابراین کاربران صفحه‌خوان فقط کلمه «button» (دکمه) را می‌شنوند.
WCAG 4.1.2 الزامی می‌کند که هر کنترل یک نام داشته باشد. دکمه‌های بدون نام اغلب شامل دکمه‌های کم و زیاد کردن تعداد، دکمه‌های بستن و فلش‌های اسلایدر هستند.
شواهد
- روش شناسایی
- قاعده خودکار axe-core
- وضعیت · اطمینان
- خطای تأییدشده · بالا
- زمان شناسایی
- 24 سپتامبر 2026 (UTC)
- محل
- 41 مورد در 9 صفحه
مورد انتظار: دکمه‌ها باید متن قابل تشخیص داشته باشند
مشاهده‌شده: عنصر هیچ متن داخلی ندارد که برای صفحه‌خوان‌ها قابل مشاهده باشد. ویژگی aria-label وجود ندارد یا خالی است. ویژگی aria-labelledby وجود ندارد، یا به عناصری ارجاع می‌دهد که وجود ندارند یا خالی‌اند. عنصر ویژگی title ندارد. عنصر <label> ضمنی (دربرگیرنده) ندارد. عنصر <label> صریح ندارد. معنای پیش‌فرض عنصر با role="none" یا role="presentation" بازنویسی نشده است.
نحوه بازتولید
- https://harborandpine.example/ را در Chrome یا Edge باز کنید.
- DevTools را باز کنید (F12)، به Elements بروید، کلیدهای Ctrl+F (در Mac کلیدهای Cmd+F) را بزنید و این را جست‌وجو کنید: .icons > button[type="button"]
- در پنل Accessibility ابزار DevTools، مقدار Name محاسبه‌شده برای عنصر خالی است.
- یا افزونه رایگان axe DevTools را روی صفحه اجرا کنید: این مورد را با عنوان «button-name» گزارش می‌کند.
عناصر دارای خطا (4 مورد نمایش داده شده)
<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><button type="button"><img src="/img/daypack.svg"></button><button type="button"><img src="/img/jacket.svg"></button><button type="button"><img src="/img/bottle.svg"></button>صفحات تحت تأثیر (9)
- https://harborandpine.example/
- https://harborandpine.example/collections/all
- https://harborandpine.example/products/trail-daypack
- https://harborandpine.example/cart
- https://harborandpine.example/pages/about
- https://harborandpine.example/products/pine-wool-beanie
- https://harborandpine.example/products/enamel-camp-mug
- https://harborandpine.example/products/harbor-lantern
- https://harborandpine.example/products/insulated-bottle
نحوه رفع
کد ساخته‌شده از روی کد HTML صفحه شما- دکمه‌ها را در نمونه‌های زیر پیدا کنید.
- متن قابل مشاهده، متن پنهان از دید یا یک aria-label اضافه کنید که بگوید دکمه چه کاری انجام می‌دهد (برای مثال aria-label="Close" یا aria-label="Increase quantity").
کد
نمونه‌های پیاده‌سازی برای توسعه‌دهنده‌تان. ما به کد منبع قالب شما دسترسی نداریم، بنابراین محل فایل‌ها راهنماست، نه مسیر دقیق.
<button type="button">…</button><button type="button" aria-label="[What this button does]">…</button>متن داخل کروشه را با کاری که دکمه انجام می‌دهد جایگزین کنید. متن قابل مشاهده یا متن پنهان از دید داخل دکمه هم کار می‌کند.
<button type="button"><img src="/img/daypack.svg"></button><button type="button" aria-label="[Describe the image, e.g. Back view]"><img src="/img/daypack.svg"></button>متن داخل کروشه را با کاری که دکمه انجام می‌دهد جایگزین کنید. متن قابل مشاهده یا متن پنهان از دید داخل دکمه هم کار می‌کند.
<button type="button"><img src="/img/jacket.svg"></button><button type="button" aria-label="[Describe the image, e.g. Back view]"><img src="/img/jacket.svg"></button>متن داخل کروشه را با کاری که دکمه انجام می‌دهد جایگزین کنید. متن قابل مشاهده یا متن پنهان از دید داخل دکمه هم کار می‌کند.
<button type="button"><img src="/img/bottle.svg"></button><button type="button" aria-label="[Describe the image, e.g. Back view]"><img src="/img/bottle.svg"></button>متن داخل کروشه را با کاری که دکمه انجام می‌دهد جایگزین کنید. متن قابل مشاهده یا متن پنهان از دید داخل دکمه هم کار می‌کند.
رفع مشکل با هوش مصنوعینمایش پرامپت
این متن را همراه با فایل قالب خود در ChatGPT، Claude، Cursor یا Copilot وارد کنید. پیش از انتشار، تغییر را بازبینی کنید.
من یک فروشگاه 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 نشان‌داده‌شده را در آن جست‌وجو کنید)): ```html <button type="button" aria-label="[What this button does]">…</button> ``` قواعد پاسخ شما: - تغییر دقیق را به‌صورت قبل و بعد نشان دهید و نام فایل یا تنظیمی را که تغییر در آن اعمال می‌شود بگویید. اگر لازم است ابتدا فایل من را ببینید، از من بخواهید آن را اینجا قرار دهم. - طراحی ظاهری و همه رفتارهای فعلی را بدون تغییر نگه دارید. - نام محصول، قیمت یا متنی از خودتان نسازید؛ از جای‌نگهدارهایی استفاده کنید که خودم بتوانم پر کنم. - در پایان بگویید چطور می‌توانم خودم اصلاح را بررسی کنم. - روش تأیید آن با صفحه‌کلید و صفحه‌خوان را هم توضیح دهید.
اصلاح خود را بررسی کنید
- صفحات تحت تأثیر را دوباره اسکن کنید.
- دکمه‌ها را با یک صفحه‌خوان بررسی کنید.
راهنمای مفصل: https://dequeuniversity.com/rules/axe/4.13/button-name?application=playwright
تصاویر باید متن جایگزین داشته باشند
میزان کار: متوسط · مسئول: ویرایشگر محتوا · 1.1.1 Non-text Content
تصاویر متن جایگزین ندارند، بنابراین کاربران صفحه‌خوان نمی‌دانند در آن‌ها چه چیزی نشان داده شده است.
WCAG 1.1.1 برای تصاویر معنادار یک متن جایگزین الزامی می‌کند. بدون آن، کاربر صفحه‌خوان نمی‌تواند تشخیص دهد عکس کدام محصول را نشان می‌دهد.
شواهد
- روش شناسایی
- قاعده خودکار axe-core
- وضعیت · اطمینان
- خطای تأییدشده · بالا
- زمان شناسایی
- 24 سپتامبر 2026 (UTC)
- محل
- 22 مورد در 7 صفحه
مورد انتظار: تصاویر باید متن جایگزین داشته باشند
مشاهده‌شده: عنصر ویژگی alt ندارد. ویژگی aria-label وجود ندارد یا خالی است. ویژگی aria-labelledby وجود ندارد، یا به عناصری ارجاع می‌دهد که وجود ندارند یا خالی‌اند. عنصر ویژگی title ندارد. معنای پیش‌فرض عنصر با role="none" یا role="presentation" بازنویسی نشده است.
نحوه بازتولید
- https://harborandpine.example/ را در Chrome یا Edge باز کنید.
- DevTools را باز کنید (F12)، به Elements بروید، کلیدهای Ctrl+F (در Mac کلیدهای Cmd+F) را بزنید و این را جست‌وجو کنید: img[src$="hero-photo.jpg"]
- در پنل Accessibility ابزار DevTools، مقدار Name محاسبه‌شده برای عنصر خالی است.
- یا افزونه رایگان axe DevTools را روی صفحه اجرا کنید: این مورد را با عنوان «image-alt» گزارش می‌کند.
عناصر دارای خطا (4 مورد نمایش داده شده)
<img src="/img/hero-photo.jpg" loading="lazy"><img src="/img/mug.svg"><img src="/img/beanie.svg"><img src="/img/jacket.svg">صفحات تحت تأثیر (7)
- https://harborandpine.example/
- https://harborandpine.example/collections/all
- https://harborandpine.example/products/trail-daypack
- https://harborandpine.example/products/pine-wool-beanie
- https://harborandpine.example/products/enamel-camp-mug
- https://harborandpine.example/products/harbor-lantern
- https://harborandpine.example/products/insulated-bottle
نحوه رفع
کد ساخته‌شده از روی کد HTML صفحه شما- در پنل مدیریت Shopify، به Products > [محصول] > Media بروید، روی هر تصویر کلیک کنید و فیلد «Alt text» را پر کنید. برای تصاویر بخش‌ها، Online Store > Themes > Customize را باز کنید و متن جایگزین تصویر را در تنظیمات همان بخش وارد کنید.
- آنچه را برای خریدار مهم است توصیف کنید: نام محصول، رنگ و زاویه نمایش (برای مثال «کیف دستی برزنتی زیتونی، نمای روبه‌رو»).
- تصاویر تزئینی باید ویژگی alt خالی (alt="") داشته باشند تا صفحه‌خوان‌ها از آن‌ها رد شوند.
کد
نمونه‌های پیاده‌سازی برای توسعه‌دهنده‌تان. ما به کد منبع قالب شما دسترسی نداریم، بنابراین محل فایل‌ها راهنماست، نه مسیر دقیق.
<img src="/img/hero-photo.jpg" loading="lazy"><img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">آنچه را تصویر نشان می‌دهد توصیف کنید (برای عکس محصول: محصول، رنگ، زاویه). اگر تصویر صرفاً تزئینی است، به‌جای آن از alt="" استفاده کنید تا صفحه‌خوان‌ها از آن رد شوند.
<img src="/img/mug.svg"><img src="/img/mug.svg" alt="[Describe the image for a shopper]">آنچه را تصویر نشان می‌دهد توصیف کنید (برای عکس محصول: محصول، رنگ، زاویه). اگر تصویر صرفاً تزئینی است، به‌جای آن از alt="" استفاده کنید تا صفحه‌خوان‌ها از آن رد شوند.
<img src="/img/beanie.svg"><img src="/img/beanie.svg" alt="[Describe the image for a shopper]">آنچه را تصویر نشان می‌دهد توصیف کنید (برای عکس محصول: محصول، رنگ، زاویه). اگر تصویر صرفاً تزئینی است، به‌جای آن از alt="" استفاده کنید تا صفحه‌خوان‌ها از آن رد شوند.
<img src="/img/jacket.svg"><img src="/img/jacket.svg" alt="[Describe the image for a shopper]">آنچه را تصویر نشان می‌دهد توصیف کنید (برای عکس محصول: محصول، رنگ، زاویه). اگر تصویر صرفاً تزئینی است، به‌جای آن از alt="" استفاده کنید تا صفحه‌خوان‌ها از آن رد شوند.
رفع مشکل با هوش مصنوعینمایش پرامپت
این متن را همراه با فایل قالب خود در ChatGPT، Claude، Cursor یا Copilot وارد کنید. پیش از انتشار، تغییر را بازبینی کنید.
من یک فروشگاه 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]"> ``` قواعد پاسخ شما: - تغییر دقیق را به‌صورت قبل و بعد نشان دهید و نام فایل یا تنظیمی را که تغییر در آن اعمال می‌شود بگویید. اگر لازم است ابتدا فایل من را ببینید، از من بخواهید آن را اینجا قرار دهم. - طراحی ظاهری و همه رفتارهای فعلی را بدون تغییر نگه دارید. - نام محصول، قیمت یا متنی از خودتان نسازید؛ از جای‌نگهدارهایی استفاده کنید که خودم بتوانم پر کنم. - در پایان بگویید چطور می‌توانم خودم اصلاح را بررسی کنم. - روش تأیید آن با صفحه‌کلید و صفحه‌خوان را هم توضیح دهید.
اصلاح خود را بررسی کنید
- صفحات تحت تأثیر را دوباره اسکن کنید.
- با یک صفحه‌خوان (VoiceOver: کلیدهای Cmd+F5 در Mac) گوش دهید که تصاویر محصول چگونه اعلام می‌شوند.
راهنمای مفصل: https://dequeuniversity.com/rules/axe/4.13/image-alt?application=playwright
عناصر فرم باید برچسب داشته باشند
میزان کار: سریع · مسئول: توسعه‌دهنده قالب · 4.1.2 Name, Role, Value
برخی فیلدهای فرم برچسب ندارند، بنابراین کاربران صفحه‌خوان نمی‌دانند چه چیزی باید وارد کنند.
WCAG 1.3.1، 3.3.2 و 4.1.2 الزامی می‌کنند که فیلدهای فرم برچسب داشته باشند. فیلدهای عضویت در خبرنامه و جست‌وجو از رایج‌ترین موارد هستند.
شواهد
- روش شناسایی
- قاعده خودکار axe-core
- وضعیت · اطمینان
- خطای تأییدشده · بالا
- زمان شناسایی
- 24 سپتامبر 2026 (UTC)
- محل
- 7 مورد در 6 صفحه
مورد انتظار: عناصر فرم باید برچسب داشته باشند
مشاهده‌شده: عنصر <label> ضمنی (دربرگیرنده) ندارد. عنصر <label> صریح ندارد. ویژگی aria-label وجود ندارد یا خالی است. ویژگی aria-labelledby وجود ندارد، یا به عناصری ارجاع می‌دهد که وجود ندارند یا خالی‌اند. عنصر ویژگی title ندارد. عنصر ویژگی placeholder ندارد. معنای پیش‌فرض عنصر با role="none" یا role="presentation" بازنویسی نشده است.
نحوه بازتولید
- https://harborandpine.example/products/trail-daypack را در Chrome یا Edge باز کنید.
- DevTools را باز کنید (F12)، به Elements بروید، کلیدهای Ctrl+F (در Mac کلیدهای Cmd+F) را بزنید و این را جست‌وجو کنید: input
- در پنل Accessibility ابزار DevTools، مقدار Name محاسبه‌شده برای عنصر خالی است.
- یا افزونه رایگان axe DevTools را روی صفحه اجرا کنید: این مورد را با عنوان «label» گزارش می‌کند.
عناصر دارای خطا (2 مورد نمایش داده شده)
<input type="number" value="1" min="1"><input type="number" value="2" min="1">صفحات تحت تأثیر (6)
- https://harborandpine.example/products/trail-daypack
- https://harborandpine.example/cart
- https://harborandpine.example/products/pine-wool-beanie
- https://harborandpine.example/products/enamel-camp-mug
- https://harborandpine.example/products/harbor-lantern
- https://harborandpine.example/products/insulated-bottle
نحوه رفع
کد ساخته‌شده از روی کد HTML صفحه شما- به هر فیلد یک عنصر <label for="field-id">، یا دست‌کم یک aria-label، بدهید.
- متن placeholder به‌تنهایی برچسب محسوب نمی‌شود.
کد
نمونه‌های پیاده‌سازی برای توسعه‌دهنده‌تان. ما به کد منبع قالب شما دسترسی نداریم، بنابراین محل فایل‌ها راهنماست، نه مسیر دقیق.
<input type="number" value="1" min="1"><input type="number" value="1" min="1" aria-label="Quantity">فیلد id ندارد، بنابراین سریع‌ترین راه‌حل یک aria-label است. یک <label> قابل مشاهده برای همه بهتر است. متن برچسب «Quantity» از روی فیلد حدس زده شده است؛ در صورت نیاز آن را اصلاح کنید.
<input type="number" value="2" min="1"><input type="number" value="2" min="1" aria-label="Quantity">فیلد id ندارد، بنابراین سریع‌ترین راه‌حل یک aria-label است. یک <label> قابل مشاهده برای همه بهتر است. متن برچسب «Quantity» از روی فیلد حدس زده شده است؛ در صورت نیاز آن را اصلاح کنید.
رفع مشکل با هوش مصنوعینمایش پرامپت
این متن را همراه با فایل قالب خود در ChatGPT، Claude، Cursor یا Copilot وارد کنید. پیش از انتشار، تغییر را بازبینی کنید.
من یک فروشگاه 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 به‌تنهایی برچسب محسوب نمی‌شود. تغییر پیشنهادی (کد قالب شما (کد HTML نشان‌داده‌شده را در آن جست‌وجو کنید)): ```html <input type="number" value="1" min="1" aria-label="Quantity"> ``` قواعد پاسخ شما: - تغییر دقیق را به‌صورت قبل و بعد نشان دهید و نام فایل یا تنظیمی را که تغییر در آن اعمال می‌شود بگویید. اگر لازم است ابتدا فایل من را ببینید، از من بخواهید آن را اینجا قرار دهم. - طراحی ظاهری و همه رفتارهای فعلی را بدون تغییر نگه دارید. - نام محصول، قیمت یا متنی از خودتان نسازید؛ از جای‌نگهدارهایی استفاده کنید که خودم بتوانم پر کنم. - در پایان بگویید چطور می‌توانم خودم اصلاح را بررسی کنم. - روش تأیید آن با صفحه‌کلید و صفحه‌خوان را هم توضیح دهید.
اصلاح خود را بررسی کنید
- دوباره اسکن کنید و مطمئن شوید قاعده label دیگر رد نمی‌شود.
- روی هر برچسب کلیک کنید و بررسی کنید که فوکوس به فیلد مربوط به آن منتقل شود.
راهنمای مفصل: https://dequeuniversity.com/rules/axe/4.13/label?application=playwright
عنصر select باید نام دسترس‌پذیر داشته باشد
میزان کار: سریع · مسئول: توسعه‌دهنده قالب · 4.1.2 Name, Role, Value
یک منوی کشویی (اغلب انتخابگر مرتب‌سازی یا گونه محصول) برچسب ندارد.
WCAG 4.1.2 الزامی می‌کند که منوهای انتخاب (select) نام دسترس‌پذیر داشته باشند.
شواهد
- روش شناسایی
- قاعده خودکار axe-core
- وضعیت · اطمینان
- خطای تأییدشده · بالا
- زمان شناسایی
- 24 سپتامبر 2026 (UTC)
- محل
- 1 مورد در 1 صفحه
مورد انتظار: عنصر select باید نام دسترس‌پذیر داشته باشد
مشاهده‌شده: عنصر <label> ضمنی (دربرگیرنده) ندارد. عنصر <label> صریح ندارد. ویژگی aria-label وجود ندارد یا خالی است. ویژگی aria-labelledby وجود ندارد، یا به عناصری ارجاع می‌دهد که وجود ندارند یا خالی‌اند. عنصر ویژگی title ندارد. معنای پیش‌فرض عنصر با role="none" یا role="presentation" بازنویسی نشده است.
نحوه بازتولید
- https://harborandpine.example/collections/all را در Chrome یا Edge باز کنید.
- DevTools را باز کنید (F12)، به Elements بروید، کلیدهای Ctrl+F (در Mac کلیدهای Cmd+F) را بزنید و این را جست‌وجو کنید: select
- در پنل Accessibility ابزار DevTools، مقدار Name محاسبه‌شده برای عنصر خالی است.
- یا افزونه رایگان axe DevTools را روی صفحه اجرا کنید: این مورد را با عنوان «select-name» گزارش می‌کند.
عناصر دارای خطا (1 مورد نمایش داده شده)
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>صفحات تحت تأثیر (1)
- https://harborandpine.example/collections/all
نحوه رفع
کد ساخته‌شده از روی کد HTML صفحه شما- یک <label> مرتبط با select اضافه کنید، یا یک aria-label مانند aria-label="Sort by".
کد
نمونه‌های پیاده‌سازی برای توسعه‌دهنده‌تان. ما به کد منبع قالب شما دسترسی نداریم، بنابراین محل فایل‌ها راهنماست، نه مسیر دقیق.
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select><select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>فیلد id ندارد، بنابراین سریع‌ترین راه‌حل یک aria-label است. یک <label> قابل مشاهده برای همه بهتر است. متن داخل کروشه را با برچسب فیلد جایگزین کنید.
رفع مشکل با هوش مصنوعینمایش پرامپت
این متن را همراه با فایل قالب خود در ChatGPT، Claude، Cursor یا Copilot وارد کنید. پیش از انتشار، تغییر را بازبینی کنید.
من یک فروشگاه Shopify (قالب Online Store 2.0، تمپلیت‌های Liquid) را در آدرس harborandpine.example اداره می‌کنم. یک تست دسترس‌پذیری این مشکل را پیدا کرده است و می‌خواهم آن را در قالبم رفع کنم. مشکل: عنصر select باید نام دسترس‌پذیر داشته باشد (WCAG 4.1.2). محل: 1 مورد در 1 صفحه، برای مثال /collections/all. یکی از عناصر دارای خطا، همان‌طور که مرورگر آن را رندر کرد: ```html <select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select> ``` چرا اهمیت دارد: WCAG 4.1.2 الزامی می‌کند که منوهای انتخاب (select) نام دسترس‌پذیر داشته باشند. آنچه باید تغییر کند: - یک <label> مرتبط با select اضافه کنید، یا یک aria-label مانند aria-label="Sort by". تغییر پیشنهادی (کد قالب شما (کد HTML نشان‌داده‌شده را در آن جست‌وجو کنید)): ```html <select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select> ``` قواعد پاسخ شما: - تغییر دقیق را به‌صورت قبل و بعد نشان دهید و نام فایل یا تنظیمی را که تغییر در آن اعمال می‌شود بگویید. اگر لازم است ابتدا فایل من را ببینید، از من بخواهید آن را اینجا قرار دهم. - طراحی ظاهری و همه رفتارهای فعلی را بدون تغییر نگه دارید. - نام محصول، قیمت یا متنی از خودتان نسازید؛ از جای‌نگهدارهایی استفاده کنید که خودم بتوانم پر کنم. - در پایان بگویید چطور می‌توانم خودم اصلاح را بررسی کنم. - روش تأیید آن با صفحه‌کلید و صفحه‌خوان را هم توضیح دهید.
اصلاح خود را بررسی کنید
- صفحات مجموعه و محصول را دوباره اسکن کنید.
راهنمای مفصل: https://dequeuniversity.com/rules/axe/4.13/select-name?application=playwright
لینک‌ها باید متن قابل تشخیص داشته باشند
میزان کار: سریع · مسئول: توسعه‌دهنده قالب · 2.4.4 Link Purpose (In Context), 4.1.2 Name, Role, Value
برخی لینک‌ها هیچ متنی ندارند که صفحه‌خوان بتواند اعلام کند؛ اغلب لینک‌هایی که فقط یک آیکون دارند، مانند آیکون‌های شبکه‌های اجتماعی یا آیکون سبد خرید.
WCAG 2.4.4 و 4.1.2 الزامی می‌کنند که لینک‌ها نام دسترس‌پذیر داشته باشند که هدفشان را توصیف کند.
شواهد
- روش شناسایی
- قاعده خودکار axe-core
- وضعیت · اطمینان
- خطای تأییدشده · بالا
- زمان شناسایی
- 24 سپتامبر 2026 (UTC)
- محل
- 36 مورد در 9 صفحه
مورد انتظار: لینک‌ها باید متن قابل تشخیص داشته باشند
مشاهده‌شده: عنصر در ترتیب Tab قرار دارد و متن دسترس‌پذیر ندارد. همچنین: عنصر هیچ متنی ندارد که برای صفحه‌خوان‌ها قابل مشاهده باشد. ویژگی aria-label وجود ندارد یا خالی است. ویژگی aria-labelledby وجود ندارد، یا به عناصری ارجاع می‌دهد که وجود ندارند یا خالی‌اند. عنصر ویژگی title ندارد.
نحوه بازتولید
- https://harborandpine.example/ را در Chrome یا Edge باز کنید.
- DevTools را باز کنید (F12)، به Elements بروید، کلیدهای Ctrl+F (در Mac کلیدهای Cmd+F) را بزنید و این را جست‌وجو کنید: a[href$="cart"]
- در پنل Accessibility ابزار DevTools، مقدار Name محاسبه‌شده برای عنصر خالی است.
- یا افزونه رایگان axe DevTools را روی صفحه اجرا کنید: این مورد را با عنوان «link-name» گزارش می‌کند.
عناصر دارای خطا (4 مورد نمایش داده شده)
<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><a href="https://instagram.example/harborandpine"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"></rect><circle cx="12" cy="12" r="4"></circle></svg></a><a href="https://facebook.example/harborandpine"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 8h3V4h-3c-2.8 0-4 1.8-4 4v2H7v4h3v8h4v-8h3l1-4h-4V8.5c0-.3.2-.5.5-.5z"></path></svg></a><a href="https://x.example/harborandpine"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4l16 16M20 4L4 20"></path></svg></a>صفحات تحت تأثیر (9)
- https://harborandpine.example/
- https://harborandpine.example/collections/all
- https://harborandpine.example/products/trail-daypack
- https://harborandpine.example/cart
- https://harborandpine.example/pages/about
- https://harborandpine.example/products/pine-wool-beanie
- https://harborandpine.example/products/enamel-camp-mug
- https://harborandpine.example/products/harbor-lantern
- https://harborandpine.example/products/insulated-bottle
نحوه رفع
کد ساخته‌شده از روی کد HTML صفحه شما- لینک‌ها را در نمونه‌های زیر پیدا کنید. بیشتر آن‌ها آیکون یا تصویری داخل یک تگ <a> هستند.
- یک متن پنهان از دید (visually hidden) داخل لینک اضافه کنید، یا یک aria-label مانند aria-label="Instagram" یا aria-label="Cart".
- اگر لینک یک تصویر را در بر گرفته است، به‌جای آن به تصویر یک متن alt معنادار بدهید.
کد
نمونه‌های پیاده‌سازی برای توسعه‌دهنده‌تان. ما به کد منبع قالب شما دسترسی نداریم، بنابراین محل فایل‌ها راهنماست، نه مسیر دقیق.
<a href="/cart">…</a><a href="/cart" aria-label="Cart">…</a>نام «Cart» را به لینک می‌دهد که از آدرس یا کلاس‌های آن حدس زده شده است. بررسی کنید که این نام بگوید لینک چه کاری انجام می‌دهد.
<a href="https://instagram.example/harborandpine">…</a><a href="https://instagram.example/harborandpine" aria-label="Instagram">…</a>نام «Instagram» را به لینک می‌دهد که از آدرس یا کلاس‌های آن حدس زده شده است. بررسی کنید که این نام بگوید لینک چه کاری انجام می‌دهد.
<a href="https://facebook.example/harborandpine">…</a><a href="https://facebook.example/harborandpine" aria-label="Facebook">…</a>نام «Facebook» را به لینک می‌دهد که از آدرس یا کلاس‌های آن حدس زده شده است. بررسی کنید که این نام بگوید لینک چه کاری انجام می‌دهد.
<a href="https://x.example/harborandpine">…</a><a href="https://x.example/harborandpine" aria-label="X (Twitter)">…</a>نام «X (Twitter)» را به لینک می‌دهد که از آدرس یا کلاس‌های آن حدس زده شده است. بررسی کنید که این نام بگوید لینک چه کاری انجام می‌دهد.
رفع مشکل با هوش مصنوعینمایش پرامپت
این متن را همراه با فایل قالب خود در ChatGPT، Claude، Cursor یا Copilot وارد کنید. پیش از انتشار، تغییر را بازبینی کنید.
من یک فروشگاه 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> هستند. - یک متن پنهان از دید (visually hidden) داخل لینک اضافه کنید، یا یک aria-label مانند aria-label="Instagram" یا aria-label="Cart". - اگر لینک یک تصویر را در بر گرفته است، به‌جای آن به تصویر یک متن alt معنادار بدهید. تغییر پیشنهادی (کد قالب شما (کد HTML نشان‌داده‌شده را در آن جست‌وجو کنید)): ```html <a href="/cart" aria-label="Cart">…</a> ``` قواعد پاسخ شما: - تغییر دقیق را به‌صورت قبل و بعد نشان دهید و نام فایل یا تنظیمی را که تغییر در آن اعمال می‌شود بگویید. اگر لازم است ابتدا فایل من را ببینید، از من بخواهید آن را اینجا قرار دهم. - طراحی ظاهری و همه رفتارهای فعلی را بدون تغییر نگه دارید. - نام محصول، قیمت یا متنی از خودتان نسازید؛ از جای‌نگهدارهایی استفاده کنید که خودم بتوانم پر کنم. - در پایان بگویید چطور می‌توانم خودم اصلاح را بررسی کنم. - روش تأیید آن با صفحه‌کلید و صفحه‌خوان را هم توضیح دهید.
اصلاح خود را بررسی کنید
- دوباره اسکن کنید و مطمئن شوید link-name برطرف شده است.
- در حالی که صفحه‌خوان روشن است، با Tab به هر لینک بروید و به نام آن گوش دهید.
راهنمای مفصل: https://dequeuniversity.com/rules/axe/4.13/link-name?application=playwright
عناصر باید حداقل آستانه‌های نسبت کنتراست رنگ را برآورده کنند
میزان کار: سریع · مسئول: مالک فروشگاه (تنظیمات پنل مدیریت) · 1.4.3 Contrast (Minimum)
برخی متن‌ها به اندازه کافی از پس‌زمینه خود متمایز نیستند تا افراد کم‌بینا بتوانند آن‌ها را بخوانند.
WCAG 1.4.3 برای متن معمولی نسبت کنتراست دست‌کم 4.5:1 و برای متن بزرگ 3:1 را الزامی می‌کند. قیمت‌ها، نشان‌ها و بنرهای کم‌رنگ برای افراد کم‌بینا، و برای همه در نور شدید، به‌سختی خوانده می‌شوند.
شواهد
- روش شناسایی
- قاعده خودکار axe-core
- وضعیت · اطمینان
- خطای تأییدشده · بالا
- زمان شناسایی
- 24 سپتامبر 2026 (UTC)
- محل
- 22 مورد در 9 صفحه
مورد انتظار: عناصر باید حداقل آستانه‌های نسبت کنتراست رنگ را برآورده کنند
مشاهده‌شده: کنتراست رنگ عنصر 3.09 است و کافی نیست (رنگ متن: #ffffff، رنگ پس‌زمینه: #e76f51، اندازه قلم: 9.8pt (13px)، وزن قلم: normal). نسبت کنتراست مورد انتظار 4.5:1 است.
نحوه بازتولید
- https://harborandpine.example/ را در Chrome یا Edge باز کنید.
- DevTools را باز کنید (F12)، به Elements بروید، کلیدهای Ctrl+F (در Mac کلیدهای Cmd+F) را بزنید و این را جست‌وجو کنید: .announce
- در پنل Styles، روی نمونه رنگ کنار رنگ عنصر کلیک کنید تا نسبت کنتراست اندازه‌گیری‌شده را ببینید.
- یا افزونه رایگان axe DevTools را روی صفحه اجرا کنید: این مورد را با عنوان «color-contrast» گزارش می‌کند.
عناصر دارای خطا (4 مورد نمایش داده شده)
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div><span class="badge">Sale</span><span class="compare">$72</span><span class="compare">$40</span>صفحات تحت تأثیر (9)
- https://harborandpine.example/
- https://harborandpine.example/collections/all
- https://harborandpine.example/products/trail-daypack
- https://harborandpine.example/cart
- https://harborandpine.example/pages/about
- https://harborandpine.example/products/pine-wool-beanie
- https://harborandpine.example/products/enamel-camp-mug
- https://harborandpine.example/products/harbor-lantern
- https://harborandpine.example/products/insulated-bottle
نحوه رفع
کد ساخته‌شده از روی کد HTML صفحه شما- عناصر دارای خطا را که در زیر فهرست شده‌اند باز کنید و رنگ متن و پس‌زمینه را در خلاصه خطا یادداشت کنید.
- در Online Store > Themes > Customize > Theme settings > Colors، رنگ متن را تیره‌تر یا پس‌زمینه را روشن‌تر کنید، برای همان طرح رنگی که مشکل دارد، تا نسبت کنتراست دست‌کم 4.5:1 شود.
- به نشان‌های حراج، متن placeholder، لینک‌های فوتر و دکمه‌های روی تصاویر توجه ویژه داشته باشید.
کد
نمونه‌های پیاده‌سازی برای توسعه‌دهنده‌تان. ما به کد منبع قالب شما دسترسی نداریم، بنابراین محل فایل‌ها راهنماست، نه مسیر دقیق.
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>.announce {
background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}مقدار اندازه‌گیری‌شده 3.09:1 برای متن 13px؛ WCAG 1.4.3 به 4.5:1 نیاز دارد. #b95941 همان فام رنگ را حفظ می‌کند و قبول می‌شود. این سلکتور همانی است که تست ما استفاده کرد؛ ممکن است قالب شما برای همین سبک از یک کلاس کلی‌تر استفاده کند.
<span class="badge">Sale</span>.badge {
background-color: #9f693f; /* was #f4a261: 2.06:1, now 4.59:1 */
}مقدار اندازه‌گیری‌شده 2.06:1 برای متن پررنگ 12px؛ WCAG 1.4.3 به 4.5:1 نیاز دارد. #9f693f همان فام رنگ را حفظ می‌کند و قبول می‌شود. این سلکتور همانی است که تست ما استفاده کرد؛ ممکن است قالب شما برای همین سبک از یک کلاس کلی‌تر استفاده کند.
<span class="compare">$72</span>.compare {
color: #78736c; /* was #b0a99f: 2.29:1, now 4.62:1 */
}مقدار اندازه‌گیری‌شده 2.29:1 برای متن 14px؛ WCAG 1.4.3 به 4.5:1 نیاز دارد. #78736c همان فام رنگ را حفظ می‌کند و قبول می‌شود. این سلکتور همانی است که تست ما استفاده کرد؛ ممکن است قالب شما برای همین سبک از یک کلاس کلی‌تر استفاده کند.
رفع مشکل با هوش مصنوعینمایش پرامپت
این متن را همراه با فایل قالب خود در ChatGPT، Claude، Cursor یا Copilot وارد کنید. پیش از انتشار، تغییر را بازبینی کنید.
من یک فروشگاه 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 */
}
```
قواعد پاسخ شما:
- تغییر دقیق را به‌صورت قبل و بعد نشان دهید و نام فایل یا تنظیمی را که تغییر در آن اعمال می‌شود بگویید. اگر لازم است ابتدا فایل من را ببینید، از من بخواهید آن را اینجا قرار دهم.
- طراحی ظاهری و همه رفتارهای فعلی را بدون تغییر نگه دارید.
- نام محصول، قیمت یا متنی از خودتان نسازید؛ از جای‌نگهدارهایی استفاده کنید که خودم بتوانم پر کنم.
- در پایان بگویید چطور می‌توانم خودم اصلاح را بررسی کنم.
- روش تأیید آن با صفحه‌کلید و صفحه‌خوان را هم توضیح دهید.اصلاح خود را بررسی کنید
- اسکن را دوباره اجرا کنید و مطمئن شوید color-contrast دیگر نمایش داده نمی‌شود.
- با یک ابزار بررسی کنتراست، رنگ‌های دقیق را به‌صورت نمونه‌ای بررسی کنید.
راهنمای مفصل: https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright
همه محتوای صفحه باید داخل نواحی صفحه (landmarks) قرار داشته باشد
میزان کار: متوسط · مسئول: توسعه‌دهنده قالب
بخشی از محتوا داخل هیچ ناحیه صفحه (landmark) مانند header، nav، main یا footer نیست.
نواحی صفحه (landmarks) به کاربران صفحه‌خوان امکان می‌دهند بین بخش‌های صفحه جابه‌جا شوند. این یک روش توصیه‌شده در پشتیبانی از WCAG 1.3.1 و 2.4.1 است.
شواهد
- روش شناسایی
- قاعده خودکار axe-core
- وضعیت · اطمینان
- خطای تأییدشده · بالا
- زمان شناسایی
- 24 سپتامبر 2026 (UTC)
- محل
- 18 مورد در 9 صفحه
مورد انتظار: همه محتوای صفحه باید داخل نواحی صفحه (landmarks) قرار داشته باشد
مشاهده‌شده: بخشی از محتوای صفحه داخل نواحی صفحه (landmarks) قرار ندارد.
نحوه بازتولید
- https://harborandpine.example/ را در Chrome یا Edge باز کنید.
- DevTools را باز کنید (F12)، به Elements بروید، کلیدهای Ctrl+F (در Mac کلیدهای Cmd+F) را بزنید و این را جست‌وجو کنید: .announce
- یا افزونه رایگان axe DevTools را روی صفحه اجرا کنید: این مورد را با عنوان «region» گزارش می‌کند.
عناصر دارای خطا (2 مورد نمایش داده شده)
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div><p>We use cookies to improve your experience and measure traffic.</p>صفحات تحت تأثیر (9)
- https://harborandpine.example/
- https://harborandpine.example/collections/all
- https://harborandpine.example/products/trail-daypack
- https://harborandpine.example/cart
- https://harborandpine.example/pages/about
- https://harborandpine.example/products/pine-wool-beanie
- https://harborandpine.example/products/enamel-camp-mug
- https://harborandpine.example/products/harbor-lantern
- https://harborandpine.example/products/insulated-bottle
نحوه رفع
راهنمای کلی- محتوای پراکنده (نوارهای اطلاعیه، پاپ‌آپ‌ها، ویجت‌های گفت‌وگو) را در ناحیه مناسب قرار دهید یا داخل <main> بگذارید.
رفع مشکل با هوش مصنوعینمایش پرامپت
این متن را همراه با فایل قالب خود در ChatGPT، Claude، Cursor یا Copilot وارد کنید. پیش از انتشار، تغییر را بازبینی کنید.
من یک فروشگاه Shopify (قالب Online Store 2.0، تمپلیت‌های Liquid) را در آدرس harborandpine.example اداره می‌کنم. یک تست دسترس‌پذیری این مشکل را پیدا کرده است و می‌خواهم آن را در قالبم رفع کنم. مشکل: همه محتوای صفحه باید داخل نواحی صفحه (landmarks) قرار داشته باشد. محل: 18 مورد در 9 صفحه، برای مثال /، /collections/all، /products/trail-daypack، /cart. یکی از عناصر دارای خطا، همان‌طور که مرورگر آن را رندر کرد: ```html <div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div> ``` چرا اهمیت دارد: نواحی صفحه (landmarks) به کاربران صفحه‌خوان امکان می‌دهند بین بخش‌های صفحه جابه‌جا شوند. این یک روش توصیه‌شده در پشتیبانی از WCAG 1.3.1 و 2.4.1 است. آنچه باید تغییر کند: - محتوای پراکنده (نوارهای اطلاعیه، پاپ‌آپ‌ها، ویجت‌های گفت‌وگو) را در ناحیه مناسب قرار دهید یا داخل <main> بگذارید. قواعد پاسخ شما: - تغییر دقیق را به‌صورت قبل و بعد نشان دهید و نام فایل یا تنظیمی را که تغییر در آن اعمال می‌شود بگویید. اگر لازم است ابتدا فایل من را ببینید، از من بخواهید آن را اینجا قرار دهم. - طراحی ظاهری و همه رفتارهای فعلی را بدون تغییر نگه دارید. - نام محصول، قیمت یا متنی از خودتان نسازید؛ از جای‌نگهدارهایی استفاده کنید که خودم بتوانم پر کنم. - در پایان بگویید چطور می‌توانم خودم اصلاح را بررسی کنم. - روش تأیید آن با صفحه‌کلید و صفحه‌خوان را هم توضیح دهید.
اصلاح خود را بررسی کنید
- صفحات تحت تأثیر را دوباره اسکن کنید.
راهنمای مفصل: https://dequeuniversity.com/rules/axe/4.13/region?application=playwright
سطح سرفصل‌ها باید هر بار فقط یک سطح افزایش یابد
میزان کار: متوسط · مسئول: توسعه‌دهنده قالب
سطح سرفصل‌ها از هم می‌پرد (برای مثال از H2 به H4) و این کار ساختار صفحه را برای کاربران صفحه‌خوان گیج‌کننده می‌کند.
کاربران صفحه‌خوان با سرفصل‌ها در صفحه حرکت می‌کنند. این یک روش توصیه‌شده در پشتیبانی از WCAG 1.3.1 است.
شواهد
- روش شناسایی
- قاعده خودکار axe-core
- وضعیت · اطمینان
- خطای تأییدشده · بالا
- زمان شناسایی
- 24 سپتامبر 2026 (UTC)
- محل
- 7 مورد در 7 صفحه
مورد انتظار: سطح سرفصل‌ها باید هر بار فقط یک سطح افزایش یابد
مشاهده‌شده: ترتیب سرفصل‌ها نامعتبر است.
نحوه بازتولید
- https://harborandpine.example/collections/all را در Chrome یا Edge باز کنید.
- DevTools را باز کنید (F12)، به Elements بروید، کلیدهای Ctrl+F (در Mac کلیدهای Cmd+F) را بزنید و این را جست‌وجو کنید: article:nth-child(1) > a[href$="trail-daypack"] > h3
- یا افزونه رایگان axe DevTools را روی صفحه اجرا کنید: این مورد را با عنوان «heading-order» گزارش می‌کند.
عناصر دارای خطا (3 مورد نمایش داده شده)
<h3>Trail Daypack 22L</h3><h3>Reviews</h3><h3>Started on the trail</h3>صفحات تحت تأثیر (7)
- https://harborandpine.example/collections/all
- https://harborandpine.example/products/trail-daypack
- https://harborandpine.example/pages/about
- https://harborandpine.example/products/pine-wool-beanie
- https://harborandpine.example/products/enamel-camp-mug
- https://harborandpine.example/products/harbor-lantern
- https://harborandpine.example/products/insulated-bottle
نحوه رفع
راهنمای کلی- سطح سرفصل‌ها را در بخش‌های تحت تأثیر طوری تنظیم کنید که به ترتیب و بدون پرش از سطحی به سطح دیگر پیش بروند.
- فقط تگ را تغییر دهید، نه ظاهر را (برای اندازه از کلاس‌های CSS استفاده کنید).
کد
نمونه‌های پیاده‌سازی برای توسعه‌دهنده‌تان. ما به کد منبع قالب شما دسترسی نداریم، بنابراین محل فایل‌ها راهنماست، نه مسیر دقیق.
<h3>Trail Daypack 22L</h3><h2 class="h3">Trail Daypack 22L</h2>از سطحی استفاده کنید که پس از سرفصل قبلی صفحه می‌آید (اغلب یک سطح بالاتر) و ظاهر را با یک کلاس حفظ کنید. پیش از تغییر، ساختار سرفصل‌های صفحه را بررسی کنید.
<h3>Reviews</h3><h2 class="h3">Reviews</h2>از سطحی استفاده کنید که پس از سرفصل قبلی صفحه می‌آید (اغلب یک سطح بالاتر) و ظاهر را با یک کلاس حفظ کنید. پیش از تغییر، ساختار سرفصل‌های صفحه را بررسی کنید.
<h3>Started on the trail</h3><h2 class="h3">Started on the trail</h2>از سطحی استفاده کنید که پس از سرفصل قبلی صفحه می‌آید (اغلب یک سطح بالاتر) و ظاهر را با یک کلاس حفظ کنید. پیش از تغییر، ساختار سرفصل‌های صفحه را بررسی کنید.
رفع مشکل با هوش مصنوعینمایش پرامپت
این متن را همراه با فایل قالب خود در ChatGPT، Claude، Cursor یا Copilot وارد کنید. پیش از انتشار، تغییر را بازبینی کنید.
من یک فروشگاه 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 نشان‌داده‌شده را در آن جست‌وجو کنید)): ```html <h2 class="h3">Trail Daypack 22L</h2> ``` قواعد پاسخ شما: - تغییر دقیق را به‌صورت قبل و بعد نشان دهید و نام فایل یا تنظیمی را که تغییر در آن اعمال می‌شود بگویید. اگر لازم است ابتدا فایل من را ببینید، از من بخواهید آن را اینجا قرار دهم. - طراحی ظاهری و همه رفتارهای فعلی را بدون تغییر نگه دارید. - نام محصول، قیمت یا متنی از خودتان نسازید؛ از جای‌نگهدارهایی استفاده کنید که خودم بتوانم پر کنم. - در پایان بگویید چطور می‌توانم خودم اصلاح را بررسی کنم. - روش تأیید آن با صفحه‌کلید و صفحه‌خوان را هم توضیح دهید.
اصلاح خود را بررسی کنید
- دوباره اسکن کنید و ساختار سرفصل‌ها را با یک افزونه مرورگر مانند HeadingsMap بررسی کنید.
راهنمای مفصل: https://dequeuniversity.com/rules/axe/4.13/heading-order?application=playwright
نیاز به بازبینی دستی
تست‌های خودکار این موارد را علامت زدند اما نتوانستند درباره‌شان تصمیم بگیرند، مثلاً متن روی تصویر یا محتوایی که ممکن است در صفحه گوشی جا نشود. این موارد خطا شمرده نمی‌شوند. از توسعه‌دهنده‌تان بخواهید هر کدام را بررسی کند.
- نیاز به بررسیWCAG 4.1.3
پیمایش با صفحه‌کلید: افزودن به سبد خرید با صفحه‌کلید
Enter روی دکمه افزودن به سبد خرید کار کرد (شمارنده سبد خرید در هدر تغییر کرد، پیامی مبنی بر «افزوده شدن به سبد خرید» ظاهر شد)، اما هیچ پیام وضعیت یا پنجره گفت‌وگوی دارای فوکوسی پیدا نکردیم، بنابراین ممکن است کاربران صفحه‌خوان متوجه نشوند که کالا اضافه شده است.
1 مورد در 1 صفحه · نحوه بررسی
- نیاز به بررسیWCAG 1.4.10
ممکن است صفحه محصول بدون اسکرول افقی در صفحه‌نمایش باریک جا نشود
در عرض 320 پیکسل CSS (معادل بزرگ‌نمایی 400%)، صفحه 200px از صفحه‌نمایش پهن‌تر است. جدول‌های داده و نقشه‌ها می‌توانند اسکرول شوند؛ متن و کنترل‌ها نباید اسکرول شوند.
2 مورد در 1 صفحه · نحوه بررسی
عناصری که باید بررسی شوند (2 مورد نمایش داده شده)
div.icons <div class="icons"> <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></budiv <div> <p style="color:#6a6a60;font-size:14px">Harbor & Pine</p> <h1>Trail Daypack 22L</h1> <p class="price" style="font-size:22px">$128<span class="compare">$150</span></p> <p class="opt-label">Si - نیاز به بررسیWCAG 1.4.10
ممکن است صفحه اصلی بدون اسکرول افقی در صفحه‌نمایش باریک جا نشود
در عرض 320 پیکسل CSS (معادل بزرگ‌نمایی 400%)، صفحه 55px از صفحه‌نمایش پهن‌تر است. جدول‌های داده و نقشه‌ها می‌توانند اسکرول شوند؛ متن و کنترل‌ها نباید اسکرول شوند.
3 مورد در 1 صفحه · نحوه بررسی
عناصری که باید بررسی شوند (3 مورد نمایش داده شده)
div.icons <div class="icons"> <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></buarticle.card <article class="card"><span class="badge">Sale</span><a href="/products/trail-daypack"><img src="/img/beanie.svg"><h3>Pine Wool Beanie</h3></a><p class="price">$32<span class="compare">$40</span></p><button.btn.light <button class="btn light" type="submit">Subscribe</button> - نیاز به بررسیWCAG 1.4.3
عناصر باید حداقل آستانه‌های نسبت کنتراست رنگ را برآورده کنند
رنگ پس‌زمینه عنصر مشخص نشد، زیرا عنصر شامل یک گره تصویر است.
1 مورد در 1 صفحه · نحوه بررسی
عناصری که باید بررسی شوند (1 مورد نمایش داده شده)
h1 <h1>Gear for the long way home</h1>
اصلاحات خود را دوباره تست کنید
وقتی توسعه‌دهنده‌تان تغییرات را اعمال کرد، تست مجدد اجرا کنید. همان بررسی‌های خودکار را روی همان صفحات، به‌همراه تست صفحه‌کلید و پیمایش با صفحه‌کلید، دوباره اجرا می‌کنیم و نشان می‌دهیم کدام مشکلات دیگر بازتولید نمی‌شوند. 5 تست مجدد در گزارش گنجانده شده است.
تست مجدد روی گزارش‌های پولی اجرا می‌شود.
بررسی‌های دستی
ابزارهای خودکار نمی‌توانند درباره این موارد قضاوت کنند. پیش از اینکه کار را تمام‌شده بدانید، این بررسی‌ها را انجام دهید.
- تسویه حساب را فقط با صفحه‌کلید کامل کنید: پیمایش خودکار ما در دکمه تسویه حساب متوقف می‌شود و هرگز وارد مرحله تسویه حساب نمی‌شود.
- همین کار را با یک صفحه‌خوان تکرار کنید (VoiceOver در Mac: کلیدهای Cmd+F5؛ NVDA در Windows) و مطمئن شوید قیمت‌ها، گونه‌های محصول و خطاها اعلام می‌شوند.
- مرورگر را تا 200% بزرگ‌نمایی کنید و مطمئن شوید چیزی روی هم نمی‌افتد یا ناپدید نمی‌شود.
- بررسی کنید که ویدیوهای محصول و برند زیرنویس دقیق داشته باشند.
- فرم‌ها (خبرنامه، تماس، تسویه حساب) را با اشتباه ارسال کنید و مطمئن شوید خطاها به‌صورت متنی توضیح داده می‌شوند.
- بررسی کنید که اسلایدرها و پاپ‌آپ‌ها قابل توقف یا بستن باشند، از جمله با کلید Escape.
پیش‌نویس بیانیه دسترس‌پذیری
بخش‌های داخل کروشه را ویرایش کنید و متن را در صفحه‌ای منتشر کنید که از فوتر سایت به آن لینک داده شده است.
بیانیه دسترس‌پذیری harborandpine.example می‌خواهیم همه بتوانند در harborandpine.example خرید کنند، از جمله افرادی که از صفحه‌خوان، پیمایش با صفحه‌کلید، بزرگ‌نمایی یا سایر فناوری‌های کمکی استفاده می‌کنند. هدف ما رعایت رهنمودهای دسترس‌پذیری محتوای وب (WCAG) 2.2 در سطح AA است. آنچه انجام می‌دهیم - فروشگاه خود را با ابزارهای خودکار دسترس‌پذیری تست می‌کنیم و مشکلاتی را که پیدا می‌کنند رفع می‌کنیم. - مراحل کلیدی خرید (مرور محصولات، صفحات محصول، سبد خرید و تسویه حساب) را با صفحه‌کلید و صفحه‌خوان تست می‌کنیم. - اپلیکیشن‌ها و ویجت‌های شخص ثالث را پیش از افزودن، از نظر دسترس‌پذیری بررسی می‌کنیم. محدودیت‌های شناخته‌شده (تا تاریخ 24 سپتامبر 2026) - دسترسی با صفحه‌کلید و فوکوس (WCAG 2.1.1). قصد داریم این مورد را تا 2026-10-08 رفع کنیم. - لینک‌ها و دکمه‌های بدون نام (WCAG 2.4.4، 4.1.2). قصد داریم این مورد را تا 2026-10-08 رفع کنیم. - تصاویر بدون متن جایگزین (WCAG 1.1.1). قصد داریم این مورد را تا 2026-10-08 رفع کنیم. - فیلدهای فرم بدون برچسب (WCAG 4.1.2). قصد داریم این مورد را تا 2026-10-08 رفع کنیم. - کنتراست رنگ پایین (WCAG 1.4.3). قصد داریم این مورد را تا 2026-10-08 رفع کنیم. بازخورد و کمک اگر در استفاده از هر بخشی از فروشگاه ما مشکل دارید، از طریق [ایمیل شما] یا [شماره تلفن شما] با ما تماس بگیرید. صفحه و مشکل را به ما بگویید تا به شما کمک کنیم خرید خود را کامل کنید؛ ظرف 5 روز کاری پاسخ می‌دهیم. این بیانیه در تاریخ 24 سپتامبر 2026 تهیه شده است و دست‌کم سالی یک بار بازبینی خواهد شد.
سابقه شواهد
هر صفحه در Chromium بارگذاری و با axe-core 4.13.0 تست شد. هش SHA-256 نتایج خام هر صفحه را مشخص می‌کند.
| صفحه | زمان تست (UTC) | HTTP | مشکلات | SHA-256 |
|---|---|---|---|---|
| صفحه اصلیhttps://harborandpine.example/ | 2026-09-24 14:05:00 | 200 | 15 | da1e5470a57859a864332912dd1e4f62b4c4f64487ba144865b74879519599a3 |
| صفحه مجموعهhttps://harborandpine.example/collections/all | 2026-09-24 14:05:09 | 200 | 20 | 28d8dfcf5ca953af353264a930a351bea3cf23f98a303874b32e5da355a4c8b0 |
| صفحه محصولhttps://harborandpine.example/products/trail-daypack | 2026-09-24 14:05:18 | 200 | 20 | 68a173ddfd16eeeef5e36d6c0fa9d426769f0d96e358c5e35b67608dd84139b4 |
| سبد خریدhttps://harborandpine.example/cart | 2026-09-24 14:05:27 | 200 | 12 | 5b7945c2cdf779dcef2bd8975d96eb8f42d8dedbf10e767ec80199dd22ce257c |
| صفحه محتواییhttps://harborandpine.example/pages/about | 2026-09-24 14:05:36 | 200 | 9 | daf61ae856358a574e63f9357db0bfd9ae6079065acf3aebd5b3c5a7f460e53f |
| صفحه اضافیhttps://harborandpine.example/products/pine-wool-beanie | 2026-09-24 14:08:00 | 200 | 20 | f708ccd7de34dfb65d59d3716580b6ec15a6420020c8387fa4da4e2ff5bd52d3 |
| صفحه اضافیhttps://harborandpine.example/products/enamel-camp-mug | 2026-09-24 14:08:07 | 200 | 19 | c619bcd29e89d06099d174b9fc19305a42f2fa9bdddb600a750c867fc7477022 |
| صفحه اضافیhttps://harborandpine.example/products/harbor-lantern | 2026-09-24 14:08:14 | 200 | 20 | 5720b7433b75050ba413ac74c2bd726b0620aaa68f7918083052383257d5c418 |
| صفحه اضافیhttps://harborandpine.example/products/insulated-bottle | 2026-09-24 14:08:21 | 200 | 19 | 6f1972c22e477c9a63e2dfde1123ed759718f6a75e1606b23f208848691510fd |
دامنه و روش
آنچه تست کردیم
- 9 صفحه (صفحه اصلی، صفحه مجموعه، صفحه محصول، سبد خرید، صفحه محتوایی، صفحه اضافی) که در Chromium با ابعاد 1366×900 بارگذاری شدند.
- قواعد axe-core 4.13.0 برای سطح A و AA در WCAG 2.0، 2.1 و 2.2، به‌علاوه قواعد روش‌های توصیه‌شده (با برچسب P3).
- یک تست صفحه‌کلید: 40 بار فشردن Tab در صفحه اصلی، برای یافتن تله‌های فوکوس و نشانگرهای فوکوس ناموجود.
- یک پیمایش خرید فقط با صفحه‌کلید از صفحه اصلی تا دکمه تسویه حساب (بالاتر را ببینید).
- یک بررسی بازچینی (reflow) در عرض 320 پیکسل CSS روی صفحه اصلی و صفحه محصول (WCAG 1.4.10).
آنچه تست نکردیم
- صفحات تسویه حساب و پرداخت، ارسال فرم‌ها، صفحات حساب کاربری و صفحات پس از ورود.
- آنچه صفحه‌خوان در عمل اعلام می‌کند، فراتر از قواعد خودکار.
- زیرنویس ویدیوها و توصیف صوتی، اسناد PDF و محتوای داخل فریم‌های شخص ثالث.
- زبان ساده، دسترس‌پذیری شناختی و هر چیز دیگری که به قضاوت انسانی نیاز دارد (بخش «بررسی‌های دستی» را ببینید).
نحوه خواندن نتایج
- خطای تأییدشده
- یک تست خودکار یا پیمایش با صفحه‌کلید رد شد و شواهد آن نمایش داده شده است.
- نیاز به بررسی
- یک تست موردی را علامت زد که نتوانست درباره‌اش تصمیم بگیرد؛ یک انسان باید آن را بررسی کند.
- قبول
- قاعده خودکار در صفحات تست‌شده هیچ خطایی پیدا نکرد.
- تست نشده
- خارج از آنچه تست خودکار در اینجا می‌تواند پوشش دهد؛ بخش «بررسی‌های دستی» را ببینید.
این گزارش را برای وب‌سایت خود دریافت کنید.
با اسکن رایگان شروع کنید تا مشکلات سایت خود و میزان تطبیق آن‌ها با نامه‌تان را ببینید. گزارش رفع مشکلات دسترس‌پذیری با پرداخت یک‌باره $249 در حدود 10 دقیقه آماده می‌شود.
اسکن رایگان وبسایتاین گزارش نتایج تست‌های خودکار را توصیف می‌کند و راهنمایی برای اصلاح ارائه می‌دهد. این گزارش مشاوره حقوقی نیست و انطباق با ADA، قانون دسترس‌پذیری اروپا یا هر قانون دیگری را گواهی نمی‌کند.