ডায়ালগ

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

ডায়ালগ এগুলি হতে পারে:

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

সিম্যান্টিক HTML <dialog> এলিমেন্ট, সিম্যান্টিক, কীবোর্ড ইন্টার‍্যাকশন এবং HTMLDialogElement ইন্টারফেসের সব প্রপার্টি ও পদ্ধতি সহ ডায়ালগ তৈরি করে।

মডেল ডায়ালগ

<dialog> মডালের উদাহরণ দেখুন। মোডাল ডায়ালগ খুলুন বিকল্পে ক্লিক করুন। খোলার পরে, ডায়ালগ বন্ধ করার তিনটি উপায় আছে: Escape কী, এমন বোতামের সাহায্যে ফর্ম জমা দেওয়া যাতে formmethod="dialog" সেট করা আছে (অথবা ফর্মে নিজেই method="dialog" সেট করা আছে) এবং HTMLDialogElement.close() পদ্ধতি।

HTMLDialogElement-এর তিনটি প্রধান পদ্ধতি আছে, এর সাথে HTMLElement থেকে পাওয়া সব পদ্ধতিও আছে।

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

যেহেতু এই <dialog> HTMLDialogElement.showModal() পদ্ধতির মাধ্যমে খোলা হয়েছে, তাই এটি একটি মোডাল ডায়ালগ। মডেল ডায়ালগ খুললে ডায়ালগ ছাড়া অন্য সবকিছু বন্ধ ও অস্পষ্ট হয়ে যায়। আপনি ডায়ালগের বাইরে UI-এর উপর মাউস নিয়ে গেলে, সব এলিমেন্ট এমনভাবে কাজ করে যেন pointer-events: none; সেট করা হয়েছে। এমনকি যে বোতামটি ডায়ালগ খোলে সেটিও ইন্টার‍্যাকশনে কোনও প্রতিক্রিয়া দেখাবে না।

ডায়ালগ খোলা হলে, ফোকাস ডায়ালগে চলে যায়। সেই ডায়ালগের মধ্যে কীবোর্ড নেভিগেশনের ক্রম অনুযায়ী প্রথম এলিমেন্টে ফোকাস সেট করা হয়। আপনি বারবার tab কী প্রেস করলে, মোডাল খোলা থাকাকালীন শুধুমাত্র ডায়ালগের মধ্যে থাকা কন্টেন্ট ফোকাস করা যাবে। মোডালের বাইরে সবকিছু নিষ্ক্রিয় থাকে।

কোনও ডায়ালগ বন্ধ করা হলে, সেটি মডেল হোক বা না হোক, যে এলিমেন্ট ডায়ালগটি খুলেছিল সেটিতে ফোকাস ফিরে আসে। ব্যবহারকারীর অ্যাকশন ছাড়াই প্রোগ্রাম্যাটিক্যালি কোনও ডায়ালগ খোলা এড়িয়ে চলুন। যদি আপনাকে এটি করতেই হয়, তাহলে নিশ্চিত করুন যে আপনি ফোকাসটি ডায়ালগ খোলার আগের অবস্থায় ফিরিয়ে এনেছেন, বিশেষ করে যদি ব্যবহারকারী ডায়ালগের সাথে ইন্টার‍্যাক্ট না করেই এটি বাতিল করে দেন।

একটি গ্লোবাল inert অ্যাট্রিবিউট আছে যা কোনও অ্যাক্টিভ ডায়ালগ ছাড়া, কোনও এলিমেন্ট এবং তার সব ডিসেন্ডেন্টকে বন্ধ করতে ব্যবহার করা যেতে পারে। showModal() ব্যবহার করে কোনও মোডাল ডায়ালগ খোলা হলে, সাধারণত ইনার্টনেস বা ডিঅ্যাক্টিভেশন হয়। অ্যাট্রিবিউট স্পষ্টভাবে সেট করা হয়নি।

ডায়ালগ ছাড়া অন্য সবকিছু আড়াল করে দেয় এমন ব্যাকড্রপ ::backdrop সিউডো-এলিমেন্ট ব্যবহার করে স্টাইল করা যেতে পারে। .showModal() পদ্ধতির মাধ্যমে <dialog> দেখানো হলে তবেই ব্যাকড্রপ দেখানো হয়। এই ছদ্ম-এলিমেন্ট FullScreen API ব্যবহার করার সময় দেখানো ব্যাকড্রপ সহ সব ব্যাকড্রপের সাথে ম্যাচ করে, যেমন, ফুল-স্ক্রিন মোডে ভিডিও দেখার সময়, যার অ্যাস্পেক্ট রেশিও স্ক্রিন বা মনিটরের মতো নয়।

নন-মডেল ডায়ালগ

HTMLDialogElement.show() একইভাবে একটি ডায়ালগ খোলে, তবে কোনও ব্যাকড্রপ যোগ না করে বা কোনও কিছুকে নিষ্ক্রিয় না করে। Escape কী শুধুমাত্র মোডাল ডায়ালগ বন্ধ করে, নন-মোডাল ডায়ালগ নয়। এই কারণে, নন-মডেল ডায়ালগ বন্ধ করার পদ্ধতি অন্তর্ভুক্ত করা আরও বেশি গুরুত্বপূর্ণ। বন্ধ করার বিকল্পটি ডায়ালগের বাইরে থাকলে, যে এলিমেন্ট ডায়ালগটি খুলেছে, ফোকাস সেখানে ফিরে যাবে। এটি ব্যবহারকারীর জন্য আদর্শ অভিজ্ঞতা নয়।

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

ডায়ালগ বন্ধ করা হচ্ছে

ডায়ালগ বন্ধ করার জন্য HTMLDialogElement.close() পদ্ধতি ব্যবহার করার প্রয়োজন নেই। আপনার জাভাস্ক্রিপ্টের কোনও প্রয়োজন নেই। জাভাস্ক্রিপ্ট ছাড়া <dialog> বন্ধ করতে, <form>-এ method="dialog" অথবা বোতামে formmethod="dialog" সেট করে ডায়ালগ পদ্ধতি সহ ফর্ম অন্তর্ভুক্ত করুন।

ব্যবহারকারী dialog পদ্ধতি ব্যবহার করে জমা দিলে, ব্যবহারকারীর লেখা ডেটার স্ট্যাটাস বজায় থাকে। জমা দেওয়ার ইভেন্ট থাকলে, ফর্মটি কনস্ট্রেন্ট ভ্যালিডেশনের (novalidate সেট করা না থাকলে) মাধ্যমে যাচাই করা হয়। ব্যবহারকারীর ডেটা মুছে ফেলা বা জমা দেওয়া হয়নি। আপনি জাভাস্ক্রিপ্ট ছাড়াই বন্ধ করার বোতাম তৈরি করতে পারবেন:

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

আপনি হয়ত লক্ষ্য করেছেন যে এই উদাহরণে <button> বন্ধ করার জন্য autofocus অ্যাট্রিবিউট সেট করা হয়েছে। autofocus অ্যাট্রিবিউট সহ এলিমেন্ট <dialog>-এর মধ্যে সেট করা থাকলে, শুধুমাত্র পেজ লোড হওয়ার সময় ফোকাস পায়, যদি পেজটি আগে থেকেই ডায়ালগ দৃশ্যমান অবস্থায় লোড করা থাকে। পৃষ্ঠাটি লোড না হলে, ডায়ালগ খোলার সময় এইসব এলিমেন্ট ফোকাস পায়।

কোনও ডায়ালগ খোলা হলে, ডায়ালগের মধ্যে প্রথম ফোকাসযোগ্য এলিমেন্ট ফোকাস পায়, যদি না অন্য কোনও এলিমেন্টে autofocus অ্যাট্রিবিউট সেট করা থাকে। বন্ধ করার বোতামে autofocus অ্যাট্রিবিউট সেট করলে, ডায়ালগ খোলার সময় সেটি ফোকাস পায়। তবে <dialog>-এর মধ্যেautofocus অন্তর্ভুক্ত করার আগে অনেক বিবেচনা করা উচিত। অটোফোকাস করা এলিমেন্টের আগে সিকোয়েন্সে থাকা সব এলিমেন্ট এড়িয়ে যাওয়া হয়। আমরা ফোকাস মডিউলে এই অ্যাট্রিবিউট সম্পর্কে আরও আলোচনা করব।

HTMLDialogElement ইন্টারফেসে একটি returnValue প্রপার্টি অন্তর্ভুক্ত আছে। method="dialog" সহ ফর্ম জমা দিলে, ফর্ম জমা দেওয়ার জন্য ব্যবহৃত বোতামের name (যদি থাকে) অনুযায়ী returnValue সেট করা হয়। আমরা যদি <button type="submit" name="toasty">close</button> লিখি, তাহলে returnValue হবে toasty।

কোনও ডায়ালগ খোলা হলে, বুলিয়ান open অ্যাট্রিবিউট উপস্থিত থাকে, যার অর্থ হল ডায়ালগটি অ্যাক্টিভ এবং এর সাথে ইন্টার‍্যাক্ট করা যাবে। .show() বা .showModal()-এর পরিবর্তে open অ্যাট্রিবিউট যোগ করে কোনও ডায়ালগ খোলা হলে, ডায়ালগটি মোডাল-লেস হয়। HTMLDialogElement.open প্রপার্টি true বা false রিটার্ন করে, এটি নির্ভর করে ইন্টার‍্যাকশনের জন্য ডায়ালগ উপলভ্য আছে কিনা তার উপর—এটি মোডাল কিনা তার উপর নয়।

ডায়ালগ খোলার জন্য জাভাস্ক্রিপ্ট হল সবচেয়ে ভালো পদ্ধতি, তবে পেজ লোড হওয়ার সময় open অ্যাট্রিবিউট যোগ করা এবং তারপর .close()-এর মাধ্যমে সেটি সরিয়ে দেওয়ার ফলে জাভাস্ক্রিপ্ট না থাকলেও ডায়ালগ উপলভ্য থাকে।

অতিরিক্ত বিবরণ

tabindex ব্যবহার করবেন না

ডায়ালগ খোলার জন্য যে এলিমেন্ট অ্যাক্টিভেট করা হয় এবং এতে থাকা বন্ধ করার বোতাম (এবং সম্ভবত অন্যান্য কন্টেন্ট) ফোকাস পেতে পারে এবং ইন্টার‍্যাক্টিভ হয়। <dialog> এলিমেন্ট ইন্টার‍্যাক্টিভ নয় এবং ফোকাস পায় না। ডায়ালগে tabindex প্রপার্টি যোগ করবেন না।

ARIA রোল

ইমপ্লিসিট ভূমিকা হল dialog। ডায়ালগটি যদি এমন একটি কনফার্মেশন উইন্ডো হয় যা এমন একটি মেসেজ কমিউনিকেট করে যার জন্য ব্যবহারকারীর উত্তর বা কনফার্মেশন প্রয়োজন, তাহলে role="alertdialog" সেট করুন। ডায়ালগের জন্য অ্যাক্সেসযোগ্য নাম যোগ করুন। দৃশ্যমান টেক্সট অ্যাক্সেসযোগ্য নাম প্রদান করতে পারলে, aria-labelledby="idOfLabelingText" যোগ করুন।

CSS ডিফল্ট

ব্রাউজার dialog-এর জন্য ডিফল্ট স্টাইলিং প্রদান করে। Firefox, Chrome ও Edge color: CanvasText; ও background-color: Canvas; সেট করে। Safari তার ইউজার-এজেন্ট স্টাইলশিটে color: black; background-color: white; সেট করে। color, body বা :root-এর পরিবর্তে dialog থেকে ইনহেরিট করা হয়েছে, যা অপ্রত্যাশিত হতে পারে। background-color প্রপার্টি ইনহেরিট করা হয়নি।

আপনি কতটা বুঝেছেন তা চেক করুন

ডায়ালগ এলিমেন্ট সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।

ডায়ালগের পিছনের অংশ আপনি কীভাবে স্টাইল করবেন?

::background ছদ্ম-এলিমেন্টের সাথে।

আবার চেষ্টা করুন।

::backdrop ছদ্ম-এলিমেন্টের সাথে।

ঠিক!

background প্রপার্টির সাথে।

আবার চেষ্টা করুন।