একটি ফোকাস ট্র্যাপ একটি ওয়েব অ্যাপ্লিকেশনের মধ্যে একটি অত্যন্ত গুরুত্বপূর্ণ অ্যাক্সেসিবিলিটি বৈশিষ্ট্য। এই পোস্টে, আমি প্রথমে আপনাকে এটি কী তা বুঝতে সাহায্য করব, তারপর কেন এটি গুরুত্বপূর্ণ, এবং অবশেষে, আমি দেখাব কীভাবে আপনার কৌণিক অ্যাপগুলির মধ্যে প্রয়োজনে ধারণাটি দ্রুত এবং সহজে যুক্ত করা যায়৷ এবং, কৌণিক CDK-এর জন্য এটি বেশ সহজ ধন্যবাদ। ঠিক আছে, চলুন এটা পেতে.   https://youtu.be/JKHAjYJ5T2o?embedable=true  অ্যাক্সেসিবিলিটি বোঝা কিছুটা কঠিন হতে পারে বা এমনকি আপনি এমন কেউ হন যিনি বিভিন্ন ডিভাইসের সাথে সহজেই ওয়েব দেখতে, শুনতে এবং ব্যবহার করতে পারেন সে সম্পর্কে চিন্তা করা কিছুটা কঠিন হতে পারে, তাই এটি এমন জিনিসগুলি তৈরি করাও সহজ হতে পারে যা তাদের জন্য ভাল কাজ করে না পারে না  একটি ফোকাস ফাঁদ কি?  একটি ফোকাস ট্র্যাপ এমন একটি বৈশিষ্ট্য যা এই লোকদের জন্য অভিজ্ঞতা আরও ভাল করতে সহায়তা করে। এটি একটি প্রদত্ত কন্টেইনারের মধ্যে ব্যবহারকারীর ফোকাস পরিচালনা করার একটি উপায়।  উদাহরণস্বরূপ, একটি মডেল নিন। যদি একজন ব্যবহারকারী ফোকাস পরিচালনা না করে একটি মোডাল খোলে, যখন তারা ট্যাব কী ব্যবহার করে কীবোর্ডের মাধ্যমে নেভিগেট করা শুরু করে, মোডালের পিছনে থাকা আইটেমগুলি ফোকাস পেতে থাকে। এটি অদ্ভুত এবং ব্যবহারকারী কি আশা করবে না, তাই না? আমাদের প্রোগ্রাম্যাটিকভাবে তাদের মডেলের মধ্যে ফোকাস করতে হবে।  কিন্তু এই যথেষ্ট নয়; যদি আমরা এখানে থামি, যেমন আমরা মোডেলের মাধ্যমে ট্যাব করি, অবশেষে, আমরা সমস্ত ফোকাসযোগ্য আইটেমগুলির মাধ্যমে ট্যাব করব, এবং তারপরে, আমরা আবার মডেলের পিছনে মূল নথির মধ্যে ফোকাসিং আইটেমগুলিতে ফিরে আসব।  এর পরিবর্তে আমাদের যা করতে হবে তা হল ফোকাসকে ফাঁদে ফেলা যাতে ব্যবহারকারী যখন মোডেলের শেষ আইটেমটিতে ফোকাস করেন, তখন ফোকাসটি পরবর্তী ট্যাবে মোডেলের প্রথম ফোকাসযোগ্য উপাদানটির উপর স্থাপন করা হয়।  ঠিক আছে, এখন আমরা জানি যে একটি ফোকাস ট্র্যাপ কী, আমরা সম্ভবত বুঝতে শুরু করেছি যে এই কার্যকারিতা তৈরি করার জন্য কিছু প্রচেষ্টা হতে চলেছে, তাই না?  ভাল, কৌণিক মধ্যে না. CDK এর সাথে, এটি   থেকে   নির্দেশিকা ব্যবহার করে বেশ সহজ। A11yModule cdkTrapFocus  কৌণিক   নির্দেশিকা cdkTrapFocus  এর একটি উদাহরণ তাকান. এখানে, আমাদের কাছে ভ্যান জুতো ব্র্যান্ডের জন্য একটি ওয়েব অ্যাপ রয়েছে।   উপরে, আমাদের একটি সাইন আপ বোতাম আছে। যখন আমরা এটিতে ক্লিক করি, এবং তারপরে ট্যাব করি, তখন আমরা দেখতে পাব পটভূমিতে থাকা আইটেমগুলির চারপাশে ফোকাস চলছে।   আমরা যা চাই তা নয়, তাই না?  ঠিক আছে,   যোগ করা যাক। এটি ব্যবহার করার জন্য আমাদের প্রথমে যা করতে হবে তা হল, আমাদের   আমদানি করতে হবে। cdkTrapFocus A11yModule  sign-up-modal.component.ts   import { A11yModule } from '@angular/cdk/a11y'; @Component({ selector: 'app-sign-up-modal', ... imports: [A11yModule] }) export class SignUpModalComponent { }  আপনারা যারা এই সংক্ষিপ্ত রূপের সাথে অপরিচিত তাদের জন্য, অ্যালি শব্দটি অ্যাক্সেসিবিলিটির সংক্ষিপ্ত রূপ। এটি ধারণা থেকে আসে যে শব্দটি একটি A দিয়ে শুরু হয়, একটি Y দিয়ে শেষ হয় এবং এর মধ্যে এগারোটি অক্ষর রয়েছে।   Angular CDK এর অ্যাক্সেসিবিলিটি মডিউলের মধ্যে বেশ কিছু অ্যাক্সেসিবিলিটি বৈশিষ্ট্য রয়েছে এবং   নির্দেশিকা তাদের মধ্যে একটি। cdkTrapFocus  সুতরাং, একবার আমরা এটি আমদানি করার পরে, আমরা এখন টেমপ্লেটের মধ্যে এটি ব্যবহার করতে পারি। আমরা শুধু এটি আমাদের ফর্ম মোড়ানো একটি উপাদান যোগ করতে হবে.  sign-up-modal.component.html     <div cdkTrapFocus> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div>      এর সাহায্যে সূচনার উপর ফোকাস প্রদান করা cdkTrapFocusAutoCapture @Input  ভাল খবর,   নির্দেশে একটি স্বয়ংক্রিয়-ফোকাস বৈশিষ্ট্য তৈরি করা হয়েছে। আমরা     ব্যবহার করতে পারি। এই ইনপুটটি নির্দেশের মধ্যে প্রথম ফোকাসযোগ্য আইটেমটিকে স্বয়ংক্রিয়ভাবে ফোকাস করবে যখন এটি শুরু হবে। এটি ডিফল্ট থেকে মিথ্যা, তাই আমাদের সত্যের একটি মান প্রদান করতে হবে। cdkTrapFocus cdkTrapFocusAutoCapture @Input   <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true"> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div>  এখন, যখন আমরা মোডাল খুলি, নাম ক্ষেত্রটি খোলার সময় সঠিকভাবে ফোকাস করা হয়। এবং, আমরা ট্যাব করার সাথে সাথে, যখন আমরা ক্লোজ বোতামে পৌঁছাই, আমরা নাম ফিল্ডে ফিরে যাব। এছাড়াও, যদি আমরা পিছনের দিকে নেভিগেট করতে   +   চাপি, আমরা মোডালটি না রেখেই বিপরীত ক্রমে যাব।  shift tab  সুতরাং, এটি কেবল সমস্ত ব্যবহারকারীদের জন্যই অত্যন্ত সহায়ক নয়, এটি বাস্তবায়ন করাও খুব সহজ।  একটি শেষ জিনিস লক্ষ্য করুন, ট্র্যাপ ফোকাস নির্দেশিকাটি শুরু করার আগে শেষ ফোকাস করা উপাদানটির ট্র্যাক রাখে, তাই যখন আমরা মডেলটি বন্ধ করি, ফোকাসটি এটি খোলা বোতামে ফিরে আসে।  চমৎকার, আমরা মাত্র এক টন কাজ সংরক্ষণ করেছি এবং আমাদের মডেলটিকে আরও অ্যাক্সেসযোগ্য করে তুলেছি।  কর্মক্ষেত্রে এটি দেখতে চান?  নীচের স্ট্যাকব্লিটজ উদাহরণে এই কৌশলগুলির ডেমো কোড এবং উদাহরণগুলি দেখুন। আপনার যদি কোন প্রশ্ন বা চিন্তা থাকে, একটি মন্তব্য করতে দ্বিধা করবেন না.   https://stackblitz.com/edit/stackblitz-starters-2bznzs?embed=1&file=src%2Fsign-up-modal%2Fsign-up-modal.component.html&embedable=true

Buy Me a Coffee

গল্পের মূল ভাষায় এই অডিও তৈরি!

অতিদীর্ঘ; পড়তে

Make resilience your competitive advantage

কৌণিক সিডিকে ট্র্যাপ ফোকাস নির্দেশিকা কীভাবে ব্যবহার করবেন

About Author

মন্তব্য

আসে ট্যাগ

এই নিবন্ধটি উপস্থাপন করা হয়েছে

Related Stories

ক্রিপ্টো গ্রোথ: কার্যকরী ব্যবহারকারী ব্যক্তিত্ব তৈরি করা

বিটকয়েন UTXO এর মডেল, একটি অনন্য ইকোসিস্টেমকে শক্তিশালী করে

ফ্লোকির ভালহাল্লা ভারতের শ্রীলঙ্কা সফরের সহযোগী স্পনসর হিসেবে যোগ দিয়েছেন

ব্যবহারকারী-কেন্দ্রিক ক্রিপ্টো পণ্য তৈরি করা: গ্রাহক প্রতিক্রিয়ার গুরুত্ব

ক্রিপ্টো গ্রোথ: কার্যকরী ব্যবহারকারী ব্যক্তিত্ব তৈরি করা

বিটকয়েন UTXO এর মডেল, একটি অনন্য ইকোসিস্টেমকে শক্তিশালী করে

ফ্লোকির ভালহাল্লা ভারতের শ্রীলঙ্কা সফরের সহযোগী স্পনসর হিসেবে যোগ দিয়েছেন

ব্যবহারকারী-কেন্দ্রিক ক্রিপ্টো পণ্য তৈরি করা: গ্রাহক প্রতিক্রিয়ার গুরুত্ব

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps