ফ্রি অ্যাক্সেসিবিলিটি টুল

ওয়েবসাইট অ্যাক্সেসিবিলিটি চেকার

আপনার ওয়েবসাইটের ঠিকানা দিন, আমরা সেই পেজ এবং সর্বোচ্চ আরও চারটি গুরুত্বপূর্ণ পেজ আসল ব্রাউজারে WCAG 2.2 লেভেল A ও AA-এর নিয়ম অনুযায়ী পরীক্ষা করব। প্রতিটি বাধার সঙ্গে থাকে এলিমেন্ট, পেজ, একটি স্ক্রিনশট এবং এটি কাদের সমস্যায় ফেলে তার ব্যাখ্যা।

ফ্রি। প্রায় এক মিনিটে সর্বোচ্চ 5টি মূল পেজ পরীক্ষা করে।

এই টুল কী যাচাই করে

  • আপনার সাইটের প্রতিনিধিত্ব করে এমন পাঁচটি পেজ

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

  • রেন্ডার হওয়া পেজে WCAG-এর নিয়ম

    প্রতিটি পেজ Chromium-এ 1366 × 900 মাপে লোড হয়, এবং পেজের স্ক্রিপ্ট চলার পর axe-core, অর্থাৎ Deque-এর ওপেন-সোর্স রুল ইঞ্জিন, তার WCAG 2.0, 2.1 ও 2.2 লেভেল A ও AA নিয়মগুলো চালায়। ফলে এমন সমস্যাও ধরা পড়ে, যা কোনো থিম বা অ্যাপ কেবল ব্রাউজারে পেজ তৈরি হওয়ার পরই সৃষ্টি করে।

  • প্রভাবের মাত্রা ও সাফল্যের মানদণ্ড

    ব্যর্থ প্রতিটি নিয়মের সঙ্গে দেখা যায় তার প্রভাবের মাত্রা: সংকটপূর্ণ (critical), গুরুতর (serious), মাঝারি (moderate) বা সামান্য (minor); নিয়মটি WCAG-এর কোন সাফল্যের মানদণ্ডের সঙ্গে যুক্ত; এবং এটি কতগুলো এলিমেন্ট ও পেজে প্রভাব ফেলে।

  • ব্যর্থ এলিমেন্টটি, দাগ দিয়ে চিহ্নিত

    একটি উদাহরণ এলিমেন্টের HTML এবং পেজের একটি স্ক্রিনশট, যেখানে সেই এলিমেন্টের চারপাশে দাগ টানা থাকে, যাতে আপনি বা আপনার ডেভেলপার অনুমান না করেই টেমপ্লেটে সেটি খুঁজে পান।

  • যেসব বিষয়ে মানুষকে সিদ্ধান্ত নিতে হয়

    axe-core যখন এমন কিছু পায় যার মীমাংসা সে করতে পারে না, যেমন ব্যাকগ্রাউন্ড ছবির ওপর লেখা, যার কনট্রাস্ট সে মাপতে পারে না, তখন বিষয়টি পর্যালোচনা প্রয়োজন হিসেবে তালিকাভুক্ত হয়। এটিকে কখনো ব্যর্থতা হিসেবে গণনা করা হয় না।

  • কীবোর্ড পরীক্ষা

    প্রথম পেজে আমরা 40 বার Tab চাপি এবং ফোকাস কোথায় যায় তা রেকর্ড করি: ফোকাস আদৌ সরে কি না, কোনো লুপে আটকে যায় কি না (প্রায়ই কুকি ব্যানারের ভেতরে), প্রথম স্টপটি স্কিপ লিংক কি না, এবং ফোকাস পাওয়া কোন কোন এলিমেন্টে কোনো দৃশ্যমান ফোকাস নির্দেশক নেই। শেষ যাচাইটি একটি হিউরিস্টিক, তাই এটি পর্যালোচনা প্রয়োজন হিসেবে দেখানো হয়।

যা এটি যাচাই করতে পারে না

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

কেন এটি গুরুত্বপূর্ণ

অ্যাক্সেসিবিলিটির বাধা প্রায়ই টেমপ্লেটের ছোট ভুল, কিন্তু এর প্রভাব বড়। শুধু আইকন থাকা একটি কার্ট বাটনের যদি কোনো অ্যাক্সেসিবল নাম না থাকে, তাহলে সেটি কেবল “বাটন” হিসেবে ঘোষিত হয়, ফলে স্ক্রিন রিডার ব্যবহারকারী বুঝতে পারেন না সেটি কী করে। সাদার ওপর ধূসর লেখা যদি 4.5:1 কনট্রাস্ট অনুপাতে না পৌঁছায়, তাহলে কম দৃষ্টিশক্তিসম্পন্ন অনেক মানুষের পক্ষে, এবং কড়া রোদে ফোন ব্যবহার করছেন এমন যে কারও পক্ষে, তা পড়া কঠিন।

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

অনেক দেশে অ্যাক্সেসিবিলিটির একটি আইনি দিকও আছে। কোনো আইন আপনার ক্ষেত্রে প্রযোজ্য কি না বা আপনি তা মেনে চলেন কি না, একটি স্ক্যান তা বলতে পারে না। এটি আপনাকে দেয় আপনার নিজের পেজে থাকা বাস্তব বাধাগুলোর একটি তারিখযুক্ত তালিকা, যা যেকোনো ক্ষেত্রেই কাজ শুরু করার বাস্তবসম্মত জায়গা।

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

সংকটপূর্ণ
এই বাধার কারণে কিছু মানুষ এলিমেন্টটি একেবারেই ব্যবহার করতে না-ও পারেন, যেমন লেবেল ছাড়া একটি ফর্ম ফিল্ড বা নাম ছাড়া একটি বাটন। এগুলো আগে ঠিক করুন।
গুরুতর
এই বাধা কিছু মানুষের জন্য কোনো কাজ অনেক কঠিন করে তোলে, যেমন মূল লেখা যা কনট্রাস্ট অনুপাত পূরণ করে না।
মাঝারি
এই বাধা অসুবিধা বা বিভ্রান্তি তৈরি করে, তবে মানুষ সাধারণত কোনো না কোনোভাবে এটি পাশ কাটিয়ে যেতে পারেন।
সামান্য
একটি ছোট সমস্যা বা বিরক্তি। তবুও পরের বার ওই টেমপ্লেট সম্পাদনার সময় এটি ঠিক করে নেওয়া ভালো।
WCAG সাফল্যের মানদণ্ড
কোনো নিয়মের পাশে থাকা সংখ্যাগুলো, যেমন 1.1.1 বা 1.4.3, হলো সেই মানদণ্ড যা নিয়মটি পরীক্ষা করে। যে নিয়মের পাশে কোনো মানদণ্ড নেই, সেটি WCAG-এর বাধ্যবাধকতা নয়, বরং একটি ভালো চর্চা (best practice)।
এলিমেন্ট ও পেজ
কতগুলো এলিমেন্ট নিয়মটিতে ব্যর্থ হয়েছে এবং পরীক্ষিত পেজগুলোর মধ্যে কতগুলোতে। যে নিয়ম প্রতিটি পেজে ব্যর্থ হয়, সেটির উৎস সাধারণত হেডার, মেনু বা ফুটারের মতো কোনো সাধারণ অংশ।
পর্যালোচনা প্রয়োজন
axe-core এমন কিছু পেয়েছে যার বিষয়ে সে সিদ্ধান্ত নিতে পারেনি। এলিমেন্টটি নিজে দেখুন: এটি উত্তীর্ণ বা ব্যর্থ, দুটোই হতে পারে। এগুলো ব্যর্থতা হিসেবে গণনা করা হয় না।
ফোকাস ফাঁদ
Tab চাপলে ফোকাস বারবার একই কয়েকটি এলিমেন্টের মধ্যে ঘুরছিল। এগুলো যদি কুকি ব্যানারের অংশ হয়, তাহলে কীবোর্ড ব্যবহারকারীরা হয়তো পেজের বাকি অংশে পৌঁছাতে পারবেন না।
ফোকাস সরে না (Focus doesn’t move)
Tab চাপলেও কোনো কিছুতে ফোকাস যায়নি। হয়তো লিংক ও বাটনগুলো div বা span এলিমেন্ট দিয়ে বানানো, অথবা কোনো স্ক্রিপ্ট কী-প্রেসটি আটকে দিচ্ছে।
স্কিপ লিংক
প্রথম Tab স্টপটি “কনটেন্টে চলে যান” (Skip to content) ধরনের লিংক কি না। এটি না থাকলে কীবোর্ড ব্যবহারকারীদের প্রতিটি পেজে পুরো হেডার জুড়ে Tab চেপে যেতে হয়। ল্যান্ডমার্ক ও হেডিং দিয়েও WCAG 2.4.1 Bypass Blocks পূরণ করা যায়।
দৃশ্যমান ফোকাস নির্দেশক নেই
ফোকাস পাওয়া যেসব এলিমেন্টে আমরা কোনো আউটলাইন, বক্স শ্যাডো বা আন্ডারলাইন দেখিনি। ভিন্ন কোনো স্টাইল, যেমন রঙের পরিবর্তন, তবুও দৃশ্যমান হতে পারে, তাই নিশ্চিত হতে এগুলোতে নিজে Tab চেপে দেখুন।

সবচেয়ে সাধারণ সমস্যাগুলো কীভাবে ঠিক করবেন

  • যে লেখা কনট্রাস্ট অনুপাত পূরণ করে না

    সাধারণ লেখার জন্য ব্যাকগ্রাউন্ডের তুলনায় অন্তত 4.5:1 এবং বড় লেখার (প্রায় 24 px, বা বোল্ড হলে প্রায় 18.7 px) জন্য 3:1 প্রয়োজন। একটি একটি এলিমেন্ট ধরে নয়, থিম সেটিংস বা ডিজাইন টোকেনে রঙ বদলান, তারপর প্লেসহোল্ডার টেক্সট, হোভার স্টেট এবং ছবির ওপরের লেখা আবার যাচাই করুন।

  • অল্ট টেক্সট ছাড়া ছবি

    প্রতিটি অর্থবহ ছবিকে একটি alt অ্যাট্রিবিউট দিন, যা বলে ছবিটি কী দেখায় বা কী কাজ করে, যেমন প্রোডাক্টের নাম ও রঙ। সাজসজ্জার ছবিতে খালি alt (alt="") দিন, যাতে স্ক্রিন রিডার সেগুলো এড়িয়ে যায়। Shopify-তে প্রোডাক্টের Media অংশে ছবিটি থেকে অল্ট টেক্সট যোগ করুন; WordPress-এ Media Library-র Alternative Text ফিল্ডে।

  • লেবেল ছাড়া ফর্ম ফিল্ড

    প্রতিটি ইনপুটের সঙ্গে <label for> দিয়ে একটি লেবেল যুক্ত করুন, যার মান ফিল্ডের id-র সঙ্গে মেলে; দৃশ্যমান লেখা না থাকলে aria-label ব্যবহার করুন। প্লেসহোল্ডার টেক্সটকে একমাত্র লেবেল হিসেবে ব্যবহার করবেন না: কেউ টাইপ শুরু করলেই সেটি মুছে যায়। নিউজলেটার সাইন-আপ আর হেডারের সার্চ বক্সেই সাধারণত এই সমস্যা থাকে।

  • অ্যাক্সেসিবল নাম ছাড়া বাটন ও লিংক

    কার্ট, সার্চ, মেনু বা সোশ্যাল প্রোফাইলের আইকন কন্ট্রোলে প্রায়ই শুধু একটি SVG থাকে। দৃশ্যমান লেখা বা এমন একটি aria-label যোগ করুন, যা বলে কন্ট্রোলটি কী করে (“কার্ট খুলুন”, “আইকন” নয়), এবং SVG-তে aria-hidden="true" যোগ করুন।

  • যে কুকি ব্যানার ফোকাস আটকে রাখে

    নিশ্চিত করুন যে ব্যানারের প্রতিটি বাটনে Tab দিয়ে পৌঁছানো যায় এবং Enter বা Space দিয়ে ব্যবহার করা যায়, ব্যানার বন্ধ করলে ফোকাস পেজে ফিরে আসে, আর যে ব্যানার পেজ আটকে রাখে না সেটি একেবারেই ফোকাস ধরে রাখে না। আপনার কনসেন্ট টুলের সেটিংস দেখুন, আর স্ক্রিপ্টটি পুরোনো হলে সেটি আপডেট করুন।

  • CSS-এ সরিয়ে দেওয়া ফোকাস আউটলাইন

    আপনার স্টাইলশিটে লিংক, বাটন ও :focus-এর ওপর outline: none বা outline: 0 খুঁজুন। এর বদলে একটি দৃশ্যমান স্টাইল দিন, যেমন :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }।

এই টুল নিয়ে প্রশ্ন

এই অ্যাক্সেসিবিলিটি চেকার কি ফ্রি?

হ্যাঁ। কোনো সাইন-আপ লাগে না; আপনাকে শুধু নিশ্চিত করতে হয় যে সাইটটি আপনার মালিকানাধীন বা আপনি সেটি পরিচালনা করেন। পেইড অ্যাক্সেসিবিলিটি সংশোধন রিপোর্ট এর সঙ্গে যোগ করে আপনার সাইটম্যাপ থেকে সর্বোচ্চ আরও 20টি পেজ, শুধু কীবোর্ড দিয়ে একটি পূর্ণ যাত্রাপথ, 320 px রিফ্লো যাচাই, আপনার ব্যর্থ মার্কআপ থেকে তৈরি আগে-ও-পরের কোড, AI প্রম্পট, একটি PDF এবং 5 বার পুনঃপরীক্ষা।

একটি স্বয়ংক্রিয় চেকার WCAG-এর কতটুকু পরীক্ষা করতে পারে?

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

স্ক্যানে কিছু না পাওয়া গেলে কি আমার সাইট ADA বা WCAG মেনে চলে?

না। কোনো স্বয়ংক্রিয় পরীক্ষাই দেখাতে পারে না যে একটি সাইট WCAG-এর সঙ্গে সামঞ্জস্যপূর্ণ, কিংবা ADA, European Accessibility Act বা অন্য কোনো আইন মেনে চলে। পরিষ্কার ফলাফলের মানে শুধু এই যে, পরীক্ষিত পেজগুলোতে স্বয়ংক্রিয় নিয়ম কোনো ব্যর্থতা খুঁজে পায়নি।

আমি কি স্টেজিং সাইট বা লগইনের পেছনের পেজ যাচাই করতে পারি?

লগইন, পাসওয়ার্ড বা বট সুরক্ষার পেছনের পেজ পরীক্ষা করা যায় না। আপনার বট সুরক্ষা যদি স্ক্যান আটকে দেয়, তাহলে FixReportsScanner ইউজার এজেন্টকে অনুমতি দিন অথবা স্টেজিং সাইটের একটি পাবলিক কপি পরীক্ষা করুন।

আমি একটি সমস্যা ঠিক করেছি। তাহলে ফলাফল একই দেখাচ্ছে কেন?

একই ঠিকানার ফলাফল গত এক ঘণ্টার কোনো স্ক্যান থেকে পুনরায় ব্যবহার করা হতে পারে। আবার পরীক্ষা করার আগে সেই এক ঘণ্টা পার হওয়া পর্যন্ত অপেক্ষা করুন, এবং কোনো পেজ ক্যাশ বা CDN ক্যাশ থাকলে তা মুছে দিন।

সূত্র

সংশ্লিষ্ট টুল

অ্যাক্সেসিবিলিটি সংশোধন রিপোর্ট ($174, এককালীন) পুরো ফ্রি স্ক্যান থেকে শুরু করে এবং যোগ করে আরও পেজ, প্রতিটি সমস্যার জন্য করণীয় পরিবর্তন, একটি PDF এবং আপনার সংশোধন যাচাইয়ের জন্য রি-টেস্ট।

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