এই পৃষ্ঠাটি ক্রোম ডেভটুলস-এর অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলির একটি বিশদ তথ্যসূত্র। এটি সেইসব ওয়েব ডেভেলপারদের জন্য উদ্দিষ্ট যারা:
- ডেভটুলস সম্পর্কে প্রাথমিক ধারণা থাকতে হবে, যেমন এটি কীভাবে খুলতে হয়।
- প্রবেশগম্যতার নীতি ও সর্বোত্তম অনুশীলন সম্পর্কে অবগত আছেন।
এই রেফারেন্সটির উদ্দেশ্য হলো ডেভটুলস-এ উপলব্ধ সেই সমস্ত টুলগুলো সম্পর্কে আপনাকে জানতে সাহায্য করা, যেগুলো একটি পেজের অ্যাক্সেসিবিলিটি পরীক্ষা করতে সহায়ক।
আপনি যদি স্ক্রিন রিডারের মতো কোনো সহায়ক প্রযুক্তি ব্যবহার করে ডেভটুলস নেভিগেট করার বিষয়ে সাহায্য চান, তাহলে “Navigating Chrome DevTools With Assistive Technology” দেখুন।
আপনি যদি অ্যাক্সেসযোগ্য ওয়েবসাইট তৈরি করার পদ্ধতি শিখতে চান, তাহলে 'Learn Accessibility' দেখুন।
ক্রোম ডেভটুলস-এর অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলির সংক্ষিপ্ত বিবরণ
এই অংশে ব্যাখ্যা করা হয়েছে কীভাবে ডেভটুলস আপনার সামগ্রিক অ্যাক্সেসিবিলিটি টুলকিটের সাথে সামঞ্জস্যপূর্ণ।
কোনো পৃষ্ঠা প্রবেশযোগ্য কিনা তা নির্ধারণ করার সময়, আপনাকে দুটি সাধারণ প্রশ্ন মনে রাখতে হবে:
- আমি কি কিবোর্ড বা স্ক্রিন রিডার দিয়ে পৃষ্ঠাটি নেভিগেট করতে পারি?
- Are the page's elements properly marked up for screen readers?
সাধারণত, ডেভটুলস আপনাকে ২ নং প্রশ্নের সাথে সম্পর্কিত ত্রুটিগুলি সমাধান করতে সাহায্য করতে পারে, কারণ এই ত্রুটিগুলি স্বয়ংক্রিয়ভাবে সহজেই শনাক্ত করা যায়। ১ নং প্রশ্নটিও ঠিক ততটাই গুরুত্বপূর্ণ, কিন্তু দুর্ভাগ্যবশত ডেভটুলস এক্ষেত্রে আপনাকে সাহায্য করতে পারবে না। ১ নং প্রশ্নের সাথে সম্পর্কিত ত্রুটিগুলি খুঁজে বের করার একমাত্র উপায় হলো নিজে কিবোর্ড বা স্ক্রিন রিডার ব্যবহার করে পৃষ্ঠাটি চেষ্টা করা। আরও জানতে ‘How To Do An Accessibility Review’ দেখুন।
একটি পৃষ্ঠার প্রবেশগম্যতা নিরীক্ষা করুন
সাধারণভাবে, লাইটহাউস প্যানেলের অধীনে থাকা অ্যাক্সেসিবিলিটি চেকগুলি ব্যবহার করে নির্ধারণ করুন যে:
- পৃষ্ঠাটি স্ক্রিন রিডারদের জন্য যথাযথভাবে মার্কআপ করা হয়েছে।
- একটি পৃষ্ঠার টেক্সট উপাদানগুলোর কনট্রাস্ট রেশিও পর্যাপ্ত। আরও দেখুন, আপনার ওয়েবসাইটকে আরও পাঠযোগ্য করে তুলুন ।
একটি পৃষ্ঠা নিরীক্ষা করতে:
- যে ইউআরএলটি আপনি নিরীক্ষা করতে চান, সেখানে যান।
DevTools-এ, লাইটহাউস প্যানেলটিতে ক্লিক করুন। DevTools আপনাকে বিভিন্ন কনফিগারেশন অপশন দেখাবে।
ডিভাইসের জন্য, আপনি যদি একটি মোবাইল ডিভাইস অনুকরণ করতে চান তবে ‘মোবাইল’ নির্বাচন করুন। এই বিকল্পটি আপনার ইউজার এজেন্ট স্ট্রিং পরিবর্তন করে এবং ভিউপোর্টের আকার পরিবর্তন করে। যদি পৃষ্ঠাটির মোবাইল সংস্করণ ডেস্কটপ সংস্করণের চেয়ে ভিন্নভাবে প্রদর্শিত হয়, তবে এই বিকল্পটি আপনার অডিটের ফলাফলের উপর একটি উল্লেখযোগ্য প্রভাব ফেলতে পারে।
লাইটহাউস বিভাগে, অ্যাক্সেসিবিলিটি চালু আছে কিনা তা নিশ্চিত করুন। আপনার রিপোর্ট থেকে অন্যান্য বিভাগগুলো বাদ দিতে চাইলে সেগুলোকে নিষ্ক্রিয় করুন। আপনার পৃষ্ঠার মান উন্নত করার জন্য অন্য উপায় খুঁজে বের করতে চাইলে সেগুলোকে সক্রিয় রাখুন।
থ্রটলিং সেকশনটি আপনাকে নেটওয়ার্ক এবং সিপিইউ-এর গতি নিয়ন্ত্রণ করতে দেয়, যা লোড পারফরম্যান্স বিশ্লেষণ করার সময় উপযোগী। এই অপশনটি আপনার অ্যাক্সেসিবিলিটি স্কোরের জন্য অপ্রাসঙ্গিক হওয়া উচিত, তাই আপনি আপনার পছন্দমতো যেকোনো কিছু ব্যবহার করতে পারেন।
‘ক্লিয়ার স্টোরেজ’ চেকবক্সটি আপনাকে পৃষ্ঠা লোড করার আগে সমস্ত স্টোরেজ খালি করতে, অথবা পৃষ্ঠা লোডের মধ্যবর্তী সময়ে স্টোরেজ সংরক্ষণ করতে দেয়। এই বিকল্পটি সম্ভবত আপনার অ্যাক্সেসিবিলিটি স্কোরের জন্য অপ্রাসঙ্গিক, তাই আপনি আপনার পছন্দ অনুযায়ী যেকোনো কিছু ব্যবহার করতে পারেন।
'Generate Report'-এ ক্লিক করুন। ১০ থেকে ৩০ সেকেন্ড পর, DevTools একটি রিপোর্ট প্রদান করবে। আপনার রিপোর্টটি পেজটির অ্যাক্সেসিবিলিটি উন্নত করার জন্য বিভিন্ন পরামর্শ দেয়।
এ সম্পর্কে আরও জানতে অডিটটিতে ক্লিক করুন।
সেই অডিটের ডকুমেন্টেশন দেখতে 'আরও জানুন'- এ ক্লিক করুন।
আরও দেখুন: aXe এক্সটেনশন
ক্রোমে ডিফল্টভাবে উপলব্ধ লাইটহাউস প্যানেলের পরিবর্তে আপনি aXe এক্সটেনশন বা লাইটহাউস এক্সটেনশন ব্যবহার করতে পছন্দ করতে পারেন। এগুলি সাধারণত একই তথ্য প্রদান করে, কারণ aXe হলো সেই অন্তর্নিহিত ইঞ্জিন যা লাইটহাউস প্যানেলকে চালনা করে। aXe এক্সটেনশনের ইউজার ইন্টারফেস ভিন্ন এবং এটি অডিট সম্পর্কে কিছুটা ভিন্নভাবে বর্ণনা করে।
অডিট প্যানেলের তুলনায় aXe এক্সটেনশনের একটি সুবিধা হলো, এটি আপনাকে ব্যর্থ নোডগুলো পরিদর্শন ও হাইলাইট করতে দেয়।
ডিভাইস টুলবার দিয়ে কন্টেন্ট রিফ্লো পরীক্ষা করুন
ওয়েব কন্টেন্ট অ্যাক্সেসিবিলিটি গাইডলাইনস (WCAG)-এর রিফ্লো ক্রাইটেরিয়ন অনুযায়ী, ভিউপোর্টের আকার পরিবর্তন বা ওরিয়েন্টেশন বদলালেও ওয়েব কন্টেন্ট যেন তথ্যের কোনো ক্ষতি ছাড়াই দেখার যোগ্য থাকে। কন্টেন্টকে একটিমাত্র কলামে অ্যালাইন করার মাধ্যমে, যারা বড় আকারের টেক্সট ব্যবহার করেন, তাদের সুবিধা দেওয়া হয়। আপনার কন্টেন্ট কীভাবে রিফ্লো হয় তা পরীক্ষা করতে, লাইটহাউস প্যানেলের ডিভাইস টুলবার ব্যবহার করে ভিউপোর্টের আকার ডাইনামিকভাবে পরিবর্তন করুন ।
ভিউপোর্টের আকার পরিবর্তন করতে, হ্যান্ডেলগুলো টেনে আপনার প্রয়োজনমতো মাপে আনুন। পরীক্ষার জন্য নির্দিষ্ট মাপ জানতে, WCAG রিফ্লো সফলতার মানদণ্ড দেখুন।
অ্যাক্সেসিবিলিটি ট্যাব
অ্যাক্সেসিবিলিটি ট্যাবে আপনি DOM নোডগুলির অ্যাক্সেসিবিলিটি ট্রি, ARIA অ্যাট্রিবিউট এবং কম্পিউটেড অ্যাক্সেসিবিলিটি প্রোপার্টি দেখতে পারেন।
অ্যাক্সেসিবিলিটি ট্যাবটি খুলতে:
- এলিমেন্টস প্যানেলে ক্লিক করুন।
- DOM ট্রি- তে, আপনি যে এলিমেন্টটি পরিদর্শন করতে চান সেটি নির্বাচন করুন।
- অ্যাক্সেসিবিলিটি ট্যাবে ক্লিক করুন। এই ট্যাবটি ‘More Tabs’ কিবোর্ডের ডাবল অ্যারো বাটনের আড়ালে লুকানো থাকতে পারে।
ভবিষ্যতে দ্রুত অ্যাক্সেসের জন্য আপনি অ্যাক্সেসিবিলিটি ট্যাবটি সামনে টেনে আনতে পারেন।
অ্যাক্সেসিবিলিটি ট্রি-তে একটি উপাদানের অবস্থান দেখুন
অ্যাক্সেসিবিলিটি ট্রি হলো DOM ট্রি-এর একটি উপসেট। এতে DOM ট্রি-এর শুধুমাত্র সেইসব এলিমেন্ট থাকে যেগুলো স্ক্রিন রিডারে পেজের বিষয়বস্তু প্রদর্শনের জন্য প্রাসঙ্গিক ও উপযোগী।
অ্যাক্সেসিবিলিটি ট্যাব থেকে অ্যাক্সেসিবিলিটি ট্রি-তে কোনো এলিমেন্টের অবস্থান দেখতে, 'Show accessibility tree' টগলটি ব্যবহার করুন।
এই টগলটি এলিমেন্টস প্যানেলের DOM ট্রি-কে একটি পূর্ণ-পৃষ্ঠার অ্যাক্সেসিবিলিটি ট্রি দিয়ে প্রতিস্থাপন করে। এই ট্রি আপনাকে আরও ভালোভাবে বুঝতে সাহায্য করে যে আপনার ওয়েব কন্টেন্ট সহায়ক প্রযুক্তির কাছে কীভাবে উপস্থাপিত হয়।
অ্যাক্সেসিবিলিটি ট্রি ব্রাউজ করতে, আপনি নোডগুলি প্রসারিত ও নির্বাচন করে 'কম্পিউটেড প্রোপার্টিজ'-এর অধীনে তাদের বিস্তারিত বিবরণ দেখতে পারেন।
যেকোনো মুহূর্তে আপনি DOM ট্রি-তে ফিরে যেতে পারেন। সংশ্লিষ্ট DOM নোডটি নির্বাচিতই থাকে। DOM নোড এবং এর অ্যাক্সেসিবিলিটি ট্রি নোডের মধ্যকার ম্যাপিং বোঝার জন্য এটি একটি চমৎকার উপায়।
একটি উপাদানের ARIA অ্যাট্রিবিউটগুলি দেখুন
ARIA অ্যাট্রিবিউটগুলো নিশ্চিত করে যে, একটি পৃষ্ঠার বিষয়বস্তু সঠিকভাবে উপস্থাপন করার জন্য স্ক্রিন রিডারগুলোর কাছে প্রয়োজনীয় সমস্ত তথ্য থাকে।
অ্যাক্সেসিবিলিটি ট্যাবে একটি এলিমেন্টের ARIA অ্যাট্রিবিউটগুলো দেখুন।
স্ক্রিনে উপাদানগুলির উৎস ক্রম দেখুন
The elements on the page don't always appear in the order they are in the source. This might confuse users who depend on assistive technology to navigate the web.
আপনার ওয়েবসাইটে সোর্স অর্ডার দেখতে ও ডিবাগ করতে:
- পৃষ্ঠার কোনো একটি এলিমেন্ট পরিদর্শন করুন ।
- Elements > Accessibility > Source Order Viewer-এ , 'Show source order ' চেকবক্সটি চেক করুন।
ভিউপোর্টে, ডেভটুলস নেস্টেড এলিমেন্টগুলোকে বর্ডার দিয়ে চিহ্নিত করে এবং তাদের সোর্স অর্ডার অনুযায়ী সংখ্যা দিয়ে চিহ্নিত করে।
একটি উপাদানের গণনাকৃত অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলি দেখুন
কিছু অ্যাক্সেসিবিলিটি প্রোপার্টি ব্রাউজার দ্বারা গতিশীলভাবে গণনা করা হয়। এই প্রোপার্টিগুলো অ্যাক্সেসিবিলিটি ট্যাবের কম্পিউটেড প্রোপার্টিজ বিভাগে দেখা যেতে পারে।
অ্যাক্সেসিবিলিটি ট্যাবে একটি এলিমেন্টের গণনাকৃত অ্যাক্সেসিবিলিটি প্রোপার্টিগুলো দেখুন।
রেন্ডারিং ট্যাব
আপনার কোড বা টেস্টিং এনভায়রনমেন্টে ম্যানুয়ালি উল্লেখ না করেই নির্দিষ্ট কিছু CSS মিডিয়া ফিচার অনুকরণ করতে রেন্ডারিং ট্যাবটি ব্যবহার করুন। এই মিডিয়া ফিচারগুলো ব্যবহারকারীর ডিভাইসের পছন্দের উপর ভিত্তি করে আপনার ওয়েব পেজের চেহারা পরিবর্তন করে। আপনার পেজের ভিজ্যুয়াল অ্যাক্সেসিবিলিটি পরীক্ষা করতে, রেন্ডারিং ট্যাবটি খুলুন এবং নিম্নলিখিত অপশনগুলো দেখুন:
- বিভিন্ন ধরনের কৃত্রিম দৃষ্টিগত ত্রুটির মধ্য দিয়ে আপনার পৃষ্ঠাটি দেখার জন্য দৃষ্টিশক্তির ঘাটতি অনুকরণ করুন ।
- ডার্ক বা লাইট মোড চালু করলে আপনার পেজটি কেমন দেখায় তা দেখতে CSS মিডিয়া ফিচার
prefers-color-schemeঅনুকরণ করুন । অনেকেই ডার্ক মোডকে একটি নান্দনিক পছন্দ হিসেবে মনে করেন, কিন্তু অ্যাক্সেসিবিলিটি টুল হিসেবে ডার্ক মোডের উপযোগিতা অন্যভাবেও প্রমাণিত হয়। - আপনার পৃষ্ঠাটিকে প্রিন্ট বা স্ক্রিন মিডিয়া স্টাইলে দেখতে CSS মিডিয়া টাইপ অনুকরণ করুন ।
- ইউজার এজেন্ট ফোর্সড কালার মোড চালু করলে আপনার পেজটি কেমন দেখাবে তা দেখতে CSS মিডিয়া ফিচার '
forced-colorsঅনুকরণ করুন । - আপনার ওয়েব কন্টেন্টকে উচ্চতর, নিম্নতর বা একটি নির্দিষ্ট কনট্রাস্ট মানে দেখার জন্য CSS মিডিয়া ফিচার
prefers-contrastঅনুকরণ করুন । - আপনার ওয়েব কন্টেন্ট কম গতিতে দেখার জন্য CSS মিডিয়া ফিচার
prefers-reduced-motionঅনুকরণ করুন । কিছু ব্যবহারকারী অ্যানিমেটেড কন্টেন্টের কারণে মনোযোগে ব্যাঘাত বা বমি বমি ভাব অনুভব করেন। অ্যানিমেশন বা স্মুথ-স্ক্রোলিং-এর মতো বিষয়গুলো ছাড়া আপনার পেজটি কেমন দেখায়, তা দেখতে এই অপশনটি ব্যবহার করুন। - ব্যবহারকারী ডিভাইসে ব্যবহৃত স্বচ্ছ বা অর্ধস্বচ্ছ লেয়ার ইফেক্ট কমাতে অনুরোধ করলে আপনার ওয়েব কন্টেন্ট কেমন দেখাবে তা দেখতে CSS মিডিয়া ফিচার
prefers-reduced-transparencyঅনুকরণ করুন ।
কম কনট্রাস্ট টেক্সট সনাক্ত করুন এবং ঠিক করুন
ডেভটুলস স্বয়ংক্রিয়ভাবে কম-কনট্রাস্টের সমস্যাগুলো খুঁজে বের করতে পারে এবং সেগুলো সমাধানে সাহায্য করার জন্য আরও ভালো রঙের পরামর্শ দিতে পারে। আরও জানতে ‘আপনার ওয়েবসাইটকে আরও পাঠযোগ্য করে তুলুন’ দেখুন।