Comment

থিম ফাংশনালিটি

ব্লক থিম অ্যাক্সেসিবিলিটি

Estimated reading: 1 minute 10 views Contributors

সারাংশ: ব্লক থিমগুলি অ্যাক্সেসিবিলিটি সাপোর্ট করে এবং অ্যাক্সেসিবিলিটি যুক্ত করার প্রক্রিয়াকে সহজ করে।

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

গ্রুপ, টেমপ্লেট পার্ট এবং কোয়েরি ব্লক একটি ল্যান্ডমার্ক হয়ে উঠতে পারে। ল্যান্ডমার্ক তৈরি করার দুটি উপায় রয়েছে।

ব্লক মার্কআপ ব্যবহার করে

“tagName”: “header” হেডার ল্যান্ডমার্ক তৈরি করে।

<!-- wp:group {"tagName":"header","layout":{"type":"constrained"}} -->
<header class="wp-block-group"><!-- wp:site-title /--></header>
<!-- /wp:group -->

সাইট এডিটর ব্যবহার করে

ব্লক প্যানেলে অ্যাডভান্সড সেকশনের অধীনে HTML এলিমেন্ট নিম্নলিখিত ল্যান্ডমার্ক অপশনগুলি প্রদান করে।

<header> <main> <section> <article> <aside> <footer>

এই ল্যান্ডমার্ক অপশনগুলি যেভাবে ব্যবহার করা যায়:

  • <header>: টাইটেল, লোগো, এবং নেভিগেশন লিঙ্ক রাখার জন্য এই এলিমেন্টটি ব্যবহার করুন।
  • <main>: পেজের মেইন কন্টেন্ট রাখার জন্য এই এলিমেন্টটি ব্যবহার করুন।
  • <section>: পেজের একটি আলাদা অংশ চিহ্নিত করতে এই এলিমেন্টটি ব্যবহার করুন।
  • <article>: একটি স্বয়ংসম্পূর্ণ কন্টেন্ট অংশ, যেমন একটি ব্লগ পোস্ট বা নিউজ আর্টিকেল চিহ্নিত করার জন্য এই এলিমেন্টটি ব্যবহার করুন।
  • <aside>: পেজের মেইন কনটেন্টের সাথে সম্পর্কিত কিন্তু এটির অংশ না হলে এই এলিমেন্টটি ব্যবহার করুন, যেমন একটি সাইডবার বা বিজ্ঞাপন।
  • <footer>: কপিরাইট তথ্য, যোগাযোগের লিঙ্ক, এবং অন্যান্য পেজের তথ্য ধারণ করার জন্য এই এলিমেন্টটি ব্যবহার করুন।

মেইন কন্টেন্টে যান

<main> ল্যান্ডমার্ক সিলেক্ট করে গ্রুপ, টেমপ্লেট পার্ট বা ক্যোয়ারী ব্লকের উপর Skip to Content লিঙ্কটি তৈরি করা হয়। Skip to Content লিঙ্ক সম্পর্কে এখানে আরও জানুন।

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group"><!-- wp:heading -->
<h2 id="hello-world">Hello World</h2>
<p>Welcome to WordPress. This is your first post. </p>
<!-- /wp:heading -->

অ্যাক্সেসিবল নেভিগেশন মেনু

নেভিগেশন ব্লক অতিরিক্ত কোড ছাড়াই নিচের অ্যাক্সেসিবিলিটি সুবিধাগুলো প্রদান করে:

  • রেস্পন্সিভ ভিউ সাপোর্ট করে
  • কীবোর্ড নেভিগেশন সাপোর্ট করে
  • <nav> ল্যান্ডমার্ক ভুমিকা ব্যবহার করে
  • ARIA ফিচার aria-label এবং aria-hidden ব্যবহার করে

Leave a Comment

Share this Doc

ব্লক থিম অ্যাক্সেসিবিলিটি

Or copy link

CONTENTS

Subscribe

×
Cancel