Accessibility Inspector যেকোনো ওয়েবপেজে অটোমেটেড WCAG 2.1 লেভেল AA চেক পরিচালনা করে এবং অ্যাক্সেসিবিলিটি ইস্যুগুলোর একটি ক্যাটাগরাইজড রিপোর্ট তৈরি করে। অপর্যাপ্ত কালার কন্ট্রাস্ট রেশিও, ইমেজে অল্ট টেক্সট না থাকা, ভুল ARIA রোল এবং অ্যাট্রিবিউট, ফর্ম লেবেলের অভাব, কিবোর্ড নেভিগেশন সমস্যা এবং ল্যান্ডমার্ক রিজিয়নের অনুপস্থিতি শনাক্ত করুন — প্রতিটি সমস্যার জন্য এক-ক্লিকে এলিমেন্ট হাইলাইট করার সুবিধাসহ।
ওয়েব অ্যাক্সেসিবিলিটি কোনো ঐচ্ছিক বিষয় নয় — এটি অনেক দেশে আইনি প্রয়োজনীয়তা এবং বিশ্বের ১৫% মানুষের জন্য অপরিহার্য যারা ভিন্নভাবে সক্ষম। তবুও সাধারণ ডেভেলপমেন্ট এবং টেস্টিংয়ের সময় অ্যাক্সেসিবিলিটি ইস্যুগুলো প্রায়ই অদৃশ্য থাকে। একটি বাটন দেখতে হয়তো ঠিক মনে হতে পারে, কিন্তু একটি স্টাইল করা 'div' হওয়ার কারণে এবং 'role' অ্যাট্রিবিউট না থাকায় সেটি স্ক্রিন রিডারের কাছে সম্পূর্ণ অ্যাক্সেস অযোগ্য হতে পারে। টেক্সট আপনার কাছে হয়তো পড়ার যোগ্য হতে পারে, কিন্তু ক্ষীণদৃষ্টির অধিকারীদের জন্য সেটি কন্ট্রাস্টের প্রয়োজনীয়তা পূরণ করতে ব্যর্থ হতে পারে। Accessibility Inspector এই অদৃশ্য সমস্যাগুলোকে স্বয়ংক্রিয়ভাবে সামনে নিয়ে আসে। এটি ডজনখানেক WCAG 2.1 লেভেল AA মানদণ্ড চেক করে, যার মধ্যে রয়েছে কালার কন্ট্রাস্ট রেশিও (স্বাভাবিক টেক্সটের জন্য কমপক্ষে 4.5:1, বড় টেক্সটের জন্য 3:1), ইমেজে অল্ট টেক্সটের অনুপস্থিতি, ফর্ম ইনপুটে লেবেলের অভাব, ভুল ARIA রোল এবং অ্যাট্রিবিউট, ল্যান্ডমার্কের অনুপস্থিতি (nav, main, footer) এবং কিবোর্ড ফোকাস ইন্ডিকেটর। প্রতিটি ইস্যুতে আক্রান্ত এলিমেন্ট, কোন WCAG মানদণ্ড লঙ্ঘন করা হয়েছে এবং তা কীভাবে সমাধান করতে হবে তার সাজেশন অন্তর্ভুক্ত থাকে। পেজের সংশ্লিষ্ট এলিমেন্ট হাইলাইট করতে যেকোনো ইস্যুতে ক্লিক করুন।
WCAG 2.1 লেভেল AA সাফল্যের মানদণ্ড অনুযায়ী অটোমেটেড চেক পরিচালনা করে যা দৃশ্যমানতা (perceivability), কার্যকারিতা (operability), বোধগম্যতা (understandability) এবং নির্ভরযোগ্যতা (robustness) ক্যাটাগরিগুলো অন্তর্ভুক্ত করে। প্রতিটি চেকে সুনির্দিষ্ট মানদণ্ড (যেমন, ১.৪.৩ কন্ট্রাস্ট, ১.১.১ নন-টেক্সট কন্টেন্ট) এবং তার বর্তমান অবস্থা (সফল/ব্যর্থ) দেখায়।
পেজের প্রতিটি টেক্সট এলিমেন্টের জন্য টেক্সট এবং ব্যাকগ্রাউন্ড কালারের কন্ট্রাস্ট রেশিও গণনা করে। স্বাভাবিক টেক্সটের জন্য 4.5:1 অথবা বড় টেক্সটের (১৮px+ বা ১৪px+ বোল্ড) জন্য 3:1 এর নিচে থাকা এলিমেন্টগুলোকে ফ্ল্যাগ করে। প্রকৃত রেশিও এবং সর্বনিম্ন প্রয়োজনীয় রেশিও উভয়ই এখানে প্রদর্শিত হয়।
প্রতিটি img, svg এবং 'image' রোলযুক্ত এলিমেন্ট স্ক্যান করে। অল্ট অ্যাট্রিবিউট নেই এমন ইমেজ, নন-ডেকোরেটিভ ইমেজে খালি অল্ট এবং অতি সাধারণ অল্ট টেক্সট (যেমন, "image", "photo") ফ্ল্যাগ করে। প্রতিটি ইমেজের জন্য বর্ণনামূলক অল্ট টেক্সট, খালি অল্ট (ডেকোরেটিভ ইমেজের ক্ষেত্রে) অথবা role="presentation" প্রয়োজন কি না সেই পরামর্শ দেয়।
ভুল ARIA রোল ব্যবহার (ভুল এলিমেন্টে রোল), প্রয়োজনীয় ARIA অ্যাট্রিবিউটের অভাব (যেমন, আইকন বাটনে aria-label), ডুপ্লিকেট ID এবং ল্যান্ডমার্ক রিজিয়নের অনুপস্থিতি (main বা nav নেই) চেক করে। প্রয়োজনে সিম্যান্টিক HTML বিকল্প ব্যবহারের পরামর্শ দেয়।
নিশ্চিত করে যে প্রতিটি ফর্ম ইনপুট (text, email, password, checkbox, select) একটি লেবেলযুক্ত — তা সে label এলিমেন্টের সাথে matching for/id-র মাধ্যমেই হোক অথবা aria-label বা aria-labelledby-র মাধ্যমে। লেবেলবিহীন ইনপুটগুলো স্ক্রিন রিডার ব্যবহারকারীদের কাছে প্রবেশযোগ্য হয় না।
সমস্যাগুলোকে ত্রুটি (অবশ্যই ঠিক করতে হবে — প্রবেশের বাধা), সতর্কবার্তা (ঠিক করা উচিত — সম্ভাব্য বাধা) এবং সঠিক (confirmed accessible) হিসেবে ক্যাটাগরি করা হয়। ত্রুটির সংখ্যা স্পষ্টভাবে প্রদর্শিত হয়। পেজের আক্রান্ত এলিমেন্টটি হাইলাইট করতে যেকোনো ইস্যুতে ক্লিক করুন।
নতুন পেজ বা ফিচার লঞ্চ করার আগে সমস্যাগুলো শনাক্ত করতে Accessibility Inspector ব্যবহার করুন। অল্ট টেক্সট না থাকা, লেবেলবিহীন ফর্ম ফিল্ড এবং কন্ট্রাস্ট সংক্রান্ত ভুলগুলো ডেভেলপমেন্টের সময় সহজেই ঠিক করা যায়, কিন্তু প্রোডাকশনে এগুলো খুঁজে পাওয়া অনেক ব্যয়বহুল।
অনেক দেশে WCAG 2.1 লেভেল AA মানদণ্ড মেনে চলা বাধ্যতামূলক (যেমন যুক্তরাষ্ট্রে ADA, ইইউতে EAA)। কোনো আইনি জটিলতা তৈরি হওয়ার আগেই আপনার সাধারণ ব্যবহারকারীদের জন্য উন্মুক্ত পেজগুলোতে ইন্সপেক্টরটি চালিয়ে ত্রুটিগুলো শনাক্ত করুন।
আপনার QA প্রসেসে অ্যাক্সেসিবিলিটি চেকিং অন্তর্ভুক্ত করুন। ভিজ্যুয়াল QA এবং ফাংশনাল টেস্টিংয়ের পর, ইমপ্লিমেন্টেশনে নতুন কোনো অ্যাক্সেসিবিলিটি সমস্যা তৈরি হয়েছে কিনা তা যাচাই করতে Accessibility Inspector ব্যবহার করুন।
টিম মিটিংয়ের সময় আপনার বর্তমান সাইটে ইন্সপেক্টরটি চালিয়ে প্রকৃত অ্যাক্সেসিবিলিটি সমস্যাগুলো দেখান। এর ভিজ্যুয়াল হাইলাইটিং এবং পরিষ্কার ব্যাখ্যা ডেভেলপারদের বুঝতে সাহায্য করে যে অ্যাক্সেসযোগ্য মার্কআপ কেমন হওয়া উচিত এবং এটি কেন গুরুত্বপূর্ণ।
যেসব পেজে থার্ড-পার্টি উইজেট, এমবেডেড কন্টেন্ট বা ব্যবহারকারীর তৈরি HTML আছে সেগুলো অডিট করুন। এই সোর্সগুলো প্রায়ই অ্যাক্সেসিবিলিটি সমস্যা (যেমন অল্ট টেক্সট না থাকা, কন্ট্রাস্ট ত্রুটি) তৈরি করে, যার দায়ভার পেজের মালিক হিসেবে আপনার ওপরই বর্তায়।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Accessibility Inspector আইকনে ক্লিক করুন। টুলটি অ্যাক্সেসিবিলিটি সমস্যার জন্য পেজের DOM স্ক্যান করবে।
ত্রুটি (লাল), সতর্কবার্তা (হলুদ) এবং সঠিক (সবুজ) — এই তিনটি ভাগে একটি ক্যাটাগরাইজড রিপোর্ট প্রদর্শিত হবে। প্রতিটি সেকশনে আক্রান্ত এলিমেন্ট এবং WCAG মানদণ্ডসহ সুনির্দিষ্ট সমস্যাগুলো তালিকাভুক্ত থাকে।
পেজের আক্রান্ত এলিমেন্টটিকে একটি রঙিন বর্ডার দিয়ে হাইলাইট করতে এবং সেখানে স্ক্রল করতে যেকোনো ইস্যুতে ক্লিক করুন। রিপোর্ট এবং DOM এলিমেন্টের মধ্যকার এই সংযোগ তাৎক্ষণিক।
প্রতিটি ইস্যুতে একটি সুনির্দিষ্ট সুপারিশ অন্তর্ভুক্ত থাকে: যেমন "ইমেজের বিষয়বস্তু বর্ণনাকারী অল্ট টেক্সট যোগ করুন", "ফন্ট কালার কন্ট্রাস্ট কমপক্ষে 4.5:1-এ উন্নীত করুন", "for='email' সহ একটি label এলিমেন্ট যোগ করুন" ইত্যাদি।
আপনার কোডে পরিবর্তন আনুন, পেজটি রিলোড করুন এবং পুনরায় অডিটটি চালান। সমস্যাগুলো সমাধান হওয়ার সাথে সাথে ত্রুটির সংখ্যা কমতে থাকবে। শূন্য ত্রুটির লক্ষ্য নির্ধারণ করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
