Semantic layout — header, nav, main, article, section, footer

১ · div-এর স্যুপ — সব কিছু div হলে সমস্যা কোথায়

একটি বড় শপিং মলের কথা ভাবুন। ঢোকার মুখে বোর্ডে লেখা থাকে — নিচতলায় মুদি, দোতলায় পোশাক, তিনতলায় খাবারের দোকান। লিফটের পাশে লেখা “জরুরি বহির্গমন”। এখন কল্পনা করুন, মলের সব বোর্ড খুলে ফেলা হলো। দোকানগুলো একই জায়গায় আছে, আলোও জ্বলছে — কিন্তু নতুন কেউ ঢুকে বুঝতেই পারবেন না কোথায় কী। প্রতিটি তলা ঘুরে ঘুরে দেখতে হবে।

ওয়েবপেজেও ঠিক এমন হয়। পাতার ওপরে লোগো, তার নিচে মেনু, মাঝে মূল লেখা, পাশে “আরও পড়ুন”, নিচে কপিরাইট। চোখে দেখা মানুষ এক নজরে ভাগগুলো চেনেন। কিন্তু কোডে যদি সবই <div> হয়, তাহলে ব্রাউজারের কাছে পাতাটি শুধু অনেকগুলো নামহীন বাক্স। একে মজা করে বলা হয় div-soup — অর্থহীন div-এর স্যুপ।

<div> নিজে খারাপ নয়। এর অর্থ শুধু “একটি দল” — এর বেশি কিছু না। সমস্যা হয় তখন, যখন পাতার প্রধান অংশগুলোও div দিয়ে বানানো হয় আর তাদের পরিচয় থাকে শুধু class-এর নামে। class="header" লেখাটা মানুষ পড়তে পারে, কিন্তু ব্রাউজারের কাছে “header” শব্দটা “xyz”-এর মতোই একটি নাম। পর্ব ০৪-এ দেখেছেন, semantic HTML মানে অর্থ দেখে element বাছা। পাতার বড় কাঠামোর জন্য HTML-এর আলাদা element আছে — এই পর্ব তাদের নিয়েই।

নিচের স্টেপারে একটি div-soup পাতাকে ধাপে ধাপে semantic বানানো হচ্ছে। প্রতিটি ধাপে দেখুন, screen reader-এর “landmark তালিকা”-য় কী যোগ হলো। Landmark মানে পাতার এমন বড় অংশ, যাকে screen reader আলাদা করে চেনে আর যেখানে শর্টকাটে লাফ দেওয়া যায়।

<div class="header">দৈনিক নমুনা বার্তা</div>
<div class="menu">…লিংক…</div>
<div class="content">…খবর…</div>
<div class="footer">© ২০২৬</div>

<header>দৈনিক নমুনা বার্তা</header>
<div class="menu">…লিংক…</div>
<div class="content">…খবর…</div>
<div class="footer">© ২০২৬</div>

<header>দৈনিক নমুনা বার্তা</header>
<nav aria-label="প্রধান মেনু">…লিংক…</nav>
<div class="content">…খবর…</div>
<div class="footer">© ২০২৬</div>

<header>দৈনিক নমুনা বার্তা</header>
<nav aria-label="প্রধান মেনু">…লিংক…</nav>
<main>…খবর…</main>
<div class="footer">© ২০২৬</div>

<header>দৈনিক নমুনা বার্তা</header>
<nav aria-label="প্রধান মেনু">…লিংক…</nav>
<main>…খবর…</main>
<footer>© ২০২৬</footer>

এবার নিজে দেখুন। নিচের এডিটরে একই পাতা দুইভাবে লেখা — বাঁয়ে div দিয়ে, ডানে semantic element দিয়ে। পাশাপাশি সাজানোর জন্য একটু CSS আছে (Grid শিখবেন পর্ব ২৭-এ)। নিচের ছোট স্ক্রিপ্টটি প্রতিটি পাশে landmark তৈরি করে এমন element খুঁজে কনসোলে লেখে।

<style>
  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .pair > div { border: 2px dashed #999; padding: 6px; }
  .top, header { background: #dbeafe; padding: 4px; }
  .foot, footer { background: #eee; font-size: 14px; padding: 4px; }
</style>
<div class="pair">
  <div id="soup">
    <div class="top"><b>দৈনিক নমুনা বার্তা</b></div>
    <div class="menu"><a href="#a">জাতীয়</a> · <a href="#b">খেলা</a></div>
    <div class="content"><h2>বৃষ্টিতে জলাবদ্ধতা</h2><p>সকাল থেকে টানা বৃষ্টি…</p></div>
    <div class="foot">© ২০২৬ নমুনা বার্তা</div>
  </div>
  <div id="sem">
    <header><b>দৈনিক নমুনা বার্তা</b></header>
    <nav><a href="#a">জাতীয়</a> · <a href="#b">খেলা</a></nav>
    <main><h2>বৃষ্টিতে জলাবদ্ধতা</h2><p>সকাল থেকে টানা বৃষ্টি…</p></main>
    <footer>© ২০২৬ নমুনা বার্তা</footer>
  </div>
</div>
<script>
  const marks = 'header, nav, main, aside, footer, search';
  for (const side of ['soup', 'sem']) {
    const found = [...document.querySelectorAll('#' + side + ' :is(' + marks + ')')];
    console.log(side + ': ' + (found.map(e => e.localName).join(', ') || 'কোনো landmark নেই'));
  }
</script>

২ · পাতার চার খুঁটি — header, nav, main, footer

বাড়ির কাঠামোয় যেমন সামনের বারান্দা, সিঁড়ি, মূল ঘর আর পেছনের উঠান থাকে, বেশিরভাগ ওয়েবপেজেও চারটি বড় অংশ থাকে। প্রতিটির জন্য একটি element:

main-এর তিনটি কড়া নিয়ম

• দৃশ্যমান main একটিই। WHATWG নিয়মে একটি ডকুমেন্টে hidden attribute ছাড়া একাধিক <main> থাকতে পারে না। (কিছু single-page অ্যাপ কয়েকটি “পাতা” একসাথে রাখে আর বাকিগুলো hidden করে রাখে — সেটি বৈধ।)
• main কোথায় বসবে। <main> কোনো article, aside, header, footer বা nav-এর ভেতরে রাখা যায় না। এর ওপরে থাকতে পারে শুধু body, সাজানোর জন্য div, বা নামহীন form.
• বারবার আসা জিনিস main-এর বাইরে। লোগো, সাইটের মেনু, পাদদেশ প্রতিটি পাতায় একই — এগুলো main নয়। main-এ থাকে শুধু যা এই পাতার নিজস্ব।

<header> আর <footer>-এরও একটি নিয়ম আছে: এদের ভেতরে আরেকটি header বা footer রাখা যায় না (main-ও না) — এমনকি ভেতরে কোনো article থাকলেও না। পাতার header হলো সাইটের মাথা; সেখানে খবরের কার্ডের মতো article বসানোর দরকার হলে সেগুলো main-এ রাখাই ঠিক। আর নাম দেখে ভুল করবেন না: footer সব সময় পাতার একদম নিচে থাকতে হবে এমন নয়; এটি অর্থের নাম, অবস্থানের নয়।

কোন element কোন landmark — এক টেবিলে

ব্রাউজার প্রতিটি element-কে একটি role (ভূমিকা) দেয়, যা যায় accessibility tree-তে। নিজে থেকে পাওয়া এই role-কে বলে implicit role — আপনাকে কিছু লিখতে হয় না।

৩ · article, section না div — সিদ্ধান্তের তিন প্রশ্ন

নতুনদের সবচেয়ে বড় দ্বিধা এখানেই। তিনটিই “একটি দল”, তিনটিই ব্লক — তাহলে কোনটা কখন? WHATWG-এর সংজ্ঞাগুলো সহজ ভাষায়:

• <article> — একটি নিজে-সম্পূর্ণ অংশ, যা পাতা থেকে তুলে আলাদা করেও অর্থপূর্ণ থাকে: খবর, ব্লগ পোস্ট, ফোরামের পোস্ট, পাঠকের মন্তব্য, পণ্যের কার্ড, একটি উইজেট। পরীক্ষাটি হলো — এটিকে কি RSS ফিডে, Facebook শেয়ারে বা অন্য সাইটে একা পাঠানো যায়?
• <section> — একটি বড় জিনিসের বিষয়ভিত্তিক ভাগ, যার সাধারণত একটি শিরোনাম থাকে: বইয়ের অধ্যায়, খবরের “পটভূমি” অংশ, হোমপেজের “আজকের অফার” অংশ। শিরোনাম দেওয়ার মতো কিছু না থাকলে সম্ভবত এটি section নয়।
• <div> — কোনো অর্থ নেই; শুধু CSS দিয়ে সাজানো বা JavaScript-এ ধরার জন্য কয়েকটি element-কে এক জায়গায় রাখা। কোনো অর্থবহ element না মিললে div-ই ঠিক উত্তর।

এবার একটি খবর লিখি, যেখানে তিনটিই আছে। খবরটি কাল্পনিক:

<style>
  article, section { border: 1px solid #bbb; padding: 4px 10px; margin: 6px 0; }
  .wrap { max-width: 520px; }
</style>
<div class="wrap">
  <article>
    <h2>রাজশাহীতে আমের মৌসুম শুরু (উদাহরণ খবর)</h2>
    <p>এ সপ্তাহ থেকে বাগানে আম পাড়া শুরু হয়েছে।</p>
    <section>
      <h3>বাজারের দাম</h3>
      <p>প্রথম দিকে দাম কিছুটা বেশি থাকে।</p>
    </section>
    <section>
      <h3>পাঠকের মন্তব্য</h3>
      <article>
        <p>এবার কুরিয়ারে আম পাঠানো সহজ হলে ভালো হয়।</p>
        <p><small>— তানভীর, ঢাকা</small></p>
      </article>
    </section>
  </article>
</div>

৪ · header আর footer শুধু পাতার নয় — article-এরও; আর aside

“header মানে পাতার মাথা” — এটি অর্ধেক সত্য। <header> মানে কাছের অংশটির পরিচয়-অংশ। পাতার সরাসরি অংশ হলে সেটি পুরো সাইটের মাথা (banner). কিন্তু একটি article-এর ভেতরে থাকলে সেটি শুধু সেই article-এর মাথা — শিরোনাম, লেখকের নাম, প্রকাশের তারিখ। একইভাবে article-এর <footer>-এ থাকে লেখকের পরিচয়, ট্যাগ, “শেয়ার করুন” বা সংশোধনীর তথ্য।

পরীক্ষার খাতার কথা ভাবুন। পুরো খাতার ওপরে থাকে কেন্দ্রের নাম আর রোল নম্বর — এটি খাতার header. কিন্তু প্রতিটি প্রশ্নের উত্তরের ওপরেও লেখা থাকে “প্রশ্ন ৩(ক)” — এটি সেই উত্তরের header. দুটোই header, কিন্তু আলাদা স্তরের। Screen reader-ও তাই করে: article-এর ভেতরের header-কে banner landmark বানায় না, না হলে খবরের পাতায় বিশটি খবরের কার্ডে বিশটি “banner” শোনা যেত।

<article>
  <header>
    <h2>মেট্রোরেলে নতুন সময়সূচি (উদাহরণ)</h2>
    <p>প্রতিবেদক: রিয়া সেন ·
      <time datetime="2026-06-02">২ জুন ২০২৬</time></p>
  </header>
  <p>আগামী সপ্তাহ থেকে সকালের ট্রেন আরও আগে ছাড়বে।</p>
  <aside>
    <h3>জেনে রাখুন</h3>
    <p>র‍্যাপিড পাস থাকলে লাইনে দাঁড়াতে হয় না।</p>
  </aside>
  <footer>
    <p>বিষয়: <a href="#t1">যাতায়াত</a>, <a href="#t2">ঢাকা</a></p>
  </footer>
</article>

aside — মূল লেখার পাশের কথা

<aside> হলো এমন অংশ, যা আশেপাশের লেখার সাথে সম্পর্কিত কিন্তু আলাদা — বাদ দিলেও মূল লেখা পূর্ণ থাকে। পত্রিকার পাশের “আরও পড়ুন” বক্স, খবরের ভেতরে “জেনে রাখুন” ঘর, ব্লগের সাইডবার, বিজ্ঞাপনের জায়গা। “পাশে” শব্দটি অর্থের, অবস্থানের নয় — ফোনের ছোট পর্দায় aside নিচে চলে যেতে পারে, তবু সে aside. উল্টো দিকে, শুধু ডান দিকে বসানো হবে বলে কোনো মূল অংশকে aside বানাবেন না।

৫ · figure আর address — নিজে-সম্পূর্ণ চিত্র আর যোগাযোগের ঠিকানা

পর্ব ০৬-এ ছবির সাথে <figure> আর <figcaption> দেখেছেন। কিন্তু figure শুধু ছবির জন্য নয়। এর আসল সংজ্ঞা: মূল লেখা যাকে উল্লেখ করে, কিন্তু যাকে অন্য জায়গায় (পাতার শেষে, পাশে, পরিশিষ্টে) সরিয়ে দিলেও লেখার প্রবাহ ভাঙে না। পাঠ্যবইয়ের “চিত্র ৩.২” ঠিক এমন। একটি চার্ট, একটি কোডের অংশ, একটি কবিতার উদ্ধৃতি, একটি ছোট টেবিল — সবই figure হতে পারে। <figcaption> থাকবে figure-এর প্রথম বা শেষ সন্তান হিসেবে, আর সেটিই figure-এর নাম হয়ে যায়।

<address> নিয়ে ভুল ধারণাটা নামেই লুকানো। এটি যেকোনো ঠিকানার জন্য নয়। WHATWG নিয়মে address হলো কাছের article-এর বা পুরো পাতার মালিকের সাথে যোগাযোগের তথ্য — প্রতিবেদকের ইমেইল, দোকানের হটলাইন, অফিসের ঠিকানা। খবরের ভেতরে “ঘটনাটি ঘটেছে মিরপুর ১০-এ” — এটি address নয়, সাধারণ লেখা। পাতার footer-এ “আমাদের ঠিকানা: … ফোন: …” — এটি address, কারণ সেটি সাইটের মালিকের সাথে যোগাযোগের উপায়।

<article>
  <h2>সপ্তাহে কত যাত্রী (কাল্পনিক সংখ্যা)</h2>
  <p>শুক্রবারে যাত্রী সবচেয়ে কম — চিত্র ১ দেখুন।</p>
  <figure>
    <svg viewBox="0 0 150 60" width="240" role="img"
         aria-label="রবি ৫০, সোম ৪৫, শুক্র ২০ হাজার যাত্রী">
      <rect x="10" y="10" width="30" height="50" fill="#2563eb"/>
      <rect x="60" y="15" width="30" height="45" fill="#2563eb"/>
      <rect x="110" y="40" width="30" height="20" fill="#d97706"/>
    </svg>
    <figcaption>চিত্র ১ — রবি, সোম আর শুক্রবারের যাত্রী (হাজারে)</figcaption>
  </figure>
  <footer>
    <address>
      প্রতিবেদকের সাথে যোগাযোগ:
      <a href="mailto:desk@example.com">desk@example.com</a>
    </address>
  </footer>
</article>

৬ · <search> — খোঁজার জায়গার নিজস্ব element

প্রায় প্রতিটি সাইটে একটি খোঁজার ঘর থাকে — অনলাইন দোকানে “পণ্য খুঁজুন”, খবরের সাইটে “খবর খুঁজুন”। বহু বছর ধরে এর জন্য আলাদা কোনো element ছিল না। ডেভেলপাররা লিখতেন <form role="search"> বা <div role="search"> — অর্থাৎ ARIA দিয়ে হাতে role বসাতেন। ২০২৩ সালে WHATWG HTML-এ যোগ হয় <search> element: খোঁজা বা ছাঁকার (filter) কন্ট্রোলগুলোকে মুড়ে দিলেই সেটি নিজে থেকে search landmark হয়।

<header>
  <b>বইঘর (উদাহরণ সাইট)</b>
  <search>
    <form action="/search">
      <label for="q">বই খুঁজুন</label>
      <input type="search" id="q" name="q" placeholder="যেমন: পদ্মানদীর মাঝি">
      <button>খুঁজুন</button>
    </form>
  </search>
</header>
<main>
  <h1>উপন্যাস</h1>
  <search aria-label="ফলাফল ছাঁকুন">
    <label><input type="checkbox" name="stock"> শুধু স্টকে আছে</label>
  </search>
</main>

৭ · Landmark ধরে চলাচল — screen reader ব্যবহারকারী আসলে কী করেন

চোখে দেখা মানুষ পাতায় ঢুকে চোখ বুলিয়ে মূল লেখায় চলে যান। Screen reader ব্যবহারকারী চোখ বুলাতে পারেন না, কিন্তু তাঁদের হাতে আছে কি-বোর্ডের শর্টকাট। পাতার ওপর থেকে সব শোনার বদলে তাঁরা লাফ দেন — heading ধরে, landmark ধরে, লিংকের তালিকা ধরে। WebAIM-এর screen reader ব্যবহারকারী জরিপে বারবার দেখা গেছে, লম্বা পাতায় বেশিরভাগ মানুষ আগে heading ধরে খোঁজেন, আর অনেকে landmark-ও নিয়মিত ব্যবহার করেন। দুটোই পাওয়া যায় শুধু তখন, যখন কোড semantic.

Windows-এর জনপ্রিয় ফ্রি screen reader NVDA-তে D চাপলে পরের landmark-এ যাওয়া যায়, Shift+D-তে আগেরটিতে। নিচের স্টেপারে একটি খবরের সাইটে একজন শ্রোতা বারবার D চাপছেন:

৮ · Skip link — “মূল অংশে যান”

সবাই মাউস ব্যবহার করেন না। হাতের সমস্যার কারণে, অভ্যাসে বা screen reader-এর সাথে অনেকে শুধু কি-বোর্ড চালান: Tab চাপলে পরের লিংক বা বোতামে focus যায়। কিন্তু প্রতিটি পাতায় মূল লেখার আগে যদি মেনুতে ত্রিশটি লিংক থাকে, তাহলে প্রতিটি পাতায় ত্রিশবার Tab! Landmark শর্টকাট আছে শুধু screen reader-এ; সাধারণ কি-বোর্ড ব্যবহারকারীর জন্য সমাধান হলো skip link.

Skip link হলো পাতার একদম প্রথম লিংক, যা <main>-এর id-তে লাফ দেয় (পর্ব ০৫-এর href="#id"). সাধারণত এটি চোখের আড়ালে থাকে, আর Tab চাপলে ভেসে ওঠে। WCAG-এর নিয়ম ২.৪.১ (Bypass Blocks, স্তর A) চায় বারবার আসা অংশ পেরিয়ে যাওয়ার একটি উপায় — skip link সেই নিয়ম পূরণের সবচেয়ে প্রচলিত পথ। এই পাতার ওপরেও একটি আছে: পাতা খুলে প্রথমবার Tab চাপুন, “সরাসরি পর্বে যান” দেখতে পাবেন।

<style>
  .skip { position: absolute; top: -4em; left: 8px; padding: 8px 12px;
          background: #0d1f3c; color: #fff; }
  .skip:focus { top: 8px; }
  main:focus { outline: 3px solid #d97706; }
</style>
<a class="skip" href="#main">মূল অংশে যান</a>
<header>
  <b>দোকানঘর (উদাহরণ)</b>
  <nav aria-label="প্রধান মেনু">
    <a href="#m1">মোবাইল</a> <a href="#m2">ল্যাপটপ</a> <a href="#m3">ফ্যাশন</a>
    <a href="#m4">মুদি</a> <a href="#m5">বই</a> <a href="#m6">অফার</a>
  </nav>
</header>
<main id="main" tabindex="-1">
  <h1>আজকের অফার</h1>
  <p>প্রথম পণ্য: <a href="#p1">ফোনের কভার</a></p>
</main>

দুটি সাধারণ ভুল এড়িয়ে চলুন: skip link-কে চিরতরে অদৃশ্য রাখা (চোখে দেখা কি-বোর্ড ব্যবহারকারী বুঝবেন না তিনি কোথায় — WCAG ২.৪.৭ Focus Visible চায় focus চোখে দেখা যাক), আর লক্ষ্যের id ভুল লেখা — তখন লিংক কোথাও যায় না। Focus-এর চেহারা সুন্দর করার CSS আসবে পর্ব ৪৫-এ।

৯ · পূর্ণ পাতার কঙ্কাল — অনলাইন দোকান আর খবরের সাইট

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

<a href="#main">মূল অংশে যান</a>
<header>
  <a href="#home"><b>দোকানঘর (উদাহরণ)</b></a>
  <search>
    <form><input type="search" name="q" aria-label="পণ্য খুঁজুন"> <button>খুঁজুন</button></form>
  </search>
  <nav aria-label="প্রধান মেনু">
    <a href="#c1">মোবাইল</a> · <a href="#c2">ফ্যাশন</a> · <a href="#c3">মুদি</a>
  </nav>
</header>
<main id="main">
  <h1>মোবাইল ফোন</h1>
  <section aria-labelledby="deal">
    <h2 id="deal">আজকের অফার</h2>
    <article><h3>ফোন মডেল ক</h3><p>৳১২,৪৯৯</p><button>কার্টে যোগ করুন</button></article>
    <article><h3>ফোন মডেল খ</h3><p>৳১৮,৯৯০</p><button>কার্টে যোগ করুন</button></article>
  </section>
  <aside aria-label="ডেলিভারির তথ্য">
    <p>ঢাকার ভেতরে ডেলিভারি সাধারণত ২–৩ দিনে, ক্যাশ অন ডেলিভারি সুবিধাসহ।</p>
  </aside>
</main>
<footer>
  <nav aria-label="সহায়তা"><a href="#faq">সাধারণ প্রশ্ন</a> · <a href="#ret">ফেরত নীতি</a></nav>
  <address>হটলাইন: <a href="tel:+8801000000000">০১০০০-০০০০০০ (উদাহরণ)</a></address>
  <p><small>© ২০২৬ দোকানঘর</small></p>
</footer>

প্রিভিউর পাতায় কোন কোন landmark — একটি ছোট মাপার যন্ত্র

নিচের JavaScript-টি একটি খবরের সাইটের কঙ্কাল পড়ে, অংশ ২-এর টেবিলের নিয়ম মেনে প্রতিটি element-এর landmark role আর নাম বের করে — screen reader-এর landmark তালিকার একটি সরল নকল। (আসল হিসাব ব্রাউজার করে HTML-AAM মেনে; এটি শেখার জন্য সংক্ষিপ্ত রূপ।)

// header/footer: article, aside, main, nav বা section-এর ভেতরে থাকলে landmark নয়
const insideSectioning = el => el.parentElement.closest('article, aside, main, nav, section');
function landmarkName(el) {
  if (el.hasAttribute('aria-label')) return el.getAttribute('aria-label');
  const ref = el.getAttribute('aria-labelledby');
  return ref ? document.getElementById(ref).textContent.trim() : '';
}
function roleOf(el) {
  const tag = el.localName, named = landmarkName(el) !== '';
  if (tag === 'header') return insideSectioning(el) ? null : 'banner';
  if (tag === 'footer') return insideSectioning(el) ? null : 'contentinfo';
  if (tag === 'section') return named ? 'region' : null;
  if (tag === 'aside') return (el.parentElement.closest('article, aside, nav, section') && !named) ? null : 'complementary';
  return { nav: 'navigation', main: 'main', search: 'search' }[tag] || null;
}
for (const el of document.querySelectorAll('header, nav, main, aside, footer, section, search')) {
  const role = roleOf(el), label = landmarkName(el);
  if (role) console.log(role + (label ? ' "' + label + '"' : '') + '  <' + el.localName + '>');
  else console.log('   (landmark নয়)  <' + el.localName + '> inside <' + insideSectioning(el).localName + '>');
}

DevTools-এর Accessibility pane-এ landmark দেখুন

নিজের পাতায় landmark ঠিক তৈরি হলো কি না, অনুমান না করে চোখে দেখা যায়। Chrome বা Edge-এর DevTools-এ ধাপগুলো (Firefox-এ একই কাজ করে “Accessibility Inspector”):

<body>
  <a href="#main">মূল অংশে যান</a>
  ▸ <header>…</header>
  ▸ <main id="main">…</main>   ← এটি বাছাই করা
  ▸ <footer>…</footer>

Styles   Computed   Layout   Accessibility
(ট্যাবটি না দেখলে » চিহ্নে চাপুন)

▾ Accessibility Tree
    RootWebArea "দোকানঘর"
      main
        heading "মোবাইল ফোন"
▾ Computed Properties
    Name: ""
    Role: main

RootWebArea "দোকানঘর"
  link "মূল অংশে যান"
  banner
    search
    navigation "প্রধান মেনু"
  main
    region "আজকের অফার"
  contentinfo

Accessibility  স্কোর ও সমস্যার তালিকা
  উদাহরণ: “Document does not have a main landmark”
  উদাহরণ: “Heading elements are not in a sequentially-descending order”

১০ · AI-এর যুগে — AI-এর বানানো পাতার কাঠামো যাচাই

“একটা ই-কমার্স হোমপেজ বানিয়ে দাও” — AI কয়েক সেকেন্ডে সুন্দর পাতা দেবে। কিন্তু কোড খুললে প্রায়ই দেখবেন, ভেতরে সেই পুরোনো div-soup: <div class="navbar">, <div class="main-content">, ক্লিক-যোগ্য <div onclick>. কারণ AI শিখেছে কোটি কোটি পুরোনো পাতা আর framework-এর নমুনা থেকে, যেখানে এমন কোডই বেশি। আবার উল্টো ভুলও করে — প্রতিটি মোড়ককে section বানায়, বা <main role="main">-এর মতো অপ্রয়োজনীয় ARIA দেয়।

AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া পাতা হাতে পেলে — যাচাইয়ের চেকলিস্ট

• validator.w3.org-এ দেখেছি — একাধিক main নেই, “Section lacks heading” বা অপ্রয়োজনীয় role-এর সতর্কতা নেই
• DevTools-এর Accessibility pane-এ (full-page tree) banner, navigation, main, contentinfo দেখা যাচ্ছে; একই ধরনের একাধিক landmark-এর আলাদা নাম আছে
• মাউস সরিয়ে শুধু Tab দিয়ে চালিয়েছি — প্রথম Tab-এ skip link দেখা যায়, Enter-এ main-এ পৌঁছায়
• প্রতিটি article একা দাঁড়াতে পারে, প্রতিটি section-এ শিরোনাম আছে, বাকি মোড়ক div
• Lighthouse-এর Accessibility রিপোর্ট চালিয়েছি; কোনো element বা নতুন feature (যেমন search) নিয়ে সন্দেহ হলে MDN আর Can I use-এ মিলিয়েছি