আপনার প্রতিক্রিয়া সাইট প্রগতিশীল হতে অ্যাক্সেসযোগ্য হতে হবে. আপনি আপনার অ্যাপ্লিকেশনটিকে উত্পাদনে ঠেলে দেওয়ার আগে কোনও সমস্যা খুঁজে পেতে এবং সমাধান করতে বিকাশের সময় অ্যাক্সেসযোগ্যতার জন্য অডিট করুন।
react-axe হল একটি লাইব্রেরি যা একটি React অ্যাপ্লিকেশন অডিট করে এবং Chrome DevTools কনসোলে যেকোন অ্যাক্সেসিবিলিটি সমস্যা লগ করে। এটি কোনো সমস্যা এবং তাদের তীব্রতা চিহ্নিত করতে ওপেন সোর্স এক্স টেস্টিং লাইব্রেরি ব্যবহার করে।
eslint-plugin-jsx-a11y হল একটি ESLint প্লাগইন যা সরাসরি আপনার JSX-এ বেশ কিছু অ্যাক্সেসিবিলিটি নিয়ম শনাক্ত করে এবং প্রয়োগ করে। চূড়ান্ত রেন্ডার করা DOM পরীক্ষা করে এমন একটি টুলের সাথে সংমিশ্রণে ব্যবহার করা হলে, যেমন react-axe , আপনি আপনার সাইটে যেকোনো অ্যাক্সেসিবিলিটি উদ্বেগ খুঁজে পেতে এবং ঠিক করতে পারেন।
কেন এই দরকারী?
প্রতিবন্ধী সহ সকল ব্যবহারকারীর কাছে অ্যাক্সেসযোগ্য ওয়েবসাইট তৈরি করা অত্যন্ত গুরুত্বপূর্ণ। একটি অ্যাক্সেসিবিলিটি অডিট লাইব্রেরি ব্যবহার করে, যেমন react-axe এবং eslint-plugin-jsx-a11y , আপনি আপনার অ্যাপ্লিকেশন তৈরি করার সময় অ্যাক্সেসিবিলিটি সমস্যাগুলি খুঁজে পেতে পারেন, যাতে আপনি উৎপাদনে যাওয়ার আগে সেগুলি ঠিক করতে পারেন৷
eslint-plugin-jsx-a11y ব্যবহার করুন
প্রতিক্রিয়া ইতিমধ্যে JSX সিনট্যাক্সের মধ্যে অ্যাক্সেসযোগ্য HTML উপাদানগুলি লেখার সমর্থন করে৷ উদাহরণস্বরূপ, একটি প্রতিক্রিয়া উপাদানের মধ্যে একটি ফর্ম উপাদানে একটি লেবেল যোগ করতে for এর পরিবর্তে htmlFor বৈশিষ্ট্যটি ব্যবহার করুন৷
<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>
প্রতিক্রিয়া অ্যাক্সেসিবিলিটি ডকুমেন্টেশন একটি প্রতিক্রিয়া উপাদানের মধ্যে অ্যাক্সেসযোগ্যতার উদ্বেগগুলি পরিচালনা করার সূক্ষ্মতাগুলিকে কভার করে। এই সমস্যাগুলি আরও সহজে চিহ্নিত করতে, ক্রিয়েট রিঅ্যাক্ট অ্যাপ (CRA) eslint-plugin-jsx-a11y প্লাগইন অন্তর্ভুক্ত করে।
CRA দ্বারা প্রদত্ত পূর্ব-কনফিগার করা লিন্টিং সক্ষম করতে:
- আপনার কোড এডিটরের জন্য ESLint প্লাগইন ইনস্টল করুন।
- আপনার প্রকল্পে একটি
.eslintrc.jsonফাইল যোগ করুন
{
"extends": "react-app"
}
একবার কনফিগার করা হলে, সাধারণ অ্যাক্সেসিবিলিটি সমস্যাগুলি পাওয়া যাবে৷
আরও অ্যাক্সেসযোগ্যতার নিয়মগুলি পরীক্ষা করতে, প্লাগইনের প্রস্তাবিত সমস্ত নিয়মগুলি অন্তর্ভুক্ত করতে .eslintrc.json পরিবর্তন করুন:
{
"extends": ["react-app", "plugin:jsx-a11y/recommended"]
}
নিয়মের আরও কঠোর উপসেটের জন্য, কঠোর মোডে স্যুইচ করুন:
{
"extends": ["react-app", "plugin:jsx-a11y/strict"]
}
প্রকল্প ডকুমেন্টেশন প্রস্তাবিত এবং কঠোর মোড মধ্যে পার্থক্য তথ্য প্রদান করে.
রিঅ্যাক্ট-এক্স ব্যবহার করুন
eslint-plugin-jsx-a11y আপনাকে আপনার JSX-এ অ্যাক্সেসিবিলিটি সমস্যা খুঁজে পেতে সাহায্য করতে পারে, কিন্তু এটি চূড়ান্ত HTML আউটপুট পরীক্ষা করে না। react-axe লাইব্রেরি Deque Labs দ্বারা axe-core টেস্টিং টুলের চারপাশে একটি React wrapper যোগ করে পরীক্ষা পরিচালনা করে।
- বিকাশ নির্ভরতা হিসাবে লাইব্রেরি ইনস্টল করুন:
bash npm install --save-dev react-axe -
index.jsএ মডিউলটি শুরু করুন :js if (process.env.NODE_ENV !== 'production') { import('react-axe').then(axe => { axe.default(React, ReactDOM, 1000); ReactDOM.render(<App />, document.getElementById('root')); }); } else { ReactDOM.render(<App />, document.getElementById('root')); }
একটি ডায়নামিক ইম্পোর্ট লাইব্রেরি লোড করে, যতক্ষণ না এটি প্রোডাকশনে না থাকে, রুট App কম্পোনেন্ট রেন্ডারিং এবং বুট করার আগে। এটি নিশ্চিত করে যে এটি অপ্রয়োজনীয় হলে এটি চূড়ান্ত উত্পাদন বান্ডিলে অন্তর্ভুক্ত নয়।
আপনি যখন বিকাশের সময় অ্যাপ্লিকেশনটি চালান, তখন সমস্যাগুলি সরাসরি Chrome DevTools কনসোলে প্রদর্শিত হয়৷
প্রতিটি লঙ্ঘনের জন্য একটি তীব্রতা স্তরও বরাদ্দ করা হয়। এই স্তরগুলি হল:
- নাবালক
- পরিমিত
- সিরিয়াস
- সমালোচনামূলক
উপসংহার
আপনি আপনার প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করার সময় সমস্যাগুলি ধরতে আপনার কর্মপ্রবাহের প্রথম দিকে অ্যাক্সেসিবিলিটি অডিটগুলি অন্তর্ভুক্ত করুন৷ আপনার লিন্টিং ওয়ার্কফ্লোতে অ্যাক্সেসিবিলিটি চেক যোগ করতে eslint-plugin-jsx-a11y ৷ CRA ইতিমধ্যেই এটি অন্তর্ভুক্ত করে, কিন্তু আপনি প্রস্তাবিত বা কঠোর মোডে স্যুইচ করতে পারেন।
স্থানীয় ডেভেলপমেন্ট টেস্টিং ছাড়াও, চূড়ান্ত রেন্ডার করা DOM-এ যেকোনো সমস্যা ধরার জন্য আপনার অ্যাপ্লিকেশানে react-axe অন্তর্ভুক্ত করুন। এটি আপনার উত্পাদন বান্ডিলে অন্তর্ভুক্ত করবেন না।
আপনার প্রতিক্রিয়া সাইট প্রগতিশীল হতে অ্যাক্সেসযোগ্য হতে হবে. আপনি আপনার অ্যাপ্লিকেশনটিকে উত্পাদনে ঠেলে দেওয়ার আগে কোনও সমস্যা খুঁজে পেতে এবং সমাধান করতে বিকাশের সময় অ্যাক্সেসযোগ্যতার জন্য অডিট করুন।
react-axe হল একটি লাইব্রেরি যা একটি React অ্যাপ্লিকেশন অডিট করে এবং Chrome DevTools কনসোলে যেকোন অ্যাক্সেসিবিলিটি সমস্যা লগ করে। এটি কোনো সমস্যা এবং তাদের তীব্রতা চিহ্নিত করতে ওপেন সোর্স এক্স টেস্টিং লাইব্রেরি ব্যবহার করে।
eslint-plugin-jsx-a11y হল একটি ESLint প্লাগইন যা সরাসরি আপনার JSX-এ বেশ কিছু অ্যাক্সেসিবিলিটি নিয়ম শনাক্ত করে এবং প্রয়োগ করে। চূড়ান্ত রেন্ডার করা DOM পরীক্ষা করে এমন একটি টুলের সাথে সংমিশ্রণে ব্যবহার করা হলে, যেমন react-axe , আপনি আপনার সাইটে যেকোনো অ্যাক্সেসিবিলিটি উদ্বেগ খুঁজে পেতে এবং ঠিক করতে পারেন।
কেন এই দরকারী?
প্রতিবন্ধী সহ সকল ব্যবহারকারীর কাছে অ্যাক্সেসযোগ্য ওয়েবসাইট তৈরি করা অত্যন্ত গুরুত্বপূর্ণ। একটি অ্যাক্সেসিবিলিটি অডিট লাইব্রেরি ব্যবহার করে, যেমন react-axe এবং eslint-plugin-jsx-a11y , আপনি আপনার অ্যাপ্লিকেশন তৈরি করার সময় অ্যাক্সেসিবিলিটি সমস্যাগুলি খুঁজে পেতে পারেন, যাতে আপনি উৎপাদনে যাওয়ার আগে সেগুলি ঠিক করতে পারেন৷
eslint-plugin-jsx-a11y ব্যবহার করুন
প্রতিক্রিয়া ইতিমধ্যে JSX সিনট্যাক্সের মধ্যে অ্যাক্সেসযোগ্য HTML উপাদানগুলি লেখার সমর্থন করে৷ উদাহরণস্বরূপ, একটি প্রতিক্রিয়া উপাদানের মধ্যে একটি ফর্ম উপাদানে একটি লেবেল যোগ করতে for এর পরিবর্তে htmlFor বৈশিষ্ট্যটি ব্যবহার করুন৷
<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>
প্রতিক্রিয়া অ্যাক্সেসিবিলিটি ডকুমেন্টেশন একটি প্রতিক্রিয়া উপাদানের মধ্যে অ্যাক্সেসযোগ্যতার উদ্বেগগুলি পরিচালনা করার সূক্ষ্মতাগুলিকে কভার করে। এই সমস্যাগুলি আরও সহজে চিহ্নিত করতে, ক্রিয়েট রিঅ্যাক্ট অ্যাপ (CRA) eslint-plugin-jsx-a11y প্লাগইন অন্তর্ভুক্ত করে।
CRA দ্বারা প্রদত্ত পূর্ব-কনফিগার করা লিন্টিং সক্ষম করতে:
- আপনার কোড এডিটরের জন্য ESLint প্লাগইন ইনস্টল করুন।
- আপনার প্রকল্পে একটি
.eslintrc.jsonফাইল যোগ করুন
{
"extends": "react-app"
}
একবার কনফিগার করা হলে, সাধারণ অ্যাক্সেসিবিলিটি সমস্যাগুলি পাওয়া যাবে৷
আরও অ্যাক্সেসযোগ্যতার নিয়মগুলি পরীক্ষা করতে, প্লাগইনের প্রস্তাবিত সমস্ত নিয়মগুলি অন্তর্ভুক্ত করতে .eslintrc.json পরিবর্তন করুন:
{
"extends": ["react-app", "plugin:jsx-a11y/recommended"]
}
নিয়মের আরও কঠোর উপসেটের জন্য, কঠোর মোডে স্যুইচ করুন:
{
"extends": ["react-app", "plugin:jsx-a11y/strict"]
}
প্রকল্প ডকুমেন্টেশন প্রস্তাবিত এবং কঠোর মোড মধ্যে পার্থক্য তথ্য প্রদান করে.
রিঅ্যাক্ট-এক্স ব্যবহার করুন
eslint-plugin-jsx-a11y আপনার JSX-এ অ্যাক্সেসিবিলিটি সমস্যা খুঁজে পেতে আপনাকে সাহায্য করতে পারে, কিন্তু এটি চূড়ান্ত HTML আউটপুট পরীক্ষা করে না। react-axe লাইব্রেরি Deque Labs দ্বারা axe-core টেস্টিং টুলের চারপাশে একটি React wrapper যোগ করে পরীক্ষা পরিচালনা করে।
- বিকাশ নির্ভরতা হিসাবে লাইব্রেরি ইনস্টল করুন:
bash npm install --save-dev react-axe -
index.jsএ মডিউলটি শুরু করুন :js if (process.env.NODE_ENV !== 'production') { import('react-axe').then(axe => { axe.default(React, ReactDOM, 1000); ReactDOM.render(<App />, document.getElementById('root')); }); } else { ReactDOM.render(<App />, document.getElementById('root')); }
একটি ডায়নামিক ইম্পোর্ট লাইব্রেরি লোড করে, যতক্ষণ না এটি প্রোডাকশনে না থাকে, রুট App কম্পোনেন্ট রেন্ডারিং এবং বুট করার আগে। এটি নিশ্চিত করে যে এটি অপ্রয়োজনীয় হলে এটি চূড়ান্ত উত্পাদন বান্ডিলে অন্তর্ভুক্ত নয়।
আপনি যখন বিকাশের সময় অ্যাপ্লিকেশনটি চালান, তখন সমস্যাগুলি সরাসরি Chrome DevTools কনসোলে প্রদর্শিত হয়৷
প্রতিটি লঙ্ঘনের জন্য একটি তীব্রতা স্তরও বরাদ্দ করা হয়। এই স্তরগুলি হল:
- নাবালক
- পরিমিত
- সিরিয়াস
- সমালোচনামূলক
উপসংহার
আপনি আপনার প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করার সময় সমস্যাগুলি ধরতে আপনার কর্মপ্রবাহের প্রথম দিকে অ্যাক্সেসিবিলিটি অডিটগুলি অন্তর্ভুক্ত করুন৷ আপনার লিন্টিং ওয়ার্কফ্লোতে অ্যাক্সেসিবিলিটি চেক যোগ করতে eslint-plugin-jsx-a11y ৷ CRA ইতিমধ্যেই এটি অন্তর্ভুক্ত করে, কিন্তু আপনি প্রস্তাবিত বা কঠোর মোডে স্যুইচ করতে পারেন।
স্থানীয় ডেভেলপমেন্ট টেস্টিং ছাড়াও, চূড়ান্ত রেন্ডার করা DOM-এ যেকোনো সমস্যা ধরার জন্য আপনার অ্যাপ্লিকেশানে react-axe অন্তর্ভুক্ত করুন। এটি আপনার উত্পাদন বান্ডিলে অন্তর্ভুক্ত করবেন না।
আপনার প্রতিক্রিয়া সাইট প্রগতিশীল হতে অ্যাক্সেসযোগ্য হতে হবে. আপনি আপনার অ্যাপ্লিকেশনটিকে উত্পাদনে ঠেলে দেওয়ার আগে কোনও সমস্যা খুঁজে পেতে এবং সমাধান করতে বিকাশের সময় অ্যাক্সেসযোগ্যতার জন্য অডিট করুন।
react-axe হল একটি লাইব্রেরি যা একটি React অ্যাপ্লিকেশন অডিট করে এবং Chrome DevTools কনসোলে যেকোন অ্যাক্সেসিবিলিটি সমস্যা লগ করে। এটি কোনো সমস্যা এবং তাদের তীব্রতা চিহ্নিত করতে ওপেন সোর্স এক্স টেস্টিং লাইব্রেরি ব্যবহার করে।
eslint-plugin-jsx-a11y হল একটি ESLint প্লাগইন যা সরাসরি আপনার JSX-এ বেশ কিছু অ্যাক্সেসিবিলিটি নিয়ম শনাক্ত করে এবং প্রয়োগ করে। চূড়ান্ত রেন্ডার করা DOM পরীক্ষা করে এমন একটি টুলের সাথে সংমিশ্রণে ব্যবহার করা হলে, যেমন react-axe , আপনি আপনার সাইটে যেকোনো অ্যাক্সেসিবিলিটি উদ্বেগ খুঁজে পেতে এবং ঠিক করতে পারেন।
কেন এই দরকারী?
প্রতিবন্ধী সহ সকল ব্যবহারকারীর কাছে অ্যাক্সেসযোগ্য ওয়েবসাইট তৈরি করা অত্যন্ত গুরুত্বপূর্ণ। একটি অ্যাক্সেসিবিলিটি অডিট লাইব্রেরি ব্যবহার করে, যেমন react-axe এবং eslint-plugin-jsx-a11y , আপনি আপনার অ্যাপ্লিকেশন তৈরি করার সময় অ্যাক্সেসিবিলিটি সমস্যাগুলি খুঁজে পেতে পারেন, যাতে আপনি উৎপাদনে যাওয়ার আগে সেগুলি ঠিক করতে পারেন৷
eslint-plugin-jsx-a11y ব্যবহার করুন
প্রতিক্রিয়া ইতিমধ্যে JSX সিনট্যাক্সের মধ্যে অ্যাক্সেসযোগ্য HTML উপাদানগুলি লেখার সমর্থন করে৷ উদাহরণস্বরূপ, একটি প্রতিক্রিয়া উপাদানের মধ্যে একটি ফর্ম উপাদানে একটি লেবেল যোগ করতে for এর পরিবর্তে htmlFor বৈশিষ্ট্যটি ব্যবহার করুন৷
<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>
প্রতিক্রিয়া অ্যাক্সেসিবিলিটি ডকুমেন্টেশন একটি প্রতিক্রিয়া উপাদানের মধ্যে অ্যাক্সেসযোগ্যতার উদ্বেগগুলি পরিচালনা করার সূক্ষ্মতাগুলিকে কভার করে। এই সমস্যাগুলি আরও সহজে চিহ্নিত করতে, ক্রিয়েট রিঅ্যাক্ট অ্যাপ (CRA) eslint-plugin-jsx-a11y প্লাগইন অন্তর্ভুক্ত করে।
CRA দ্বারা প্রদত্ত পূর্ব-কনফিগার করা লিন্টিং সক্ষম করতে:
- আপনার কোড এডিটরের জন্য ESLint প্লাগইন ইনস্টল করুন।
- আপনার প্রকল্পে একটি
.eslintrc.jsonফাইল যোগ করুন
{
"extends": "react-app"
}
একবার কনফিগার করা হলে, সাধারণ অ্যাক্সেসিবিলিটি সমস্যাগুলি পাওয়া যাবে৷
আরও অ্যাক্সেসযোগ্যতার নিয়মগুলি পরীক্ষা করতে, প্লাগইনের প্রস্তাবিত সমস্ত নিয়মগুলি অন্তর্ভুক্ত করতে .eslintrc.json পরিবর্তন করুন:
{
"extends": ["react-app", "plugin:jsx-a11y/recommended"]
}
নিয়মের আরও কঠোর উপসেটের জন্য, কঠোর মোডে স্যুইচ করুন:
{
"extends": ["react-app", "plugin:jsx-a11y/strict"]
}
প্রকল্প ডকুমেন্টেশন প্রস্তাবিত এবং কঠোর মোড মধ্যে পার্থক্য তথ্য প্রদান করে.
রিঅ্যাক্ট-এক্স ব্যবহার করুন
eslint-plugin-jsx-a11y আপনাকে আপনার JSX-এ অ্যাক্সেসিবিলিটি সমস্যা খুঁজে পেতে সাহায্য করতে পারে, কিন্তু এটি চূড়ান্ত HTML আউটপুট পরীক্ষা করে না। react-axe লাইব্রেরি Deque Labs দ্বারা axe-core টেস্টিং টুলের চারপাশে একটি React wrapper যোগ করে পরীক্ষা পরিচালনা করে।
- বিকাশ নির্ভরতা হিসাবে লাইব্রেরি ইনস্টল করুন:
bash npm install --save-dev react-axe -
index.jsএ মডিউলটি শুরু করুন :js if (process.env.NODE_ENV !== 'production') { import('react-axe').then(axe => { axe.default(React, ReactDOM, 1000); ReactDOM.render(<App />, document.getElementById('root')); }); } else { ReactDOM.render(<App />, document.getElementById('root')); }
একটি ডায়নামিক ইম্পোর্ট লাইব্রেরি লোড করে, যতক্ষণ না এটি প্রোডাকশনে না থাকে, রুট App কম্পোনেন্ট রেন্ডারিং এবং বুট করার আগে। এটি নিশ্চিত করে যে এটি অপ্রয়োজনীয় হলে এটি চূড়ান্ত উত্পাদন বান্ডিলে অন্তর্ভুক্ত নয়।
আপনি যখন বিকাশের সময় অ্যাপ্লিকেশনটি চালান, তখন সমস্যাগুলি সরাসরি Chrome DevTools কনসোলে প্রদর্শিত হয়৷
প্রতিটি লঙ্ঘনের জন্য একটি তীব্রতা স্তরও বরাদ্দ করা হয়। এই স্তরগুলি হল:
- নাবালক
- পরিমিত
- সিরিয়াস
- সমালোচনামূলক
উপসংহার
আপনি আপনার প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করার সময় সমস্যাগুলি ধরতে আপনার কর্মপ্রবাহের প্রথম দিকে অ্যাক্সেসিবিলিটি অডিটগুলি অন্তর্ভুক্ত করুন৷ আপনার লিন্টিং ওয়ার্কফ্লোতে অ্যাক্সেসিবিলিটি চেক যোগ করতে eslint-plugin-jsx-a11y ৷ CRA ইতিমধ্যেই এটি অন্তর্ভুক্ত করে, কিন্তু আপনি প্রস্তাবিত বা কঠোর মোডে স্যুইচ করতে পারেন।
স্থানীয় ডেভেলপমেন্ট টেস্টিং ছাড়াও, চূড়ান্ত রেন্ডার করা DOM-এ যেকোনো সমস্যা ধরার জন্য আপনার অ্যাপ্লিকেশানে react-axe অন্তর্ভুক্ত করুন। এটি আপনার উত্পাদন বান্ডিলে অন্তর্ভুক্ত করবেন না।