এই নির্দেশিকাটি সেইসব ব্যবহারকারীদের ক্রোম ডেভটুলস অ্যাক্সেস ও ব্যবহারে সাহায্য করার উদ্দেশ্যে তৈরি, যারা মূলত স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তির (AT) উপর নির্ভর করেন। ক্রোম ডেভটুলস হলো গুগল ক্রোম ব্রাউজারের সাথে যুক্ত ওয়েব ডেভেলপার টুলসের একটি সংকলন। কোনো ওয়েব পেজের অ্যাক্সেসিবিলিটি উন্নত করার সাথে সম্পর্কিত ডেভটুলস ফিচারগুলো খুঁজলে, অ্যাক্সেসিবিলিটি রেফারেন্সটি পর্যালোচনা করুন।
DevTools-এর অ্যাক্সেসিবিলিটি এখনও একটি নির্মাণাধীন কাজ। কিছু প্যানেল ও ট্যাব অন্যগুলোর চেয়ে AT-এর সাথে ভালোভাবে কাজ করে। এই নির্দেশিকাটি আপনাকে সবচেয়ে অ্যাক্সেসিবল প্যানেলগুলো সম্পর্কে জানাবে এবং এই প্রক্রিয়ায় আপনি যে নির্দিষ্ট সমস্যাগুলোর সম্মুখীন হতে পারেন, সেগুলো তুলে ধরবে।
সংক্ষিপ্ত বিবরণ
DevTools একাধিক প্যানেলে বিভক্ত, যেগুলো একটি ARIA tablist বিন্যস্ত থাকে। উদাহরণস্বরূপ:
- এলিমেন্টস প্যানেল আপনাকে DOM নোড বা CSS দেখতে এবং পরিবর্তন করতে দেয়।
- কনসোল প্যানেল আপনাকে জাভাস্ক্রিপ্ট লগ পড়তে এবং অবজেক্টগুলো সরাসরি সম্পাদনা করতে দেয়।
প্রতিটি প্যানেলের কন্টেন্ট এরিয়ার মধ্যে বিভিন্ন ধরনের টুল থাকে, যেগুলোকে ডকুমেন্টেশনে প্রায়শই ট্যাব বা পেইন বলা হয়। উদাহরণস্বরূপ, এলিমেন্টস প্যানেলে ইভেন্ট লিসেনার, অ্যাক্সেসিবিলিটি ট্রি এবং আরও অনেক কিছু পরীক্ষা করার জন্য অতিরিক্ত ট্যাব রয়েছে। ট্যাব এবং পেইনের মধ্যে পার্থক্যটি কিছুটা ইচ্ছাধীন। অফিশিয়াল ডেভটুলস ডকুমেন্টেশনের বাকি অংশের সাথে সামঞ্জস্য বজায় রাখার জন্যই কেবল একটি পরিভাষা বা অন্যটি দেখা যায়।
কিবোর্ড শর্টকাট
ডেভটুলস কীবোর্ড শর্টকাট রেফারেন্সটি একটি সহায়ক চিটশিট। এটি অবশ্যই বুকমার্ক করে রাখুন এবং বিভিন্ন প্যানেল অন্বেষণ করার সময় এটি দেখে নিন।
ওপেন ডেভটুলস
শুরু করার জন্য, “Open Chrome DevTools” অংশটি পড়ুন। কীবোর্ড শর্টকাট অথবা মেনু আইটেমের মাধ্যমে DevTools খোলার বিভিন্ন উপায় রয়েছে।
প্যানেলগুলির মধ্যে নেভিগেট করুন
আপনি কিবোর্ড, কমান্ড মেনু, অথবা মাউস বা ট্র্যাকপ্যাড ব্যবহার করে প্যানেলগুলোর মধ্যে চলাচল করতে পারেন।
কিবোর্ডের মাধ্যমে নেভিগেট করুন
- DevTools খোলা থাকা অবস্থায়, পরবর্তী প্যানেলে ফোকাস করার জন্য Control + ] অথবা Command + ] (Mac) চাপুন।
- পূর্ববর্তী প্যানেলে ফোকাস করতে Control + [ অথবা Command + [ (Mac) চাপুন।
- কোনো প্যানেলের
tablistফোকাস নিয়ে যাওয়ার জন্য Shift + Tab ব্যবহার করা এবং প্যানেল পরিবর্তন করার জন্য অ্যারো কী ব্যবহার করাও সম্ভব, যদিও পূর্বে উল্লিখিত শর্টকাটগুলো ব্যবহার করা আরও দ্রুততর হতে পারে।
পরিচিত সমস্যা
- কিছু প্যানেল, যেমন কনসোল এবং পারফরম্যান্স প্যানেল, সক্রিয় হওয়ার সাথে সাথেই তাদের কন্টেন্ট এরিয়াতে ফোকাস নিয়ে যেতে পারে। এর ফলে অ্যারো কী ব্যবহার করে নেভিগেট করা কঠিন হয়ে পড়তে পারে।
- নির্বাচিত প্যানেলের নামটি ঘোষণা করা হয়, কিন্তু তার আগে স্ক্রিন রিডার প্যানেলটিতে ফোকাস করা বিষয়বস্তু পড়ে শোনায়। এর ফলে বিষয়টি সহজেই চোখ এড়িয়ে যেতে পারে।
কমান্ড মেনু দ্বারা নেভিগেট করুন
কোনো নির্দিষ্ট প্যানেলে ফোকাস করতে, কমান্ড মেনু ব্যবহার করুন:
- DevTools খোলা থাকা অবস্থায়, কমান্ড মেনু খোলার জন্য Control + Shift + P অথবা Command + Shift + P (Mac) চাপুন। কমান্ড মেনুটি হলো একটি ফাজি সার্চ অটোকমপ্লিট কম্বোবক্স।
- আপনি যে প্যানেলটি খুলতে চান তার নাম টাইপ করুন, তারপর সঠিক অপশনে যেতে কিবোর্ডের ডাউন অ্যারো ব্যবহার করুন।
- কমান্ড চালানোর জন্য এন্টার চাপুন।
উদাহরণস্বরূপ, এলিমেন্টস প্যানেলটি খুলতে:
- কমান্ড মেনু খুলুন।
- প্রথমে E এবং তারপর L টাইপ করুন। প্যানেল > উপাদানসমূহ দেখান বিকল্পটি নির্বাচিত হবে।
- প্যানেলটি খোলার কমান্ডটি চালাতে এন্টার চাপুন।
এইভাবে একটি প্যানেল খুললে ফোকাস প্যানেলটির নিজস্ব বিষয়বস্তুর উপর চলে যায়। এলিমেন্টস প্যানেলের ক্ষেত্রে, ফোকাস DOM ট্রি- তে চলে যায়।
উপাদান প্যানেল
পৃষ্ঠার একটি উপাদান পরিদর্শন করুন
- স্ক্রিন রিডারের কার্সার ব্যবহার করে আপনি যে এলিমেন্টটি পরিদর্শন করতে চান, সেখানে যান।
- কনটেক্সট মেনু খোলার জন্য এলিমেন্টটির উপর একটি রাইট-মাউস ক্লিক অনুকরণ করুন।
- ইন্সপেক্ট অপশনটি বেছে নিন। এটি এলিমেন্টস প্যানেলটি খোলে এবং ডম ট্রি- তে থাকা এলিমেন্টটিতে ফোকাস করে।
DOM ট্রি-টি একটি ARIA tree হিসেবে বিন্যস্ত থাকে। "কিবোর্ড দিয়ে DOM ট্রি নেভিগেট করুন" অংশে একটি উদাহরণ দেখুন।
DOM ট্রি-তে থাকা একটি এলিমেন্টের কোড কপি করুন।
- DOM ট্রি- এর কোনো একটি নোডের উপর ফোকাস রেখে, রাইট-ক্লিক কনটেক্সট মেনুটি খুলুন।
- কপি অপশনটি প্রসারিত করুন।
- outerHTML কপি নির্বাচন করুন।
পরিচিত সমস্যা
-
outerHTMLকপি করার সময় প্রায়শই উদ্দিষ্ট নোডের পরিবর্তে প্যারেন্ট নোডটি সিলেক্ট হয়ে যায়। তবে, এলিমেন্টটির বিষয়বস্তু কপি করাouterHTMLমধ্যেই থাকা উচিত।
DOM ট্রি-তে কোনো একটি এলিমেন্টের অ্যাট্রিবিউটগুলো পরিবর্তন করুন।
- DOM ট্রি- এর কোনো নোডে ফোকাস থাকা অবস্থায়, সেটিকে সম্পাদনাযোগ্য করতে এন্টার চাপুন।
- অ্যাট্রিবিউটের মানগুলোর মধ্যে যাতায়াত করতে ট্যাব চাপুন। যখন আপনি 'স্পেস' শুনবেন, তখন আপনি একটি খালি টেক্সট ইনপুটের ভেতরে থাকবেন এবং একটি নতুন অ্যাট্রিবিউটের মান টাইপ করতে পারবেন।
- পরিবর্তনটি গ্রহণ করতে এবং উপাদানটির সম্পূর্ণ বিষয়বস্তু শুনতে Control + Enter অথবা Command + Enter (Mac) চাপুন।
পরিচিত সমস্যা
- আপনি যখন টেক্সট ইনপুটে টাইপ করবেন, তখন কোনো ফিডব্যাক পাবেন না। যদি টাইপ করার সময় কোনো ভুল করেন এবং আপনার ইনপুটটি দেখার জন্য অ্যারো কী ব্যবহার করেন, তাহলেও কোনো ফিডব্যাক পাবেন না। আপনার কাজ যাচাই করার সবচেয়ে সহজ উপায় হলো পরিবর্তনটি গ্রহণ করা, এবং তারপর সম্পূর্ণ এলিমেন্টটির ঘোষণা শোনা।
DOM ট্রি-তে থাকা কোনো এলিমেন্টের HTML সম্পাদনা করুন
- DOM ট্রি- এর কোনো নোডে ফোকাস থাকা অবস্থায়, সেটিকে সম্পাদনাযোগ্য করতে এন্টার চাপুন।
- অ্যাট্রিবিউটের মানগুলোর মধ্যে যাতায়াত করতে ট্যাব চাপুন। যখন আপনি এলিমেন্টটির নাম শুনবেন, যেমন,
h2, তখন আপনি একটি টেক্সট ইনপুটের ভেতরে থাকবেন এবং এলিমেন্টটির ধরন পরিবর্তন করতে পারবেন। - পরিবর্তনটি গ্রহণ করতে Control + Enter অথবা Command + Enter (Mac) চাপুন।
উদাহরণস্বরূপ, h3 টাইপ করে Control + Enter বা Command + Enter (Mac) চাপলে এলিমেন্টটির শুরু এবং শেষের ট্যাগ h3 তে পরিবর্তিত হয়ে যায়।
উপাদান প্যানেল ট্যাব
এলিমেন্টস প্যানেলে অতিরিক্ত ট্যাব রয়েছে, যেগুলোর মাধ্যমে কোনো এলিমেন্টে প্রয়োগ করা CSS বা অ্যাক্সেসিবিলিটি ট্রি-তে তার অবস্থানের মতো বিষয়গুলো পরিদর্শন করা যায়।
- DOM ট্রি- এর কোনো একটি নোডে ফোকাস থাকা অবস্থায়, স্টাইলস পেইনটি নির্বাচিত হওয়ার শব্দ না শোনা পর্যন্ত ট্যাব চাপতে থাকুন।
- অন্যান্য উপলব্ধ ট্যাবগুলি অন্বেষণ করতে ডান তীরচিহ্ন ব্যবহার করুন।
DOM ট্রি href অ্যাট্রিবিউটযুক্ত এলিমেন্টগুলোকে ফোকাসযোগ্য লিঙ্কে পরিণত করে, তাই স্টাইলস প্যানে পৌঁছানোর জন্য আপনাকে একাধিকবার ট্যাব চাপতে হতে পারে।
পরিচিত সমস্যা
DOM ব্রেকপয়েন্ট এবং প্রোপার্টিজ ট্যাবগুলো কিবোর্ডের মাধ্যমে অ্যাক্সেসযোগ্য নয়।
স্টাইল প্যানে
স্টাইলস প্যানে আপনি স্টাইল ফিল্টার করা, এলিমেন্টের অবস্থা (যেমন :active এবং :focus ) টগল করা, ক্লাস টগল করা এবং নতুন ক্লাস যোগ করার জন্য কন্ট্রোল পাবেন। এছাড়াও, DOM ট্রি- তে ফোকাসে থাকা এলিমেন্টে প্রয়োগ করা স্টাইলগুলো অন্বেষণ ও পরিবর্তন করার জন্য একটি শক্তিশালী স্টাইল ইন্সপেকশন টুল রয়েছে।
স্টাইলস পেইন সম্পর্কে বোঝার মূল ধারণাটি হলো, এটি শুধুমাত্র DOM ট্রি- তে বর্তমানে নির্বাচিত নোডের স্টাইলগুলো দেখায়। উদাহরণস্বরূপ, ধরুন আপনি একটি <header> নোডের স্টাইলগুলো দেখা শেষ করেছেন এবং এখন একটি <footer> নোডের স্টাইল দেখতে চান। তা করার জন্য, আপনাকে অবশ্যই DOM ট্রি- তে <footer> নোডটি নির্বাচন করতে হবে।
footer নোডের কাছাকাছি থাকা কোনো নোড (যেমন ফুটারের ভেতরের কোনো লিঙ্ক) ইন্সপেক্ট করতে ইন্সপেক্ট ওয়ার্কফ্লো ব্যবহার করা আপনার জন্য দ্রুততর হতে পারে, যা DOM ট্রি-কে ফোকাস করে, এবং তারপর আপনার কিবোর্ড ব্যবহার করে আপনার কাঙ্ক্ষিত নির্দিষ্ট নোডটিতে নেভিগেট করুন।
স্টাইল প্যানে নেভিগেট করুন
যেহেতু সমস্ত স্টাইল টুল কোনো না কোনোভাবে স্টাইলস পেনের সাথে সংযুক্ত, তাই প্রথমে এই টুলটিতে বিশেষজ্ঞ হয়ে ওঠাই যুক্তিযুক্ত।
- স্টাইলস প্যানে ফোকাস রেখে, এর ভেতরে ফোকাস নিয়ে যেতে এবং এর বিষয়বস্তু অন্বেষণ করতে ট্যাব চাপুন।
- প্রথম স্টাইলটি সক্রিয় না হওয়া পর্যন্ত ট্যাব চাপুন। আপনি যদি স্ক্রিন রিডার ব্যবহার করেন, তাহলে এই প্রথম স্টাইলটি "
element.style {}" হিসাবে ঘোষিত হয়। - নির্দিষ্টতার ক্রম অনুসারে স্টাইলগুলির তালিকায় নেভিগেট করতে ডাউন অ্যারো চাপুন। একটি স্ক্রিন রিডার প্রতিটি স্টাইলকে CSS ফাইলের নাম, স্টাইলটি যে লাইনে রয়েছে তার লাইন নম্বর এবং স্টাইলের আসল নাম দিয়ে ঘোষণা করে। উদাহরণস্বরূপ: "
main.css:233.card__img {}" - কোনো স্টাইল আরও বিস্তারিতভাবে দেখার জন্য এন্টার চাপুন। স্টাইলের নামের একটি সম্পাদনাযোগ্য সংস্করণে ফোকাস স্থানান্তরিত হবে।
- প্রতিটি CSS প্রপার্টির সম্পাদনাযোগ্য সংস্করণ এবং তাদের সংশ্লিষ্ট মানগুলির মধ্যে যাতায়াত করতে ট্যাব চাপুন। প্রতিটি স্টাইল ব্লকের শেষে একটি খালি সম্পাদনাযোগ্য টেক্সট ফিল্ড রয়েছে, যা আপনি অতিরিক্ত CSS প্রপার্টি যোগ করার জন্য ব্যবহার করতে পারেন।
- আপনি স্টাইলের তালিকাটি দেখতে ট্যাব চাপতে পারেন, অথবা এই মোড থেকে বেরিয়ে অ্যারো কী ব্যবহার করে নেভিগেট করার পদ্ধতিতে ফিরে যেতে এস্কেপ চাপতে পারেন।
অতিরিক্ত শর্টকাটগুলোর জন্য স্টাইলস পেনের কিবোর্ড রেফারেন্সটি পড়ে নিন।
পরিচিত সমস্যা
- আপনি যদি ফিল্টার সম্পাদনাযোগ্য টেক্সট ফিল্ড ব্যবহার করেন, তাহলে স্টাইলের তালিকায় নেভিগেট করতে পারবেন না।
উপাদানের অবস্থা টগল করুন
কোনো এলিমেন্টের অবস্থা টগল করতে, যেমন :active বা :focus :
- স্টাইলস প্যানে যান এবং টগল এলিমেন্ট স্টেট বাটনটিতে ফোকাস না আসা পর্যন্ত ট্যাব চাপতে থাকুন।
- এলিমেন্টের অবস্থাগুলোর সংগ্রহ প্রসারিত করতে এন্টার চাপুন। এলিমেন্টের অবস্থাগুলো একগুচ্ছ চেকবক্স হিসেবে প্রদর্শিত হয়।
- প্রথম স্টেট,
:active, ফোকাস না পাওয়া পর্যন্ত ট্যাব চাপুন। - এটি সক্রিয় করতে স্পেস চাপুন। DOM ট্রি-তে বর্তমানে নির্বাচিত এলিমেন্টটিতে যদি
:activeস্টাইল থাকে, তবে সেটি এখন প্রয়োগ করা হবে। - উপলব্ধ সমস্ত অবস্থা অন্বেষণ করতে ট্যাব চাপতে থাকুন।
একটি বিদ্যমান ক্লাস যোগ করুন
‘Toggle Element State’ বাটনটির পাশেই ‘Element Classes’ বাটনটি রয়েছে। Tab চেপে তারপর Enter চেপে ফোকাসটি সেখানে নিয়ে যান। ফোকাসটি ‘Add New Class’ লেবেলযুক্ত একটি এডিট টেক্সট ফিল্ডে চলে যাবে।
এলিমেন্ট ক্লাসেস বাটনটি মূলত কোনো এলিমেন্টে বিদ্যমান ক্লাস যোগ করার জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ, যদি আপনার স্টাইলশীটে .clearfix নামের একটি হেল্পার ক্লাস থাকে, তাহলে আপনি এডিট টেক্সট ফিল্ডের ভেতরে . চাপলে ক্লাসগুলোর একটি সাজেশন তালিকা দেখতে পাবেন এবং ডাউন অ্যারো ব্যবহার করে .clearfix সাজেশনটি খুঁজে নিতে পারবেন। অথবা, ক্লাসের নামটি নিজে টাইপ করে এন্টার চাপলে তা প্রয়োগ হয়ে যাবে।
একটি নতুন স্টাইল নিয়ম যোগ করুন
এলিমেন্ট ক্লাসেস বাটনের পাশেই নিউ স্টাইল রুল বাটনটি রয়েছে। ট্যাব চেপে এবং এন্টার চেপে ফোকাসটি সেখানে নিয়ে যান। ফোকাসটি স্টাইল ইন্সপেক্টরের ভিতরে একটি সম্পাদনাযোগ্য টেক্সট ফিল্ডে চলে যাবে। ফিল্ডটির প্রাথমিক টেক্সট কন্টেন্ট হলো DOM ট্রি -তে নির্বাচিত এলিমেন্টটির ট্যাগ নেম। আপনি এই ফিল্ডে আপনার ইচ্ছামত যেকোনো ক্লাস নেম টাইপ করতে পারেন এবং তারপর ট্যাব চেপে সেটিতে CSS প্রোপার্টিগুলো অ্যাসাইন করতে পারেন।
গণনা করা ট্যাব
Computed ট্যাবে ফোকাস রেখে, ফোকাসটি ভিতরে নিয়ে যেতে এবং এর বিষয়বস্তু অন্বেষণ করতে Tab চাপুন। Computed ট্যাবের ভিতরে, স্পেসিফিসিটির ক্রম অনুসারে কোন CSS প্রোপার্টিগুলো একটি এলিমেন্টে আসলে প্রয়োগ করা হয়েছে তা অন্বেষণ করার জন্য কন্ট্রোল রয়েছে।
সমস্ত কম্পিউটেড স্টাইল অন্বেষণ করুন
কম্পিউটেড স্টাইলগুলোর সংগ্রহে না পৌঁছানো পর্যন্ত ট্যাব চাপুন। এগুলো একটি ARIA tree হিসেবে প্রদর্শিত হয়। একটি লিস্টবক্স প্রসারিত করলে দেখা যায় কোন CSS সিলেক্টরগুলো কম্পিউটেড স্টাইলটি প্রয়োগ করছে। এই সিলেক্টরগুলো স্পেসিফিসিটি অনুসারে সাজানো থাকে।
একটি স্ক্রিন রিডার গণনাকৃত মান, কোন CSS সিলেক্টরের সাথে মিলছে, যে স্টাইলশিটে সিলেক্টরটি রয়েছে তার ফাইলের নাম এবং সিলেক্টরটির লাইন নম্বর ঘোষণা করে।
পরিচিত সমস্যা
- আপনি যদি ফিল্টার টেক্সট ফিল্ডটি ব্যবহার করেন, তাহলে আপনি আর স্টাইলগুলো পরিদর্শন করতে পারবেন না।
ইভেন্ট লিসেনার ট্যাব
এলিমেন্টস প্যানেলের ভেতর থেকে আপনি ইভেন্ট লিসেনার্স ট্যাব ব্যবহার করে কোনো এলিমেন্টে প্রয়োগ করা ইভেন্ট লিসেনারগুলো দেখতে পারেন। স্টাইলস প্যানেলে ফোকাস থাকা অবস্থায়, ইভেন্ট লিসেনার্স ট্যাবে যেতে ডান তীরচিহ্ন (Right Arrow) চাপুন।
ইভেন্ট শ্রোতাদের অন্বেষণ করুন
ইভেন্ট লিসেনারগুলো একটি ARIA tree হিসেবে প্রদর্শিত হয়। এগুলোর মধ্যে চলাচল করার জন্য আপনি অ্যারো কী ব্যবহার করতে পারেন। একটি স্ক্রিন রিডার সেই DOM অবজেক্টের নাম ঘোষণা করে যার সাথে ইভেন্ট লিসেনারটি সংযুক্ত, সেইসাথে যে ফাইলে ইভেন্ট লিসেনারটি সংজ্ঞায়িত করা হয়েছে তার ফাইলের নাম এবং লাইন নম্বরও জানিয়ে দেয়।
অ্যাক্সেসিবিলিটি প্যানে
অ্যাক্সেসিবিলিটি প্যানে ফোকাস রেখে, ফোকাসটি ভিতরে নিয়ে যেতে এবং এর বিষয়বস্তু অন্বেষণ করতে ট্যাব চাপুন। অ্যাক্সেসিবিলিটি প্যানের ভিতরে অ্যাক্সেসিবিলিটি ট্রি, কোনো এলিমেন্টে প্রয়োগ করা ARIA অ্যাট্রিবিউট এবং এর কম্পিউটেড অ্যাক্সেসিবিলিটি প্রোপার্টিগুলো অন্বেষণ করার জন্য কন্ট্রোল রয়েছে।
অ্যাক্সেসিবিলিটি ট্রি
অ্যাক্সেসিবিলিটি ট্রি-টি একটি ARIA tree হিসেবে উপস্থাপিত হয়, যেখানে প্রতিটি treeitem DOM-এর একটি এলিমেন্টের সাথে সঙ্গতিপূর্ণ। ট্রি-টি নির্বাচিত নোডের জন্য নির্ধারিত ভূমিকা (role) ঘোষণা করে। জেনেরিক এলিমেন্ট, যেমন div এবং span , ট্রি-তে "GenericContainer" হিসেবে ঘোষিত হয়। ট্রি-টি অতিক্রম করতে এবং প্যারেন্ট-চাইল্ড সম্পর্কগুলো অন্বেষণ করতে অ্যারো কী ব্যবহার করুন।
পরিচিত সমস্যা
- অ্যাক্সেসিবিলিটি প্যানে ব্যবহৃত ARIA ট্রি-এর ধরনটি Chrome for mac OS স্ক্রিন রিডার, যেমন VoiceOver-এ অনুপলব্ধ থাকতে পারে। এই সমস্যার অগ্রগতি সম্পর্কে অবহিত হতে Chromium ইস্যু #868480- এ সাবস্ক্রাইব করুন।
- ARIA অ্যাট্রিবিউটস এবং কম্পিউটেড প্রপার্টিজ সেকশনগুলো ARIA ট্রি হিসেবে মার্ক আপ করা থাকে, কিন্তু এগুলোতে ফোকাস ম্যানেজমেন্ট অন্তর্ভুক্ত নয়। এর মানে হলো, এই সেকশনগুলো কিবোর্ডের মাধ্যমে পরিচালনা করা যায় না।
অডিট প্যানেল
অডিট প্যানেলটি আপনাকে কোনো সাইটের পারফরম্যান্স, অ্যাক্সেসিবিলিটি, এসইও এবং আরও বিভিন্ন ক্যাটাগরি সম্পর্কিত সাধারণ সমস্যাগুলো যাচাই করার জন্য একাধিক পরীক্ষা চালানোর সুযোগ দেয়।
একটি অডিট কনফিগার করুন এবং চালান
- যখন অডিট প্যানেলটি প্রথমবার খোলা হয়, তখন ফর্মের শেষে থাকা ‘রান অডিট’ বোতামটির উপর ফোকাস আসে। ডিফল্টরূপে, ফর্মটি একটি সিমুলেটেড 3G সংযোগে মোবাইল এমুলেশন ব্যবহার করে প্রতিটি ক্যাটাগরির জন্য অডিট চালানোর জন্য কনফিগার করা থাকে।
- অডিট সেটিংস পরিবর্তন করতে Shift + Tab ব্যবহার করুন অথবা ব্রাউজ মোডে পিছনে যান।
- যখন আপনি অডিটটি চালাতে প্রস্তুত হবেন, তখন 'Run Audit' বোতামে ফিরে যান এবং এন্টার চাপুন।
- ফোকাস একটি মোডাল উইন্ডোতে চলে যায়, যেখানে একটি 'ক্যানসেল' বাটন থাকে যা আপনাকে অডিট থেকে বেরিয়ে আসতে দেয়। অডিটটি চলার সময় এবং একাধিকবার পেজটি রিফ্রেশ হওয়ার কারণে আপনি পরপর কয়েকটি ইয়ারকন শুনতে পারেন।
পরিচিত সমস্যা
- কনফিগারেশন ফর্মের বিভিন্ন অংশ কোনো
fieldsetএলিমেন্ট দিয়ে চিহ্নিত করা নেই। কোন কন্ট্রোলগুলো কোন অংশের সাথে যুক্ত, তা বোঝার জন্য ব্রাউজ মোডে এগুলো নেভিগেট করা সহজ হতে পারে। - অডিট শেষ হলে কোনো ইয়ারকন বা লাইভ রিজিয়ন অ্যানাউন্সমেন্ট হয় না। সাধারণত এতে প্রায় ৩০ সেকেন্ড সময় লাগে, যার পরে আপনি ফলাফলে যেতে পারবেন। দ্রুত ফলাফলে পৌঁছানোর জন্য ব্রাউজ মোড ব্যবহার করুন।
অডিট রিপোর্টটি নেভিগেট করুন
অডিট রিপোর্টটি প্রতিটি অডিট বিভাগের সাথে সঙ্গতিপূর্ণ বিভিন্ন অংশে বিভক্ত। রিপোর্টটি প্রতিটি বিভাগের স্কোরের একটি তালিকা দিয়ে শুরু হয়। এই স্কোরগুলো লিঙ্ক হিসেবেও কাজ করে, যা ব্যবহার করে সরাসরি প্রাসঙ্গিক অংশে যাওয়া যায়। প্রতিটি অংশের ভেতরে সম্প্রসারণযোগ্য details উপাদান রয়েছে, যেগুলোতে উত্তীর্ণ বা অনুত্তীর্ণ অডিট সম্পর্কিত তথ্য থাকে। ডিফল্টরূপে, শুধুমাত্র অনুত্তীর্ণ অডিটগুলোই দেখানো হয়। প্রতিটি অংশের শেষে একটি চূড়ান্ত details উপাদান থাকে, যেখানে সমস্ত উত্তীর্ণ অডিটগুলো অন্তর্ভুক্ত থাকে।
নতুন অডিট চালানোর জন্য, রিপোর্ট থেকে বের হতে Shift + Tab ব্যবহার করুন এবং 'Perform An Audit' বাটনটি খুঁজুন।