কাঠামোর পাশাপাশি, ডিজিটাল অ্যাক্সেসযোগ্যতার জন্য নির্মাণ এবং ডিজাইন করার সময় বিবেচনা করার জন্য অনেকগুলি সমর্থনকারী HTML উপাদান রয়েছে। জানুন অ্যাক্সেসিবিলিটি কোর্স জুড়ে, আমরা অনেক উপাদান কভার করি।
এই মডিউলটি খুব নির্দিষ্ট উপাদানগুলির উপর ফোকাস করে যা অন্য কোনও মডিউলের সাথে পুরোপুরি ফিট করে না কিন্তু বুঝতে উপযোগী।
আমার স্নাতকের
HTML <title> উপাদানটি পৃষ্ঠার বিষয়বস্তু বা স্ক্রিনের বিষয়বস্তু নির্ধারণ করে যা একজন ব্যবহারকারীর অভিজ্ঞতা হতে চলেছে। এটি একটি HTML নথির <head> বিভাগে পাওয়া যায় এবং এটি <h1> বা পৃষ্ঠার মূল বিষয়ের সমতুল্য। শিরোনাম বিষয়বস্তু ব্রাউজার ট্যাবে প্রদর্শিত হয় এবং ব্যবহারকারীদের বুঝতে সাহায্য করে যে তারা কোন পৃষ্ঠাটি পরিদর্শন করছে, তবে এটি ওয়েবসাইট বা অ্যাপে প্রদর্শিত হয় না।
একটি একক-পৃষ্ঠা অ্যাপে (SPA), <title> একটু ভিন্নভাবে পরিচালনা করা হয়, কারণ ব্যবহারকারীরা বহু-পৃষ্ঠার ওয়েবসাইটের মতো পৃষ্ঠাগুলির মধ্যে নেভিগেট করেন না। SPA-এর জন্য, JavaScript ফ্রেমওয়ার্কের উপর নির্ভর করে 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 ব্যবহারকারীর প্রোগ্রাম করা ভাষায় ডিফল্ট হবে। উদাহরণস্বরূপ, যদি একটি AT স্প্যানিশ সেট করা হয়, কিন্তু একজন ব্যবহারকারী একটি ইংরেজি ওয়েবসাইট বা অ্যাপে যান, AT স্প্যানিশ উচ্চারণ এবং ক্যাডেন্স সহ ইংরেজি পাঠ্য পড়ার চেষ্টা করবে। এই সমন্বয় একটি অব্যবহারযোগ্য ডিজিটাল পণ্য এবং একটি হতাশ ব্যবহারকারীর ফলাফল.
<html>...</html>
<html lang="en">...</html>
ল্যাং অ্যাট্রিবিউটের সাথে শুধুমাত্র একটি ভাষা যুক্ত থাকতে পারে। এর মানে <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>
iFrames
iFrame উপাদান ( <iframe> ) অন্য HTML পৃষ্ঠা বা পৃষ্ঠার মধ্যে তৃতীয় পক্ষের সামগ্রী হোস্ট করতে ব্যবহৃত হয়। এটি মূলত মূল পৃষ্ঠার মধ্যে অন্য একটি ওয়েবপৃষ্ঠা রাখে। iFrames সাধারণত বিজ্ঞাপন, এমবেডেড ভিডিও, ওয়েব বিশ্লেষণ এবং ইন্টারেক্টিভ সামগ্রীর জন্য ব্যবহৃত হয়।
আপনার <iframe> অ্যাক্সেসযোগ্য করার জন্য, কয়েকটি দিক বিবেচনা করতে হবে। প্রথমত, স্বতন্ত্র বিষয়বস্তু সহ প্রতিটি <iframe> প্যারেন্ট ট্যাগের ভিতরে একটি শিরোনাম উপাদান অন্তর্ভুক্ত করা উচিত। এই শিরোনামটি AT ব্যবহারকারীদের <iframe> এর ভিতরের বিষয়বস্তু সম্পর্কে আরও তথ্য সরবরাহ করে।
দ্বিতীয়ত, একটি সর্বোত্তম অনুশীলন হিসাবে, <iframe> ট্যাগ সেটিংসে "অটো" বা "হ্যাঁ" স্ক্রলিং সেট করা ভাল। এটি কম দৃষ্টিসম্পন্ন লোকেদের <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>
আপনার উপলব্ধি পরীক্ষা করুন
নথি অ্যাক্সেসযোগ্যতার আপনার জ্ঞান পরীক্ষা করুন।
আপনার সাইটটি একটি বহু-ভাষা অনলাইন পাঠ্যপুস্তক, যেখানে একাধিক ভাষা এক পৃষ্ঠায় দেখানো হয়েছে৷ সহায়ক প্রযুক্তিকে অনুলিপির ভাষা বলার সেরা উপায় কী?
<html> উপাদানে সমস্ত ভাষা অন্তর্ভুক্ত করুন। যেমন <html lang="en,lt,pl,pt">lang অ্যাট্রিবিউটের সাথে শুধুমাত্র একটি ভাষা যুক্ত থাকতে পারে।<html> এর জন্য একটি প্রাথমিক lang সেট করুন, এবং যেকোন উপাদানের জন্য অতিরিক্ত ভাষা সেট করুন যার বিষয়বস্তু ভিন্ন ভাষায় রয়েছে।<html> ভাষার বৈশিষ্ট্যের উপর নির্ভর করবে। আপনার যদি বহু-ভাষা পাঠ্য থাকে, তাহলে সঠিক দুটি অক্ষরের ISO কোড সহ সংশ্লিষ্ট উপাদানে (যেমন একটি বিভাগ বা অনুচ্ছেদ) একটি lang অ্যাট্রিবিউট যোগ করতে ভুলবেন না।