কাঠামোর পাশাপাশি, ডিজিটাল অ্যাক্সেসিবিলিটির জন্য নির্মাণ ও ডিজাইন করার সময় অনেক সহায়ক HTML এলিমেন্ট বিবেচনা করতে হয়। 'লার্ন অ্যাক্সেসিবিলিটি' কোর্স জুড়ে আমরা এই অনেকগুলো এলিমেন্ট নিয়ে আলোচনা করি।
এই মডিউলটি এমন কিছু নির্দিষ্ট উপাদানের উপর আলোকপাত করে, যেগুলো অন্য কোনো মডিউলের সাথে ঠিক খাপ খায় না, কিন্তু বোঝাটা দরকারি।
পৃষ্ঠার শিরোনাম
এইচটিএমএল (HTML) <title> এলিমেন্টটি ব্যবহারকারী যে পেজ বা স্ক্রিনটি দেখতে চলেছেন তার বিষয়বস্তু নির্ধারণ করে। এটি একটি এইচটিএমএল (HTML) ডকুমেন্টের <head> সেকশনে থাকে এবং এটি পেজের <h1> বা মূল বিষয়ের সমতুল্য। টাইটেলের বিষয়বস্তু ব্রাউজার ট্যাবে প্রদর্শিত হয় এবং ব্যবহারকারীদের বুঝতে সাহায্য করে যে তারা কোন পেজটি দেখছেন, কিন্তু এটি ওয়েবসাইট বা অ্যাপের মূল অংশে প্রদর্শিত হয় না।
একটি সিঙ্গেল-পেজ অ্যাপে (SPA) <title> কিছুটা ভিন্নভাবে পরিচালিত হয়, কারণ ব্যবহারকারীরা মাল্টি-পেজ ওয়েবসাইটের মতো পৃষ্ঠাগুলির মধ্যে যাতায়াত করেন না। SPA-এর ক্ষেত্রে, জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের উপর নির্ভর করে ` document.title প্রপার্টির মান ম্যানুয়ালি বা কোনো হেল্পার প্যাকেজের মাধ্যমে যোগ করা যেতে পারে। স্ক্রিন রিডার ব্যবহারকারীকে আপডেট করা পৃষ্ঠার শিরোনামগুলো জানানোর জন্য কিছু অতিরিক্ত কাজ করার প্রয়োজন হতে পারে।
বর্ণনামূলক পেজ টাইটেল ব্যবহারকারী এবং সার্চ ইঞ্জিন অপটিমাইজেশন (SEO) উভয়ের জন্যই ভালো —কিন্তু বাড়াবাড়ি করবেন না এবং প্রচুর কীওয়ার্ড যোগ করবেন না। যেহেতু একজন AT ব্যবহারকারী কোনো পেজ ভিজিট করার সময় টাইটেলটিই প্রথম চোখে পড়ে, তাই এটি অবশ্যই নির্ভুল, অনন্য এবং বর্ণনামূলক হওয়ার পাশাপাশি সংক্ষিপ্তও হতে হবে।
পৃষ্ঠার শিরোনাম লেখার সময়, ভেতরের পৃষ্ঠা বা গুরুত্বপূর্ণ বিষয়বস্তু প্রথমে রাখা এবং তারপর পূর্ববর্তী পৃষ্ঠা বা তথ্য যোগ করা একটি উত্তম অভ্যাস। এর ফলে, AT ব্যবহারকারীদের এমন কোনো তথ্য পুনরায় শুনতে হয় না যা তারা ইতিমধ্যেই শুনে ফেলেছেন।
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>
ভাষা
পৃষ্ঠার ভাষা
পেজ ল্যাঙ্গুয়েজ অ্যাট্রিবিউট ( lang ) পুরো পেজের জন্য ডিফল্ট ভাষা নির্ধারণ করে। এই অ্যাট্রিবিউটটি <html> ট্যাগে যোগ করা হয়। প্রতিটি পেজে একটি বৈধ ল্যাঙ্গুয়েজ অ্যাট্রিবিউট যোগ করা উচিত, কারণ এটি AT-কে নির্দেশ করে যে পেজটি কোন ভাষা ব্যবহার করবে।
বৃহত্তর AT কভারেজের জন্য দুই-অক্ষরের ISO ভাষা কোড ব্যবহার করার পরামর্শ দেওয়া হয়, কারণ সেগুলোর মধ্যে অনেকগুলোই বর্ধিত ভাষা কোড সমর্থন করে না।
যখন কোনো ভাষার বৈশিষ্ট্য সম্পূর্ণ অনুপস্থিত থাকে, তখন স্বয়ংক্রিয় অনুবাদ (AT) ডিফল্ট হিসেবে ব্যবহারকারীর প্রোগ্রাম করা ভাষা ব্যবহার করে। উদাহরণস্বরূপ, যদি একটি স্বয়ংক্রিয় অনুবাদ স্প্যানিশ ভাষায় সেট করা থাকে, কিন্তু ব্যবহারকারী কোনো ইংরেজি ওয়েবসাইট বা অ্যাপে যান, তাহলে স্বয়ংক্রিয় অনুবাদটি স্প্যানিশ উচ্চারণ ও ছন্দে ইংরেজি লেখাটি পড়ার চেষ্টা করবে। এই সংমিশ্রণের ফলে ডিজিটাল পণ্যটি ব্যবহার অযোগ্য হয়ে পড়ে এবং ব্যবহারকারী হতাশ হন।
<html>...</html>
<html lang="en">...</html>
lang অ্যাট্রিবিউটের সাথে শুধুমাত্র একটি ভাষাই যুক্ত থাকতে পারে। এর মানে হলো, পেজে একাধিক ভাষা থাকলেও <html> অ্যাট্রিবিউটে কেবল একটিই ভাষা থাকতে পারে। lang পেজের প্রধান ভাষায় সেট করুন।
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
বিভাগের ভাষা
আপনি কন্টেন্টের মধ্যেই ভাষা পরিবর্তনের জন্য ল্যাঙ্গুয়েজ অ্যাট্রিবিউট ( lang ) ব্যবহার করতে পারেন। সম্পূর্ণ পৃষ্ঠার ল্যাঙ্গুয়েজ অ্যাট্রিবিউটের মতোই একই মৌলিক নিয়ম এখানেও প্রযোজ্য, শুধু পার্থক্য হলো এটিকে <html> ট্যাগের পরিবর্তে পৃষ্ঠার উপযুক্ত এলিমেন্টে যোগ করতে হয়।
মনে রাখবেন যে, আপনি <html> এলিমেন্টে যে ভাষা যোগ করেন তা এর ভেতরের সমস্ত এলিমেন্টে ছড়িয়ে পড়ে, তাই সর্বদা প্রথমে পেজের টপ-লেভেল lang অ্যাট্রিবিউটের মাধ্যমে প্রধান ভাষাটি সেট করুন।
পৃষ্ঠার মধ্যে ভিন্ন ভাষায় লেখা যেকোনো এলিমেন্টের জন্য, উপযুক্ত র্যাপার এলিমেন্টে সেই lang অ্যাট্রিবিউটটি যোগ করুন। এটি সেই এলিমেন্টটি বন্ধ না করা পর্যন্ত টপ-লেভেল ভাষার সেটিংকে ওভাররাইড করবে।
<html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
"Kas sa räägid inglise keelt?" when I met someone new.</p>
</div>
</body>
</html><html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
<span lang="et">"Kas sa räägid inglise keelt?"</span>
when I met someone new.</p>
</div>
</body>
</html>আইফ্রেম
iFrame এলিমেন্ট ( <iframe> ) একটি পেজের মধ্যে অন্য কোনো HTML পেজ বা তৃতীয় পক্ষের কন্টেন্ট হোস্ট করতে ব্যবহৃত হয়। এটি মূলত মূল পেজের ভেতরে আরেকটি ওয়েবপেজ স্থাপন করে। iFrame সাধারণত বিজ্ঞাপন, এমবেডেড ভিডিও, ওয়েব অ্যানালিটিক্স এবং ইন্টারেক্টিভ কন্টেন্টের জন্য ব্যবহৃত হয়।
আপনার <iframe> কে অ্যাক্সেসযোগ্য করতে কয়েকটি বিষয় বিবেচনা করতে হবে। প্রথমত, স্বতন্ত্র বিষয়বস্তুসহ প্রতিটি <iframe> এর parent ট্যাগের ভিতরে একটি title এলিমেন্ট অন্তর্ভুক্ত করা উচিত। এই টাইটেলটি AT ব্যবহারকারীদের <iframe> এর ভিতরের বিষয়বস্তু সম্পর্কে আরও তথ্য সরবরাহ করে।
দ্বিতীয়ত, একটি উত্তম অনুশীলন হিসেবে, <iframe> ট্যাগের সেটিংসে স্ক্রলিং "auto" বা "yes"-এ সেট করা ভালো। এর ফলে স্বল্প দৃষ্টিসম্পন্ন ব্যক্তিরা <iframe> এর ভেতরের এমন সব কন্টেন্ট স্ক্রল করে দেখতে পারেন, যা তারা অন্যথায় হয়তো দেখতে পেতেন না। আদর্শগতভাবে, <iframe> কন্টেইনারটির উচ্চতা এবং প্রস্থও পরিবর্তনযোগ্য হওয়া উচিত।
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
<iframe title="Google Pixel - Lizzo in Real Tone" src="https://www.youtube.com/embed/3obixhGZ5ds" scrolling="auto"> </iframe>