নমুনা অ্যাক্সেসিবিলিটি সংশোধন রিপোর্ট। Harbor & Pine সাধারণ অ্যাক্সেসিবিলিটি ত্রুটিসহ আমাদের তৈরি একটি কাল্পনিক স্টোর, যা পরীক্ষা করা হয়েছে সেই একই ইঞ্জিনে, যা আপনার ওয়েবসাইট স্ক্যান করে।

নমুনা অ্যাক্সেসিবিলিটি সংশোধন রিপোর্ট

harborandpine.example

প্ল্যাটফর্ম:: Shopify
তৈরির তারিখ:: 24 সেপ, 2026
পরীক্ষিত পেজ:: 9
ইঞ্জিন:: axe-core 4.13.0

অ্যাক্সেসিবিলিটি PDF পুরো রিপোর্টের PDFস্ক্যানের ফলাফল এই রিপোর্টটি ইংরেজিতে দেখুন

সারাংশ

আমরা 24 সেপ, 2026 তারিখে axe-core 4.13.0 দিয়ে WCAG 2.2 A ও AA-এর ভিত্তিতে harborandpine.example-এর 9টি পেজ পরীক্ষা করেছি (যার 4টি আপনার সাইটম্যাপ থেকে), সঙ্গে শুধু কিবোর্ড দিয়ে একটি শপিং টেস্ট।
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-এর অ্যাসেট বা স্ক্রিপ্ট

এই সাইটের জন্য চেক

সর্বজনীন চেক: অ্যাক্সেসিবিলিটি, SEO, স্পিড, নিরাপত্তা ও ইমেইল
ই-কমার্স মডিউল: কালেকশন, প্রোডাক্ট ও কার্ট পেজ, এবং চেকআউট বাটন পর্যন্ত একটি কিবোর্ড শপিং জার্নি
Shopify নোট: থিম ও অ্যাডমিনে সংশোধনের ধাপ; প্ল্যাটফর্ম-নিয়ন্ত্রিত হেডার ও কুকি রেফারেন্সের জন্য দেখানো হয়

কিবোর্ড শপিং জার্নি

আমরা শুধু কিবোর্ড (Tab, Shift+Tab, Enter, Space, Escape) দিয়ে কেনাকাটা করার চেষ্টা করেছি, ঠিক যেভাবে মাউস ব্যবহার করতে পারেন না এমন মানুষ করেন। আমরা একটি অস্থায়ী সেশনে কার্টে একটি আইটেম যোগ করি এবং চেকআউট বাটনে থেমে যাই: আমরা কখনো চেকআউটে ঢুকি না বা ব্যক্তিগত বা পেমেন্টের তথ্য টাইপ করি না। লক্ষ্য: শুধু কিবোর্ড দিয়ে হোম পেজ থেকে চেকআউট বাটনে পৌঁছানো।

01প্রধান নেভিগেশনে পৌঁছানো
উত্তীর্ণ
21 বার Tab চাপার পর ফোকাস নেভিগেশনে “Shop”-এ পৌঁছেছে।
প্রত্যাশিত: হোম পেজের শুরু থেকে Tab চাপলে প্রধান নেভিগেশনের লিংকগুলোতে পৌঁছানো যায়।
- নোট: আমরা “Accept all”-এ Enter চাপা পর্যন্ত একটি কুকি ব্যানার কিবোর্ড ফোকাস আটকে রেখেছিল।
সমস্যাটি নিজে কীভাবে দেখবেন
https://harborandpine.example/
1. হোম পেজ খুলুন।
2. ব্রাউজারের অ্যাড্রেস বারে ক্লিক করুন, তারপর বারবার Tab চাপুন (Shift+Tab চাপলে পেছনে যায়)।
আমরা যে ফোকাস ক্রম দেখেছি
“Shop”
02কালেকশন থেকে একটি প্রোডাক্ট খোলা
উত্তীর্ণ
9 বার Tab চাপার পর ফোকাস “Trail Daypack 22L”-এ পৌঁছেছে, এবং Enter চাপলে /products/trail-daypack খুলেছে।
প্রত্যাশিত: Tab চেপে কালেকশন গ্রিডের একটি প্রোডাক্টে পৌঁছানো যায়, এবং Enter চাপলে তার পেজ খোলে।
সমস্যাটি নিজে কীভাবে দেখবেন
https://harborandpine.example/collections/all
1. /collections/all খুলুন।
2. গ্রিডের একটি প্রোডাক্ট হাইলাইট না হওয়া পর্যন্ত 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 কিবোর্ড · আস্থার মাত্রা: উচ্চ
অপশন ও পরিমাণ বেছে নেওয়া: ব্যর্থ এলিমেন্টটি চিহ্নিত
সমস্যাটি নিজে কীভাবে দেখবেন
https://harborandpine.example/products/trail-daypack
1. /products/trail-daypack খুলুন।
2. পেজের শুরু থেকে 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 স্ট্যাটাস মেসেজ · আস্থার মাত্রা: মাঝারি
কিবোর্ড দিয়ে কার্টে যোগ করা: এই ধাপের পেজ
সমস্যাটি নিজে কীভাবে দেখবেন
https://harborandpine.example/products/trail-daypack
1. /products/trail-daypack খুলুন।
2. ‘কার্টে যোগ করুন’ ফোকাস না পাওয়া পর্যন্ত Tab চাপুন, তারপর Enter চাপুন।
3. একটি স্ক্রিন রিডার চালু করে (VoiceOver: Cmd+F5) শুনে দেখুন নিশ্চিতকরণ ঘোষণা করা হয় কি না।
05কার্ট পরিবর্তন করে চেকআউটে পৌঁছানো
উত্তীর্ণ
12 বার Tab চেপে কার্টের 4টি কন্ট্রোলের সবগুলোতে এবং চেকআউট বাটনে (“Check out”) পৌঁছানো গেছে। আমরা বাটনটি চাপিনি।
প্রত্যাশিত: পরিমাণের ফিল্ড, সরানোর বাটন ও চেকআউট বাটন, সবগুলোতেই Tab দিয়ে পৌঁছানো যায়।
সমস্যাটি নিজে কীভাবে দেখবেন
https://harborandpine.example/cart
1. যেকোনো একটি প্রোডাক্ট কার্টে যোগ করুন এবং কার্ট পেজটি খুলুন।
2. 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.”
বিকল্প লেখা ছাড়া ছবি. পরীক্ষিত 5টি পেজের মধ্যে 3টিতে 10 বার পাওয়া গেছে।
image-alt
টেস্টে পাওয়া গেছে
“Text has insufficient color contrast against its background, including sale badges and prices.”
কম রঙের কনট্রাস্ট. পরীক্ষিত 5টি পেজের মধ্যে 5টিতে 16 বার পাওয়া গেছে।
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.”
লেবেল ছাড়া ফর্ম ফিল্ড. পরীক্ষিত 5টি পেজের মধ্যে 3টিতে 4 বার পাওয়া গেছে।
select-name, label
টেস্টে পাওয়া গেছে
“Product videos do not have captions.”
ভিডিও ও অডিওর ক্যাপশন. স্বয়ংক্রিয় স্ক্যান ক্যাপশন বিচার করতে পারে না। প্রতিটি প্রোডাক্ট বা ব্র্যান্ড ভিডিওতে সঠিক ক্যাপশন ও ট্রান্সক্রিপ্ট আছে কি না যাচাই করুন।
ম্যানুয়াল চেক
“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	পেজের সব কনটেন্ট ল্যান্ডমার্কের ভেতরে থাকা উচিত	নিশ্চিত	ভালো চর্চা	18	থিম ডেভেলপার	2026-11-23
P3	হেডিং লেভেল একবারে শুধু এক ধাপ বাড়া উচিত	নিশ্চিত	ভালো চর্চা	7	থিম ডেভেলপার	2026-11-23

প্রতিটি সমস্যা কীভাবে ঠিক করবেন

P1সংকটপূর্ণনিশ্চিত ব্যর্থতাWCAG 2.1.2

কিবোর্ড ফোকাস কুকি ব্যানারে আটকে থাকে

কাজের পরিমাণ: মাঝারি · দায়িত্বে: অ্যাপের নির্মাতা · 2.1.2 কিবোর্ড ট্র্যাপ নেই

কিবোর্ড ব্যবহারকারী Tab চাপলে ফোকাস কয়েকটি এলিমেন্টের মধ্যেই ঘুরতে থাকে এবং পেজের বাকি অংশে কখনো পৌঁছায় না।

ফোকাস আটকে থাকলে শুধু কিবোর্ড ব্যবহারকারী ও স্ক্রিন রিডার ব্যবহারকারীরা একেবারেই কেনাকাটা করতে পারেন না (WCAG 2.1.2 No Keyboard Trap)।

প্রমাণ

যেভাবে পাওয়া গেছে: কিবোর্ড টেস্ট (হোম পেজ জুড়ে Tab চাপা)
অবস্থা · আস্থার মাত্রা: নিশ্চিত ব্যর্থতা · উচ্চ
শনাক্তের তারিখ: 24 সেপ, 2026 (UTC)
কোথায়: 1টি পেজ জুড়ে 1 বার

প্রত্যাশিত: Tab চাপলে ফোকাস পেজের প্রতিটি ইন্টারঅ্যাকটিভ এলিমেন্ট পেরিয়ে পেজের বাকি অংশে এগিয়ে যায়।

দেখা গেছে: 40 বার Tab চাপার পরও ফোকাস এগুলোর মধ্যেই ঘুরছিল: Settings, Accept all।

সমস্যাটি নিজে কীভাবে দেখবেন

হোম পেজ খুলুন।
অ্যাড্রেস বারে ক্লিক করুন, তারপর বারবার Tab চাপুন।
ফোকাস বারবার একই কয়েকটি এলিমেন্টে ফিরে আসে।

ব্যর্থ এলিমেন্ট (6টি দেখানো হয়েছে)

button#cc-settings

Settings

button#cc-accept.primary

Accept all

button#cc-settings

Settings

button#cc-accept.primary

Accept all

button#cc-settings

Settings

button#cc-accept.primary

Accept all

প্রভাবিত পেজ (1)

https://harborandpine.example/

কীভাবে ঠিক করবেন

সাধারণ নির্দেশনা

আপনার কুকি বা সম্মতি ব্যানার অ্যাপের সেটিংসে অ্যাক্সেসিবিলিটি বা ফোকাস-ট্র্যাপ সংক্রান্ত কোনো অপশন আছে কি না দেখুন, অথবা নির্মাতাকে এটি ঠিক করতে বলুন।
একটি মোডাল শুধু খোলা থাকার সময়ই ফোকাস নিজের ভেতরে রাখতে পারে, এবং এটিকে অবশ্যই Escape কী দিয়ে বন্ধ হতে হবে ও ফোকাস যেখান থেকে এসেছিল সেখানে ফিরিয়ে দিতে হবে।

AI দিয়ে ঠিক করুনপ্রম্পটটি দেখুন

এটি আপনার থিম ফাইলের সঙ্গে ChatGPT, Claude, Cursor বা Copilot-এ পেস্ট করুন। প্রকাশ করার আগে পরিবর্তনটি যাচাই করে নিন।

আমি harborandpine.example-এ একটি Shopify স্টোর (Online Store 2.0 থিম, Liquid টেমপ্লেট) চালাই। একটি অ্যাক্সেসিবিলিটি টেস্টে এই সমস্যাটি পাওয়া গেছে, এবং আমি আমার থিমে এটি ঠিক করতে চাই।

সমস্যা: কিবোর্ড ফোকাস কুকি ব্যানারে আটকে থাকে (WCAG 2.1.2)।
কোথায়: 1টি পেজ জুড়ে 1 বার, যেমন /।

ব্রাউজার যেভাবে রেন্ডার করেছে, সেভাবে একটি ব্যর্থ এলিমেন্ট:
```html
Settings
```

কেন এটি গুরুত্বপূর্ণ: ফোকাস আটকে থাকলে শুধু কিবোর্ড ব্যবহারকারী ও স্ক্রিন রিডার ব্যবহারকারীরা একেবারেই কেনাকাটা করতে পারেন না (WCAG 2.1.2 No Keyboard Trap)।

যা বদলাতে হবে:
- আপনার কুকি বা সম্মতি ব্যানার অ্যাপের সেটিংসে অ্যাক্সেসিবিলিটি বা ফোকাস-ট্র্যাপ সংক্রান্ত কোনো অপশন আছে কি না দেখুন, অথবা নির্মাতাকে এটি ঠিক করতে বলুন।
- একটি মোডাল শুধু খোলা থাকার সময়ই ফোকাস নিজের ভেতরে রাখতে পারে, এবং এটিকে অবশ্যই Escape কী দিয়ে বন্ধ হতে হবে ও ফোকাস যেখান থেকে এসেছিল সেখানে ফিরিয়ে দিতে হবে।

আপনার উত্তরের নিয়ম:
- হুবহু পরিবর্তনটি আগে ও পরে হিসেবে দেখান, এবং কোন ফাইল বা সেটিংয়ে এটি যাবে তা উল্লেখ করুন। আগে আমার ফাইল দেখতে হলে আমাকে সেটি পেস্ট করতে বলুন।
- ভিজ্যুয়াল ডিজাইন ও বিদ্যমান সব আচরণ একই রাখুন।
- প্রোডাক্টের নাম, দাম বা লেখা বানিয়ে দেবেন না; এমন প্লেসহোল্ডার ব্যবহার করুন যা আমি পূরণ করতে পারি।
- শেষে জানান, আমি নিজে কীভাবে সংশোধনটি যাচাই করতে পারি।
- কিবোর্ড ও স্ক্রিন রিডার দিয়ে এটি কীভাবে নিশ্চিত করা যায়, তা-ও জানান।

আপনার সংশোধন যাচাই করুন

হোম পেজ লোড করুন, বারবার Tab চাপুন এবং নিশ্চিত হন যে ফোকাস প্রধান নেভিগেশন ও কনটেন্টে পৌঁছায়।

একটি স্বয়ংক্রিয় কিবোর্ড পরীক্ষায় শনাক্ত; হাতে যাচাই করে নিশ্চিত হন।

P1সংকটপূর্ণনিশ্চিত ব্যর্থতাWCAG 2.1.1

কিবোর্ড দিয়ে প্রোডাক্টের অপশন বেছে নেওয়া যায় না

কাজের পরিমাণ: মাঝারি · দায়িত্বে: থিম ডেভেলপার · 2.1.1 কিবোর্ড

সাইজ, রং বা ভ্যারিয়েন্টের অপশন মাউসে সাড়া দেয়, কিন্তু কিবোর্ড ফোকাস পায় না, তাই কিবোর্ড ব্যবহারকারীরা কোনো ভ্যারিয়েন্ট বেছে নিতে পারেন না।

শুধু কিবোর্ড ব্যবহারকারী ক্রেতারা, যাঁদের মধ্যে অনেক স্ক্রিন রিডার ব্যবহারকারীও আছেন, এই ধাপ পেরোতে পারেন না (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>) দিয়ে অপশন পিকার তৈরি করুন; লেবেলটিকেই সোয়াচ হিসেবে স্টাইল করুন।
কাস্টম এলিমেন্ট রাখলে প্রতিটি অপশনের দরকার tabindex="0", একটি role="radiogroup"-এর ভেতরে aria-checked সহ role="radio", এবং অ্যারো কী ও 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 দিয়ে পৌঁছানো যায় এবং অ্যারো কী দিয়ে বদলানো যায়; লেবেলে আপনার সোয়াচের স্টাইল বজায় থাকে। আপনার নিজের অপশনের নাম ও মান ব্যবহার করুন।

AI দিয়ে ঠিক করুনপ্রম্পটটি দেখুন

আমি harborandpine.example-এ একটি Shopify স্টোর (Online Store 2.0 থিম, Liquid টেমপ্লেট) চালাই। একটি অ্যাক্সেসিবিলিটি টেস্টে এই সমস্যাটি পাওয়া গেছে, এবং আমি আমার থিমে এটি ঠিক করতে চাই।

সমস্যা: কিবোর্ড দিয়ে প্রোডাক্টের অপশন বেছে নেওয়া যায় না (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>) দিয়ে অপশন পিকার তৈরি করুন; লেবেলটিকেই সোয়াচ হিসেবে স্টাইল করুন।
- কাস্টম এলিমেন্ট রাখলে প্রতিটি অপশনের দরকার tabindex="0", একটি role="radiogroup"-এর ভেতরে aria-checked সহ role="radio", এবং অ্যারো কী ও 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>
```

আপনার উত্তরের নিয়ম:
- হুবহু পরিবর্তনটি আগে ও পরে হিসেবে দেখান, এবং কোন ফাইল বা সেটিংয়ে এটি যাবে তা উল্লেখ করুন। আগে আমার ফাইল দেখতে হলে আমাকে সেটি পেস্ট করতে বলুন।
- ভিজ্যুয়াল ডিজাইন ও বিদ্যমান সব আচরণ একই রাখুন।
- প্রোডাক্টের নাম, দাম বা লেখা বানিয়ে দেবেন না; এমন প্লেসহোল্ডার ব্যবহার করুন যা আমি পূরণ করতে পারি।
- শেষে জানান, আমি নিজে কীভাবে সংশোধনটি যাচাই করতে পারি।
- কিবোর্ড ও স্ক্রিন রিডার দিয়ে এটি কীভাবে নিশ্চিত করা যায়, তা-ও জানান।

আপনার সংশোধন যাচাই করুন

সমস্যাটি দেখার ধাপগুলো শুধু কিবোর্ড দিয়ে আবার করুন।
এই রিপোর্ট থেকে একটি রি-টেস্টের অনুরোধ করুন: জার্নিটি আবার চলবে।

P1সংকটপূর্ণনিশ্চিত ব্যর্থতাWCAG 4.1.2

বাটনে বোঝা যায় এমন লেখা থাকতে হবে

কাজের পরিমাণ: অল্প · দায়িত্বে: থিম ডেভেলপার · 4.1.2 নাম, রোল, মান

কিছু বাটনের কোনো অ্যাক্সেসিবল নাম নেই, তাই স্ক্রিন রিডার ব্যবহারকারীরা শুধু ‘বাটন’ শোনেন।

WCAG 4.1.2 অনুযায়ী প্রতিটি কন্ট্রোলের একটি নাম থাকতে হবে। নামহীন বাটনের মধ্যে প্রায়ই থাকে পরিমাণ বাড়ানো-কমানোর বাটন, বন্ধ করার বাটন ও স্লাইডারের তীরচিহ্ন।

প্রমাণ

যেভাবে পাওয়া গেছে: axe-core স্বয়ংক্রিয় নিয়ম
অবস্থা · আস্থার মাত্রা: নিশ্চিত ব্যর্থতা · উচ্চ
শনাক্তের তারিখ: 24 সেপ, 2026 (UTC)
কোথায়: 9টি পেজ জুড়ে 41 বার

প্রত্যাশিত: বাটনে বোঝা যায় এমন লেখা থাকতে হবে

দেখা গেছে: এলিমেন্টের ভেতরে স্ক্রিন রিডারের কাছে দৃশ্যমান কোনো লেখা নেই। aria-label অ্যাট্রিবিউট নেই, অথবা খালি। aria-labelledby অ্যাট্রিবিউট নেই, অথবা এটি এমন এলিমেন্ট নির্দেশ করে যা নেই বা খালি। এলিমেন্টে কোনো title অ্যাট্রিবিউট নেই। এলিমেন্টের কোনো অন্তর্নিহিত (implicit, এলিমেন্টকে ঘিরে থাকা) <label> নেই। এলিমেন্টের কোনো স্পষ্ট (explicit) <label> নেই। role="none" বা role="presentation" দিয়ে এলিমেন্টের ডিফল্ট সেমান্টিক্স বদলানো হয়নি।

বাটনে বোঝা যায় এমন লেখা থাকতে হবে: /-এ চিহ্নিত এলিমেন্ট

বাটনে বোঝা যায় এমন লেখা থাকতে হবে: /collections/all-এ চিহ্নিত এলিমেন্ট

সমস্যাটি নিজে কীভাবে দেখবেন

Chrome বা Edge-এ https://harborandpine.example/ খুলুন।
DevTools (F12) › Elements খুলুন, Ctrl+F (Mac-এ Cmd+F) চাপুন এবং এটি খুঁজুন: .icons > button[type="button"]
DevTools-এর Accessibility প্যানে এলিমেন্টের হিসাব করা Name খালি দেখা যায়।
অথবা পেজে ফ্রি axe DevTools ব্রাউজার এক্সটেনশন চালান: এটি সমস্যাটিকে “button-name” হিসেবে দেখায়।

ব্যর্থ এলিমেন্ট (4টি দেখানো হয়েছে)

.icons > button[type="button"]

<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>

.thumbs > button:nth-child(1)

<button type="button"><img src="/img/daypack.svg"></button>

.thumbs > button:nth-child(2)

<button type="button"><img src="/img/jacket.svg"></button>

.thumbs > button:nth-child(3)

<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

কীভাবে ঠিক করবেন

আপনার পেজের মার্কআপ থেকে তৈরি কোড

নিচের উদাহরণগুলোতে বাটনগুলো খুঁজে নিন।
দৃশ্যমান লেখা, চোখে-না-দেখা (visually hidden) লেখা, অথবা বাটনটি কী করে তা জানানো একটি aria-label যোগ করুন (যেমন aria-label="Close" বা aria-label="Increase quantity")।

কোড

আগে · আমরা যা পেয়েছি · আপনার থিমের কোড (দেখানো মার্কআপটি খুঁজে নিন)

<button type="button">…</button>

পরে · ব্যর্থ এলিমেন্ট থেকে তৈরি

<button type="button" aria-label="[What this button does]">…</button>

বন্ধনীর লেখার জায়গায় বাটনটি কী করে তা লিখুন। বাটনের ভেতরে দৃশ্যমান বা চোখে-না-দেখা (visually hidden) লেখাও কাজ করে।

আগে · আমরা যা পেয়েছি · আপনার থিমের কোড (দেখানো মার্কআপটি খুঁজে নিন)

<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>

AI দিয়ে ঠিক করুনপ্রম্পটটি দেখুন

আমি harborandpine.example-এ একটি Shopify স্টোর (Online Store 2.0 থিম, Liquid টেমপ্লেট) চালাই। একটি অ্যাক্সেসিবিলিটি টেস্টে এই সমস্যাটি পাওয়া গেছে, এবং আমি আমার থিমে এটি ঠিক করতে চাই।

সমস্যা: বাটনে বোঝা যায় এমন লেখা থাকতে হবে (WCAG 4.1.2)।
কোথায়: 9টি পেজ জুড়ে 41 বার, যেমন /, /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 অনুযায়ী প্রতিটি কন্ট্রোলের একটি নাম থাকতে হবে। নামহীন বাটনের মধ্যে প্রায়ই থাকে পরিমাণ বাড়ানো-কমানোর বাটন, বন্ধ করার বাটন ও স্লাইডারের তীরচিহ্ন।

যা বদলাতে হবে:
- নিচের উদাহরণগুলোতে বাটনগুলো খুঁজে নিন।
- দৃশ্যমান লেখা, চোখে-না-দেখা (visually hidden) লেখা, অথবা বাটনটি কী করে তা জানানো একটি aria-label যোগ করুন (যেমন aria-label="Close" বা aria-label="Increase quantity")।

একটি প্রস্তাবিত পরিবর্তন (আপনার থিমের কোড (দেখানো মার্কআপটি খুঁজে নিন)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

আপনার উত্তরের নিয়ম:
- হুবহু পরিবর্তনটি আগে ও পরে হিসেবে দেখান, এবং কোন ফাইল বা সেটিংয়ে এটি যাবে তা উল্লেখ করুন। আগে আমার ফাইল দেখতে হলে আমাকে সেটি পেস্ট করতে বলুন।
- ভিজ্যুয়াল ডিজাইন ও বিদ্যমান সব আচরণ একই রাখুন।
- প্রোডাক্টের নাম, দাম বা লেখা বানিয়ে দেবেন না; এমন প্লেসহোল্ডার ব্যবহার করুন যা আমি পূরণ করতে পারি।
- শেষে জানান, আমি নিজে কীভাবে সংশোধনটি যাচাই করতে পারি।
- কিবোর্ড ও স্ক্রিন রিডার দিয়ে এটি কীভাবে নিশ্চিত করা যায়, তা-ও জানান।

আপনার সংশোধন যাচাই করুন

প্রভাবিত পেজগুলো আবার স্ক্যান করুন।
স্ক্রিন রিডার দিয়ে বাটনগুলো যাচাই করুন।

বিস্তারিত নির্দেশনা: https://dequeuniversity.com/rules/axe/4.13/button-name?application=playwright

P1সংকটপূর্ণনিশ্চিত ব্যর্থতাWCAG 1.1.1

ছবিতে বিকল্প লেখা থাকতে হবে

কাজের পরিমাণ: মাঝারি · দায়িত্বে: কনটেন্ট এডিটর · 1.1.1 নন-টেক্সট কনটেন্ট

ছবিগুলোতে বিকল্প লেখা নেই, তাই স্ক্রিন রিডার ব্যবহারকারীরা জানতে পারেন না ছবিতে কী আছে।

WCAG 1.1.1 অনুযায়ী অর্থবহ ছবির জন্য বিকল্প লেখা থাকতে হবে। এটি না থাকলে স্ক্রিন রিডার ব্যবহারকারী বুঝতে পারেন না ছবিতে কোন প্রোডাক্ট দেখানো হয়েছে।

প্রমাণ

যেভাবে পাওয়া গেছে: axe-core স্বয়ংক্রিয় নিয়ম
অবস্থা · আস্থার মাত্রা: নিশ্চিত ব্যর্থতা · উচ্চ
শনাক্তের তারিখ: 24 সেপ, 2026 (UTC)
কোথায়: 7টি পেজ জুড়ে 22 বার

প্রত্যাশিত: ছবিতে বিকল্প লেখা থাকতে হবে

দেখা গেছে: এলিমেন্টে কোনো alt অ্যাট্রিবিউট নেই। aria-label অ্যাট্রিবিউট নেই, অথবা খালি। aria-labelledby অ্যাট্রিবিউট নেই, অথবা এটি এমন এলিমেন্ট নির্দেশ করে যা নেই বা খালি। এলিমেন্টে কোনো title অ্যাট্রিবিউট নেই। role="none" বা role="presentation" দিয়ে এলিমেন্টের ডিফল্ট সেমান্টিক্স বদলানো হয়নি।

ছবিতে বিকল্প লেখা থাকতে হবে: /-এ চিহ্নিত এলিমেন্ট

ছবিতে বিকল্প লেখা থাকতে হবে: /collections/all-এ চিহ্নিত এলিমেন্ট

সমস্যাটি নিজে কীভাবে দেখবেন

Chrome বা Edge-এ https://harborandpine.example/ খুলুন।
DevTools (F12) › Elements খুলুন, Ctrl+F (Mac-এ Cmd+F) চাপুন এবং এটি খুঁজুন: img[src$="hero-photo.jpg"]
DevTools-এর Accessibility প্যানে এলিমেন্টের হিসাব করা Name খালি দেখা যায়।
অথবা পেজে ফ্রি axe DevTools ব্রাউজার এক্সটেনশন চালান: এটি সমস্যাটিকে “image-alt” হিসেবে দেখায়।

ব্যর্থ এলিমেন্ট (4টি দেখানো হয়েছে)

img[src$="hero-photo.jpg"]

<img src="/img/hero-photo.jpg" loading="lazy">

img[src$="mug.svg"]

<img src="/img/mug.svg">

img[src$="beanie.svg"]

<img src="/img/beanie.svg">

img[src$="jacket.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

কীভাবে ঠিক করবেন

আপনার পেজের মার্কআপ থেকে তৈরি কোড

Shopify অ্যাডমিনে Products > [product] > Media খুলুন, প্রতিটি ছবিতে ক্লিক করুন এবং ‘Alt text’ পূরণ করুন। সেকশনের ছবির জন্য Online Store > Themes > Customize খুলুন এবং সেকশন সেটিংসে ছবির alt টেক্সট সেট করুন।
একজন ক্রেতার কাছে যা গুরুত্বপূর্ণ তা বর্ণনা করুন: প্রোডাক্টের নাম, রং এবং কোন দিক থেকে দেখানো হয়েছে (যেমন ‘জলপাই রঙের ক্যানভাস টোট ব্যাগ, সামনের দিক’)।
সাজসজ্জার ছবিতে খালি alt অ্যাট্রিবিউট (alt="") থাকা উচিত, যাতে স্ক্রিন রিডার সেগুলো এড়িয়ে যায়।

কোড

আগে · আমরা যা পেয়েছি · প্রোডাক্টের ছবি: Shopify admin › Products › Media › Alt text। অন্যান্য ছবি: আপনার থিমের কোড

<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]">

<img src="/img/beanie.svg">

পরে · ব্যর্থ এলিমেন্ট থেকে তৈরি

<img src="/img/beanie.svg" alt="[Describe the image for a shopper]">

<img src="/img/jacket.svg">

পরে · ব্যর্থ এলিমেন্ট থেকে তৈরি

<img src="/img/jacket.svg" alt="[Describe the image for a shopper]">

AI দিয়ে ঠিক করুনপ্রম্পটটি দেখুন

আমি harborandpine.example-এ একটি Shopify স্টোর (Online Store 2.0 থিম, Liquid টেমপ্লেট) চালাই। একটি অ্যাক্সেসিবিলিটি টেস্টে এই সমস্যাটি পাওয়া গেছে, এবং আমি আমার থিমে এটি ঠিক করতে চাই।

সমস্যা: ছবিতে বিকল্প লেখা থাকতে হবে (WCAG 1.1.1)।
কোথায়: 7টি পেজ জুড়ে 22 বার, যেমন /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie।

ব্রাউজার যেভাবে রেন্ডার করেছে, সেভাবে একটি ব্যর্থ এলিমেন্ট:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

কেন এটি গুরুত্বপূর্ণ: WCAG 1.1.1 অনুযায়ী অর্থবহ ছবির জন্য বিকল্প লেখা থাকতে হবে। এটি না থাকলে স্ক্রিন রিডার ব্যবহারকারী বুঝতে পারেন না ছবিতে কোন প্রোডাক্ট দেখানো হয়েছে।

যা বদলাতে হবে:
- Shopify অ্যাডমিনে Products > [product] > Media খুলুন, প্রতিটি ছবিতে ক্লিক করুন এবং ‘Alt text’ পূরণ করুন। সেকশনের ছবির জন্য Online Store > Themes > Customize খুলুন এবং সেকশন সেটিংসে ছবির alt টেক্সট সেট করুন।
- একজন ক্রেতার কাছে যা গুরুত্বপূর্ণ তা বর্ণনা করুন: প্রোডাক্টের নাম, রং এবং কোন দিক থেকে দেখানো হয়েছে (যেমন ‘জলপাই রঙের ক্যানভাস টোট ব্যাগ, সামনের দিক’)।
- সাজসজ্জার ছবিতে খালি alt অ্যাট্রিবিউট (alt="") থাকা উচিত, যাতে স্ক্রিন রিডার সেগুলো এড়িয়ে যায়।

একটি প্রস্তাবিত পরিবর্তন (প্রোডাক্টের ছবি: Shopify admin › Products › Media › Alt text। অন্যান্য ছবি: আপনার থিমের কোড):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

আপনার উত্তরের নিয়ম:
- হুবহু পরিবর্তনটি আগে ও পরে হিসেবে দেখান, এবং কোন ফাইল বা সেটিংয়ে এটি যাবে তা উল্লেখ করুন। আগে আমার ফাইল দেখতে হলে আমাকে সেটি পেস্ট করতে বলুন।
- ভিজ্যুয়াল ডিজাইন ও বিদ্যমান সব আচরণ একই রাখুন।
- প্রোডাক্টের নাম, দাম বা লেখা বানিয়ে দেবেন না; এমন প্লেসহোল্ডার ব্যবহার করুন যা আমি পূরণ করতে পারি।
- শেষে জানান, আমি নিজে কীভাবে সংশোধনটি যাচাই করতে পারি।
- কিবোর্ড ও স্ক্রিন রিডার দিয়ে এটি কীভাবে নিশ্চিত করা যায়, তা-ও জানান।

আপনার সংশোধন যাচাই করুন

প্রভাবিত পেজগুলো আবার স্ক্যান করুন।
প্রোডাক্টের ছবিগুলো কীভাবে ঘোষণা করা হয় তা শুনতে একটি স্ক্রিন রিডার ব্যবহার করুন (VoiceOver: Mac-এ Cmd+F5)।

বিস্তারিত নির্দেশনা: https://dequeuniversity.com/rules/axe/4.13/image-alt?application=playwright

P1সংকটপূর্ণনিশ্চিত ব্যর্থতাWCAG 4.1.2

ফর্ম এলিমেন্টে লেবেল থাকতে হবে

কাজের পরিমাণ: অল্প · দায়িত্বে: থিম ডেভেলপার · 4.1.2 নাম, রোল, মান

কিছু ফর্ম ফিল্ডের কোনো লেবেল নেই, তাই স্ক্রিন রিডার ব্যবহারকারীরা জানেন না কী লিখতে হবে।

WCAG 1.3.1, 3.3.2 ও 4.1.2 অনুযায়ী ফর্ম ফিল্ডে লেবেল থাকতে হবে। নিউজলেটার সাইন-আপ ও সার্চ ফিল্ডে এই সমস্যা প্রায়ই দেখা যায়।

প্রমাণ

যেভাবে পাওয়া গেছে: axe-core স্বয়ংক্রিয় নিয়ম
অবস্থা · আস্থার মাত্রা: নিশ্চিত ব্যর্থতা · উচ্চ
শনাক্তের তারিখ: 24 সেপ, 2026 (UTC)
কোথায়: 6টি পেজ জুড়ে 7 বার

প্রত্যাশিত: ফর্ম এলিমেন্টে লেবেল থাকতে হবে

দেখা গেছে: এলিমেন্টের কোনো অন্তর্নিহিত (implicit, এলিমেন্টকে ঘিরে থাকা) <label> নেই। এলিমেন্টের কোনো স্পষ্ট (explicit) <label> নেই। aria-label অ্যাট্রিবিউট নেই, অথবা খালি। aria-labelledby অ্যাট্রিবিউট নেই, অথবা এটি এমন এলিমেন্ট নির্দেশ করে যা নেই বা খালি। এলিমেন্টে কোনো title অ্যাট্রিবিউট নেই। এলিমেন্টে কোনো placeholder অ্যাট্রিবিউট নেই। role="none" বা role="presentation" দিয়ে এলিমেন্টের ডিফল্ট সেমান্টিক্স বদলানো হয়নি।

ফর্ম এলিমেন্টে লেবেল থাকতে হবে: /products/trail-daypack-এ চিহ্নিত এলিমেন্ট

ফর্ম এলিমেন্টে লেবেল থাকতে হবে: /cart-এ চিহ্নিত এলিমেন্ট

সমস্যাটি নিজে কীভাবে দেখবেন

Chrome বা Edge-এ https://harborandpine.example/products/trail-daypack খুলুন।
DevTools (F12) › Elements খুলুন, Ctrl+F (Mac-এ Cmd+F) চাপুন এবং এটি খুঁজুন: input
DevTools-এর Accessibility প্যানে এলিমেন্টের হিসাব করা Name খালি দেখা যায়।
অথবা পেজে ফ্রি axe DevTools ব্রাউজার এক্সটেনশন চালান: এটি সমস্যাটিকে “label” হিসেবে দেখায়।

ব্যর্থ এলিমেন্ট (2টি দেখানো হয়েছে)

input

<input type="number" value="1" min="1">

input[value="2"]

<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

কীভাবে ঠিক করবেন

আপনার পেজের মার্কআপ থেকে তৈরি কোড

প্রতিটি ফিল্ডে একটি <label for="field-id"> এলিমেন্ট দিন, অথবা অন্তত একটি aria-label।
শুধু প্লেসহোল্ডার টেক্সট লেবেল হিসেবে গণ্য হয় না।

কোড

আগে · আমরা যা পেয়েছি · আপনার থিমের কোড (দেখানো মার্কআপটি খুঁজে নিন)

<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">

AI দিয়ে ঠিক করুনপ্রম্পটটি দেখুন

আমি harborandpine.example-এ একটি Shopify স্টোর (Online Store 2.0 থিম, Liquid টেমপ্লেট) চালাই। একটি অ্যাক্সেসিবিলিটি টেস্টে এই সমস্যাটি পাওয়া গেছে, এবং আমি আমার থিমে এটি ঠিক করতে চাই।

সমস্যা: ফর্ম এলিমেন্টে লেবেল থাকতে হবে (WCAG 4.1.2)।
কোথায়: 6টি পেজ জুড়ে 7 বার, যেমন /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug।

ব্রাউজার যেভাবে রেন্ডার করেছে, সেভাবে একটি ব্যর্থ এলিমেন্ট:
```html
<input type="number" value="1" min="1">
```

কেন এটি গুরুত্বপূর্ণ: WCAG 1.3.1, 3.3.2 ও 4.1.2 অনুযায়ী ফর্ম ফিল্ডে লেবেল থাকতে হবে। নিউজলেটার সাইন-আপ ও সার্চ ফিল্ডে এই সমস্যা প্রায়ই দেখা যায়।

যা বদলাতে হবে:
- প্রতিটি ফিল্ডে একটি <label for="field-id"> এলিমেন্ট দিন, অথবা অন্তত একটি aria-label।
- শুধু প্লেসহোল্ডার টেক্সট লেবেল হিসেবে গণ্য হয় না।

একটি প্রস্তাবিত পরিবর্তন (আপনার থিমের কোড (দেখানো মার্কআপটি খুঁজে নিন)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

আপনার উত্তরের নিয়ম:
- হুবহু পরিবর্তনটি আগে ও পরে হিসেবে দেখান, এবং কোন ফাইল বা সেটিংয়ে এটি যাবে তা উল্লেখ করুন। আগে আমার ফাইল দেখতে হলে আমাকে সেটি পেস্ট করতে বলুন।
- ভিজ্যুয়াল ডিজাইন ও বিদ্যমান সব আচরণ একই রাখুন।
- প্রোডাক্টের নাম, দাম বা লেখা বানিয়ে দেবেন না; এমন প্লেসহোল্ডার ব্যবহার করুন যা আমি পূরণ করতে পারি।
- শেষে জানান, আমি নিজে কীভাবে সংশোধনটি যাচাই করতে পারি।
- কিবোর্ড ও স্ক্রিন রিডার দিয়ে এটি কীভাবে নিশ্চিত করা যায়, তা-ও জানান।

আপনার সংশোধন যাচাই করুন

আবার স্ক্যান করুন এবং নিশ্চিত হন যে label নিয়মটি আর ব্যর্থ হচ্ছে না।
প্রতিটি লেবেলে ক্লিক করে দেখুন সেটি তার ফিল্ডে ফোকাস নিয়ে যায় কি না।

বিস্তারিত নির্দেশনা: https://dequeuniversity.com/rules/axe/4.13/label?application=playwright

P1সংকটপূর্ণনিশ্চিত ব্যর্থতাWCAG 4.1.2

select এলিমেন্টের একটি অ্যাক্সেসিবল নাম থাকতে হবে

কাজের পরিমাণ: অল্প · দায়িত্বে: থিম ডেভেলপার · 4.1.2 নাম, রোল, মান

একটি ড্রপডাউনের (প্রায়ই সর্ট বা ভ্যারিয়েন্ট সিলেক্টর) কোনো লেবেল নেই।

WCAG 4.1.2 অনুযায়ী সিলেক্ট মেনুর একটি অ্যাক্সেসিবল নাম থাকতে হবে।

প্রমাণ

যেভাবে পাওয়া গেছে: axe-core স্বয়ংক্রিয় নিয়ম
অবস্থা · আস্থার মাত্রা: নিশ্চিত ব্যর্থতা · উচ্চ
শনাক্তের তারিখ: 24 সেপ, 2026 (UTC)
কোথায়: 1টি পেজ জুড়ে 1 বার

প্রত্যাশিত: select এলিমেন্টের একটি অ্যাক্সেসিবল নাম থাকতে হবে

দেখা গেছে: এলিমেন্টের কোনো অন্তর্নিহিত (implicit, এলিমেন্টকে ঘিরে থাকা) <label> নেই। এলিমেন্টের কোনো স্পষ্ট (explicit) <label> নেই। aria-label অ্যাট্রিবিউট নেই, অথবা খালি। aria-labelledby অ্যাট্রিবিউট নেই, অথবা এটি এমন এলিমেন্ট নির্দেশ করে যা নেই বা খালি। এলিমেন্টে কোনো title অ্যাট্রিবিউট নেই। role="none" বা role="presentation" দিয়ে এলিমেন্টের ডিফল্ট সেমান্টিক্স বদলানো হয়নি।

select এলিমেন্টের একটি অ্যাক্সেসিবল নাম থাকতে হবে: /collections/all-এ চিহ্নিত এলিমেন্ট

সমস্যাটি নিজে কীভাবে দেখবেন

Chrome বা Edge-এ https://harborandpine.example/collections/all খুলুন।
DevTools (F12) › Elements খুলুন, Ctrl+F (Mac-এ Cmd+F) চাপুন এবং এটি খুঁজুন: select
DevTools-এর Accessibility প্যানে এলিমেন্টের হিসাব করা Name খালি দেখা যায়।
অথবা পেজে ফ্রি axe DevTools ব্রাউজার এক্সটেনশন চালান: এটি সমস্যাটিকে “select-name” হিসেবে দেখায়।

ব্যর্থ এলিমেন্ট (1টি দেখানো হয়েছে)

select

<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>

প্রভাবিত পেজ (1)

https://harborandpine.example/collections/all

কীভাবে ঠিক করবেন

আপনার পেজের মার্কআপ থেকে তৈরি কোড

সিলেক্টের সঙ্গে যুক্ত একটি <label> যোগ করুন, অথবা aria-label="Sort by"-এর মতো একটি aria-label দিন।

কোড

আগে · আমরা যা পেয়েছি · আপনার থিমের কোড (দেখানো মার্কআপটি খুঁজে নিন)

<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> সবার জন্যই ভালো। বন্ধনীর লেখার জায়গায় ফিল্ডের লেবেল লিখুন।

AI দিয়ে ঠিক করুনপ্রম্পটটি দেখুন

আমি harborandpine.example-এ একটি Shopify স্টোর (Online Store 2.0 থিম, Liquid টেমপ্লেট) চালাই। একটি অ্যাক্সেসিবিলিটি টেস্টে এই সমস্যাটি পাওয়া গেছে, এবং আমি আমার থিমে এটি ঠিক করতে চাই।

সমস্যা: 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 অনুযায়ী সিলেক্ট মেনুর একটি অ্যাক্সেসিবল নাম থাকতে হবে।

যা বদলাতে হবে:
- সিলেক্টের সঙ্গে যুক্ত একটি <label> যোগ করুন, অথবা aria-label="Sort by"-এর মতো একটি aria-label দিন।

একটি প্রস্তাবিত পরিবর্তন (আপনার থিমের কোড (দেখানো মার্কআপটি খুঁজে নিন)):
```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

P1গুরুতরনিশ্চিত ব্যর্থতাWCAG 2.4.4WCAG 4.1.2

লিংকে বোঝা যায় এমন লেখা থাকতে হবে

কাজের পরিমাণ: অল্প · দায়িত্বে: থিম ডেভেলপার · 2.4.4 লিংকের উদ্দেশ্য (প্রসঙ্গসহ), 4.1.2 নাম, রোল, মান

কিছু লিংকে এমন কোনো লেখা নেই যা স্ক্রিন রিডার ঘোষণা করতে পারে; প্রায়ই এগুলো শুধু আইকনের লিংক, যেমন সোশ্যাল আইকন বা কার্ট আইকন।

WCAG 2.4.4 ও 4.1.2 অনুযায়ী লিংকের এমন একটি অ্যাক্সেসিবল নাম থাকতে হবে, যা তার উদ্দেশ্য বর্ণনা করে।

প্রমাণ

যেভাবে পাওয়া গেছে: axe-core স্বয়ংক্রিয় নিয়ম
অবস্থা · আস্থার মাত্রা: নিশ্চিত ব্যর্থতা · উচ্চ
শনাক্তের তারিখ: 24 সেপ, 2026 (UTC)
কোথায়: 9টি পেজ জুড়ে 36 বার

প্রত্যাশিত: লিংকে বোঝা যায় এমন লেখা থাকতে হবে

দেখা গেছে: এলিমেন্টটি Tab ক্রমে আছে, কিন্তু এর কোনো অ্যাক্সেসিবল লেখা নেই। এ ছাড়া: এলিমেন্টে স্ক্রিন রিডারের কাছে দৃশ্যমান কোনো লেখা নেই। aria-label অ্যাট্রিবিউট নেই, অথবা খালি। aria-labelledby অ্যাট্রিবিউট নেই, অথবা এটি এমন এলিমেন্ট নির্দেশ করে যা নেই বা খালি। এলিমেন্টে কোনো title অ্যাট্রিবিউট নেই।

লিংকে বোঝা যায় এমন লেখা থাকতে হবে: /-এ চিহ্নিত এলিমেন্ট

লিংকে বোঝা যায় এমন লেখা থাকতে হবে: /collections/all-এ চিহ্নিত এলিমেন্ট

সমস্যাটি নিজে কীভাবে দেখবেন

Chrome বা Edge-এ https://harborandpine.example/ খুলুন।
DevTools (F12) › Elements খুলুন, Ctrl+F (Mac-এ Cmd+F) চাপুন এবং এটি খুঁজুন: a[href$="cart"]
DevTools-এর Accessibility প্যানে এলিমেন্টের হিসাব করা Name খালি দেখা যায়।
অথবা পেজে ফ্রি axe DevTools ব্রাউজার এক্সটেনশন চালান: এটি সমস্যাটিকে “link-name” হিসেবে দেখায়।

ব্যর্থ এলিমেন্ট (4টি দেখানো হয়েছে)

a[href$="cart"]

<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>

.social > a:nth-child(1)

<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>

.social > a:nth-child(2)

<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>

.social > a:nth-child(3)

<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

কীভাবে ঠিক করবেন

আপনার পেজের মার্কআপ থেকে তৈরি কোড

নিচের উদাহরণগুলোতে লিংকগুলো খুঁজে নিন। বেশিরভাগই <a> ট্যাগের ভেতরের আইকন বা ছবি।
লিংকের ভেতরে চোখে-না-দেখা (visually hidden) লেখা যোগ করুন, অথবা aria-label="Instagram" বা aria-label="Cart"-এর মতো একটি aria-label দিন।
লিংকের ভেতরে ছবি থাকলে বরং ছবিটিকে অর্থবহ 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)” নাম দেয়, যা এর লিংক বা ক্লাস থেকে অনুমান করা। যাচাই করুন যে নামটি লিংকের কাজ বোঝায়।

AI দিয়ে ঠিক করুনপ্রম্পটটি দেখুন

আমি harborandpine.example-এ একটি Shopify স্টোর (Online Store 2.0 থিম, Liquid টেমপ্লেট) চালাই। একটি অ্যাক্সেসিবিলিটি টেস্টে এই সমস্যাটি পাওয়া গেছে, এবং আমি আমার থিমে এটি ঠিক করতে চাই।

সমস্যা: লিংকে বোঝা যায় এমন লেখা থাকতে হবে (WCAG 2.4.4, 4.1.2)।
কোথায়: 9টি পেজ জুড়ে 36 বার, যেমন /, /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="Instagram" বা aria-label="Cart"-এর মতো একটি aria-label দিন।
- লিংকের ভেতরে ছবি থাকলে বরং ছবিটিকে অর্থবহ alt টেক্সট দিন।

একটি প্রস্তাবিত পরিবর্তন (আপনার থিমের কোড (দেখানো মার্কআপটি খুঁজে নিন)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

আপনার উত্তরের নিয়ম:
- হুবহু পরিবর্তনটি আগে ও পরে হিসেবে দেখান, এবং কোন ফাইল বা সেটিংয়ে এটি যাবে তা উল্লেখ করুন। আগে আমার ফাইল দেখতে হলে আমাকে সেটি পেস্ট করতে বলুন।
- ভিজ্যুয়াল ডিজাইন ও বিদ্যমান সব আচরণ একই রাখুন।
- প্রোডাক্টের নাম, দাম বা লেখা বানিয়ে দেবেন না; এমন প্লেসহোল্ডার ব্যবহার করুন যা আমি পূরণ করতে পারি।
- শেষে জানান, আমি নিজে কীভাবে সংশোধনটি যাচাই করতে পারি।
- কিবোর্ড ও স্ক্রিন রিডার দিয়ে এটি কীভাবে নিশ্চিত করা যায়, তা-ও জানান।

আপনার সংশোধন যাচাই করুন

আবার স্ক্যান করুন এবং নিশ্চিত হন যে link-name আর নেই।
স্ক্রিন রিডার চালু রেখে Tab চেপে প্রতিটি লিংকে যান এবং তার নাম শুনুন।

বিস্তারিত নির্দেশনা: https://dequeuniversity.com/rules/axe/4.13/link-name?application=playwright

P1গুরুতরনিশ্চিত ব্যর্থতাWCAG 1.4.3

এলিমেন্টকে ন্যূনতম রঙের কনট্রাস্ট অনুপাতের সীমা পূরণ করতে হবে

কাজের পরিমাণ: অল্প · দায়িত্বে: স্টোরের মালিক (অ্যাডমিন সেটিংস) · 1.4.3 কনট্রাস্ট (ন্যূনতম)

কিছু লেখা তার পটভূমি থেকে যথেষ্ট আলাদা হয়ে চোখে পড়ে না, তাই কম দৃষ্টিশক্তির মানুষ সেটি পড়তে পারেন না।

WCAG 1.4.3 অনুযায়ী সাধারণ লেখার জন্য কনট্রাস্ট অনুপাত অন্তত 4.5:1 এবং বড় লেখার জন্য 3:1 হতে হবে। হালকা রঙের দাম, ব্যাজ ও ব্যানার কম দৃষ্টিশক্তির মানুষের পক্ষে পড়া কঠিন, আর উজ্জ্বল আলোয় সবার পক্ষেই।

প্রমাণ

যেভাবে পাওয়া গেছে: axe-core স্বয়ংক্রিয় নিয়ম
অবস্থা · আস্থার মাত্রা: নিশ্চিত ব্যর্থতা · উচ্চ
শনাক্তের তারিখ: 24 সেপ, 2026 (UTC)
কোথায়: 9টি পেজ জুড়ে 22 বার

প্রত্যাশিত: এলিমেন্টকে ন্যূনতম রঙের কনট্রাস্ট অনুপাতের সীমা পূরণ করতে হবে

দেখা গেছে: এলিমেন্টের রঙের কনট্রাস্ট 3.09, যা যথেষ্ট নয় (লেখার রং: #ffffff, পটভূমির রং: #e76f51, ফন্টের আকার: 9.8pt (13px), ফন্ট ওয়েট: normal)। প্রত্যাশিত কনট্রাস্ট অনুপাত 4.5:1।

এলিমেন্টকে ন্যূনতম রঙের কনট্রাস্ট অনুপাতের সীমা পূরণ করতে হবে: /-এ চিহ্নিত এলিমেন্ট

এলিমেন্টকে ন্যূনতম রঙের কনট্রাস্ট অনুপাতের সীমা পূরণ করতে হবে: /collections/all-এ চিহ্নিত এলিমেন্ট

সমস্যাটি নিজে কীভাবে দেখবেন

Chrome বা Edge-এ https://harborandpine.example/ খুলুন।
DevTools (F12) › Elements খুলুন, Ctrl+F (Mac-এ Cmd+F) চাপুন এবং এটি খুঁজুন: .announce
মাপা কনট্রাস্ট অনুপাত দেখতে Styles প্যানে এলিমেন্টের রঙের পাশের কালার সোয়াচে ক্লিক করুন।
অথবা পেজে ফ্রি axe DevTools ব্রাউজার এক্সটেনশন চালান: এটি সমস্যাটিকে “color-contrast” হিসেবে দেখায়।

ব্যর্থ এলিমেন্ট (4টি দেখানো হয়েছে)

.announce

<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>

article:nth-child(3) > .badge

<span class="badge">Sale</span>

article:nth-child(3) > .price > .compare

<span class="compare">$72</span>

article:nth-child(4) > .price > .compare

<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

কীভাবে ঠিক করবেন

আপনার পেজের মার্কআপ থেকে তৈরি কোড

নিচে তালিকাভুক্ত ব্যর্থ এলিমেন্টগুলো খুলুন এবং ব্যর্থতার সারাংশে লেখা ও পটভূমির রং দেখে নিন।
Online Store > Themes > Customize > Theme settings > Colors-এ গিয়ে প্রভাবিত কালার স্কিমের লেখার রং গাঢ় করুন বা পটভূমি হালকা করুন, যতক্ষণ না অনুপাত অন্তত 4.5:1 হয়।
সেল ব্যাজ, প্লেসহোল্ডার টেক্সট, ফুটারের লিংক এবং ছবির ওপরের বাটনের দিকে বিশেষ নজর দিন।

কোড

আগে · আমরা যা পেয়েছি · Theme settings › Colors, অথবা আপনার থিমের CSS ফাইল

<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 */
}

13px লেখার জন্য মাপা অনুপাত 3.09:1; WCAG 1.4.3 অনুযায়ী দরকার 4.5:1। #b95941 একই রঙের আভা বজায় রাখে এবং উত্তীর্ণ হয়। সিলেক্টরটি আমাদের টেস্টে ব্যবহৃত সিলেক্টর; আপনার থিম হয়তো একই স্টাইলের জন্য আরও বিস্তৃত কোনো ক্লাস ব্যবহার করে।

আগে · আমরা যা পেয়েছি · Theme settings › Colors, অথবা আপনার থিমের CSS ফাইল

<span class="badge">Sale</span>

পরে · ব্যর্থ এলিমেন্ট থেকে তৈরি

.badge {
  background-color: #9f693f; /* was #f4a261: 2.06:1, now 4.59:1 */
}

12px বোল্ড লেখার জন্য মাপা অনুপাত 2.06:1; WCAG 1.4.3 অনুযায়ী দরকার 4.5:1। #9f693f একই রঙের আভা বজায় রাখে এবং উত্তীর্ণ হয়। সিলেক্টরটি আমাদের টেস্টে ব্যবহৃত সিলেক্টর; আপনার থিম হয়তো একই স্টাইলের জন্য আরও বিস্তৃত কোনো ক্লাস ব্যবহার করে।

আগে · আমরা যা পেয়েছি · Theme settings › Colors, অথবা আপনার থিমের CSS ফাইল

<span class="compare">$72</span>

পরে · ব্যর্থ এলিমেন্ট থেকে তৈরি

.compare {
  color: #78736c; /* was #b0a99f: 2.29:1, now 4.62:1 */
}

14px লেখার জন্য মাপা অনুপাত 2.29:1; WCAG 1.4.3 অনুযায়ী দরকার 4.5:1। #78736c একই রঙের আভা বজায় রাখে এবং উত্তীর্ণ হয়। সিলেক্টরটি আমাদের টেস্টে ব্যবহৃত সিলেক্টর; আপনার থিম হয়তো একই স্টাইলের জন্য আরও বিস্তৃত কোনো ক্লাস ব্যবহার করে।

AI দিয়ে ঠিক করুনপ্রম্পটটি দেখুন

আমি harborandpine.example-এ একটি Shopify স্টোর (Online Store 2.0 থিম, Liquid টেমপ্লেট) চালাই। একটি অ্যাক্সেসিবিলিটি টেস্টে এই সমস্যাটি পাওয়া গেছে, এবং আমি আমার থিমে এটি ঠিক করতে চাই।

সমস্যা: এলিমেন্টকে ন্যূনতম রঙের কনট্রাস্ট অনুপাতের সীমা পূরণ করতে হবে (WCAG 1.4.3)।
কোথায়: 9টি পেজ জুড়ে 22 বার, যেমন /, /collections/all, /products/trail-daypack, /cart।

ব্রাউজার যেভাবে রেন্ডার করেছে, সেভাবে একটি ব্যর্থ এলিমেন্ট:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

কেন এটি গুরুত্বপূর্ণ: WCAG 1.4.3 অনুযায়ী সাধারণ লেখার জন্য কনট্রাস্ট অনুপাত অন্তত 4.5:1 এবং বড় লেখার জন্য 3:1 হতে হবে। হালকা রঙের দাম, ব্যাজ ও ব্যানার কম দৃষ্টিশক্তির মানুষের পক্ষে পড়া কঠিন, আর উজ্জ্বল আলোয় সবার পক্ষেই।

যা বদলাতে হবে:
- নিচে তালিকাভুক্ত ব্যর্থ এলিমেন্টগুলো খুলুন এবং ব্যর্থতার সারাংশে লেখা ও পটভূমির রং দেখে নিন।
- Online Store > Themes > Customize > Theme settings > Colors-এ গিয়ে প্রভাবিত কালার স্কিমের লেখার রং গাঢ় করুন বা পটভূমি হালকা করুন, যতক্ষণ না অনুপাত অন্তত 4.5:1 হয়।
- সেল ব্যাজ, প্লেসহোল্ডার টেক্সট, ফুটারের লিংক এবং ছবির ওপরের বাটনের দিকে বিশেষ নজর দিন।

একটি প্রস্তাবিত পরিবর্তন (Theme settings › Colors, অথবা আপনার থিমের CSS ফাইল):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

আপনার উত্তরের নিয়ম:
- হুবহু পরিবর্তনটি আগে ও পরে হিসেবে দেখান, এবং কোন ফাইল বা সেটিংয়ে এটি যাবে তা উল্লেখ করুন। আগে আমার ফাইল দেখতে হলে আমাকে সেটি পেস্ট করতে বলুন।
- ভিজ্যুয়াল ডিজাইন ও বিদ্যমান সব আচরণ একই রাখুন।
- প্রোডাক্টের নাম, দাম বা লেখা বানিয়ে দেবেন না; এমন প্লেসহোল্ডার ব্যবহার করুন যা আমি পূরণ করতে পারি।
- শেষে জানান, আমি নিজে কীভাবে সংশোধনটি যাচাই করতে পারি।
- কিবোর্ড ও স্ক্রিন রিডার দিয়ে এটি কীভাবে নিশ্চিত করা যায়, তা-ও জানান।

আপনার সংশোধন যাচাই করুন

স্ক্যানটি আবার চালান এবং নিশ্চিত হন যে color-contrast আর দেখা যাচ্ছে না।
হুবহু রংগুলো দিয়ে একটি কনট্রাস্ট চেকারে নমুনা যাচাই করুন।

বিস্তারিত নির্দেশনা: https://dequeuniversity.com/rules/axe/4.13/color-contrast?application=playwright

P3মাঝারিনিশ্চিত ব্যর্থতা

পেজের সব কনটেন্ট ল্যান্ডমার্কের ভেতরে থাকা উচিত

কাজের পরিমাণ: মাঝারি · দায়িত্বে: থিম ডেভেলপার

কিছু কনটেন্ট কোনো পেজ ল্যান্ডমার্কের (header, nav, main বা footer) ভেতরে নেই।

ল্যান্ডমার্ক স্ক্রিন রিডার ব্যবহারকারীদের পেজের এক অংশ থেকে আরেক অংশে সরাসরি যেতে দেয়। এটি WCAG 1.3.1 ও 2.4.1-কে সমর্থন করে এমন একটি ভালো চর্চা।

প্রমাণ

যেভাবে পাওয়া গেছে: axe-core স্বয়ংক্রিয় নিয়ম
অবস্থা · আস্থার মাত্রা: নিশ্চিত ব্যর্থতা · উচ্চ
শনাক্তের তারিখ: 24 সেপ, 2026 (UTC)
কোথায়: 9টি পেজ জুড়ে 18 বার

প্রত্যাশিত: পেজের সব কনটেন্ট ল্যান্ডমার্কের ভেতরে থাকা উচিত

দেখা গেছে: পেজের কিছু কনটেন্ট ল্যান্ডমার্কের ভেতরে নেই।

পেজের সব কনটেন্ট ল্যান্ডমার্কের ভেতরে থাকা উচিত: /-এ চিহ্নিত এলিমেন্ট

পেজের সব কনটেন্ট ল্যান্ডমার্কের ভেতরে থাকা উচিত: /cart-এ চিহ্নিত এলিমেন্ট

সমস্যাটি নিজে কীভাবে দেখবেন

Chrome বা Edge-এ https://harborandpine.example/ খুলুন।
DevTools (F12) › Elements খুলুন, Ctrl+F (Mac-এ Cmd+F) চাপুন এবং এটি খুঁজুন: .announce
অথবা পেজে ফ্রি axe DevTools ব্রাউজার এক্সটেনশন চালান: এটি সমস্যাটিকে “region” হিসেবে দেখায়।

ব্যর্থ এলিমেন্ট (2টি দেখানো হয়েছে)

.announce

<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>

#cookie-banner > p

<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>-এর ভেতরে নিন।

AI দিয়ে ঠিক করুনপ্রম্পটটি দেখুন

আমি harborandpine.example-এ একটি Shopify স্টোর (Online Store 2.0 থিম, Liquid টেমপ্লেট) চালাই। একটি অ্যাক্সেসিবিলিটি টেস্টে এই সমস্যাটি পাওয়া গেছে, এবং আমি আমার থিমে এটি ঠিক করতে চাই।

সমস্যা: পেজের সব কনটেন্ট ল্যান্ডমার্কের ভেতরে থাকা উচিত।
কোথায়: 9টি পেজ জুড়ে 18 বার, যেমন /, /collections/all, /products/trail-daypack, /cart।

ব্রাউজার যেভাবে রেন্ডার করেছে, সেভাবে একটি ব্যর্থ এলিমেন্ট:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

কেন এটি গুরুত্বপূর্ণ: ল্যান্ডমার্ক স্ক্রিন রিডার ব্যবহারকারীদের পেজের এক অংশ থেকে আরেক অংশে সরাসরি যেতে দেয়। এটি WCAG 1.3.1 ও 2.4.1-কে সমর্থন করে এমন একটি ভালো চর্চা।

যা বদলাতে হবে:
- বিচ্ছিন্ন কনটেন্ট (অ্যানাউন্সমেন্ট বার, পপ-আপ, চ্যাট উইজেট) উপযুক্ত ল্যান্ডমার্কের ভেতরে রাখুন, অথবা <main>-এর ভেতরে নিন।

আপনার উত্তরের নিয়ম:
- হুবহু পরিবর্তনটি আগে ও পরে হিসেবে দেখান, এবং কোন ফাইল বা সেটিংয়ে এটি যাবে তা উল্লেখ করুন। আগে আমার ফাইল দেখতে হলে আমাকে সেটি পেস্ট করতে বলুন।
- ভিজ্যুয়াল ডিজাইন ও বিদ্যমান সব আচরণ একই রাখুন।
- প্রোডাক্টের নাম, দাম বা লেখা বানিয়ে দেবেন না; এমন প্লেসহোল্ডার ব্যবহার করুন যা আমি পূরণ করতে পারি।
- শেষে জানান, আমি নিজে কীভাবে সংশোধনটি যাচাই করতে পারি।
- কিবোর্ড ও স্ক্রিন রিডার দিয়ে এটি কীভাবে নিশ্চিত করা যায়, তা-ও জানান।

আপনার সংশোধন যাচাই করুন

প্রভাবিত পেজগুলো আবার স্ক্যান করুন।

বিস্তারিত নির্দেশনা: https://dequeuniversity.com/rules/axe/4.13/region?application=playwright

P3মাঝারিনিশ্চিত ব্যর্থতা

হেডিং লেভেল একবারে শুধু এক ধাপ বাড়া উচিত

কাজের পরিমাণ: মাঝারি · দায়িত্বে: থিম ডেভেলপার

হেডিং লেভেল বাদ পড়ে যায় (যেমন H2 থেকে সরাসরি H4), ফলে স্ক্রিন রিডার ব্যবহারকারীদের কাছে পেজের কাঠামো বিভ্রান্তিকর হয়।

স্ক্রিন রিডার ব্যবহারকারীরা হেডিং ধরে পেজে চলাচল করেন। এটি WCAG 1.3.1-কে সমর্থন করে এমন একটি ভালো চর্চা।

প্রমাণ

যেভাবে পাওয়া গেছে: axe-core স্বয়ংক্রিয় নিয়ম
অবস্থা · আস্থার মাত্রা: নিশ্চিত ব্যর্থতা · উচ্চ
শনাক্তের তারিখ: 24 সেপ, 2026 (UTC)
কোথায়: 7টি পেজ জুড়ে 7 বার

প্রত্যাশিত: হেডিং লেভেল একবারে শুধু এক ধাপ বাড়া উচিত

দেখা গেছে: হেডিংয়ের ক্রম সঠিক নয়।

হেডিং লেভেল একবারে শুধু এক ধাপ বাড়া উচিত: /collections/all-এ চিহ্নিত এলিমেন্ট

হেডিং লেভেল একবারে শুধু এক ধাপ বাড়া উচিত: /products/trail-daypack-এ চিহ্নিত এলিমেন্ট

সমস্যাটি নিজে কীভাবে দেখবেন

Chrome বা Edge-এ https://harborandpine.example/collections/all খুলুন।
DevTools (F12) › Elements খুলুন, Ctrl+F (Mac-এ Cmd+F) চাপুন এবং এটি খুঁজুন: article:nth-child(1) > a[href$="trail-daypack"] > h3
অথবা পেজে ফ্রি axe DevTools ব্রাউজার এক্সটেনশন চালান: এটি সমস্যাটিকে “heading-order” হিসেবে দেখায়।

ব্যর্থ এলিমেন্ট (3টি দেখানো হয়েছে)

article:nth-child(1) > a[href$="trail-daypack"] > h3

<h3>Trail Daypack 22L</h3>

<h3>Reviews</h3>

h3:nth-child(3)

<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>

AI দিয়ে ঠিক করুনপ্রম্পটটি দেখুন

আমি harborandpine.example-এ একটি Shopify স্টোর (Online Store 2.0 থিম, Liquid টেমপ্লেট) চালাই। একটি অ্যাক্সেসিবিলিটি টেস্টে এই সমস্যাটি পাওয়া গেছে, এবং আমি আমার থিমে এটি ঠিক করতে চাই।

সমস্যা: হেডিং লেভেল একবারে শুধু এক ধাপ বাড়া উচিত।
কোথায়: 7টি পেজ জুড়ে 7 বার, যেমন /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie।

ব্রাউজার যেভাবে রেন্ডার করেছে, সেভাবে একটি ব্যর্থ এলিমেন্ট:
```html
<h3>Trail Daypack 22L</h3>
```

কেন এটি গুরুত্বপূর্ণ: স্ক্রিন রিডার ব্যবহারকারীরা হেডিং ধরে পেজে চলাচল করেন। এটি WCAG 1.3.1-কে সমর্থন করে এমন একটি ভালো চর্চা।

যা বদলাতে হবে:
- প্রভাবিত সেকশনগুলোর হেডিং লেভেল এমনভাবে ঠিক করুন, যাতে সেগুলো কোনো লেভেল বাদ না দিয়ে ক্রমানুসারে চলে।
- শুধু ট্যাগ বদলান, দেখতে কেমন তা নয় (আকারের জন্য CSS ক্লাস ব্যবহার করুন)।

একটি প্রস্তাবিত পরিবর্তন (আপনার থিমের কোড (দেখানো মার্কআপটি খুঁজে নিন)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

আপনার উত্তরের নিয়ম:
- হুবহু পরিবর্তনটি আগে ও পরে হিসেবে দেখান, এবং কোন ফাইল বা সেটিংয়ে এটি যাবে তা উল্লেখ করুন। আগে আমার ফাইল দেখতে হলে আমাকে সেটি পেস্ট করতে বলুন।
- ভিজ্যুয়াল ডিজাইন ও বিদ্যমান সব আচরণ একই রাখুন।
- প্রোডাক্টের নাম, দাম বা লেখা বানিয়ে দেবেন না; এমন প্লেসহোল্ডার ব্যবহার করুন যা আমি পূরণ করতে পারি।
- শেষে জানান, আমি নিজে কীভাবে সংশোধনটি যাচাই করতে পারি।
- কিবোর্ড ও স্ক্রিন রিডার দিয়ে এটি কীভাবে নিশ্চিত করা যায়, তা-ও জানান।

আপনার সংশোধন যাচাই করুন

আবার স্ক্যান করুন এবং 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 বেশি চওড়া। ডেটা টেবিল ও ম্যাপ স্ক্রল করতে পারে; লেখা ও কন্ট্রোলের তা করা উচিত নয়।
1টি পেজ জুড়ে 2 বার · এটি কীভাবে যাচাই করবেন
যাচাই করার এলিমেন্ট (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></bu
```
div
```
<div> <p style="color:#6a6a60;font-size:14px">Harbor &amp; 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 বেশি চওড়া। ডেটা টেবিল ও ম্যাপ স্ক্রল করতে পারে; লেখা ও কন্ট্রোলের তা করা উচিত নয়।
1টি পেজ জুড়ে 3 বার · এটি কীভাবে যাচাই করবেন
যাচাই করার এলিমেন্ট (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></bu
```
article.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টি রি-টেস্ট অন্তর্ভুক্ত।

রি-টেস্ট শুধু পেইড রিপোর্টে চালানো যায়।

ম্যানুয়াল চেক

স্বয়ংক্রিয় টুল এগুলো বিচার করতে পারে না। কাজ শেষ হয়েছে বলে ধরে নেওয়ার আগে এগুলো করে নিন।

শুধু কিবোর্ড দিয়ে চেকআউট সম্পূর্ণ করুন: আমাদের স্বয়ংক্রিয় জার্নি চেকআউট বাটনে থেমে যায় এবং কখনো চেকআউটে ঢোকে না।
একটি স্ক্রিন রিডার দিয়ে আবার করুন (Mac-এ VoiceOver: Cmd+F5; Windows-এ NVDA) এবং নিশ্চিত হন যে দাম, ভ্যারিয়েন্ট ও ত্রুটির বার্তা ঘোষণা করা হয়।
ব্রাউজার 200%-এ জুম করুন এবং নিশ্চিত হন যে কিছুই একটির ওপর আরেকটি পড়ে না বা হারিয়ে যায় না।
প্রোডাক্ট ও ব্র্যান্ড ভিডিওতে সঠিক ক্যাপশন আছে কি না যাচাই করুন।
ইচ্ছা করে ভুল তথ্য দিয়ে ফর্ম জমা দিন (নিউজলেটার, যোগাযোগ, চেকআউট) এবং নিশ্চিত হন যে ত্রুটিগুলো লেখায় বর্ণনা করা হয়।
ক্যারোসেল ও পপ-আপ থামানো বা বন্ধ করা যায় কি না যাচাই করুন, Escape কী দিয়েও।

অ্যাক্সেসিবিলিটি স্টেটমেন্টের খসড়া

বন্ধনীর ভেতরের অংশগুলো সম্পাদনা করুন এবং আপনার ফুটার থেকে লিংক করা একটি পেজে এটি প্রকাশ করুন।

harborandpine.example-এর অ্যাক্সেসিবিলিটি বিবৃতি

আমরা চাই সবাই যেন harborandpine.example-এ কেনাকাটা করতে পারেন, যারা স্ক্রিন রিডার, কিবোর্ড নেভিগেশন, ম্যাগনিফিকেশন বা অন্য কোনো সহায়ক প্রযুক্তি ব্যবহার করেন তারাও। আমরা লেভেল AA-তে Web Content Accessibility Guidelines (WCAG) 2.2 পূরণের লক্ষ্য রাখি।

আমরা যা করি
- আমরা স্বয়ংক্রিয় অ্যাক্সেসিবিলিটি টুল দিয়ে আমাদের স্টোর পরীক্ষা করি এবং সেগুলো যেসব সমস্যা খুঁজে পায় তা ঠিক করি।
- আমরা কেনাকাটার মূল ধাপগুলো (ব্রাউজ করা, প্রোডাক্ট পেজ, কার্ট ও চেকআউট) কিবোর্ড ও স্ক্রিন রিডার দিয়ে পরীক্ষা করি।
- থার্ড-পার্টি অ্যাপ ও উইজেট যোগ করার আগে আমরা সেগুলোর অ্যাক্সেসিবিলিটি পর্যালোচনা করি।

জানা সীমাবদ্ধতা (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

পরিধি ও পদ্ধতি

আমরা যা পরীক্ষা করেছি

Chromium-এ 1366×900 মাপে লোড করা 9টি পেজ (হোম পেজ, কালেকশন পেজ, প্রোডাক্ট পেজ, কার্ট, কনটেন্ট পেজ, অতিরিক্ত পেজ)।
WCAG 2.0, 2.1 ও 2.2 লেভেল A ও AA-এর জন্য axe-core 4.13.0-এর নিয়ম, সঙ্গে ভালো চর্চার নিয়ম (P3 হিসেবে দেখানো)।
একটি কিবোর্ড টেস্ট: হোম পেজে 40 বার Tab চাপা, ফোকাস ট্র্যাপ ও অনুপস্থিত ফোকাস নির্দেশক খোঁজার জন্য।
হোম পেজ থেকে চেকআউট বাটন পর্যন্ত শুধু কিবোর্ড দিয়ে একটি শপিং জার্নি (ওপরে দেখুন)।
320 CSS পিক্সেল প্রস্থে একটি রিফ্লো চেক (WCAG 1.4.10), এই পেজগুলোতে: হোম পেজ এবং প্রোডাক্ট পেজ।

আমরা যা পরীক্ষা করিনি

চেকআউট ও পেমেন্ট পেজ, ফর্ম জমা দেওয়া, অ্যাকাউন্ট ও লগইনের পরের পেজ।
স্বয়ংক্রিয় নিয়মের বাইরে, স্ক্রিন রিডার আসলে কী ঘোষণা করে।
ভিডিওর ক্যাপশন ও অডিও ডেসক্রিপশন, PDF ডকুমেন্ট এবং থার্ড-পার্টি ফ্রেমের ভেতরের কনটেন্ট।
সহজ ভাষা, কগনিটিভ অ্যাক্সেসিবিলিটি এবং মানুষের বিচার প্রয়োজন এমন অন্য সবকিছু (ম্যানুয়াল চেক দেখুন)।

ফলাফল কীভাবে বুঝবেন

নিশ্চিত ব্যর্থতা: একটি স্বয়ংক্রিয় টেস্ট বা কিবোর্ড জার্নি ব্যর্থ হয়েছে, প্রমাণসহ দেখানো হয়েছে।
পর্যালোচনা প্রয়োজন: একটি টেস্ট এমন কিছু চিহ্নিত করেছে যার বিষয়ে সে সিদ্ধান্ত নিতে পারেনি; একজন মানুষের এটি যাচাই করা উচিত।
উত্তীর্ণ: পরীক্ষিত পেজগুলোতে স্বয়ংক্রিয় নিয়মটি কোনো ব্যর্থতা পায়নি।
পরীক্ষা করা হয়নি: এখানে স্বয়ংক্রিয় টেস্ট যা কভার করতে পারে তার বাইরে; ম্যানুয়াল চেক দেখুন।

আপনার ওয়েবসাইটের জন্য এই রিপোর্টটি নিন।

আপনার সমস্যাগুলো এবং সেগুলো আপনার চিঠির সঙ্গে কীভাবে মেলে তা দেখতে ফ্রি স্ক্যান দিয়ে শুরু করুন। অ্যাক্সেসিবিলিটি সংশোধন রিপোর্ট-এর দাম এককালীন $249, এবং এটি প্রায় 10 মিনিটে প্রস্তুত হয়।

ফ্রি-তে আপনার ওয়েবসাইট স্ক্যান করুন

এই রিপোর্ট স্বয়ংক্রিয় টেস্টের ফলাফল বর্ণনা করে এবং সংশোধনের নির্দেশনা দেয়। এটি আইনি পরামর্শ নয় এবং ADA, ইউরোপিয়ান অ্যাক্সেসিবিলিটি অ্যাক্ট বা অন্য কোনো আইনের সঙ্গে কমপ্লায়েন্সের সনদ দেয় না।

harborandpine.example

সারাংশ

সংক্ষিপ্ত বিবরণ

ওয়েবসাইটের সংক্ষিপ্ত বিবরণ

কিবোর্ড শপিং জার্নি

01প্রধান নেভিগেশনে পৌঁছানো

02কালেকশন থেকে একটি প্রোডাক্ট খোলা

03অপশন ও পরিমাণ বেছে নেওয়া

04কিবোর্ড দিয়ে কার্টে যোগ করা

05কার্ট পরিবর্তন করে চেকআউটে পৌঁছানো

06চেকআউট

চিঠির ক্লেইম ম্যাপ

সংশোধন পরিকল্পনা

প্রতিটি সমস্যা কীভাবে ঠিক করবেন

কিবোর্ড ফোকাস কুকি ব্যানারে আটকে থাকে

প্রমাণ

কীভাবে ঠিক করবেন

আপনার সংশোধন যাচাই করুন

কিবোর্ড দিয়ে প্রোডাক্টের অপশন বেছে নেওয়া যায় না

প্রমাণ

কীভাবে ঠিক করবেন

কোড

আপনার সংশোধন যাচাই করুন

বাটনে বোঝা যায় এমন লেখা থাকতে হবে

প্রমাণ

কীভাবে ঠিক করবেন

কোড

আপনার সংশোধন যাচাই করুন

ছবিতে বিকল্প লেখা থাকতে হবে

প্রমাণ

কীভাবে ঠিক করবেন

কোড

আপনার সংশোধন যাচাই করুন

ফর্ম এলিমেন্টে লেবেল থাকতে হবে

প্রমাণ

কীভাবে ঠিক করবেন

কোড

আপনার সংশোধন যাচাই করুন

select এলিমেন্টের একটি অ্যাক্সেসিবল নাম থাকতে হবে

প্রমাণ

কীভাবে ঠিক করবেন

কোড

আপনার সংশোধন যাচাই করুন

লিংকে বোঝা যায় এমন লেখা থাকতে হবে

প্রমাণ

কীভাবে ঠিক করবেন

কোড

আপনার সংশোধন যাচাই করুন

এলিমেন্টকে ন্যূনতম রঙের কনট্রাস্ট অনুপাতের সীমা পূরণ করতে হবে

প্রমাণ

কীভাবে ঠিক করবেন

কোড

আপনার সংশোধন যাচাই করুন

পেজের সব কনটেন্ট ল্যান্ডমার্কের ভেতরে থাকা উচিত

প্রমাণ

কীভাবে ঠিক করবেন

আপনার সংশোধন যাচাই করুন

হেডিং লেভেল একবারে শুধু এক ধাপ বাড়া উচিত

প্রমাণ

কীভাবে ঠিক করবেন

কোড

আপনার সংশোধন যাচাই করুন

ম্যানুয়াল পর্যালোচনা প্রয়োজন

কিবোর্ড জার্নি: কিবোর্ড দিয়ে কার্টে যোগ করা

প্রোডাক্ট পেজ হয়তো পাশে স্ক্রল না করে সরু স্ক্রিনে আঁটে না

হোম পেজ হয়তো পাশে স্ক্রল না করে সরু স্ক্রিনে আঁটে না

এলিমেন্টকে ন্যূনতম রঙের কনট্রাস্ট অনুপাতের সীমা পূরণ করতে হবে

আপনার সংশোধন রি-টেস্ট করুন

ম্যানুয়াল চেক

অ্যাক্সেসিবিলিটি স্টেটমেন্টের খসড়া

প্রমাণ লগ

পরিধি ও পদ্ধতি

আমরা যা পরীক্ষা করেছি

আমরা যা পরীক্ষা করিনি

ফলাফল কীভাবে বুঝবেন

আপনার ওয়েবসাইটের জন্য এই রিপোর্টটি নিন।