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

একটি ফোকাস ট্র্যাপ একটি ওয়েব অ্যাপ্লিকেশনের মধ্যে একটি অত্যন্ত গুরুত্বপূর্ণ অ্যাক্সেসিবিলিটি বৈশিষ্ট্য। এই পোস্টে, আমি প্রথমে আপনাকে এটি কী তা বুঝতে সাহায্য করব, তারপর কেন এটি গুরুত্বপূর্ণ, এবং অবশেষে, আমি দেখাব কীভাবে আপনার কৌণিক অ্যাপগুলির মধ্যে প্রয়োজনে ধারণাটি দ্রুত এবং সহজে যুক্ত করা যায়৷ এবং, কৌণিক CDK-এর জন্য এটি বেশ সহজ ধন্যবাদ। ঠিক আছে, চলুন এটা পেতে.

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

একটি ফোকাস ফাঁদ কি?

একটি ফোকাস ট্র্যাপ এমন একটি বৈশিষ্ট্য যা এই লোকদের জন্য অভিজ্ঞতা আরও ভাল করতে সহায়তা করে। এটি একটি প্রদত্ত কন্টেইনারের মধ্যে ব্যবহারকারীর ফোকাস পরিচালনা করার একটি উপায়।

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

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

এর পরিবর্তে আমাদের যা করতে হবে তা হল ফোকাসকে ফাঁদে ফেলা যাতে ব্যবহারকারী যখন মোডেলের শেষ আইটেমটিতে ফোকাস করেন, তখন ফোকাসটি পরবর্তী ট্যাবে মোডেলের প্রথম ফোকাসযোগ্য উপাদানটির উপর স্থাপন করা হয়।

ঠিক আছে, এখন আমরা জানি যে একটি ফোকাস ট্র্যাপ কী, আমরা সম্ভবত বুঝতে শুরু করেছি যে এই কার্যকারিতা তৈরি করার জন্য কিছু প্রচেষ্টা হতে চলেছে, তাই না?

ভাল, কৌণিক মধ্যে না. 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 চাপি, আমরা মোডালটি না রেখেই বিপরীত ক্রমে যাব।

সুতরাং, এটি কেবল সমস্ত ব্যবহারকারীদের জন্যই অত্যন্ত সহায়ক নয়, এটি বাস্তবায়ন করাও খুব সহজ।

একটি শেষ জিনিস লক্ষ্য করুন, ট্র্যাপ ফোকাস নির্দেশিকাটি শুরু করার আগে শেষ ফোকাস করা উপাদানটির ট্র্যাক রাখে, তাই যখন আমরা মডেলটি বন্ধ করি, ফোকাসটি এটি খোলা বোতামে ফিরে আসে।

চমৎকার, আমরা মাত্র এক টন কাজ সংরক্ষণ করেছি এবং আমাদের মডেলটিকে আরও অ্যাক্সেসযোগ্য করে তুলেছি।

কর্মক্ষেত্রে এটি দেখতে চান?

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