এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

শব্দার্থবিদ্যা এবং নেভিগেটিং বিষয়বস্তু

পৃষ্ঠা নেভিগেশন শব্দার্থবিদ্যা ভূমিকা

Alice Boxhall

Dave Gash

Meggin Kearney

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

এই পাঠে আমরা কিছু কম সুস্পষ্ট শব্দার্থ কভার করব যা স্ক্রিন রিডার ব্যবহারকারীদের জন্য খুবই গুরুত্বপূর্ণ, বিশেষ করে নেভিগেশনের ক্ষেত্রে। অনেকগুলি নিয়ন্ত্রণ সহ একটি সাধারণ পৃষ্ঠায় কিন্তু বেশি সামগ্রী নয়, আপনার যা প্রয়োজন তা খুঁজে পেতে পৃষ্ঠাটি স্ক্যান করা সহজ৷ কিন্তু একটি বিষয়বস্তু-ভারী পৃষ্ঠায়, যেমন একটি উইকিপিডিয়া এন্ট্রি বা একটি নিউজ এগ্রিগেটর, ওপর থেকে নিচের সব কিছু পড়া ব্যবহারিক নয়; আপনি দক্ষতার সাথে বিষয়বস্তু মাধ্যমে নেভিগেট করার একটি উপায় প্রয়োজন.

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

স্ক্রিন রিডার ব্যবহারকারীরা প্রায়ই তথ্য সনাক্ত করতে শিরোনামের একটি তালিকার উপর নির্ভর করে। বেশিরভাগ স্ক্রিন রিডারের কাছে পৃষ্ঠার শিরোনামগুলির একটি তালিকা বিচ্ছিন্ন এবং স্ক্যান করার সহজ উপায় রয়েছে, একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যাকে বলা হয় রটার ৷ আসুন দেখি কিভাবে আমরা এই বৈশিষ্ট্যটিকে সমর্থন করার জন্য কার্যকরভাবে HTML শিরোনাম ব্যবহার করতে পারি।

শিরোনামগুলি কার্যকরভাবে ব্যবহার করা

প্রথমত, আসুন একটি আগের কথা পুনরাবৃত্তি করি: DOM অর্ডার গুরুত্বপূর্ণ , শুধুমাত্র ফোকাস অর্ডারের জন্য নয় স্ক্রিন রিডার অর্ডারের জন্য। আপনি VoiceOver, NVDA, JAWS, এবং ChromeVox-এর মতো স্ক্রিন রিডারগুলির সাথে পরীক্ষা করার সময়, আপনি দেখতে পাবেন শিরোনাম তালিকাটি ভিজ্যুয়াল অর্ডারের পরিবর্তে DOM ক্রম অনুসরণ করে৷

এটি সাধারণভাবে স্ক্রিন রিডারদের জন্য সত্য। যেহেতু স্ক্রিন রিডারগুলি অ্যাক্সেসিবিলিটি ট্রির সাথে ইন্টারঅ্যাক্ট করে, এবং অ্যাক্সেসিবিলিটি ট্রিটি DOM ট্রির উপর ভিত্তি করে, তাই একজন স্ক্রিন রিডার যে ক্রমটি বুঝতে পারে তা সরাসরি DOM অর্ডারের উপর ভিত্তি করে। এর মানে হল যে একটি উপযুক্ত শিরোনাম গঠন আগের চেয়ে বেশি গুরুত্বপূর্ণ।

বেশিরভাগ সুগঠিত পৃষ্ঠাগুলিতে, বিষয়বস্তু ব্লকের মধ্যে পিতামাতা-সন্তানের সম্পর্ক নির্দেশ করার জন্য শিরোনাম স্তরগুলি নেস্ট করা হয়। WebAIM চেকলিস্ট বারবার এই কৌশলটি উল্লেখ করে।

1.3.1 উল্লেখ করে "শিরোনাম নির্ধারণ করতে শব্দার্থিক মার্কআপ ব্যবহার করা হয়"
2.4.1 কন্টেন্ট ব্লক বাইপাস করার জন্য একটি কৌশল হিসাবে শিরোনাম গঠন উল্লেখ করে
2.4.6 দরকারী শিরোনাম লেখার জন্য কিছু বিবরণ আলোচনা করে
2.4.10 বলে "কন্টেন্টের পৃথক বিভাগগুলি শিরোনাম ব্যবহার করে মনোনীত করা হয়েছে, যেখানে উপযুক্ত"

সব শিরোনাম পর্দায় দৃশ্যমান হতে হবে না. উদাহরণস্বরূপ, উইকিপিডিয়া এমন একটি কৌশল ব্যবহার করে যা ইচ্ছাকৃতভাবে কিছু শিরোনাম অফ-স্ক্রীনে রাখে যাতে সেগুলিকে শুধুমাত্র স্ক্রীন রিডার এবং অন্যান্য সহায়ক প্রযুক্তির কাছে অ্যাক্সেসযোগ্য করে তোলে।

<style>
    .sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    }
</style>

<h2 class="sr-only">This heading is offscreen.</h2>

জটিল অ্যাপ্লিকেশনের জন্য, যখন ভিজ্যুয়াল ডিজাইনের প্রয়োজন হয় না বা দৃশ্যমান শিরোনামের জন্য জায়গা থাকে না তখন শিরোনামগুলিকে মিটমাট করার এটি একটি ভাল উপায় হতে পারে।

সতর্কতা: এই কৌশলটির সাথে অতিরিক্ত না যাওয়া গুরুত্বপূর্ণ। মনে রাখবেন যে সহায়ক প্রযুক্তি ব্যবহারকারীরাও নিজেদের জন্য স্ক্রীন দেখতে সক্ষম হতে পারে, তাই "শুধুমাত্র স্ক্রিন রিডার" সামগ্রী তৈরি করার পথে অনেক দূরে যাওয়া আসলে কিছু ব্যবহারকারীর জন্য ব্যবহারকারীর অভিজ্ঞতা হ্রাস করতে পারে। এটি পরে আপনার জন্য রক্ষণাবেক্ষণের মাথাব্যথাও তৈরি করতে পারে।

অন্যান্য নেভিগেশন বিকল্প

যদিও ভাল শিরোনাম সহ পৃষ্ঠাগুলি স্ক্রিন রিডার ব্যবহারকারীদের নেভিগেট করতে সহায়তা করে, তবে লিঙ্ক , ফর্ম নিয়ন্ত্রণ এবং ল্যান্ডমার্ক সহ একটি পৃষ্ঠার চারপাশে ঘোরাফেরা করতে তারা ব্যবহার করতে পারে এমন অন্যান্য উপাদান রয়েছে৷

পাঠকরা পৃষ্ঠার লিঙ্কগুলির একটি তালিকা অ্যাক্সেস করতে স্ক্রিন রিডারের রটার বৈশিষ্ট্য (পৃষ্ঠা শিরোনামের একটি তালিকা আলাদা এবং স্ক্যান করার একটি সহজ উপায়) ব্যবহার করতে পারেন। কখনও কখনও, উইকিতে, অনেকগুলি লিঙ্ক রয়েছে, তাই পাঠক লিঙ্কগুলির মধ্যে একটি শব্দ অনুসন্ধান করতে পারে। এটি পৃষ্ঠায় শব্দের প্রতিটি ঘটনার পরিবর্তে প্রকৃতপক্ষে শব্দটি ধারণ করে এমন লিঙ্কগুলিতে হিটগুলিকে সীমাবদ্ধ করে৷

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

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

দুর্বল লিঙ্ক পাঠ্য আরেকটি সমস্যা। ক্লিকযোগ্য পাঠ্য যেমন "আরো জানুন" বা "এখানে ক্লিক করুন" লিঙ্কটি কোথায় যায় সে সম্পর্কে কোনও শব্দার্থিক তথ্য প্রদান করে না। পরিবর্তে, "প্রতিক্রিয়াশীল ডিজাইন সম্পর্কে আরও জানুন" বা "এই ক্যানভাস টিউটোরিয়ালটি দেখুন" এর মতো বর্ণনামূলক পাঠ্য ব্যবহার করুন যাতে স্ক্রিন পাঠকদের লিঙ্কগুলি সম্পর্কে অর্থপূর্ণ প্রসঙ্গ সরবরাহ করতে সহায়তা করে।

রটার একটি ফর্ম নিয়ন্ত্রণ তালিকা পুনরুদ্ধার করতে পারে। এই তালিকাটি ব্যবহার করে, পাঠকরা নির্দিষ্ট আইটেমগুলি অনুসন্ধান করতে এবং সরাসরি তাদের কাছে যেতে পারেন।

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

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

পাঠকরা ল্যান্ডমার্কের তালিকা দেখতে রটার ব্যবহার করতে পারেন। এই তালিকাটি পাঠকদের মূল বিষয়বস্তু এবং HTML ল্যান্ডমার্ক উপাদান দ্বারা প্রদত্ত ন্যাভিগেশনাল ল্যান্ডমার্কের একটি সেট খুঁজে পেতে সাহায্য করে৷

HTML5 কিছু নতুন উপাদান প্রবর্তন করেছে যা পৃষ্ঠার শব্দার্থিক কাঠামোকে সংজ্ঞায়িত করতে সাহায্য করে, যার মধ্যে রয়েছে header , footer , nav , article , section , main , এবং aside । এই উপাদানগুলি বিশেষভাবে কোনো অন্তর্নির্মিত স্টাইলিং (যা যাইহোক আপনার CSS এর সাথে করা উচিত) বাধ্য না করে পৃষ্ঠায় কাঠামোগত সূত্র প্রদান করে।

শব্দার্থিক কাঠামোগত উপাদানগুলি একাধিক, পুনরাবৃত্তিমূলক div ব্লকগুলি প্রতিস্থাপন করে এবং লেখক এবং পাঠক উভয়ের জন্য পৃষ্ঠার কাঠামোকে স্বজ্ঞাতভাবে প্রকাশ করার জন্য একটি পরিষ্কার, আরও বর্ণনামূলক উপায় প্রদান করে।

পৃষ্ঠা নেভিগেশন শব্দার্থবিদ্যা ভূমিকা

Alice Boxhall

Dave Gash

Meggin Kearney

শিরোনামগুলি কার্যকরভাবে ব্যবহার করা

1.3.1 উল্লেখ করে "শিরোনাম নির্ধারণ করতে শব্দার্থিক মার্কআপ ব্যবহার করা হয়"
2.4.1 কন্টেন্ট ব্লক বাইপাস করার জন্য একটি কৌশল হিসাবে শিরোনাম গঠন উল্লেখ করে
2.4.6 দরকারী শিরোনাম লেখার জন্য কিছু বিবরণ আলোচনা করে
2.4.10 বলে "কন্টেন্টের পৃথক বিভাগগুলি শিরোনাম ব্যবহার করে মনোনীত করা হয়েছে, যেখানে উপযুক্ত"

<style>
    .sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    }
</style>

<h2 class="sr-only">This heading is offscreen.</h2>

অন্যান্য নেভিগেশন বিকল্প

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

পৃষ্ঠা নেভিগেশন শব্দার্থবিদ্যা ভূমিকা

Alice Boxhall

Dave Gash

Meggin Kearney

শিরোনামগুলি কার্যকরভাবে ব্যবহার করা

1.3.1 উল্লেখ করে "শিরোনাম নির্ধারণ করতে শব্দার্থিক মার্কআপ ব্যবহার করা হয়"
2.4.1 কন্টেন্ট ব্লক বাইপাস করার জন্য একটি কৌশল হিসাবে শিরোনাম গঠন উল্লেখ করে
2.4.6 দরকারী শিরোনাম লেখার জন্য কিছু বিবরণ আলোচনা করে
2.4.10 বলে "কন্টেন্টের পৃথক বিভাগগুলি শিরোনাম ব্যবহার করে মনোনীত করা হয়েছে, যেখানে উপযুক্ত"

<style>
    .sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    }
</style>

<h2 class="sr-only">This heading is offscreen.</h2>

অন্যান্য নেভিগেশন বিকল্প

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