সহায়ক প্রযুক্তি সহ Chrome DevTools নেভিগেট করুন

Rob Dodson

এই নির্দেশিকাটি মূলত স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তির উপর নির্ভরশীল ব্যবহারকারীদের Chrome DevTools অ্যাক্সেস এবং ব্যবহার করতে সাহায্য করার জন্য তৈরি। Chrome DevTools হল Google Chrome ব্রাউজারে তৈরি ওয়েব ডেভেলপার টুলের একটি স্যুট। যদি আপনি কোনও ওয়েব পৃষ্ঠার অ্যাক্সেসিবিলিটি উন্নত করার সাথে সম্পর্কিত DevTools বৈশিষ্ট্যগুলি খুঁজছেন তবে অ্যাক্সেসিবিলিটি রেফারেন্স দেখুন।

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

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

শুরু করার আগে, DevTools UI কীভাবে গঠন করা হয়েছে তার একটি মানসিক মডেল তৈরি করা সাহায্য করে। DevTools কে প্যানেলের একটি সিরিজে বিভক্ত করা হয়েছে যা একটি ARIA tablist সংগঠিত করা হয়েছে। উদাহরণস্বরূপ:

• এলিমেন্টস প্যানেল আপনাকে DOM নোড বা CSS দেখতে এবং পরিবর্তন করতে দেয়।
• কনসোল প্যানেল আপনাকে জাভাস্ক্রিপ্ট লগ এবং লাইভ এডিট অবজেক্ট পড়তে দেয়।

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

কীবোর্ড শর্টকাট

DevTools কীবোর্ড শর্টকাট রেফারেন্সটি একটি সহায়ক চিটশিট। এটি বুকমার্ক করতে ভুলবেন না এবং বিভিন্ন প্যানেল অন্বেষণ করার সময় এটি আবার পড়ুন।

DevTools খুলুন

শুরু করতে, "Open Chrome DevTools" পড়ুন। DevTools খোলার অনেক উপায় আছে, হয় কীবোর্ড শর্টকাট অথবা মেনু আইটেমের মাধ্যমে।

প্যানেলের মধ্যে নেভিগেট করুন

কীবোর্ড ব্যবহার করে নেভিগেট করুন

• DevTools খোলা থাকা অবস্থায়, পরবর্তী প্যানেলে ফোকাস করতে Control + ] অথবা Command + ] (Mac) টিপুন।
• পূর্ববর্তী প্যানেলে ফোকাস করতে Control + [ অথবা Command + [ (Mac) টিপুন।
• প্যানেলের tablist ফোকাস সরাতে Shift + Tab ব্যবহার করা এবং প্যানেল পরিবর্তন করতে তীর কী ব্যবহার করাও সম্ভব, যদিও পূর্বে উল্লিখিত শর্টকাটগুলি ব্যবহার করা দ্রুত হতে পারে।

জ্ঞাত সমস্যা

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

কমান্ড মেনু অনুসারে নেভিগেট করুন

একটি নির্দিষ্ট প্যানেলে ফোকাস করতে, কমান্ড মেনু ব্যবহার করুন:

1. DevTools খোলা থাকা অবস্থায়, কমান্ড মেনু খুলতে Control + Shift + P অথবা Command + Shift + P (Mac) টিপুন। কমান্ড মেনু হল একটি অস্পষ্ট অনুসন্ধান স্বয়ংক্রিয়ভাবে সম্পূর্ণ কম্বোবক্স।
2. আপনি যে প্যানেলটি খুলতে চান তার নাম টাইপ করুন, তারপর সঠিক বিকল্পটিতে নেভিগেট করতে ডাউন অ্যারো কীবোর্ড ব্যবহার করুন।
3. কমান্ড চালানোর জন্য এন্টার টিপুন।

উদাহরণস্বরূপ, এলিমেন্টস প্যানেল খুলতে:

1. কমান্ড মেনু খুলুন।
2. E টাইপ করুন তারপর L। প্যানেল > Show Elements বিকল্পটি নির্বাচন করা হয়েছে।
3. প্যানেলটি খোলার কমান্ডটি চালানোর জন্য এন্টার টিপুন।

এইভাবে একটি প্যানেল খোলার ফলে প্যানেলের বিষয়বস্তুর দিকে ফোকাস পরিচালিত হয়। এলিমেন্টস প্যানেলের ক্ষেত্রে, ফোকাস DOM Tree- তে চলে যায়।

এলিমেন্ট প্যানেল

পৃষ্ঠার একটি উপাদান পরীক্ষা করুন

1. স্ক্রিন রিডারের কার্সার ব্যবহার করে আপনি যে উপাদানটি পরিদর্শন করতে চান সেখানে নেভিগেট করুন।
2. প্রসঙ্গ মেনু খুলতে উপাদানটিতে ডান-মাউস ক্লিক করুন।
3. Inspect অপশনটি নির্বাচন করুন। এটি Elements প্যানেলটি খুলবে এবং DOM Tree- তে উপাদানটিকে ফোকাস করবে।

DOM ট্রিটি ARIA tree হিসেবে সাজানো হয়েছে। উদাহরণের জন্য "কীবোর্ড দিয়ে DOM ট্রি নেভিগেট করুন" দেখুন।

DOM Tree-তে একটি এলিমেন্টের কোড কপি করুন।

1. DOM Tree এর একটি নোডের উপর ফোকাস করে, ডান-ক্লিক করে প্রসঙ্গ মেনুটি আনুন।
2. কপি অপশনটি প্রসারিত করুন।
3. Copy outerHTML নির্বাচন করুন।

জ্ঞাত সমস্যা

• Copy outerHTML প্রায়শই বর্তমান নোডটি নির্বাচন করে না বরং এর প্যারেন্ট নোডটি নির্বাচন করে। তবে, এলিমেন্টের বিষয়বস্তু এখনও কপি করা outerHTML-এ থাকা উচিত।

DOM Tree-তে একটি এলিমেন্টের বৈশিষ্ট্য পরিবর্তন করুন

• DOM Tree এর একটি নোডের উপর ফোকাস করে, এটি সম্পাদনাযোগ্য করতে Enter টিপুন।
• অ্যাট্রিবিউটের মান থেকে অন্যটিতে যেতে ট্যাব টিপুন। যখন আপনি "স্পেস" শুনতে পাবেন তখন আপনি একটি খালি টেক্সট ইনপুটের ভিতরে থাকবেন এবং একটি নতুন অ্যাট্রিবিউট মান টাইপ করতে পারবেন।
• পরিবর্তনটি গ্রহণ করতে এবং উপাদানটির সম্পূর্ণ বিষয়বস্তু শুনতে Control + Enter অথবা Command + Enter (Mac) টিপুন।

জ্ঞাত সমস্যা

• যখন আপনি টেক্সট ইনপুট টাইপ করেন তখন আপনি কোনও প্রতিক্রিয়া পান না। যদি আপনি কোনও টাইপো করেন এবং তীরচিহ্নগুলি ব্যবহার করে আপনার ইনপুটটি অন্বেষণ করেন তবে আপনিও কোনও প্রতিক্রিয়া পাবেন না। আপনার কাজ পরীক্ষা করার সবচেয়ে সহজ উপায় হল পরিবর্তনটি গ্রহণ করা, তারপর সম্পূর্ণ উপাদানটি ঘোষণা করা পর্যন্ত শোনা।

DOM Tree-তে একটি এলিমেন্টের HTML সম্পাদনা করুন

• DOM Tree এর একটি নোডের উপর ফোকাস করে, এটি সম্পাদনাযোগ্য করতে Enter টিপুন।
• অ্যাট্রিবিউটের মানগুলির মধ্যে স্থানান্তর করতে Tab টিপুন। যখন আপনি উপাদানটির নাম শুনতে পাবেন, উদাহরণস্বরূপ, "h2", তখন আপনি একটি টেক্সট ইনপুটের ভিতরে আছেন এবং উপাদানটির ধরণ পরিবর্তন হতে পারে।
• পরিবর্তনটি গ্রহণ করতে Control + Enter অথবা Command + Enter (Mac) টিপুন।

উদাহরণস্বরূপ, h3 টাইপ করে Control + Enter অথবা Command + Enter (Mac) টিপলে এলিমেন্টের শুরু এবং শেষ ট্যাগ h3 তে পরিবর্তিত হয়।

এলিমেন্ট প্যানেল ট্যাব

এলিমেন্টস প্যানেলে অতিরিক্ত ট্যাব রয়েছে যা কোনও এলিমেন্টে প্রয়োগ করা CSS বা অ্যাক্সেসিবিলিটি ট্রিতে এর স্থানের মতো জিনিসগুলি পরিদর্শন করে।

• DOM Tree এর একটি নোডের উপর ফোকাস করে, Tab টিপুন যতক্ষণ না আপনি শুনতে পান যে Styles প্যানটি নির্বাচিত হয়েছে।
• অন্যান্য উপলব্ধ ট্যাবগুলি অন্বেষণ করতে ডান তীর ব্যবহার করুন।

DOM Tree href অ্যাট্রিবিউট সহ এলিমেন্টগুলিকে ফোকাসযোগ্য লিঙ্কে রূপান্তরিত করে, তাই স্টাইলস প্যানে পৌঁছানোর জন্য আপনাকে একাধিকবার Tab টিপতে হতে পারে।

জ্ঞাত সমস্যা

DOM ব্রেকপয়েন্ট এবং প্রোপার্টি ট্যাবগুলি কীবোর্ড অ্যাক্সেসযোগ্য নয়।

স্টাইল ফলক

Styles প্যানে আপনি স্টাইল ফিল্টারিং, এলিমেন্ট স্টেট টগল করা (যেমন :active এবং :focus ), ক্লাস টগল করা এবং নতুন ক্লাস যোগ করার জন্য নিয়ন্ত্রণ পাবেন। DOM Tree- তে ফোকাসে থাকা এলিমেন্টে বর্তমানে প্রয়োগ করা স্টাইলগুলি অন্বেষণ এবং সংশোধন করার জন্য একটি শক্তিশালী স্টাইল পরিদর্শন টুলও রয়েছে।

Styles প্যান সম্পর্কে বুঝতে মূল ধারণা হল এটি শুধুমাত্র DOM Tree- তে বর্তমানে নির্বাচিত নোডের জন্য স্টাইল দেখায়। উদাহরণস্বরূপ, ধরুন আপনি একটি <header> নোডের স্টাইল পরিদর্শন করা শেষ করেছেন, এবং এখন আপনি একটি <footer> নোডের স্টাইলগুলি দেখতে চান। এটি করার জন্য, আপনাকে প্রথমে DOM Tree- তে <footer> নোড নির্বাচন করতে হবে। আপনি Inspect ওয়ার্কফ্লো ব্যবহার করে footer নোডের সাধারণ আশেপাশে থাকা একটি নোড পরিদর্শন করতে পারেন (যেমন ফুটারের মধ্যে একটি লিঙ্ক), যা DOM Tree-কে ফোকাস করে, এবং তারপরে আপনার কীবোর্ড ব্যবহার করে আপনার আগ্রহের সঠিক নোডে নেভিগেট করতে পারেন।

স্টাইলস ফলকটি নেভিগেট করুন

যেহেতু সমস্ত স্টাইল টুলই কোন না কোনভাবে স্টাইলস প্যানের সাথে সংযুক্ত থাকে, তাই প্রথমে এই টুলটিতে বিশেষজ্ঞ হওয়া যুক্তিসঙ্গত।

• স্টাইলস প্যানে ফোকাস করে, ফোকাসটি ভিতরে সরাতে এবং এর বিষয়বস্তু অন্বেষণ করতে ট্যাব টিপুন।
• প্রথম স্টাইলটি সক্রিয় না হওয়া পর্যন্ত ট্যাব টিপুন। আপনি যদি স্ক্রিন রিডার ব্যবহার করেন তবে এই প্রথম স্টাইলটি "element.style {}" হিসাবে ঘোষণা করা হবে।
• নির্দিষ্টতার ক্রম অনুসারে স্টাইলের তালিকা নেভিগেট করতে ডাউন অ্যারো টিপুন। একটি স্ক্রিন রিডার CSS ফাইলের নাম, স্টাইলটি যে লাইন নম্বরে প্রদর্শিত হবে এবং স্টাইলের নাম দিয়ে শুরু করে প্রতিটি স্টাইল ঘোষণা করে। উদাহরণস্বরূপ: "main.css:233 .card__img {}"
• কোনও স্টাইল আরও বিস্তারিতভাবে পরীক্ষা করতে এন্টার টিপুন। স্টাইল নামের একটি সম্পাদনাযোগ্য সংস্করণের উপর ফোকাস শুরু করুন।
• প্রতিটি CSS প্রোপার্টির সম্পাদনাযোগ্য সংস্করণ এবং তাদের সংশ্লিষ্ট মানগুলির মধ্যে স্থানান্তর করতে Tab টিপুন। প্রতিটি স্টাইল ব্লকের শেষে একটি ফাঁকা সম্পাদনাযোগ্য টেক্সট ফিল্ড রয়েছে যা আপনি অতিরিক্ত CSS প্রোপার্টি যোগ করতে ব্যবহার করতে পারেন।
• স্টাইলের তালিকা দেখতে আপনি ট্যাব টিপতে পারেন, অথবা এই মোড থেকে বেরিয়ে আসতে Escape টিপতে পারেন এবং তীরচিহ্নের সাহায্যে নেভিগেট করতে ফিরে যেতে পারেন।

অতিরিক্ত শর্টকাটের জন্য স্টাইলস প্যান কীবোর্ড রেফারেন্সটি অবশ্যই পড়ুন।

জ্ঞাত সমস্যা

• আপনি যদি ফিল্টার সম্পাদনাযোগ্য টেক্সট ফিল্ড ব্যবহার করেন তবে আপনি আর স্টাইলের তালিকা নেভিগেট করতে পারবেন না।

এলিমেন্টের অবস্থা টগল করুন

একটি এলিমেন্টের অবস্থা টগল করতে, যেমন :active অথবা :focus :

1. স্টাইলস প্যানে নেভিগেট করুন এবং টগল এলিমেন্ট স্টেট বোতামটি ফোকাস না হওয়া পর্যন্ত ট্যাব টিপুন।
2. এলিমেন্টের অবস্থাগুলির সংগ্রহ প্রসারিত করতে এন্টার টিপুন। এলিমেন্টের অবস্থাগুলি চেকবক্সের একটি গ্রুপ হিসাবে উপস্থাপিত হয়।
3. প্রথম অবস্থা, :active , ফোকাস না হওয়া পর্যন্ত Tab টিপুন।
4. এটি সক্রিয় করতে Space টিপুন। যদি DOM Tree-তে বর্তমানে নির্বাচিত উপাদানটির একটি :active স্টাইল থাকে, তাহলে এটি এখন প্রয়োগ করা হয়েছে।
5. সমস্ত উপলব্ধ অবস্থা অন্বেষণ করতে ট্যাব টিপতে থাকুন।

একটি বহির্গামী ক্লাস যোগ করুন

টগল এলিমেন্ট স্টেট বোতামের পাশেই রয়েছে এলিমেন্ট ক্লাস বোতাম। ট্যাব টিপে ফোকাসটি সেখানে সরান এবং তারপর এন্টার টিপুন। ফোকাসটি অ্যাড নিউ ক্লাস লেবেলযুক্ত একটি সম্পাদনা টেক্সট ফিল্ডে চলে যায়।

এলিমেন্ট ক্লাস বোতামটি মূলত একটি এলিমেন্টে বিদ্যমান ক্লাস যোগ করার জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ, যদি আপনার স্টাইলশিটে .clearfix নামে একটি সহায়ক ক্লাস থাকে, তাহলে আপনি ক্লাসের সাজেশন তালিকা দেখতে edit text ফিল্ডের ভিতরে . টিপতে পারেন এবং .clearfix সাজেশন খুঁজে পেতে Down Arrow ব্যবহার করতে পারেন। অথবা নিজে ক্লাসের নাম টাইপ করে এন্টার টিপুন। এটি প্রয়োগ করতে।

একটি নতুন স্টাইল নিয়ম যোগ করুন

এলিমেন্ট ক্লাস বোতামের পাশেই রয়েছে নতুন স্টাইল রুল বোতাম। ট্যাব টিপে ফোকাসটি এতে সরান এবং এন্টার টিপুন। ফোকাস স্টাইল ইন্সপেক্টরের ভিতরে একটি সম্পাদনাযোগ্য টেক্সট ফিল্ডে চলে যায়। ফিল্ডের প্রাথমিক টেক্সট কন্টেন্ট হল DOM Tree- তে নির্বাচিত এলিমেন্টের ট্যাগ নাম। আপনি এই ফিল্ডে আপনার পছন্দের যেকোনো ক্লাসের নাম টাইপ করতে পারেন এবং তারপর Tab টিপে CSS প্রোপার্টি বরাদ্দ করতে পারেন।

গণনা করা ট্যাব

কম্পিউটেড ট্যাবে ফোকাস করার সাথে সাথে, ফোকাসটি ভিতরে সরাতে এবং এর বিষয়বস্তু অন্বেষণ করতে Tab টিপুন। কম্পিউটেড ট্যাবের মধ্যে নির্দিষ্টতার ক্রম অনুসারে কোন CSS বৈশিষ্ট্যগুলি আসলে একটি উপাদানে প্রয়োগ করা হয় তা অন্বেষণ করার জন্য নিয়ন্ত্রণ রয়েছে।

সমস্ত গণনা করা স্টাইল অন্বেষণ করুন

কম্পিউটেড স্টাইলের সংগ্রহে না পৌঁছানো পর্যন্ত ট্যাব টিপুন। এগুলি একটি ARIA tree হিসাবে উপস্থাপিত হয়। একটি তালিকা বাক্স প্রসারিত করলে দেখা যাবে কোন CSS নির্বাচকরা কম্পিউটেড স্টাইল প্রয়োগ করছে। এই নির্বাচকগুলি নির্দিষ্টতা অনুসারে সংগঠিত হয়। একটি স্ক্রিন রিডার কম্পিউটেড মান, কোন CSS নির্বাচক বর্তমানে মিলছে, নির্বাচক ধারণকারী স্টাইলশিটের ফাইলের নাম এবং নির্বাচকের জন্য লাইন নম্বর ঘোষণা করে।

জ্ঞাত সমস্যা

• আপনি যদি ফিল্টার টেক্সট ফিল্ড ব্যবহার করেন তাহলে আপনি আর স্টাইল পরিদর্শন করতে পারবেন না।

ইভেন্ট লিসেনারের ট্যাব

এলিমেন্টস প্যানেলের ভেতর থেকে আপনি ইভেন্ট লিসেনার্স ট্যাব ব্যবহার করে একটি এলিমেন্টে প্রয়োগ করা ইভেন্ট লিসেনার্স পরীক্ষা করতে পারেন। স্টাইলস প্যানে ফোকাস করে, ইভেন্ট লিসেনার্স ট্যাবে নেভিগেট করতে ডান তীর টিপুন।

ইভেন্ট লিসেনারের সাথে পরিচিত হোন

ইভেন্ট লিসেনারের নাম ARIA tree হিসেবে উপস্থাপন করা হয়। আপনি তীরচিহ্ন ব্যবহার করে সেগুলি নেভিগেট করতে পারেন। একটি স্ক্রিন রিডার ইভেন্ট লিসেনারের সাথে সংযুক্ত DOM অবজেক্টের নাম, সেইসাথে ইভেন্ট লিসেনারের নাম এবং তার লাইন নম্বর ঘোষণা করে।

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

অ্যাক্সেসিবিলিটি প্যানে ফোকাস করে, ফোকাসটি ভিতরে সরাতে এবং এর বিষয়বস্তু অন্বেষণ করতে Tab টিপুন। অ্যাক্সেসিবিলিটি প্যানের মধ্যে অ্যাক্সেসিবিলিটি ট্রি, একটি উপাদানে প্রয়োগ করা ARIA বৈশিষ্ট্য এবং এর গণনা করা অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলি অন্বেষণ করার জন্য নিয়ন্ত্রণ রয়েছে।

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

অ্যাক্সেসিবিলিটি ট্রি একটি ARIA tree হিসেবে উপস্থাপিত হয় যেখানে প্রতিটি treeitem DOM-এর একটি এলিমেন্টের সাথে মিলে যায়। ট্রি নির্বাচিত নোডের জন্য কম্পিউটেড রোল ঘোষণা করে। div এবং span মতো জেনেরিক এলিমেন্টগুলিকে ট্রিতে "GenericContainer" হিসেবে ঘোষণা করা হয়। ট্রি অতিক্রম করতে এবং পিতামাতা-সন্তানের সম্পর্ক অন্বেষণ করতে তীরচিহ্নগুলি ব্যবহার করুন।

জ্ঞাত সমস্যা

• অ্যাক্সেসিবিলিটি প্যানে ব্যবহৃত ARIA ট্রির ধরণটি ভয়েসওভারের মতো ম্যাকওএস স্ক্রিন রিডারের জন্য Chrome-এ সঠিকভাবে প্রকাশ নাও হতে পারে। এই সমস্যাটির অগ্রগতি সম্পর্কে অবহিত হতে Chromium ইস্যু #868480 সাবস্ক্রাইব করুন।
• ARIA অ্যাট্রিবিউট এবং কম্পিউটেড প্রোপার্টি বিভাগগুলিকে ARIA ট্রি হিসেবে চিহ্নিত করা হয়েছে, কিন্তু বর্তমানে তাদের ফোকাস ম্যানেজমেন্ট নেই তাই এগুলি কীবোর্ডে ব্যবহার করা যাবে না।

অডিট প্যানেল

অডিট প্যানেল আপনাকে একটি সাইটের বিরুদ্ধে একাধিক পরীক্ষা চালাতে দেয় যাতে কর্মক্ষমতা, অ্যাক্সেসিবিলিটি, SEO এবং অন্যান্য বেশ কয়েকটি বিভাগের সাথে সম্পর্কিত সাধারণ সমস্যাগুলি পরীক্ষা করা যায়।

একটি অডিট কনফিগার করুন এবং চালান

1. যখন অডিট প্যানেলটি প্রথম খোলা হয়, তখন ফর্মের শেষে "রান অডিট" বোতামে ফোকাস করা হয়। ডিফল্টরূপে ফর্মটি একটি সিমুলেটেড 3G সংযোগে মোবাইল ইমুলেশন ব্যবহার করে প্রতিটি বিভাগের জন্য অডিট চালানোর জন্য কনফিগার করা থাকে।
2. অডিট সেটিংস পরিবর্তন করতে Shift + Tab ব্যবহার করুন অথবা ব্রাউজ মোডে ফিরে যান।
3. যখন আপনি অডিট চালানোর জন্য প্রস্তুত হবেন, তখন Run Audit বোতামে ফিরে যান এবং Enter টিপুন।
4. ফোকাস একটি মোডাল উইন্ডোতে চলে যায় যেখানে একটি বাতিল বোতাম থাকে যা আপনাকে অডিট থেকে বেরিয়ে আসতে দেয়। অডিট চলাকালীন এবং পৃষ্ঠাটি একাধিকবার রিফ্রেশ করার সময় আপনি একাধিক ইয়ারকন শুনতে পাবেন।

জ্ঞাত সমস্যা

• কনফিগারেশন ফর্মের বিভিন্ন অংশ বর্তমানে fieldset উপাদান দিয়ে চিহ্নিত করা হয়নি। প্রতিটি অংশের সাথে কোন নিয়ন্ত্রণগুলি যুক্ত তা নির্ধারণ করার জন্য ব্রাউজ মোডে সেগুলি নেভিগেট করা সহজ হতে পারে।
• অডিট শেষ হওয়ার পরে কোনও ইয়ারকন বা লাইভ রিজিওন ঘোষণা করা হয় না। সাধারণত এটি প্রায় 30 সেকেন্ড সময় নেয়, যার পরে আপনি ফলাফলগুলিতে নেভিগেট করতে সক্ষম হবেন। ব্রাউজ মোড ব্যবহার করা ফলাফলে পৌঁছানোর সবচেয়ে সহজ উপায় হতে পারে।

অডিট রিপোর্ট নেভিগেট করুন

অডিট রিপোর্টটি প্রতিটি অডিট বিভাগের সাথে সামঞ্জস্যপূর্ণ বিভাগগুলিতে সংগঠিত। প্রতিবেদনটি প্রতিটি বিভাগের জন্য স্কোরের একটি তালিকা দিয়ে শুরু হয়। এই স্কোরগুলি এমন লিঙ্কও যা প্রাসঙ্গিক বিভাগগুলিতে এড়িয়ে যেতে ব্যবহার করা যেতে পারে। প্রতিটি বিভাগের মধ্যে প্রসারিতযোগ্য details উপাদান রয়েছে, যার মধ্যে পাস বা ব্যর্থ অডিট সম্পর্কিত তথ্য রয়েছে। ডিফল্টরূপে, শুধুমাত্র ব্যর্থ অডিটগুলি দেখানো হয়। প্রতিটি বিভাগ একটি চূড়ান্ত details উপাদান দিয়ে শেষ হয় যার মধ্যে পাস করা সমস্ত অডিট থাকে।

নতুন অডিট চালানোর জন্য, রিপোর্ট থেকে বেরিয়ে আসার জন্য Shift + Tab ব্যবহার করুন এবং Perform An Audit বোতামটি খুঁজুন।

Rob Dodson

এই নির্দেশিকাটি মূলত স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তির উপর নির্ভরশীল ব্যবহারকারীদের Chrome DevTools অ্যাক্সেস এবং ব্যবহার করতে সাহায্য করার জন্য তৈরি। Chrome DevTools হল Google Chrome ব্রাউজারে তৈরি ওয়েব ডেভেলপার টুলের একটি স্যুট। যদি আপনি কোনও ওয়েব পৃষ্ঠার অ্যাক্সেসিবিলিটি উন্নত করার সাথে সম্পর্কিত DevTools বৈশিষ্ট্যগুলি খুঁজছেন তবে অ্যাক্সেসিবিলিটি রেফারেন্স দেখুন।

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

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

শুরু করার আগে, DevTools UI কীভাবে গঠন করা হয়েছে তার একটি মানসিক মডেল তৈরি করা সাহায্য করে। DevTools কে প্যানেলের একটি সিরিজে বিভক্ত করা হয়েছে যা একটি ARIA tablist সংগঠিত করা হয়েছে। উদাহরণস্বরূপ:

• এলিমেন্টস প্যানেল আপনাকে DOM নোড বা CSS দেখতে এবং পরিবর্তন করতে দেয়।
• কনসোল প্যানেল আপনাকে জাভাস্ক্রিপ্ট লগ এবং লাইভ এডিট অবজেক্ট পড়তে দেয়।

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

কীবোর্ড শর্টকাট

DevTools কীবোর্ড শর্টকাট রেফারেন্সটি একটি সহায়ক চিটশিট। এটি বুকমার্ক করতে ভুলবেন না এবং বিভিন্ন প্যানেল অন্বেষণ করার সময় এটি আবার পড়ুন।

DevTools খুলুন

শুরু করতে, "Open Chrome DevTools" পড়ুন। DevTools খোলার অনেক উপায় আছে, হয় কীবোর্ড শর্টকাট অথবা মেনু আইটেমের মাধ্যমে।

প্যানেলের মধ্যে নেভিগেট করুন

কীবোর্ড ব্যবহার করে নেভিগেট করুন

• DevTools খোলা থাকা অবস্থায়, পরবর্তী প্যানেলে ফোকাস করতে Control + ] অথবা Command + ] (Mac) টিপুন।
• পূর্ববর্তী প্যানেলে ফোকাস করতে Control + [ অথবা Command + [ (Mac) টিপুন।
• প্যানেলের tablist ফোকাস সরাতে Shift + Tab ব্যবহার করা এবং প্যানেল পরিবর্তন করতে তীর কী ব্যবহার করাও সম্ভব, যদিও পূর্বে উল্লিখিত শর্টকাটগুলি ব্যবহার করা দ্রুত হতে পারে।

জ্ঞাত সমস্যা

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

কমান্ড মেনু অনুসারে নেভিগেট করুন

একটি নির্দিষ্ট প্যানেলে ফোকাস করতে, কমান্ড মেনু ব্যবহার করুন:

1. DevTools খোলা থাকা অবস্থায়, কমান্ড মেনু খুলতে Control + Shift + P অথবা Command + Shift + P (Mac) টিপুন। কমান্ড মেনু হল একটি অস্পষ্ট অনুসন্ধান স্বয়ংক্রিয়ভাবে সম্পূর্ণ কম্বোবক্স।
2. আপনি যে প্যানেলটি খুলতে চান তার নাম টাইপ করুন, তারপর সঠিক বিকল্পটিতে নেভিগেট করতে ডাউন অ্যারো কীবোর্ড ব্যবহার করুন।
3. কমান্ড চালানোর জন্য এন্টার টিপুন।

উদাহরণস্বরূপ, এলিমেন্টস প্যানেল খুলতে:

1. কমান্ড মেনু খুলুন।
2. E টাইপ করুন তারপর L। প্যানেল > Show Elements বিকল্পটি নির্বাচন করা হয়েছে।
3. প্যানেলটি খোলার কমান্ডটি চালানোর জন্য এন্টার টিপুন।

এইভাবে একটি প্যানেল খোলার ফলে প্যানেলের বিষয়বস্তুর দিকে ফোকাস পরিচালিত হয়। এলিমেন্টস প্যানেলের ক্ষেত্রে, ফোকাস DOM Tree- তে চলে যায়।

এলিমেন্ট প্যানেল

পৃষ্ঠার একটি উপাদান পরীক্ষা করুন

1. স্ক্রিন রিডারের কার্সার ব্যবহার করে আপনি যে উপাদানটি পরিদর্শন করতে চান সেখানে নেভিগেট করুন।
2. প্রসঙ্গ মেনু খুলতে উপাদানটিতে ডান-মাউস ক্লিক করুন।
3. Inspect অপশনটি নির্বাচন করুন। এটি Elements প্যানেলটি খুলবে এবং DOM Tree- তে উপাদানটিকে ফোকাস করবে।

DOM ট্রিটি ARIA tree হিসেবে সাজানো হয়েছে। উদাহরণের জন্য "কীবোর্ড দিয়ে DOM ট্রি নেভিগেট করুন" দেখুন।

DOM Tree-তে একটি এলিমেন্টের কোড কপি করুন।

1. DOM Tree এর একটি নোডের উপর ফোকাস করে, ডান-ক্লিক করে প্রসঙ্গ মেনুটি আনুন।
2. কপি অপশনটি প্রসারিত করুন।
3. Copy outerHTML নির্বাচন করুন।

জ্ঞাত সমস্যা

• Copy outerHTML প্রায়শই বর্তমান নোডটি নির্বাচন করে না বরং এর প্যারেন্ট নোডটি নির্বাচন করে। তবে, এলিমেন্টের বিষয়বস্তু এখনও কপি করা outerHTML-এ থাকা উচিত।

DOM Tree-তে একটি এলিমেন্টের বৈশিষ্ট্য পরিবর্তন করুন

• DOM Tree এর একটি নোডের উপর ফোকাস করে, এটি সম্পাদনাযোগ্য করতে Enter টিপুন।
• অ্যাট্রিবিউটের মান থেকে অন্যটিতে যেতে ট্যাব টিপুন। যখন আপনি "স্পেস" শুনতে পাবেন তখন আপনি একটি খালি টেক্সট ইনপুটের ভিতরে থাকবেন এবং একটি নতুন অ্যাট্রিবিউট মান টাইপ করতে পারবেন।
• পরিবর্তনটি গ্রহণ করতে এবং উপাদানটির সম্পূর্ণ বিষয়বস্তু শুনতে Control + Enter অথবা Command + Enter (Mac) টিপুন।

জ্ঞাত সমস্যা

• যখন আপনি টেক্সট ইনপুট টাইপ করেন তখন আপনি কোনও প্রতিক্রিয়া পান না। যদি আপনি কোনও টাইপো করেন এবং তীরচিহ্নগুলি ব্যবহার করে আপনার ইনপুটটি অন্বেষণ করেন তবে আপনিও কোনও প্রতিক্রিয়া পাবেন না। আপনার কাজ পরীক্ষা করার সবচেয়ে সহজ উপায় হল পরিবর্তনটি গ্রহণ করা, তারপর সম্পূর্ণ উপাদানটি ঘোষণা করা পর্যন্ত শোনা।

DOM Tree-তে একটি এলিমেন্টের HTML সম্পাদনা করুন

• DOM Tree এর একটি নোডের উপর ফোকাস করে, এটি সম্পাদনাযোগ্য করতে Enter টিপুন।
• অ্যাট্রিবিউটের মানগুলির মধ্যে স্থানান্তর করতে Tab টিপুন। যখন আপনি উপাদানটির নাম শুনতে পাবেন, উদাহরণস্বরূপ, "h2", তখন আপনি একটি টেক্সট ইনপুটের ভিতরে আছেন এবং উপাদানটির ধরণ পরিবর্তন হতে পারে।
• পরিবর্তনটি গ্রহণ করতে Control + Enter অথবা Command + Enter (Mac) টিপুন।

উদাহরণস্বরূপ, h3 টাইপ করে Control + Enter অথবা Command + Enter (Mac) টিপলে এলিমেন্টের শুরু এবং শেষ ট্যাগ h3 তে পরিবর্তিত হয়।

এলিমেন্ট প্যানেল ট্যাব

এলিমেন্টস প্যানেলে অতিরিক্ত ট্যাব রয়েছে যা কোনও এলিমেন্টে প্রয়োগ করা CSS বা অ্যাক্সেসিবিলিটি ট্রিতে এর স্থানের মতো জিনিসগুলি পরিদর্শন করে।

• DOM Tree এর একটি নোডের উপর ফোকাস করে, Tab টিপুন যতক্ষণ না আপনি শুনতে পান যে Styles প্যানটি নির্বাচিত হয়েছে।
• অন্যান্য উপলব্ধ ট্যাবগুলি অন্বেষণ করতে ডান তীর ব্যবহার করুন।

DOM Tree href অ্যাট্রিবিউট সহ এলিমেন্টগুলিকে ফোকাসযোগ্য লিঙ্কে রূপান্তরিত করে, তাই স্টাইলস প্যানে পৌঁছানোর জন্য আপনাকে একাধিকবার Tab টিপতে হতে পারে।

জ্ঞাত সমস্যা

DOM ব্রেকপয়েন্ট এবং প্রোপার্টি ট্যাবগুলি কীবোর্ড অ্যাক্সেসযোগ্য নয়।

স্টাইল ফলক

Styles প্যানে আপনি স্টাইল ফিল্টারিং, এলিমেন্ট স্টেট টগল করা (যেমন :active এবং :focus ), ক্লাস টগল করা এবং নতুন ক্লাস যোগ করার জন্য নিয়ন্ত্রণ পাবেন। DOM Tree- তে ফোকাসে থাকা এলিমেন্টে বর্তমানে প্রয়োগ করা স্টাইলগুলি অন্বেষণ এবং সংশোধন করার জন্য একটি শক্তিশালী স্টাইল পরিদর্শন টুলও রয়েছে।

Styles প্যান সম্পর্কে বুঝতে মূল ধারণা হল এটি শুধুমাত্র DOM Tree- তে বর্তমানে নির্বাচিত নোডের জন্য স্টাইল দেখায়। উদাহরণস্বরূপ, ধরুন আপনি একটি <header> নোডের স্টাইল পরিদর্শন করা শেষ করেছেন, এবং এখন আপনি একটি <footer> নোডের স্টাইলগুলি দেখতে চান। এটি করার জন্য, আপনাকে প্রথমে DOM Tree- তে <footer> নোড নির্বাচন করতে হবে। আপনি Inspect ওয়ার্কফ্লো ব্যবহার করে footer নোডের সাধারণ আশেপাশে থাকা একটি নোড পরিদর্শন করতে পারেন (যেমন ফুটারের মধ্যে একটি লিঙ্ক), যা DOM Tree-কে ফোকাস করে, এবং তারপরে আপনার কীবোর্ড ব্যবহার করে আপনার আগ্রহের সঠিক নোডে নেভিগেট করতে পারেন।

স্টাইলস ফলকটি নেভিগেট করুন

যেহেতু সমস্ত স্টাইল টুলই কোন না কোনভাবে স্টাইলস প্যানের সাথে সংযুক্ত থাকে, তাই প্রথমে এই টুলটিতে বিশেষজ্ঞ হওয়া যুক্তিসঙ্গত।

• স্টাইলস প্যানে ফোকাস করে, ফোকাসটি ভিতরে সরাতে এবং এর বিষয়বস্তু অন্বেষণ করতে ট্যাব টিপুন।
• প্রথম স্টাইলটি সক্রিয় না হওয়া পর্যন্ত ট্যাব টিপুন। আপনি যদি স্ক্রিন রিডার ব্যবহার করেন তবে এই প্রথম স্টাইলটি "element.style {}" হিসাবে ঘোষণা করা হবে।
• নির্দিষ্টতার ক্রম অনুসারে স্টাইলের তালিকা নেভিগেট করতে ডাউন অ্যারো টিপুন। একটি স্ক্রিন রিডার CSS ফাইলের নাম, স্টাইলটি যে লাইন নম্বরে প্রদর্শিত হবে এবং স্টাইলের নাম দিয়ে শুরু করে প্রতিটি স্টাইল ঘোষণা করে। উদাহরণস্বরূপ: "main.css:233 .card__img {}"
• কোনও স্টাইল আরও বিস্তারিতভাবে পরীক্ষা করতে এন্টার টিপুন। স্টাইল নামের একটি সম্পাদনাযোগ্য সংস্করণের উপর ফোকাস শুরু করুন।
• প্রতিটি CSS প্রোপার্টির সম্পাদনাযোগ্য সংস্করণ এবং তাদের সংশ্লিষ্ট মানগুলির মধ্যে স্থানান্তর করতে Tab টিপুন। প্রতিটি স্টাইল ব্লকের শেষে একটি ফাঁকা সম্পাদনাযোগ্য টেক্সট ফিল্ড রয়েছে যা আপনি অতিরিক্ত CSS প্রোপার্টি যোগ করতে ব্যবহার করতে পারেন।
• স্টাইলের তালিকা দেখতে আপনি ট্যাব টিপতে পারেন, অথবা এই মোড থেকে বেরিয়ে আসতে Escape টিপতে পারেন এবং তীরচিহ্নের সাহায্যে নেভিগেট করতে ফিরে যেতে পারেন।

অতিরিক্ত শর্টকাটের জন্য স্টাইলস প্যান কীবোর্ড রেফারেন্সটি অবশ্যই পড়ুন।

জ্ঞাত সমস্যা

• আপনি যদি ফিল্টার সম্পাদনাযোগ্য টেক্সট ফিল্ড ব্যবহার করেন তবে আপনি আর স্টাইলের তালিকা নেভিগেট করতে পারবেন না।

এলিমেন্টের অবস্থা টগল করুন

একটি এলিমেন্টের অবস্থা টগল করতে, যেমন :active অথবা :focus :

1. স্টাইলস প্যানে নেভিগেট করুন এবং টগল এলিমেন্ট স্টেট বোতামটি ফোকাস না হওয়া পর্যন্ত ট্যাব টিপুন।
2. এলিমেন্টের অবস্থাগুলির সংগ্রহ প্রসারিত করতে এন্টার টিপুন। এলিমেন্টের অবস্থাগুলি চেকবক্সের একটি গ্রুপ হিসাবে উপস্থাপিত হয়।
3. প্রথম অবস্থা, :active , ফোকাস না হওয়া পর্যন্ত Tab টিপুন।
4. এটি সক্রিয় করতে Space টিপুন। যদি DOM Tree-তে বর্তমানে নির্বাচিত উপাদানটির একটি :active স্টাইল থাকে, তাহলে এটি এখন প্রয়োগ করা হয়েছে।
5. সমস্ত উপলব্ধ অবস্থা অন্বেষণ করতে ট্যাব টিপতে থাকুন।

একটি বহির্গামী ক্লাস যোগ করুন

টগল এলিমেন্ট স্টেট বোতামের পাশেই রয়েছে এলিমেন্ট ক্লাস বোতাম। ট্যাব টিপে ফোকাসটি সেখানে সরান এবং তারপর এন্টার টিপুন। ফোকাসটি অ্যাড নিউ ক্লাস লেবেলযুক্ত একটি সম্পাদনা টেক্সট ফিল্ডে চলে যায়।

এলিমেন্ট ক্লাস বোতামটি মূলত একটি এলিমেন্টে বিদ্যমান ক্লাস যোগ করার জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ, যদি আপনার স্টাইলশিটে .clearfix নামে একটি সহায়ক ক্লাস থাকে, তাহলে আপনি ক্লাসের সাজেশন তালিকা দেখতে edit text ফিল্ডের ভিতরে . টিপতে পারেন এবং .clearfix সাজেশন খুঁজে পেতে Down Arrow ব্যবহার করতে পারেন। অথবা নিজে ক্লাসের নাম টাইপ করে এন্টার টিপুন। এটি প্রয়োগ করতে।

একটি নতুন স্টাইল নিয়ম যোগ করুন

এলিমেন্ট ক্লাস বোতামের পাশেই রয়েছে নতুন স্টাইল রুল বোতাম। ট্যাব টিপে ফোকাসটি এতে সরান এবং এন্টার টিপুন। ফোকাস স্টাইল ইন্সপেক্টরের ভিতরে একটি সম্পাদনাযোগ্য টেক্সট ফিল্ডে চলে যায়। ফিল্ডের প্রাথমিক টেক্সট কন্টেন্ট হল DOM Tree- তে নির্বাচিত এলিমেন্টের ট্যাগ নাম। আপনি এই ফিল্ডে আপনার পছন্দের যেকোনো ক্লাসের নাম টাইপ করতে পারেন এবং তারপর Tab টিপে CSS প্রোপার্টি বরাদ্দ করতে পারেন।

গণনা করা ট্যাব

কম্পিউটেড ট্যাবে ফোকাস করার সাথে সাথে, ফোকাসটি ভিতরে সরাতে এবং এর বিষয়বস্তু অন্বেষণ করতে Tab টিপুন। কম্পিউটেড ট্যাবের মধ্যে নির্দিষ্টতার ক্রম অনুসারে কোন CSS বৈশিষ্ট্যগুলি আসলে একটি উপাদানে প্রয়োগ করা হয় তা অন্বেষণ করার জন্য নিয়ন্ত্রণ রয়েছে।

সমস্ত গণনা করা স্টাইল অন্বেষণ করুন

কম্পিউটেড স্টাইলের সংগ্রহে না পৌঁছানো পর্যন্ত ট্যাব টিপুন। এগুলি একটি ARIA tree হিসাবে উপস্থাপিত হয়। একটি তালিকা বাক্স প্রসারিত করলে দেখা যাবে কোন CSS নির্বাচকরা কম্পিউটেড স্টাইল প্রয়োগ করছে। এই নির্বাচকগুলি নির্দিষ্টতা অনুসারে সংগঠিত হয়। একটি স্ক্রিন রিডার কম্পিউটেড মান, কোন CSS নির্বাচক বর্তমানে মিলছে, নির্বাচক ধারণকারী স্টাইলশিটের ফাইলের নাম এবং নির্বাচকের জন্য লাইন নম্বর ঘোষণা করে।

জ্ঞাত সমস্যা

• আপনি যদি ফিল্টার টেক্সট ফিল্ড ব্যবহার করেন তাহলে আপনি আর স্টাইল পরিদর্শন করতে পারবেন না।

ইভেন্ট লিসেনারের ট্যাব

এলিমেন্টস প্যানেলের ভেতর থেকে আপনি ইভেন্ট লিসেনার্স ট্যাব ব্যবহার করে একটি এলিমেন্টে প্রয়োগ করা ইভেন্ট লিসেনার্স পরীক্ষা করতে পারেন। স্টাইলস প্যানে ফোকাস করে, ইভেন্ট লিসেনার্স ট্যাবে নেভিগেট করতে ডান তীর টিপুন।

ইভেন্ট লিসেনারের সাথে পরিচিত হোন

ইভেন্ট লিসেনারের নাম ARIA tree হিসেবে উপস্থাপন করা হয়। আপনি তীরচিহ্ন ব্যবহার করে সেগুলি নেভিগেট করতে পারেন। একটি স্ক্রিন রিডার ইভেন্ট লিসেনারের সাথে সংযুক্ত DOM অবজেক্টের নাম, সেইসাথে ইভেন্ট লিসেনারের নাম এবং তার লাইন নম্বর ঘোষণা করে।

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

অ্যাক্সেসিবিলিটি প্যানে ফোকাস করে, ফোকাসটি ভিতরে সরাতে এবং এর বিষয়বস্তু অন্বেষণ করতে Tab টিপুন। অ্যাক্সেসিবিলিটি প্যানের মধ্যে অ্যাক্সেসিবিলিটি ট্রি, একটি উপাদানে প্রয়োগ করা ARIA বৈশিষ্ট্য এবং এর গণনা করা অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলি অন্বেষণ করার জন্য নিয়ন্ত্রণ রয়েছে।

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

অ্যাক্সেসিবিলিটি ট্রি একটি ARIA tree হিসেবে উপস্থাপিত হয় যেখানে প্রতিটি treeitem DOM-এর একটি এলিমেন্টের সাথে মিলে যায়। ট্রি নির্বাচিত নোডের জন্য কম্পিউটেড রোল ঘোষণা করে। div এবং span মতো জেনেরিক এলিমেন্টগুলিকে ট্রিতে "GenericContainer" হিসেবে ঘোষণা করা হয়। ট্রি অতিক্রম করতে এবং পিতামাতা-সন্তানের সম্পর্ক অন্বেষণ করতে তীরচিহ্নগুলি ব্যবহার করুন।

জ্ঞাত সমস্যা

• অ্যাক্সেসিবিলিটি প্যানে ব্যবহৃত ARIA ট্রির ধরণটি ভয়েসওভারের মতো ম্যাকওএস স্ক্রিন রিডারের জন্য Chrome-এ সঠিকভাবে প্রকাশ নাও হতে পারে। এই সমস্যাটির অগ্রগতি সম্পর্কে অবহিত হতে Chromium ইস্যু #868480 সাবস্ক্রাইব করুন।
• ARIA অ্যাট্রিবিউট এবং কম্পিউটেড প্রোপার্টি বিভাগগুলিকে ARIA ট্রি হিসেবে চিহ্নিত করা হয়েছে, কিন্তু বর্তমানে তাদের ফোকাস ম্যানেজমেন্ট নেই তাই এগুলি কীবোর্ডে ব্যবহার করা যাবে না।

অডিট প্যানেল

অডিট প্যানেল আপনাকে একটি সাইটের বিরুদ্ধে একাধিক পরীক্ষা চালাতে দেয় যাতে কর্মক্ষমতা, অ্যাক্সেসিবিলিটি, SEO এবং অন্যান্য বেশ কয়েকটি বিভাগের সাথে সম্পর্কিত সাধারণ সমস্যাগুলি পরীক্ষা করা যায়।

একটি অডিট কনফিগার করুন এবং চালান

1. যখন অডিট প্যানেলটি প্রথম খোলা হয়, তখন ফর্মের শেষে "রান অডিট" বোতামে ফোকাস করা হয়। ডিফল্টরূপে ফর্মটি একটি সিমুলেটেড 3G সংযোগে মোবাইল ইমুলেশন ব্যবহার করে প্রতিটি বিভাগের জন্য অডিট চালানোর জন্য কনফিগার করা থাকে।
2. অডিট সেটিংস পরিবর্তন করতে Shift + Tab ব্যবহার করুন অথবা ব্রাউজ মোডে ফিরে যান।
3. যখন আপনি অডিট চালানোর জন্য প্রস্তুত হবেন, তখন Run Audit বোতামে ফিরে যান এবং Enter টিপুন।
4. ফোকাস একটি মোডাল উইন্ডোতে চলে যায় যেখানে একটি বাতিল বোতাম থাকে যা আপনাকে অডিট থেকে বেরিয়ে আসতে দেয়। অডিট চলাকালীন এবং পৃষ্ঠাটি একাধিকবার রিফ্রেশ করার সময় আপনি একাধিক ইয়ারকন শুনতে পাবেন।

জ্ঞাত সমস্যা

• কনফিগারেশন ফর্মের বিভিন্ন অংশ বর্তমানে fieldset উপাদান দিয়ে চিহ্নিত করা হয়নি। প্রতিটি অংশের সাথে কোন নিয়ন্ত্রণগুলি যুক্ত তা নির্ধারণ করার জন্য ব্রাউজ মোডে সেগুলি নেভিগেট করা সহজ হতে পারে।
• অডিট শেষ হওয়ার পরে কোনও ইয়ারকন বা লাইভ রিজিওন ঘোষণা করা হয় না। সাধারণত এটি প্রায় 30 সেকেন্ড সময় নেয়, যার পরে আপনি ফলাফলগুলিতে নেভিগেট করতে সক্ষম হবেন। ব্রাউজ মোড ব্যবহার করা ফলাফলে পৌঁছানোর সবচেয়ে সহজ উপায় হতে পারে।

অডিট রিপোর্ট নেভিগেট করুন

অডিট রিপোর্টটি প্রতিটি অডিট বিভাগের সাথে সামঞ্জস্যপূর্ণ বিভাগগুলিতে সংগঠিত। প্রতিবেদনটি প্রতিটি বিভাগের জন্য স্কোরের একটি তালিকা দিয়ে শুরু হয়। এই স্কোরগুলি এমন লিঙ্কও যা প্রাসঙ্গিক বিভাগগুলিতে এড়িয়ে যেতে ব্যবহার করা যেতে পারে। প্রতিটি বিভাগের মধ্যে প্রসারিতযোগ্য details উপাদান রয়েছে, যার মধ্যে পাস বা ব্যর্থ অডিট সম্পর্কিত তথ্য রয়েছে। ডিফল্টরূপে, শুধুমাত্র ব্যর্থ অডিটগুলি দেখানো হয়। প্রতিটি বিভাগ একটি চূড়ান্ত details উপাদান দিয়ে শেষ হয় যার মধ্যে পাস করা সমস্ত অডিট থাকে।

নতুন অডিট চালানোর জন্য, রিপোর্ট থেকে বেরিয়ে আসার জন্য Shift + Tab ব্যবহার করুন এবং Perform An Audit বোতামটি খুঁজুন।