ডেভেলপারদের প্রতিক্রিয়ার জন্য অনুরোধ: ফোকাসগ্রুপ

Jacques Newman

প্রকাশিত: ৫ মার্চ, ২০২৬

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

এটি ব্যবহার করে দেখুন এবং আপনার মতামত জানান।

আপনি আজই Chrome, Edge এবং অন্যান্য ক্রোমিয়াম ব্রাউজারে দুটি উপায়ে focusgroup সক্রিয় করে দেখতে পারেন:

1. স্থানীয় পরীক্ষা: ব্রাউজারে, about://flags পৃষ্ঠাটি খুলুন এবং পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য ফ্ল্যাগ সক্ষম করুন। অথবা, --enable-blink-features=Focusgroup কমান্ড লাইন প্যারামিটার ব্যবহার করে কমান্ড লাইন থেকে ব্রাউজারটি চালু করুন।
2. অরিজিন ট্রায়াল: ফোকাসগ্রুপ অরিজিন ট্রায়ালের জন্য নিবন্ধন করুন এবং আপনার সাইটে প্রকৃত ব্যবহারকারীদের সাথে এটি পরীক্ষা করুন।

তারপর প্রতিটি প্যাটার্নের কার্যকারিতা দেখতে ইন্টারেক্টিভ ডেমোগুলি অন্বেষণ করুন।

আমাদের আপনার মতামত প্রয়োজন। আপনার মতামত জানাতে একটি ফোকাসগ্রুপ সমস্যা ফাইল করুন ।

এটি একটি ক্রস-ব্রাউজার প্রচেষ্টা: প্রস্তাবটি মাইক্রোসফ্ট থেকে OpenUI কমিউনিটি গ্রুপের মাধ্যমে এসেছে এবং গুগলের শক্তিশালী সমর্থন রয়েছে। আপনার প্রতিক্রিয়ার উপর ভিত্তি করে API আকার পরিবর্তন হতে পারে। আসুন ফোকাসগ্রুপ কোন সমস্যার সমাধান করে এবং API কীভাবে কাজ করে তা নিয়ে আলোচনা করা যাক।

সমস্যা: ম্যানুয়াল রোভিং ট্যাবইনডেক্স

যদি আপনি কখনও একটি টুলবার, ট্যাবলিস্ট, মেনু, অথবা লিস্টবক্স তৈরি করে থাকেন, তাহলে আপনি এই কোডের কিছু সংস্করণ লিখেছেন। ARIA Authoring Practices Guide (APG) সুপারিশ করে যে কম্পোজিট উইজেটগুলিতে একটি একক ট্যাব স্টপ থাকবে এবং ব্যবহারকারীদের তীরচিহ্নের সাহায্যে আইটেমগুলির মধ্যে স্থানান্তর করতে দেওয়া হবে। এই প্যাটার্নটি "রোভিং ট্যাবইনডেক্স" নামে পরিচিত। অনেক UI ফ্রেমওয়ার্ক এটিকে স্ক্র্যাচ থেকে পুনরায় প্রয়োগ করে:

<div role="toolbar" aria-label="Text formatting" id="toolbar">
  <button type="button" tabindex="0">Bold</button>
  <button type="button" tabindex="-1">Italic</button>
  <button type="button" tabindex="-1">Underline</button>
  <button type="button" tabindex="-1">Strikethrough</button>
</div>

এখান থেকে, ডেভেলপারদের জাভাস্ক্রিপ্ট ব্যবহার করতে হবে যা ফোকাস সরানোর জন্য তীর কীগুলি শোনে এবং সমস্ত উপাদানের জন্য tabindex অ্যাট্রিবিউট সামঞ্জস্য করে। এটি সরলীকৃত সংস্করণ। একটি প্রোডাকশন বাস্তবায়নের জন্য নিম্নলিখিতগুলিও পরিচালনা করতে হবে:

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

React , Angular CDK , এবং Fluent UI সহ বেশিরভাগ UI লাইব্রেরি এই লজিকের নিজস্ব সংস্করণ সরবরাহ করে। এটি এমন কিছু পেতে অনেক ডুপ্লিকেট প্রচেষ্টা যা একটি আদিম প্ল্যাটফর্ম হতে পারে।

সমাধান: focusgroup অ্যাট্রিবিউট

ফোকাসগ্রুপের সাথে, একই টুলবারটি হয়ে যায়:

<div focusgroup="toolbar" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
  <button type="button">Strikethrough</button>
</div>

এটি সরাসরি ব্যবহার করে দেখুন: টুলবার প্যাটার্ন > বেসিক টুলবার । ব্যস। তীর কী নেভিগেশনের জন্য কোনও জাভাস্ক্রিপ্ট নেই। কোনও ম্যানুয়াল ট্যাবইনডেক্স পরিচালনা নেই। ব্রাউজারটি এখন আপনার জন্য কী পরিচালনা করে তা এখানে:

• তীর কী নেভিগেশন: লেখার মোড এবং দিকনির্দেশনা মেনে আইটেমগুলির মধ্যে নেভিগেট করুন।
• একটি একক ট্যাব স্টপ: ব্রাউজারটি অংশগ্রহণকারী আইটেমগুলিকে স্বয়ংক্রিয়ভাবে একটি ট্যাব স্টপে পরিণত করে। ডেভেলপারদের অ-সক্রিয় আইটেমগুলিতে tabindex="-1" সেট করার প্রয়োজন নেই।
• শেষ-কেন্দ্রিক মেমোরি: যখন একজন ব্যবহারকারী ফোকাসগ্রুপ ছেড়ে ফিরে আসে, তখন ফোকাসটি তাদের রেখে যাওয়া আইটেমটিতে পুনরুদ্ধার করা হয়।
• ARIA শব্দার্থবিদ্যা: জেনেরিক উপাদান ব্যবহার করার সময় নির্বাচিত আচরণের উপর ভিত্তি করে ব্রাউজার উপযুক্ত ভূমিকা (যেমন role="toolbar" ) সরবরাহ করে।

ডেভেলপাররা তাদের বৈশিষ্ট্যগুলির মধ্যে কেবল যুক্তিকে অনন্য রাখে যেমন চাপা অবস্থা টগল করা, মেনু খোলা, নির্বাচন পরিচালনা করা, অথবা যেকোনো কাস্টম কমান্ড।

API ওভারভিউ

focusgroup অ্যাট্রিবিউটটি টোকেনের একটি স্থান-বিভাজিত তালিকা নেয়। প্রথম টোকেনটি সর্বদা একটি আচরণ টোকেন যা উইজেট প্যাটার্ন ঘোষণা করে। ঐচ্ছিক সংশোধক টোকেনগুলি অনুসরণ করে: focusgroup="<behavior> [inline|block] [wrap] [nomemory]" .

আচরণের টোকেন

আচরণ টোকেনটি প্রয়োজন (যদি না কোনও পূর্বপুরুষ ফোকাসগ্রুপ থেকে বেরিয়ে আসার জন্য none ব্যবহার না করা হয়)। এটি কম্পোজিট উইজেট প্যাটার্ন ঘোষণা করে, নিশ্চিত করে যে অন্যথায় নির্দিষ্ট না করা অবস্থায় সঠিক ভূমিকাগুলি অনুমান করা যেতে পারে। টোকেনগুলি Aria Authoring Practices নির্দেশিকায় বর্ণিত প্যাটার্নগুলি অনুসরণ করে এবং নিম্নলিখিত সারণীতে তালিকাভুক্ত করা হয়েছে:

ভূমিকা ম্যাপিং কীভাবে কাজ করে তার সম্পূর্ণ বিবরণের জন্য ব্যাখ্যাকারীটি দেখুন।

অক্ষ সীমাবদ্ধতা ( inline এবং block )

যদি নির্বাচিত আচরণে কোনও ডিফল্ট মডিফায়ার না থাকে, তাহলে চারটি তীর কী ফোকাস সরানোর জন্য কাজ করে। আপনি inline বা block মডিফায়ার ব্যবহার করে একটি একক লজিক্যাল অক্ষে নেভিগেশন সীমাবদ্ধ করতে পারেন:

• inline : ফোকাসগ্রুপটি বেশিরভাগ ইংরেজি ভাষার প্রসঙ্গে ( অনুভূমিক, উপরে থেকে নীচে) শুধুমাত্র ইনলাইন অক্ষের বাম এবং ডানে তীরচিহ্নের প্রতি সাড়া দেয়।
• block : ফোকাসগ্রুপটি বেশিরভাগ ইংরেজি ভাষার প্রসঙ্গে (অনুভূমিকভাবে, উপরে থেকে নীচে) শুধুমাত্র ব্লক অক্ষের তীরচিহ্নগুলিতে সাড়া দেয়, উপরে এবং নীচে।

অক্ষ সীমাবদ্ধতা CSS লজিক্যাল বৈশিষ্ট্যের সাথে সামঞ্জস্যপূর্ণ এবং স্বয়ংক্রিয়ভাবে লেখার মোড এবং দিকনির্দেশের সাথে খাপ খাইয়ে নেয়।

র‍্যাপ-অ্যারাউন্ড নেভিগেশন

ডিফল্টরূপে, তীর কী নেভিগেশন ফোকাসগ্রুপের প্রান্তে থেমে যায়। শেষ আইটেম থেকে প্রথমটিতে ফিরে যাওয়ার জন্য (এবং প্রথমটি থেকে শেষটিতে) লুপে wrap মডিফায়ার যোগ করুন। যদি কোনও আচরণে ডিফল্টরূপে র‍্যাপ থাকে, তাহলে এই আচরণটি অক্ষম করতে nowrap মডিফায়ার ব্যবহার করুন।

এটি লাইভ ব্যবহার করে দেখুন: ট্যাবলিস্ট প্যাটার্ন > র‍্যাপিং সহ অনুভূমিক ট্যাবলিস্ট । এই উদাহরণে, যখন ফোকাস FAQ ট্যাবে থাকে এবং ব্যবহারকারী ডান তীর কী টিপে, ফোকাসটি ওভারভিউ ট্যাবে ফিরে যায়।

focusgroupstart অ্যাট্রিবিউট

focusgroupstart অ্যাট্রিবিউটটি চিহ্নিত করে যে কোন এলিমেন্টটি প্রথমবার ফোকাসগ্রুপে ট্যাব করার সময় (অথবা প্রতিবার যখন মেমরি অক্ষম থাকে) ফোকাস গ্রহণ করে:

<div focusgroup="toolbar nomemory" aria-label="Entry point demo">
  <button type="button">First</button>
  <button type="button" focusgroupstart>Middle (Entry)</button>
  <button type="button">Last</button>
</div>

Tab এবং Shift+Tab উভয়ই "Middle (Entry)" এ থাকে কারণ এতে focusgroupstart আছে এবং nomemory modifier দিয়ে মেমরি নিষ্ক্রিয় করা আছে। এটি সরাসরি চেষ্টা করুন: Toolbar Pattern > Entry Point দিয়ে focusgroupstart ।

মেমরি অক্ষম করুন (নামকরণযোগ্য)

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

এই মডিফায়ারটি focusgroupstart প্রোগ্রাম্যাটিক মুভমেন্টের সাথেও মিলিত হতে পারে যাতে গ্রুপে প্রবেশের সময় ফোকাস করা আইটেমের উপর সম্পূর্ণ নিয়ন্ত্রণ পাওয়া যায়। মনে রাখা উপাদানটি অনুপলব্ধ হয়ে গেলে মেমরি সাফ হয়ে যায়; উদাহরণস্বরূপ, যদি এটি সরানো হয়, লুকানো হয়, অক্ষম করা হয়, নিষ্ক্রিয় করা হয়, অথবা ফোকাসগ্রুপ থেকে বাদ দেওয়া হয়।

অপ্ট আউট ( focusgroup="none" )

focusgroup="none" ব্যবহার করে একটি এলিমেন্ট এবং এর সাবট্রিকে পূর্বসূরী ফোকাসগ্রুপের তীর নেভিগেশন থেকে বাদ দিন। অপ্ট-আউট এলিমেন্ট এবং এর সাবট্রি ট্যাব ব্যবহার করে পৌঁছানো যায়, কিন্তু তীর কীগুলি এড়িয়ে যায়:

<div focusgroup="toolbar" aria-label="Segmented toolbar">
  <button type="button">New</button>
  <button type="button">Open</button>
  <button type="button">Save</button>
  <span focusgroup="none">
    <button type="button">Help</button>
    <button type="button">Shortcuts</button>
  </span>
  <button type="button">Close</button>
  <button type="button">Exit</button>
</div>

ডান তীরচিহ্ন ব্যবহার করে আপনি New-এ নেভিগেট করতে পারেন, তারপর Open, Save, Close এবং Exit-এ যেতে পারেন, Help এবং Shortcuts বোতামগুলি সম্পূর্ণভাবে এড়িয়ে যেতে পারেন। কিন্তু ব্যবহারকারীরা এখনও এই বোতামগুলি অ্যাক্সেস করতে সহায়তা বিভাগে Tab করতে পারেন। এটি সরাসরি চেষ্টা করে দেখুন: অতিরিক্ত ধারণা > focusgroup="none" সহ অপ্ট-আউট সেগমেন্ট ।

সাধারণ নিদর্শন

ট্যাবলিস্ট

ট্যাবগুলির মধ্যে তীর কী নেভিগেশন সহ একটি ট্যাব নিয়ন্ত্রণ।

<div focusgroup="tablist nomemory" aria-label="Sections">
  <button type="button" aria-selected="true" aria-controls="panel-overview" id="tab-overview" focusgroupstart>Overview</button>
  <button type="button" aria-selected="false" aria-controls="panel-features" id="tab-features">Features</button>
  <button type="button" aria-selected="false" aria-controls="panel-pricing" id="tab-pricing">Pricing</button>
  <button type="button" aria-selected="false" aria-controls="panel-faq" id="tab-faq">FAQ</button>
</div>
<div role="tabpanel" id="panel-overview" aria-labelledby="tab-overview" tabindex="0">...</div>
<div role="tabpanel" id="panel-features" aria-labelledby="tab-features" tabindex="0">...</div>
<div role="tabpanel" id="panel-pricing" aria-labelledby="tab-pricing" tabindex="0">...</div>
<div role="tabpanel" id="panel-faq" aria-labelledby="tab-faq" tabindex="0">...</div>

এটি লাইভ ব্যবহার করে দেখুন: ট্যাবলিস্ট প্যাটার্ন > মোড়ক সহ অনুভূমিক ট্যাবলিস্ট ।

কী লক্ষ্য করবেন:

• focusgroupstart অ্যাট্রিবিউটটি নির্বাচিত ট্যাবে থাকে, তাই ফোকাস সর্বদা সেখানে প্রবেশ করে।
• nomemory মডিফায়ার নিশ্চিত করে যে ব্যবহারকারী যদি আগে অন্য কোনও ট্যাবে ফোকাস করে থাকে, তবুও পুনঃপ্রবেশ সর্বদা নির্বাচিত ট্যাবে যায়।
• inline মডিফায়ারটি কেবল বাম এবং ডান কীগুলিতে তীর নেভিগেশন সীমাবদ্ধ করে। এটি APG ট্যাব প্যাটার্ন দ্বারা বর্ণিত প্রত্যাশিত আচরণের সাথে মেলে।
• wrap মডিফায়ার ব্যবহারকারীদের সমস্ত ট্যাবে ধারাবাহিকভাবে তীরচিহ্নগুলি ব্যবহার করতে দেয়।
• ডেভেলপার কোড, সংক্ষিপ্ততার জন্য বাদ দেওয়া হয়েছে, প্রকৃত নির্বাচন পরিচালনা করে: aria-selected আপডেট করা, প্যানেলের দৃশ্যমানতা টগল করা, এবং নির্বাচন পরিবর্তনের সময় focusgroupstart বৈশিষ্ট্যটি সরানো।

মেনু এবং মেনুবার

উপরে এবং নীচে তীর নেভিগেশন সহ একটি সহজ উল্লম্ব মেনু।

<div focusgroup="menu" aria-label="File actions" class="menu-vertical">
    <button type="button" class="menu-item">New</button>
    <button type="button" class="menu-item">Open…</button>
    <button type="button" class="menu-item">Save</button>
    <button type="button" class="menu-item">Exit</button>
</div>

এটি লাইভ ব্যবহার করে দেখুন: মেনু এবং মেনুবার প্যাটার্ন > সরল উল্লম্ব মেনু । block মডিফায়ারের সাহায্যে, শুধুমাত্র উপরে এবং নীচের তীরচিহ্নগুলি আইটেমগুলিতে নেভিগেট করে। বাম এবং ডান তীরচিহ্নগুলি আপনার সংজ্ঞায়িত আচরণের জন্য বিনামূল্যে (উদাহরণস্বরূপ, খোলার সাবমেনু)। নেস্টেড সাবমেনু সহ একটি মেনুবারের জন্য, প্রতিটি স্তর একটি স্বাধীন ফোকাসগ্রুপ। এটি লাইভ ব্যবহার করে দেখুন: মেনু এবং মেনুবার প্যাটার্ন > পপওভার সাবমেনু সহ মেনুবার

<ul role="menubar" focusgroup="menubar"
     aria-label="Application Menu" class="menubar">
    <li role="none">
        <button role="menuitem" type="button" class="menubar-item"
             aria-haspopup="menu" aria-expanded="false"
             popovertarget="filemenu">File</button>
        <ul role="menu" focusgroup="menu"
             id="filemenu" popover aria-label="File submenu" class="submenu">
            <li role="none"><button type="button" class="submenu-item"
                 autofocus>New</button></li>
            <li role="none"><button type="button" class="submenu-item">Open</button></li>
            <li role="none"><button type="button" class="submenu-item">Save</button></li>
        </ul>
    </li>
    <!-- More menu items... -->
</ul>

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

রেডিওগ্রুপ

তীর কী নেভিগেশন এবং সম্পূর্ণ স্টাইলিং নিয়ন্ত্রণ সহ একটি কাস্টম রেডিও গ্রুপ।

<div focusgroup="radiogroup" aria-label="Favorite color">
  <span aria-checked="false" tabindex="0">Red</span>
  <span aria-checked="false" tabindex="0">Green</span>
  <span aria-checked="true" tabindex="0" focusgroupstart >Blue</span>
  <span aria-checked="false" tabindex="0">Purple</span>
</div>

এটি সরাসরি চেষ্টা করে দেখুন: রেডিও গ্রুপ প্যাটার্ন > তুলনা: নেটিভ বনাম ফোকাসগ্রুপ ।

focusgroup অ্যাট্রিবিউট যখন অ্যারো কী নেভিগেশন পরিচালনা করে; তখন আপনাকে নির্বাচন কোডটি বাস্তবায়ন করতে হবে। এই ডেমোতে, জাভাস্ক্রিপ্ট কোড চেক করা অবস্থা পরিচালনা করে ( aria-checked অ্যাট্রিবিউট ব্যবহার করে)।

মূল ধারণা

ফোকাসগ্রুপ আইটেম অংশগ্রহণ

focusgroup একটি বৈধ আচরণে সেট করা উপাদানের সমস্ত ক্রমানুসারে ফোকাসযোগ্য ডিসেন্ডেন্টকে সেই ফোকাসগ্রুপে অংশগ্রহণের জন্য বিবেচনা করা হয়। এর অর্থ হল নেতিবাচক tabindex সহ উপাদানগুলিকে বিবেচনা করা হয় না, তবে <button> এর মতো স্থানীয়ভাবে ফোকাসযোগ্য উপাদানগুলিকে বিবেচনা করা হয়, সেইসাথে এমন উপাদানগুলিকে যেখানে আপনি একটি অ-নেতিবাচক tabindex নির্দিষ্ট করেছেন।

ট্যাব স্টপ

আপনার tabindex মান পরিচালনা করার প্রয়োজন নেই । এমনকি যখন একাধিক ডিসেন্ডেন্ট স্বাভাবিকভাবেই ট্যাবেবল (উদাহরণস্বরূপ, বেশ কয়েকটি <button> উপাদান) থাকে, তখনও ফোকাসগ্রুপ সেগুলিকে একটি একক ট্যাব স্টপে ভেঙে ফেলে। ব্রাউজার যেকোনো সময় কোন আইটেমটি ট্যাবেবল তা পরিচালনা করে। এটি সরাসরি চেষ্টা করে দেখুন: Toolbar Pattern > No tabindex Management Needed ।

শেষ-কেন্দ্রিক স্মৃতি

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

নেস্টেড ফোকাসগ্রুপ

প্রতিটি ফোকাসগ্রুপ ঘোষণা একটি স্বাধীন স্কোপ তৈরি করে। একটি নেস্টেড ফোকাসগ্রুপ স্বয়ংক্রিয়ভাবে তার পূর্বপুরুষের তীর নেভিগেশন থেকে বেরিয়ে আসে। ফোকাসগ্রুপগুলির মধ্যে সরাতে ট্যাব ব্যবহার করুন এবং বর্তমান ফোকাসগ্রুপের মধ্যে নেভিগেট করতে তীর কী ব্যবহার করুন। এটি লাইভ চেষ্টা করুন: অতিরিক্ত ধারণা > নেস্টেড ফোকাসগ্রুপ ।

শ্যাডো DOM সাপোর্ট

ডিফল্টরূপে Focusgroup শ্যাডো DOM সীমানা জুড়ে প্রযোজ্য। শ্যাডো হোস্টে ঘোষিত একটি ফোকাসগ্রুপে সেই হোস্টের শ্যাডো ট্রির ভিতরে ফোকাসযোগ্য উপাদান থাকে। আপনি যদি অপ্ট-আউট করতে চান, তাহলে আপনি আপনার কম্পোনেন্টের শ্যাডো ট্রির ভিতরে focusgroup="none" ব্যবহার করতে পারেন।

মূল দ্বন্দ্ব পরিচালনা

ফোকাসগ্রুপের কিছু উপাদান, যেমন <input> , <textarea> , এবং অন্যান্য নিয়ন্ত্রণগুলি তাদের নিজস্ব উদ্দেশ্যে তীরচিহ্ন কী ব্যবহার করে। যখন ফোকাসগ্রুপের নেভিগেশন কী এবং একটি নেটিভ এলিমেন্টের তীরচিহ্ন কী আচরণের মধ্যে দ্বন্দ্ব দেখা দেয়:

• তীর কীগুলি ইন্টারেক্টিভ উপাদান দ্বারা ব্যবহৃত হয় (উদাহরণস্বরূপ, টেক্সট কার্সার চলাচলের জন্য), এবং ফোকাসগ্রুপ হস্তক্ষেপ করে না।
• ট্যাব অথবা শিফট+ট্যাব একটি ডিফল্ট এস্কেপ মেকানিজম প্রদান করে, যা ব্যবহারকারীকে ট্যাব নেভিগেশন ব্যবহার করে ফোকাসগ্রুপে "পুনরায় প্রবেশ" করতে দেয়।

এই এস্কেপ আচরণগুলি কেবল তখনই প্রযোজ্য যখন কোনও প্রকৃত কী দ্বন্দ্ব থাকে; অ-দ্বন্দ্বী অক্ষগুলি প্রভাবিত হয় না। নির্দিষ্ট উপাদানগুলির জন্য ফোকাসগ্রুপের তীর কী আচরণকে ওভাররাইড করার জন্য আপনি keydown ইভেন্টগুলিতে preventDefault() কল করতে পারেন। এর অর্থ হল আপনি কোনও আচরণ ভাঙা ছাড়াই ফোকাসগ্রুপের ভিতরে ইনপুট এবং টেক্সট এরিয়া অন্তর্ভুক্ত করতে পারেন।

যদি আপনি আপনার নিজস্ব ফোকাসগ্রুপে অংশগ্রহণকারী উপাদানগুলিতে কী হ্যান্ডলার যোগ করেন, তাহলে একই রকম একটি এস্কেপ মেকানিজম প্রদানের দিকে খেয়াল রাখবেন যাতে ব্যবহারকারীরা গ্রুপের বাকি অংশ অ্যাক্সেস করতে পারে।

গভীর বংশধর আবিষ্কার

ফোকাসগ্রুপ আইটেমগুলিকে ফোকাসগ্রুপ কন্টেইনারের সরাসরি শিশু হতে হবে না।

ব্রাউজারটি সমস্ত ক্রমিকভাবে ফোকাসযোগ্য ডিসেন্ডেন্ট (অ-নেতিবাচক tabindex ) কে ফোকাসগ্রুপে অংশগ্রহণের জন্য বিবেচনা করে, যদি না তারা একটি নেস্টেড ফোকাসগ্রুপের ভিতরে থাকে অথবা focusgroup="none" দিয়ে অপ্ট-আউট থাকে।

<div focusgroup="toolbar" aria-label="Nested wrappers">
  <div>
    <span>
      <button type="button">Alpha</button>
    </span>
    <span>
      <button type="button">Beta</button>
    </span>
    <span>
      <button type="button">Gamma</button>
    </span>
  </div>
</div>

<div> এবং <span> র‍্যাপারের ভেতরে বোতামগুলি নেস্ট করা থাকলেও অ্যারো কী নেভিগেশন কাজ করে। কোনও ফ্ল্যাট-লিস্টের প্রয়োজন নেই, তাই স্টাইলিংয়ের জন্য র‍্যাপারের উপাদানগুলি ঠিক আছে।

এটি সরাসরি ব্যবহার করে দেখুন: অতিরিক্ত ধারণা > গভীর বংশধর ।

reading-flow প্রোপার্টির সাথে ইন্টিগ্রেশন

সিকোয়েন্সিয়াল (ট্যাব) এবং ডিরেকশনাল (তীর কী) নেভিগেশন উভয়ই CSS reading-flow প্রোপার্টি উপস্থিত থাকলে তা মেনে চলে, DOM সোর্স ক্রমের পরিবর্তে ভিজ্যুয়াল রিডিং ক্রম অনুসরণ করে।

এটি নিশ্চিত করে যে তীর কী নেভিগেশন ব্যবহারকারীরা স্ক্রিনে যে লেআউটটি দেখেন তার সাথে মেলে।

<div focusgroup="toolbar" aria-label="Visual order"
     style="display: flex; flex-direction: row-reverse; reading-flow: flex-visual;">
  <button type="button">A (DOM first)</button>
  <button type="button">B (DOM second)</button>
  <button type="button">C (DOM third)</button>
</div>

যদিও DOM ক্রম A, B, C, দৃশ্য ক্রম C, B, A কারণ লেআউটটি flex-direction: row-reverse ব্যবহার করে। তবে, যেহেতু কোডটি reading-flow: flex-visual ব্যবহার করে, তাই পড়ার ক্রমটি A, B, C তে ফিরে আসে এবং ফোকাসগ্রুপ এই ক্রমটির সাথে মেলে।

ট্যাব টিপলে প্রথমে C তে ফোকাস হবে, এবং ডানদিকে টিপলে B তে ফোকাস হবে, তারপর A তে। এটি সরাসরি চেষ্টা করে দেখুন: অতিরিক্ত ধারণা > CSS রিডিং-ফ্লো ইন্টিগ্রেশন ।

অ্যাক্সেসযোগ্যতা

ARIA ভূমিকা অনুমান

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

<div focusgroup="tablist">
  <button>Tab 1</button>
  <button>Tab 2</button>
  <button>Tab 3</button>
</div>

বোতামগুলিতে কোনও ভূমিকা সংজ্ঞায়িত না থাকলেও নিম্নলিখিত অ্যাক্সেসিবিলিটি ট্রি তৈরি করে:

+   tablist
  |
  +   tab
  |
  +   tab
  |
  +   tab

আপনি সরাসরি ভূমিকা নির্ধারণ করে আচরণ নিয়ন্ত্রণ করতে পারেন।

অ্যাক্সেসিবিলিটি বিবেচ্য বিষয়গুলি

ফোকাসগ্রুপ তৈরি করার সময় আপনার বেছে নেওয়া আচরণকে সম্মান করার বিষয়ে সতর্ক থাকুন।

ফোকাসগ্রুপের ব্যবহার আপনার নির্দিষ্ট আচরণের সাথে যতটা সম্ভব সারিবদ্ধ করা উচিত। অ্যাক্সেসিবিলিটি টুলের উপর নির্ভরশীল ব্যবহারকারীরা যাতে কন্টেন্ট নেভিগেট করতে এবং কাস্টম নিয়ন্ত্রণ ব্যবহার করতে সক্ষম হন তা নিশ্চিত করার জন্য এটি গুরুত্বপূর্ণ।

যদিও ভূমিকা অনুমান ভালো ডিফল্ট প্রদান করে, অ-জেনেরিক ভূমিকা সহ উপাদানগুলি ব্যবহার করার সময়, নিশ্চিত করুন যে তাদের প্রদত্ত কার্যকারিতার জন্য সঠিক ভূমিকা সেট রয়েছে।

ফোকাসগ্রুপ ব্যবহার করার সময়, মনে রাখবেন যে ব্যবহারকারীদের আপনার কন্টেন্ট দেখার জন্য তীরচিহ্নগুলি দিয়ে স্ক্রোল করতে সক্ষম হতে হতে পারে। একজন কীবোর্ড ব্যবহারকারীর জন্য সর্বদা একটি উপায় থাকা উচিত যাতে তিনি আপনার পৃষ্ঠার কন্টেন্ট পড়তে এবং অ্যাক্সেস করতে পারেন।

বৈশিষ্ট্য সনাক্তকরণ

আজই ফোকাসগ্রুপ ব্যবহার শুরু করার জন্য, ব্রাউজারগুলিতে সম্পূর্ণরূপে সমর্থিত হওয়ার আগে, আপনি জাভাস্ক্রিপ্টে ফোকাসগ্রুপ সমর্থন সনাক্ত করতে পারেন:

if ('focusgroup' in HTMLElement.prototype) {
  // focusgroup is supported.
} else {
  // fall back to manual roving tabindex.
}

উপসংহার

focusgroup অ্যাট্রিবিউটটি স্ট্যান্ডার্ড বডিগুলির মাধ্যমে অগ্রগতি করছে, এবং আমরা সক্রিয়ভাবে Chromium-এ প্রোটোটাইপ তৈরি করছি এবং API পরিমার্জন করছি।

এটি ব্যবহার করে দেখুন এবং Open-UI GitHub ইস্যু ট্র্যাকারে একটি ফোকাসগ্রুপ সমস্যা ফাইল করুন । নিম্নলিখিত বিষয়ে আপনার মতামত জানতে আমরা বিশেষভাবে আগ্রহী:

• আপনার তৈরি করা প্যাটার্নের জন্য কি API সারফেসটি সঠিক বলে মনে হচ্ছে?
• এমন কোন নিদর্শন বা দৃশ্যপট কি আমরা মিস করছি?
• এমন কোন উপাদান আছে যেখানে ফোকাসগ্রুপ অ্যাট্রিবিউট ব্যবহার করা উচিত নয়?
• আপনার ব্যবহারের ক্ষেত্রে অ্যাক্সেসিবিলিটি স্টোরি কীভাবে কাজ করে?

ওয়েবে কীবোর্ড নেভিগেশন আরও ভালো করতে সাহায্য করার জন্য আপনাকে ধন্যবাদ!

আরও জানুন

• ফোকাসগ্রুপ ব্যাখ্যাকারী
• ইন্টারেক্টিভ ডেমো ( উৎস )
• WHATWG HTML সমস্যা
• ওপেন ইউআই ফোকাসগ্রুপ সমস্যা
• ARIA অথরিং প্র্যাকটিসেস গাইড

ফোকাসগ্রুপ ফিরিয়ে আনার ক্ষেত্রে সাহায্যের জন্য ম্যাসন ফ্রিড, সারা হিগলি, স্কট ও'হারা এবং ওপেন-ইউআই সম্প্রদায়ের বাকি সদস্যদের ধন্যবাদ।