মডিউল ১: পেইজের গঠন বা পেইজ ষ্ট্রাক্চার
মডিউল শেখার মাধ্যমে শিক্ষার্থীরা সক্ষম হবে:
- কিভাবে পৃষ্ঠা কাঠামো বা পেইজ স্ট্রাক্চার প্রতিবন্ধী ব্যক্তিদের ওয়েব পেইজের অভ্যন্তরে নেভিগেট করতে সক্ষম করে তোলে তা ব্যাখ্যা করা
- শিরোনাম বা হেডিং ব্যবহার করে বিষয়বস্তুর বিভাগগুলির শ্রেণিবিন্যাস (hierarchy of sections of content) সনাক্ত করা এবং জানানো
- বিষয়বস্তুর বিভাগগুলির (sections of content) গঠনের জন্য মার্কআপ লিখা, যেমন অনুচ্ছেদ এবং তালিকা (paragraphs and lists)
- পেইজের বিভিন্ন রিজিওনের জন্য জন্য মার্কআপ লিখা, যেমন হেডার, ফুটার এবং মেইন কন্টেন্ট
- সনাক্তকরণ এবং ব্যাখ্যার সুবিধার্থে পেইজ মেটা-তথ্যের জন্য মার্কআপ লিখা
- সহায়ক প্রযুক্তি এবং অভিযোজিত কৌশলগুলির সাথে সামঞ্জস্যের জন্য HTML নেটিভ উপাদানগুলি ব্যবহার করার সুবিধাগুলি রূপরেখা তৈরী করা
- ব্যবহারকারী যেন রিপিটেড কন্টেন্ট বা সেকশানগুলো এড়িয়ে যেতে পারে বা স্কিপ করতে পারে সেভাবে কোড লিখা
- বিষয়বস্তুর বা কন্টেন্টের জন্য কোড লিখা যাতে এটি একটি অর্থপূর্ণ ক্রমানুসারে উপস্থাপিত হয়
- বিষয়বস্তুর বা কন্টেন্টের জন্য স্টাইল এবং কোড লিখা যাতে এটি একটি আলাদা ফোকাস সূচক থাকে
বিষয় - সেকশান হেডিং
কন্টেন্টের অংশগুলিকে আলাদা করতে এবং লেবেল করতে এইচটিএমএল উপাদানগুলির h1 থেকে h6 ব্যবহার প্রদর্শন করা৷ যখন HTML শিরোনাম ব্যবহার করা যাবে না তখন WAI-ARIA বৈশিষ্ট্য role="heading" এবং level ="1-6" ব্যবহার প্রদর্শন করা৷ ব্যাখ্যা করা কিভাবে বিভিন্ন প্রতিবন্ধি ব্যক্তিরা ওরিওয়ন্টেশন এবং নেভিগেশনের জন্য শিরোনাম ব্যবহার করে।
- কীভাবে হেডিং এবং তাদের রেঙ্কের লেভেল বিভিন্ন ধরণের সহায়ক প্রযুক্তি, যেমন টেক্সট টু স্পিচ এবং কাস্টম স্টাইলশীটগুলি দ্বারা ব্যবহৃত হয়, প্রতিবন্ধী ব্যক্তিদের বিষয়বস্তু বুঝতে এবং নেভিগেট করার জন্য সক্ষম হয় তা ব্যাখ্যা করা
- এইচটিএমএল উপাদান h1 থেকে h6 ব্যবহার করে হেডিংয়ের জন্য মার্কআপ লিখা এবং যখন এইচটিএমএল হেডিং ব্যবহার করা যাবে না তখন WAI-ARIA বৈশিষ্ট্য role="heading" এবং level="1-6" ব্যবহার করা
- বিষয়বস্তুর অনুক্রমিক কাঠামো অনুযায়ী হেডিং লেবেল বিন্যাস করা
- হেডিংয়ের জন্য অর্থপূর্ণ এবং স্বতন্ত্র স্টাইল প্রদানের জন্য ডেভেলপার এবং ডিজাইনারদের জন্য সম্পর্কিত প্রয়োজনীয়তাগুলি বর্ণনা করা
বিষয়: কন্টেন্টের সেকশান
বিষয়বস্তুর বা কন্টেন্টের গঠন বোঝাতে HTML উপাদানের ব্যবহার ব্যাখ্যা করা। উদাহরণস্বরূপ, সেকশান, প্যারাগ্রাফ এবং লিস্টের সঠিক কোডিং করা।
- সঠিকভাবে কোড করা কন্টেন্টের সেকশান বিভিন্ন উপায়ে উপস্থাপন করা যেতে পারে; উদাহরণস্বরূপ, টেক্সট-টু-স্পিচ প্রযুক্তি ব্যবহার করে উচ্চস্বরে পড়ে শোনানো, কাস্টম স্টাইলিং ব্যবহার করে রেন্ডার করা এবং বিভিন্ন স্ক্রীন এবং টেক্সট সাইজে প্রদর্শন করা
- HTML উপাদান section, article, p, ul, ol, li, dl, dt, এবং dd এর উদ্দেশ্য বর্ণনা করা
- HTML উপাদান section এবং article ব্যবহার করে কন্টেন্টের সেকশানের জন্য মার্কআপ লিখা
- HTML উপাদান p ব্যবহার করে আর্টিকেলের জন্য মার্কআপ লিখা
- HTML উপাদান ul, ol, এবং dl ব্যবহার করে তালিকার জন্য মার্কআপ লিখা
- HTML উপাদান li, dt, এবং dd ব্যবহার করে তালিকা আইটেমগুলির জন্য মার্কআপ লিখা
- যথাক্রমে এইচটিএমএল উপাদান q এবং blockquote ব্যবহার করে ইনলাইন এবং ব্লক কোটগুলির জন্য মার্কআপ লিখা
- যখন নেটিভ HTML উপাদান ব্যবহার করা যাবে না তখন সংশ্লিষ্ট WAI-ARIA বৈশিষ্ট্যগুলি প্রয়োগ করা৷
- paragraphs এবং list এর মতো কন্টেন্টের অর্থ বোঝাতে উপযুক্ত কাঠামো ব্যবহার করার জন্য সম্পর্কিত প্রয়োজনীয়তাগুলি বর্ণনা করা
বিষয়: পেইজ রিজিয়ন
পেইজ রিজিয়ন যেমন হেডার, ফুটার, নেভিগেশন এবং মেইন কন্টেন্ট সনাক্ত করতে সাধারণ মার্কআপের ব্যবহার ব্যাখ্যা করা। পেইজ রিজিয়ন কীভাবে প্রতিবন্ধী ব্যক্তিদের জন্য নেভিগেশন সমর্থন করে তা ব্যাখ্যা করা।
- ব্যাখ্যা করা কিভাবে সঠিকভাবে কোডেড পেইজ রিজিয়নগুলো বিভিন্ন উপায়ে উপস্থাপন করা যেতে পারে; উদাহরণস্বরূপ, টেক্সট-টু-স্পিচ প্রযুক্তি ব্যবহার করে উচ্চস্বরে পড়ে শোনানো, কাস্টম স্টাইলিং ব্যবহার করে রেন্ডার করা এবং বিভিন্ন স্ক্রীন এবং টেক্সট সাইজে প্রদর্শিন করা
- এইচটিএমএল এলিমেন্ট header, nav, main, section, article, aside, এবং footer এর উদ্দেশ্য বর্ণনা করা
- HTML এলিমেন্ট header, nav, main, section, article, aside, এবং footer ব্যবহার করে একটি পেইজ রিজিয়নগুলোর জন্য মার্কআপ লিখা, সেইসাথে তাদের সংশ্লিষ্ট WAI-ARIA ল্যান্ডমার্কগুলি যখন HTML কাঠামো ব্যবহার করা যাবে না
- প্রয়োজনে HTML headings, aria-label এবং aria-labelledby ব্যবহার করে রিজিয়নগুলোকে লেবেল করা
বিষয়: পেইজ ওরিয়েন্টেশান এবং নেভিগেশান
ব্যাখ্যা করা কিভাবে পেইজ রিজিয়ন, কন্টেন্টের সেকশান এবং সেকশানের হেডিং (আগের বিষয়গুলিতে বর্ণিত) একটি সুসংগত সর্বাঙ্গীণ পেইজ কাঠামো প্রদান করতে একত্রিত হয়। ব্যাখ্যা করা কিভাবে পৃষ্ঠা জুড়ে নেভিগেশনের জন্য অতিরিক্ত প্রক্রিয়া, যেমন লিঙ্ক, দৃশ্যমান ফোকাস সূচক, অর্থপূর্ণ ক্রম এবং মেটা-তথ্য দ্বারা সহজতর হয়।
- ওয়েব পেজ সনাক্ত করতে পেইজ হেডিংয়ের জন্য মার্কআপ লিখা
- সহায়ক প্রযুক্তির জন্য ওয়েব পৃষ্ঠাগুলির প্রাথমিক ভাষার (primary language) জন্য মার্কআপ লিখা
- সামঞ্জস্যপূর্ণ নাম সহ একাধিক পৃষ্ঠায় পুনরাবৃত্তি করা কেন্টেন্টের ব্লকগুলিকে লেবেল করা
- রিপিটেড কন্টেন্ট ব্লকগুলি এড়িয়ে যাওয়ার জন্য শুধুমাত্র কীবোর্ড ব্যবহার করে জন্য কোড লিখা
- কোড লিখুন যা একটি অর্থপূর্ণ ক্রমানুসারে বিষয়বস্তু উপস্থাপন করা হয়
- পার্থক্যযোগ্য ফোকাস সূচকগুলির জন্য কোড লিখুন, উদাহরণস্বরূপ CSS :focus নির্বাচক ব্যবহার করে
- কন্টেন্ট লেখকদের অর্থপূর্ণ লিঙ্ক টেক্সট এবং পেইজ টাইটেল লিখতে সম্পর্কিত প্রয়োজনীয়তা বর্ণনা করা
- লিঙ্ক এবং অন্যান্য ন্যাভিগেশন উপাদানগুলির জন্য স্বতন্ত্র ফোকাস সূচক সরবরাহ করার জন্য ডিজাইনারদের জন্য সম্পর্কিত প্রয়োজনীয়তাগুলি বর্ণনা করা
- কন্টেন্ট লেখক এবং ডিজাইনারদের জন্য স্পষ্ট লেআউট এবং ডিজাইন প্রদান করার জন্য সম্পর্কিত প্রয়োজনীয়তা বর্ণনা করা যা বিভিন্ন ভিউপোর্ট আকার (viewport sizes) সমর্থন করে