বিষয়বস্তুর গঠন

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

কাঠামোগত উপাদানগুলি স্ক্রিনে বিষয়বস্তুর রূপরেখা হিসাবে কাজ করে, তবে বিষয়বস্তুর মধ্যে সহজে নেভিগেশন করার জন্য তারা অ্যাঙ্কর পয়েন্ট হিসাবেও কাজ করে।

আপনি যখন শব্দার্থিক HTML উপাদানগুলি ব্যবহার করেন, তখন প্রতিটি উপাদানের অন্তর্নিহিত অর্থ অ্যাক্সেসিবিলিটি ট্রিতে প্রেরণ করা হয় এবং AT দ্বারা ব্যবহৃত হয়, অ-অর্থবোধক উপাদানগুলির চেয়ে বিষয়বস্তুকে আরও অর্থ প্রদান করে৷ এমন কিছু ক্ষেত্রে হতে পারে যেখানে সম্পর্ক তৈরি করতে বা সামগ্রিক ব্যবহারকারীর অভিজ্ঞতা বাড়ানোর জন্য আপনাকে অতিরিক্ত ARIA গুণাবলী যোগ করতে হবে, কিন্তু বেশিরভাগ পরিস্থিতিতে, উপলব্ধ 100+ HTML উপাদানগুলির মধ্যে একটি নিজের থেকে মোটামুটি ভাল কাজ করা উচিত।

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

ল্যান্ডমার্ক

AT এর ব্যবহারকারীরা পৃষ্ঠার সামগ্রিক বিন্যাস সম্পর্কে তাদের তথ্য দেওয়ার জন্য কাঠামোগত উপাদানগুলির উপর নির্ভর করে। কন্টেন্টের বৃহৎ অঞ্চলে বিভাগ করার সময়, আপনি আপনার পৃষ্ঠায় কাঠামোগত প্রসঙ্গ যোগ করতে ARIA ল্যান্ডমার্ক ভূমিকা বা নতুন HTML ল্যান্ডমার্ক উপাদান ব্যবহার করতে পারেন।

ল্যান্ডমার্কগুলি নিশ্চিত করে যে বিষয়বস্তু নেভিগেবল অঞ্চলে রয়েছে। এটি সুপারিশ করা হয় যে আপনি প্রতি পৃষ্ঠায় অন্তত একটি ল্যান্ডমার্ক সরবরাহ করুন৷

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

আসুন HTML ল্যান্ডমার্ক উপাদানগুলিকে তাদের প্রতিরূপ ARIA ল্যান্ডমার্ক ভূমিকাগুলির সাথে ম্যাপ করা হিসাবে তুলনা করি৷

এখন, আসুন অ্যাক্সেসযোগ্য বিষয়বস্তুর কাঠামোর উদাহরণ তুলনা করি।

<div>
    <div>...</div>
</div>

<div>
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
</div>

<div>
<p>© 2022 - Stamps R Awesome</p>
</div>

<header>
    <nav>...</nav>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
    </section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>

শিরোনাম

সঠিকভাবে প্রয়োগ করা হলে, HTML শিরোনাম স্তরগুলি সামগ্রিক পৃষ্ঠার বিষয়বস্তুর একটি সংক্ষিপ্ত রূপরেখা তৈরি করে।

আমরা ব্যবহার করতে পারি ছয় শিরোনাম স্তর আছে. শিরোনাম স্তর এক <h1> পৃষ্ঠার সর্বোচ্চ এবং সবচেয়ে গুরুত্বপূর্ণ তথ্যের জন্য ব্যবহার করা হয়, সর্বনিম্ন এবং সর্বনিম্ন গুরুত্বপূর্ণ তথ্যের জন্য শিরোনাম স্তর ছয় <h6> এ ক্রমবর্ধমানভাবে চলে যায়।

শিরোনাম স্তরের ক্রম গুরুত্বপূর্ণ. আদর্শভাবে, আপনি শিরোনামের স্তরগুলি এড়িয়ে যাবেন না, উদাহরণস্বরূপ, একটি <h1> দিয়ে একটি বিভাগ শুরু করা এবং অবিলম্বে একটি <h5> দিয়ে এটি অনুসরণ করা। পরিবর্তে, আপনার ক্রমানুসারে <h5> এ অগ্রসর হওয়া উচিত। শিরোনাম স্তরের ক্রম AT ব্যবহারকারীদের জন্য বিশেষভাবে গুরুত্বপূর্ণ কারণ এটি তাদের বিষয়বস্তুর মাধ্যমে নেভিগেট করার প্রাথমিক উপায়গুলির মধ্যে একটি।

আপনাকে সঠিক শব্দার্থিক গঠন এবং শিরোনামগুলির ক্রম মেনে চলতে সাহায্য করার জন্য, শিরোনাম স্তরগুলি থেকে আপনার CSS শৈলীগুলিকে ডিকপল করার কথা বিবেচনা করুন৷ শিরোনাম স্তরের ক্রম বজায় রাখার সময় এটি আপনাকে শিরোনাম শৈলীতে আরও নমনীয়তার অনুমতি দেয়। এটি গুরুত্বপূর্ণ যে আপনি শিরোনাম তৈরি করতে একা শৈলী ব্যবহার করবেন না, কারণ এটি AT দ্বারা শিরোনাম হিসাবে দেখা যায় না।

আমরা যখন জাল শিরোনাম করি, তখন উপযুক্ত কাঠামো AT ব্যবহারকারীদের কাছে জানানো হয় না।

শিরোনামগুলি জ্ঞানীয় এবং মনোযোগের ঘাটতিজনিত ব্যাধিযুক্ত ব্যক্তিদের জন্যও সহায়ক। শিরোনাম বিষয়বস্তু অর্থপূর্ণ করা গুরুত্বপূর্ণ যাতে তারা বুঝতে পারে যে পৃষ্ঠায় সবচেয়ে গুরুত্বপূর্ণ কী।

<div>
    <h3>Stamps</h3>
    <p>Stamp collecting, also known as philately, is the study of 
  postage stamps, stamped envelopes, postmarks, postcards, and 
  other materials relating to postal delivery.</p>
</div>

<div>
    <h3>How do I start a stamp collection?</h3>
  <h2>Equipment you will need</h2>
    <h4>...</h4>
  <h2>How to acquire stamps</h2>
    <h4>...</h4>
  <h2>Organizations you can join</h2>
    <h4>...</h4>
</div>

<header>
  <h1>Stamp collecting</h1>
</header>
<main>
    <section aria-label="Introduction to stamp collecting">
        <h2>What is stamp collecting?</h2>
        <p>Stamp collecting, also known as philately, is the study of 
    postage stamps, stamped envelopes, postmarks, postcards, and 
    other materials relating to postal delivery.</p>
    </section>

    <section aria-label="Start a stamp collection">
        <h2>How do I start a stamp collection?</h2>
    <h3>Required equiment</h3>
    <p>...</p>

    <h3>How to acquire stamps</h3>
    <p>...</p>

    <h3>Organizations you can join</h3>
        <p>...</p>
    </section>
</main>

তালিকা

এইচটিএমএল তালিকাগুলি শব্দার্থগতভাবে একটি অন্যটির মতো আইটেমগুলিকে গোষ্ঠীভুক্ত করার একটি উপায় যা তাদের অন্তর্নিহিত অর্থ প্রদান করে, অনেকটা আপনার মুদি দোকানের তালিকার মতো বা সেই করণীয় তালিকা যা আপনি উপেক্ষা করতে থাকেন৷

তিন ধরনের HTML তালিকা রয়েছে:

• অর্ডার করা হয়েছে <ol>
• unordered <ul>
• বর্ণনা <dl>

তালিকার আইটেম <li> উপাদানটি একটি ক্রমানুসারে বা ক্রমবিন্যস্ত তালিকায় একটি আইটেমকে উপস্থাপন করতে ব্যবহৃত হয়, যখন বর্ণনা শব্দটি <dt> এবং সংজ্ঞা <dd> উপাদানগুলি বর্ণনা তালিকায় পাওয়া যেতে পারে।

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

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

<div>
  <p>How do I start a stamp collection?</p>
  <p>Equipment you will need</p>
    <div>
      <p>Small tongs with rounded tips</p>
      <p>Stamp hinges</p>
      <p>Stockbook or albumn</p>
      <p>Magnifying glass</p>
      <p>Stamps</p>
    </div>
</div>

<div>
  <h1>How do I start a stamp collection?</h1>
  <h2>Equipment you will need</h2>
  <ol>
    <li>Small tongs with rounded tips</li>
    <li>Stamp hinges</li>
    <li>Stockbook or albumn</li>
    <li>Magnifying glass</li>
    <li>Stamps</li>
  </ol>
</div>

টেবিল

HTML-এ, টেবিলগুলি সাধারণত ডেটা বা পৃষ্ঠা বিন্যাস সংগঠিত করার জন্য ব্যবহৃত হয়।

টেবিলের উদ্দেশ্যের উপর নির্ভর করে, আপনি বিভিন্ন শব্দার্থিক কাঠামোগত উপাদান ব্যবহার করবেন। টেবিলগুলি গঠনে খুব জটিল হতে পারে, কিন্তু আপনি যখন মৌলিক শব্দার্থিক নিয়মগুলিতে লেগে থাকেন, তখন সেগুলি অনেক হস্তক্ষেপ ছাড়াই মোটামুটি অ্যাক্সেসযোগ্য।

লেআউট

ইন্টারনেটের প্রারম্ভিক দিনগুলিতে, লেআউট টেবিলগুলি ভিজ্যুয়াল স্ট্রাকচার তৈরি করতে ব্যবহৃত প্রাথমিক HTML উপাদান ছিল। আজ, আমরা লেআউট তৈরি করতে শব্দার্থিক এবং অ-অর্থবোধক উপাদান যেমন <div> s এবং ল্যান্ডমার্কের মিশ্রণ ব্যবহার করি।

যদিও লেআউট টেবিল তৈরির দিনগুলি বেশিরভাগই শেষ হয়ে গেছে, এমন সময় আছে যখন লেআউট টেবিলগুলি এখনও ব্যবহার করা হয়, যেমন দৃশ্যত সমৃদ্ধ ইমেল, নিউজলেটার এবং বিজ্ঞাপনগুলিতে৷ এই ক্ষেত্রে, শুধুমাত্র লেআউটের জন্য ব্যবহৃত সারণীতে এমন কাঠামোগত উপাদান ব্যবহার করা উচিত নয় যা সম্পর্ক প্রকাশ করে এবং প্রসঙ্গ যোগ করে, যেমন <th> বা <caption> ।

ARIA উপস্থাপনা ভূমিকা বা aria-লুকানো অবস্থা সহ AT ব্যবহারকারীদের থেকে লেআউট টেবিলগুলি অবশ্যই লুকিয়ে রাখতে হবে৷

<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>[Stamp Image 1]</th>
    <th>[Stamp Image 2]</th>
    <th>[Stamp Image 3]</th>
  </tr>
</table>

<table role="presentation">
  <tr>
    <td>[Stamp Image 1]</td>
    <td>[Stamp Image 2]</td>
    <td>[Stamp Image 3]</td>
  </tr>
</table>

ডেটা

একটি লেআউট টেবিলের বিপরীতে, যা AT ব্যবহারকারীদের থেকে লুকানো উচিত, একটি ডেটা টেবিল এবং এর সমস্ত উপাদান অবশ্যই প্রকাশ করা উচিত। ব্যবহারকারীদের কাছে সহজ এবং জটিল তথ্য পৌঁছে দেওয়ার জন্য ডেটা টেবিলের গঠন গুরুত্বপূর্ণ।

যখন একটি টেবিল সঠিকভাবে গঠন করা হয়, তখন কলাম হেডার এবং সারি এবং টেবিলের মধ্যে থাকা ডেটার মধ্যে সম্পর্ক তৈরি হয়। ভুলভাবে গঠন করা হলে, ব্যবহারকারীকে টেবিলে তথ্যের অর্থ এবং প্রসঙ্গ বোঝার জন্য ছেড়ে দেওয়া হয়।

টেবিলের জটিলতার উপর নির্ভর করে, কোডের মাধ্যমে সম্পর্ক গঠন বিভিন্ন উপায়ে সম্পন্ন করা হয়। একটি টেবিল অ্যাক্সেসযোগ্য করার প্রথম ধাপ হল হেডার সেলগুলিকে <th> এবং ডেটা সেলগুলিকে <td> উপাদানগুলির সাথে চিহ্নিত করা।

আরও জটিল টেবিলের জন্য, আপনাকে অতিরিক্ত HTML টেবিল উপাদান ব্যবহার করতে হতে পারে যেমন <rowgroup> , <colgroup> , <caption> , এবং অর্থ এবং সম্পর্ক বোঝাতে scope ।

<table>
  <tr>
    <td>Animal</td>
    <td>Year</td>
    <td>Condition</td>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>

<table>
  <caption>My stamp collection</caption>
  <tr>
    <th>Animal</th>
    <th>Year</th>
    <th>Condition</th>
  </tr>
  <tr>
    <td>Bird</td>
    <td>1947</td>
    <td>Fair</td>
  </tr>
  <tr>
    <td>Lion</td>
    <td>1982</td>
    <td>Good</td>
  </tr>
  <tr>
    <td>Horse</td>
    <td>1978</td>
    <td>Mint</td>
  </tr>
</table>