স্ক্রিন রিডারদের কাছে মিথ্যা কথা বললে কীভাবে সহজলভ্যতা নিরাময় হয়, যখন এতে লবণ ঘষে না!
ARIA কি?
ARIA ওয়েব লেখকদের একটি বিকল্প বাস্তবতা তৈরি করতে দেয়, শুধুমাত্র স্ক্রিন রিডাররা দেখেন 🤥
কখনও কখনও ওয়েব সামগ্রীতে কী ঘটছে সে সম্পর্কে পাঠকদের কাছে সত্য বা এমনকি সরাসরি "মিথ্যা" প্রসারিত করা প্রয়োজন। উদাহরণস্বরূপ, "ফোকাস সত্যিই এখানে আছে!" অথবা "এটি সত্যিই একটি স্লাইডার!"। এটি আপনার ওয়ার্কবেঞ্চে সরঞ্জাম এবং উইজেটের উপরে জাদুকরী স্টিকি নোট যুক্ত করার মতো। এই জাদুকরী স্টিকি নোটগুলি তাদের উপর যা লেখা আছে তা সবাইকে বিশ্বাস করে।
যখনই একটি জাদুকরী স্টিকি নোট বিদ্যমান থাকে, এটি হয় প্রতিটি টুল কি বা টুল সম্পর্কে কিছু সম্পর্কে আমাদের বিশ্বাসকে অগ্রাহ্য করে। উদাহরণ: "এই জিনিসটি এখানে একটি আঠালো বন্দুক!"। যদিও এটি এখনও ওয়ার্কবেঞ্চে বসে থাকা একটি খালি নীল বাক্স, যাদুকরী স্টিকি নোটটি আমাদের দেখতে দেবে এটি একটি আঠালো বন্দুক। আমরা যোগ করতে পারি, "এবং এটি 30% পূর্ণ!"। স্ক্রিন রিডার এখন রিপোর্ট করবে যে সেখানে একটি 30% সম্পূর্ণ আঠালো বন্দুক রয়েছে।
এর সমতুল্য ওয়েব হল একটি প্লেইন বক্স এলিমেন্ট (একটি div) এর ভিতরে একটি চিত্র সহ, এবং ARIA ব্যবহার করে বলতে হবে এটি 100 এর মধ্যে 30 মানের একটি স্লাইডার।
ARIA কি নয়?
ARIA একটি ওয়েব পৃষ্ঠার চেহারা, বা মাউস বা কীবোর্ড ব্যবহারকারীর আচরণকে প্রভাবিত করে না। শুধুমাত্র সহায়ক প্রযুক্তির ব্যবহারকারীরাই ARIA থেকে কোনো পার্থক্য লক্ষ্য করবেন। ওয়েব ডেভেলপাররা যেকোন ব্যবহারকারীকে প্রভাবিত না করেই যেকোন নির্বিচারে ARIA যোগ করতে পারে যারা সহায়ক প্রযুক্তি চালাচ্ছে না।
আপনি এটি সঠিকভাবে পড়েছেন: ARIA আসলে কীবোর্ড ফোকাস বা ট্যাব অর্ডারে কিছু করে না। যে সব HTML করা হয়, কখনও কখনও জাভাস্ক্রিপ্ট বিট সঙ্গে tweaked.
ARIA কিভাবে কাজ করে?
প্রতিটি উপাদান সম্পর্কে তথ্যের জন্য ব্রাউজারগুলিকে একটি স্ক্রিন রিডার বা অন্যান্য সহায়ক প্রযুক্তি দ্বারা জিজ্ঞাসা করা হয়। যখন ARIA একটি উপাদানে উপস্থিত থাকে, তখন ব্রাউজার তথ্য গ্রহণ করে এবং সেই উপাদান সম্পর্কে স্ক্রিন রিডারকে যা বলে তা পরিবর্তন করে।
কেন ARIA?
কেন আমরা কখনও আমাদের ব্যবহারকারীদের মিথ্যা বলতে চাই!?
ধরা যাক স্থানীয় ওয়েব স্টোর আমাদের প্রয়োজনীয় সমস্ত উইজেট বিক্রি করে না। কিন্তু, আমরা ম্যাকগাইভার , অভিশাপ। আমরা অন্য উইজেট থেকে আমাদের নিজস্ব উইজেট উদ্ভাবন করতে পারি! FWIW, ম্যাকগাইভারের সাতটি সর্বাধিক ব্যবহৃত জিনিস হল সুইস আর্মি ছুরি, গাম, জুতার স্ট্রিং, ম্যাচ, পেপার ক্লিপ, জন্মদিনের মোমবাতি এবং ডাক্ট টেপ। সে বোমা এবং অন্যান্য জিনিস তৈরি করতে ব্যবহার করে যেগুলি কেবল চারপাশে পড়ে থাকে না। এটি একটি ওয়েব লেখকের মতো যাকে একটি মেনু বার করতে হবে। মেনু বারগুলি এতই দরকারী যে আপনি ভাববেন যে সেগুলি HTML এর অংশ হবে, কিন্তু তারা তা নয়৷ আচ্ছা ভালো! আপনি কি ভাবেননি যে লেখকরা লিঙ্ক এবং বোতাম দিয়ে খুশি হবেন? সুতরাং লেখক তাদের পছন্দের সরঞ্জামগুলি ব্যবহার করে একত্রিত করবেন: divs, চিত্র, শৈলী, ক্লিক হ্যান্ডলার, কীপ্রেস হ্যান্ডলার, থুতু এবং ARIA।
কখনও কখনও, ARIA সর্বাধিক ব্যবহার করার পরিবর্তে, আমরা এটিকে শুধুমাত্র একটি বর্ধিতকরণ হিসাবে ব্যবহার করি। এটি কিছু HTML এ সামান্য ARIA ছিটিয়ে দেওয়া কার্যকর হতে পারে যা ইতিমধ্যেই মূলত কাজ করে। উদাহরণস্বরূপ, আমরা কিছু ভুল ইনপুটের সাথে সম্পর্কিত একটি ত্রুটি বার্তা সতর্কতার দিকে নির্দেশ করার জন্য একটি ফর্ম নিয়ন্ত্রণ চাই। অথবা আমরা ইঙ্গিত করতে চাই যে একটি পাঠ্যবক্স অনুসন্ধানের জন্য। এই সামান্য পরিবর্তনগুলি সাধারণ ওয়েবসাইটগুলিকে স্ক্রিন রিডারের সাথে আরও ব্যবহারযোগ্য করে তুলতে পারে।
মেনু বারের উদাহরণ
মাউস ক্লিকার মানুষ সমর্থন
আসুন একসাথে একটি মেনু বার তৈরি করি। আমরা divs নামক জেনেরিক বক্স এলিমেন্টে একগুচ্ছ আইটেম দেখাই। যে কোনো সময় আমাদের ব্যবহারকারী একটি div-এ ক্লিক করে, এটি সংশ্লিষ্ট কমান্ডটি কার্যকর করে। দুর্দান্ত, এটি মাউস ক্লিকার লোকেদের জন্য কাজ করে!
পরবর্তী আমরা এটা সুন্দর চেহারা. আমরা সিএসএস ব্যবহার করি, যেমন শৈলী, জিনিসগুলিকে সুন্দরভাবে লাইন আপ করি এবং তাদের চারপাশে ভিজ্যুয়াল আউটলাইন রাখি। আমরা এটিকে অন্যান্য মেনু বারের মতো যথেষ্ট দেখাই যা দর্শনার্থীরা স্বজ্ঞাতভাবে জানে যে এটি একটি মেনু বার এবং এটি কীভাবে ব্যবহার করতে হয়। আমাদের মেনু বার এমনকি মাউস শেষ হয়ে যাওয়া যে কোনো আইটেমে একটি ভিন্ন পটভূমির রঙ ব্যবহার করে, ব্যবহারকারীকে কিছু সহায়ক ভিজ্যুয়াল প্রতিক্রিয়া দেয়।
কিছু মেনু আইটেম বাবা. তারা শিশু সাবমেনুস তৈরি করে। যখনই ব্যবহারকারী এইগুলির একটিতে হোভার করে তখনই আমরা একটি অ্যানিমেশন শুরু করি যা চাইল্ড সাবমেনুকে স্লাইড করে দেয়।
এটি, অবশ্যই, এটি সবই বেশ দুর্গম, যেমন ওয়েবে অনেক জিনিসের জন্য স্বাভাবিক ঘটনা, মূলত কারণ এইচটিএমএল স্ট্যান্ডার্ড উইজার্ডগুলি ওয়েব লেখকের প্রয়োজনীয় সমস্ত কিছু যোগ করেনি৷ এবং এমনকি যদি তারা করে, ওয়েব লেখকরা সর্বদা তাদের নিজস্ব বিশেষ সংস্করণ উদ্ভাবন করতে চান।
আমাদের মেনু বার কীবোর্ড অ্যাক্সেসযোগ্য করে তুলছে
অ্যাক্সেসযোগ্যতার দিকে প্রথম পদক্ষেপ হিসাবে, আসুন কীবোর্ড অ্যাক্সেসযোগ্যতা যুক্ত করি। এই অংশটি শুধুমাত্র HTML ব্যবহার করে, আর ARIA নয়। মনে রাখবেন যে ARIA সহায়ক প্রযুক্তি ছাড়া ব্যবহারকারীদের জন্য চেহারা, মাউস বা কীবোর্ডের মতো মূল দিকগুলিকে প্রভাবিত করে না।
একটি ওয়েব পেজ যেমন মাউসকে সাড়া দিতে পারে, তেমনি এটি কীবোর্ডেও সাড়া দিতে পারে। আমাদের জাভাস্ক্রিপ্ট সমস্ত কীস্ট্রোকগুলি শুনবে এবং সিদ্ধান্ত নেবে যে কী প্রেসটি কার্যকর কিনা। যদি তা না হয়, তবে এটি একটি মাছের মতো পৃষ্ঠায় ফিরিয়ে দেয় যা খাওয়ার জন্য খুব ছোট। আমাদের নিয়মগুলি এমন কিছু:
- ব্যবহারকারী যদি একটি তীর কী টিপে, আসুন আমাদের নিজস্ব অভ্যন্তরীণ মেনু বারের ব্লুপ্রিন্টগুলি দেখুন এবং নতুন সক্রিয় মেনু আইটেমটি কী হওয়া উচিত তা নির্ধারণ করি। আমরা যেকোন বর্তমান হাইলাইটগুলি সাফ করব এবং নতুন মেনু আইটেমটি হাইলাইট করব যাতে দৃষ্টিগ্রাহ্য ব্যবহারকারী চাক্ষুষভাবে জানতে পারে যে তারা কোথায়। ব্রাউজারকে স্বাভাবিক ক্রিয়া সম্পাদন করা থেকে বিরত রাখতে ওয়েব পৃষ্ঠাটিকে
event.preventDefault()কল করা উচিত (এই ক্ষেত্রে পৃষ্ঠাটি স্ক্রোল করা)। - ব্যবহারকারী যদি এন্টার কী টিপে, তাহলে আমরা এটিকে একটি ক্লিকের মতোই ব্যবহার করতে পারি এবং উপযুক্ত ক্রিয়া সম্পাদন করতে পারি (অথবা অন্য মেনু খুলতেও)।
- ব্যবহারকারী যদি একটি কী চাপেন যা অন্য কিছু করা উচিত, তবে তা খাবেন না! প্রকৃতির উদ্দেশ্য হিসাবে এটিকে পৃষ্ঠায় ফিরিয়ে দিন। উদাহরণস্বরূপ, আমাদের মেনু বারে ট্যাব কী দরকার নেই, তাই এটিকে পিছনে ফেলে দিন! এটি ঠিক করা কঠিন, এবং লেখকরা প্রায়শই এটিকে বিভ্রান্ত করে। উদাহরণস্বরূপ, মেনু বারে তীর কীগুলির প্রয়োজন, কিন্তু Alt + তীর বা কমান্ড + তীর নয়। আপনার ব্রাউজার ট্যাবের ওয়েব ইতিহাসে পূর্ববর্তী/পরবর্তী পৃষ্ঠায় যাওয়ার জন্য এগুলি শর্টকাট। লেখক সতর্ক না হলে, মেনু বার সেগুলি খেয়ে ফেলবে। এই ধরনের বাগ অনেক ঘটে, এবং আমরা এখনও ARIA দিয়ে শুরু করিনি!
আমাদের মেনু বারে স্ক্রিন রিডার অ্যাক্সেস
আমাদের মেনু বারটি ডাক্ট টেপ এবং ডিভ দিয়ে তৈরি করা হয়েছিল। ফলস্বরূপ, একজন স্ক্রিন রিডারের কোন ধারণা নেই যে এটি কী। সক্রিয় আইটেমের জন্য পটভূমির রঙ শুধুমাত্র একটি রঙ। মেনু আইটেম divs কোনো বিশেষ অর্থ ছাড়াই শুধু সাধারণ বস্তু। ফলস্বরূপ, আমাদের মেনু বারের একজন ব্যবহারকারী কোন কী চাপতে হবে বা তারা কোন আইটেমটিতে আছে সে সম্পর্কে কোনো নির্দেশনা পান না।
কিন্তু এটা কোন ন্যায্য! মেনু বার দেখা ব্যবহারকারীর জন্য ঠিক কাজ করে।
উদ্ধারের জন্য ARIA. ARIA আমাদের স্ক্রিন রিডারের কাছে ভান করতে দেয় যে ফোকাস একটি মেনু বারে রয়েছে। লেখক সবকিছু ঠিকঠাক করলে, আমাদের কাস্টম মেনু বারটি স্ক্রিন রিডারের দিকে তাকাবে যেমন ডেস্কটপ অ্যাপ্লিকেশনের মেনু বারের মতো।
আমাদের প্রথম, ahem, ARIA মিথ্যা, aria-activedescendant অ্যাট্রিবিউট ব্যবহার করা এবং এটিকে বর্তমানে সক্রিয় মেনুআইটেমের আইডিতে সেট করা, যখনই এটি পরিবর্তিত হয় তখন এটি আপডেট করার বিষয়ে সতর্কতা অবলম্বন করা। উদাহরণস্বরূপ, aria-activedescendant="settings-menuitem" । এই সামান্য সাদা মিথ্যার কারণে স্ক্রিন রিডার আমাদের ARIA সক্রিয় আইটেমটিকে ফোকাস হিসাবে বিবেচনা করে, যা উচ্চস্বরে পড়া হয় বা ব্রেইল ডিসপ্লেতে দেখানো হয়।
বংশধর শব্দটি এই সত্যকে বোঝায় যে একটি আইটেম অন্যটির ভিতরে কোথাও রয়েছে। বিপরীত শব্দটি পূর্বপুরুষ, যার অর্থ হল একটি আইটেম পূর্বপুরুষদের দ্বারা ধারণ করে। পরবর্তী কন্টেইনার আপ/ডাউনের জন্য, এগুলি আরও নির্দিষ্ট শব্দ পিতা/মাতা/সন্তান ব্যবহার করতে পারে। উদাহরণস্বরূপ, একটি অনুচ্ছেদ সহ একটি নথি কল্পনা করুন যার ভিতরে একটি লিঙ্ক রয়েছে। লিঙ্কের প্যারেন্ট একটি অনুচ্ছেদ, কিন্তু এটি একটি পূর্বপুরুষ হিসাবে দস্তাবেজ আছে. বিপরীতভাবে, নথিতে অনেকগুলি অনুচ্ছেদ শিশু থাকতে পারে, প্রতিটি লিঙ্ক সহ। লিঙ্কগুলো সব দাদা-দাদির নথির বংশধর।
aria-activedescendant এ ফেরত যান। ফোকাস করা মেনু বার থেকে একটি নির্দিষ্ট মেনু আইটেমের দিকে নির্দেশ করার জন্য এটি ব্যবহার করে, স্ক্রিন রিডার এখন জানে যে ব্যবহারকারী কোথায় সরে গেছে, কিন্তু বস্তু সম্পর্কে আর কিছুই নয়। যাইহোক এই div জিনিস কি? এখানেই রোল অ্যাট্রিবিউট আসে। আমরা সম্পূর্ণ জিনিসের জন্য ধারণ করা উপাদানটিতে role="menubar" ব্যবহার করি, তারপর আমরা আইটেমগুলির গ্রুপে role="menu" এবং … drumroll … পৃথক মেনুতে role="menuitem" ব্যবহার করি আইটেম
এবং যদি মেনুইটেম একটি শিশু মেনু হতে পারে? ব্যবহারকারীর কি তা জানতে হবে? একজন দর্শনীয় ব্যবহারকারীর জন্য, মেনুর শেষে একটি ত্রিভুজের একটি ছোট ছবি থাকতে পারে, কিন্তু স্ক্রিন রিডার অন্তত এই সময়ে কীভাবে স্বয়ংক্রিয়ভাবে ছবিগুলি পড়তে হয় তা জানে না৷ আমরা প্রতিটি প্রসারণযোগ্য মেনুতে aria-expanded="false" যোগ করতে পারি যে 1) এমন কিছু আছে যা প্রসারিত করা যেতে পারে, এবং 2) এটি বর্তমানে প্রসারিত নয়। একটি অতিরিক্ত স্পর্শ হিসাবে লেখককে img ত্রিভুজটিতে role="none" লিখতে হবে তা নির্দেশ করার জন্য এটি শুধুমাত্র প্রিটিফিকেশনের উদ্দেশ্যে। এটি স্ক্রিন রিডারকে ইমেজ সম্পর্কে এমন কিছু বলতে বাধা দেয় যা সর্বোত্তমভাবে অপ্রয়োজনীয় এবং সম্ভবত বিরক্তিকর হতে পারে।
বাগ মোকাবেলা
কীবোর্ড বাগ (HTML!)
যদিও কীবোর্ড অ্যাক্সেস মূল এইচটিএমএল এর একটি অংশ, লেখকরা এটিকে সব সময় এলোমেলো করে ফেলেন, কারণ তারা কীবোর্ড নেভিগেশন এত বেশি ব্যবহার করেন না, বা সঠিক হওয়ার জন্য অনেক সূক্ষ্মতা রয়েছে।
বাগগুলির উদাহরণ:
- একটি চেকবক্স টগল করতে স্পেসবার ব্যবহার করে, কিন্তু লেখক
preventDefault()কল করতে ভুলে গেছেন। এখন স্পেসবার চেকবক্স এবং পেজ ডাউন উভয়ই টগল করবে, যা স্পেসবারের জন্য ডিফল্ট ব্রাউজার আচরণ। - একটি ARIA মডেল ডায়ালগ এর ভিতরে ট্যাব নেভিগেশন আটকাতে চায়, এবং লেখক ব্রাউজারে কন্ট্রোল + ট্যাবকে বিশেষভাবে অনুমতি দিতে ভুলে গেছেন। এখন, কন্ট্রোল + ট্যাব কেবল তাদের ডায়ালগের মধ্যে নেভিগেট করে, এবং ব্রাউজারে ট্যাবগুলিকে যেমনটি করা উচিত তেমনভাবে স্যুইচ করে না। উঃ
- একজন লেখক একটি নির্বাচন তালিকা তৈরি করেন, এবং উপরে/নিচে প্রয়োগ করেন, কিন্তু হোম/এন্ড/পেজআপ/পেজডাউন বা প্রথম অক্ষর নেভিগেশন বাস্তবায়ন করেন না।
লেখক পরিচিত নিদর্শন অনুসরণ করা উচিত. আরও তথ্যের জন্য সম্পদ বিভাগ দেখুন।
খাঁটি কীবোর্ড অ্যাক্সেসের সমস্যাগুলির জন্য, স্ক্রিন রিডার ছাড়া বা ভার্চুয়াল ব্রাউজার মোড বন্ধ করেও চেষ্টা করা দরকারী। কীবোর্ড বাগগুলি আবিষ্কার করার জন্য সাধারণত স্ক্রীন রিডারের প্রয়োজন হয় না, এবং কীবোর্ড অ্যাক্সেস আসলে HTML দিয়ে প্রয়োগ করা হয়, ARIA নয়। সর্বোপরি, ARIA কীবোর্ড বা মাউসের আচরণের মতো মৌলিক জিনিসগুলিকে প্রভাবিত করে না, এটি শুধুমাত্র স্ক্রিন রিডারের কাছেই থাকে যে ওয়েব পৃষ্ঠায় কী আছে, বর্তমানে কী ফোকাস করা হয়েছে ইত্যাদি।
কীবোর্ড বাগগুলি প্রায় সবসময়ই ওয়েব সামগ্রীতে একটি বাগ, বিশেষ করে তাদের HTML এবং JavaScript-এ, ARIA-তে নয়৷
ARIA বাগ: কেন এত বেশি আছে?
অনেক, অনেক জায়গা আছে যেখানে লেখকরা ARIA ভুল পেতে পারেন এবং প্রতিটিই হয় সম্পূর্ণ ভাঙন বা সূক্ষ্ম পার্থক্যের দিকে নিয়ে যাবে। সূক্ষ্মগুলি সম্ভবত আরও খারাপ, কারণ লেখক প্রকাশের আগে তাদের বেশিরভাগই ধরবেন না।
সর্বোপরি, লেখক একজন অভিজ্ঞ স্ক্রিন রিডার ব্যবহারকারী না হলে, ARIA-তে কিছু ভুল হতে চলেছে। আমাদের মেনু বারের উদাহরণে, লেখক মনে করতে পারেন যে "মেনুইটেম" সঠিক হলে "বিকল্প" ভূমিকাটি ব্যবহার করা হবে। তারা aria-expanded ব্যবহার করতে ভুলে যেতে পারে, সঠিক সময়ে aria-activedescendant সেট করতে এবং পরিষ্কার করতে ভুলে যেতে পারে, অথবা অন্যান্য মেনু সমন্বিত একটি মেনু বার রাখতে ভুলে যেতে পারে। এবং মেনু আইটেম গণনা সম্পর্কে কি? সাধারণত মেনু আইটেমগুলি স্ক্রিন রিডারদের দ্বারা "5 এর 3 আইটেম" এর মতো কিছু উপস্থাপন করা হয় যাতে ব্যবহারকারীরা জানেন যে তারা কোথায়। এটি সাধারণত ব্রাউজার দ্বারা স্বয়ংক্রিয়ভাবে গণনা করা হয়, তবে কিছু ক্ষেত্রে, এবং কিছু ব্রাউজারে - স্ক্রিন রিডার সংমিশ্রণে, ভুল সংখ্যা গণনা করা হতে পারে এবং লেখককে aria-posinset এবং aria-setsize দিয়ে এই সংখ্যাগুলিকে ওভাররাইড করতে হবে।
এবং এই শুধু মেনু বার. কত ধরণের উইজেট আছে তা চিন্তা করুন। আপনি যদি চান তাহলে ARIA স্পেক বা লেখার অনুশীলন দেখুন। প্রতিটি প্যাটার্নের জন্য, ARIA অপব্যবহার করা যেতে পারে এমন এক ডজন উপায় রয়েছে। ARIA লেখকদের উপর নির্ভর করে তারা কি করছে তা জানতে। বেশিরভাগ লেখক স্ক্রিন রিডার ব্যবহারকারী নন বলে কি সম্ভবত ভুল হতে পারে?
অন্য কথায়, প্রকৃত স্ক্রিন রিডার ব্যবহারকারীদের ARIA উইজেটগুলি পাঠানোর যোগ্য বলে বিবেচিত হওয়ার আগে চেষ্টা করা 100 শতাংশ প্রয়োজনীয়৷ খুব বেশী nuance আছে. কিছু অসম্পূর্ণ বাস্তবায়ন ছাড়াও অসংখ্য বাস্তবায়নের ব্যঙ্গের কারণে আদর্শভাবে সবকিছুই বিভিন্ন ব্রাউজার-স্ক্রিন রিডার কম্বিনেশন দিয়ে চেষ্টা করা হবে।
সারসংক্ষেপ
সংক্ষেপে, ARIA ম্যাজিক যেকোন কিছু এবং HTML যা বলে তা ওভাররাইড বা যোগ করতে ব্যবহার করা যেতে পারে। এটি অ্যাক্সেসিবিলিটি উপস্থাপনায় সামান্য সূক্ষ্ম পরিবর্তন করতে বা একটি সম্পূর্ণ অভিজ্ঞতা তৈরি করতে ব্যবহার করা যেতে পারে। এই কারণেই ARIA আমাদের বন্ধুত্বপূর্ণ স্থানীয় ওয়েব লেখকদের হাতে অবিশ্বাস্যভাবে শক্তিশালী এবং এখনও বিপজ্জনক, যারা সাধারণত স্ক্রিন রিডার ব্যবহার করেন না।
ARIA হল একটি সরল সত্য ওভাররাইড মার্কআপ স্তর। যখন একজন স্ক্রিন রিডার জিজ্ঞাসা করে কি ঘটছে, যদি ARIA থাকে, তারা আসল অন্তর্নিহিত সত্যের পরিবর্তে সত্যের ARIA সংস্করণ পায়।
সংযোজন 1: অতিরিক্ত সম্পদ
কীবোর্ড তথ্য এবং কোড উদাহরণ সহ হাইব্রিড রেফারেন্স
- W3C এর ARIA অথরিং প্র্যাকটিস : এটি প্রতিটি উদাহরণের গুরুত্বপূর্ণ কীবোর্ড নেভিগেশন বৈশিষ্ট্যগুলিকে নথিভুক্ত করে এবং কার্যকরী JS/CSS/ARIA কোড প্রদান করে৷ উদাহরণগুলি আজ কী কাজ করে তার উপর ফোকাস করা হয়েছে এবং মোবাইল কভার করে না।
সংযোজন 2: ARIA সবচেয়ে বেশি কিসের জন্য ব্যবহৃত হয়?
কারণ ARIA ছোট বা বড় সত্যকে প্রতিস্থাপন বা সম্পূরক করতে পারে, সাধারণত স্ক্রিন রিডারের যত্ন নেওয়ার জিনিস বলার জন্য দরকারী।
এখানে ARIA এর কিছু সাধারণ ব্যবহার রয়েছে।
- বিশেষ উইজেট যা HTML এ বিদ্যমান নেই, যেমন একটি মেনু বার, স্বয়ংসম্পূর্ণ, গাছ বা স্প্রেডশীট
- যে উইজেটগুলি HTML-এ বিদ্যমান, কিন্তু লেখক যেভাবেই হোক তাদের নিজস্ব আবিষ্কার করেছেন, সম্ভবত কারণ তাদের স্বাভাবিক উইজেটের আচরণ বা চেহারা পরিবর্তন করার প্রয়োজন ছিল। উদাহরণস্বরূপ, একটি HTML
<input type="range">উপাদান মূলত একটি স্লাইডার, কিন্তু লেখকরা এটিকে অন্যরকম দেখতে চান৷ বেশিরভাগ জিনিসের জন্য, CSS ব্যবহার করা যেতে পারে, কিন্তুinput type="range"এর জন্য, CSS বিশ্রী। একজন লেখক তাদের নিজস্ব স্লাইডার তৈরি করতে পারেন এবং বর্তমান মান কী তা বলতেaria-valuenowএর সাথে এটিতেrole="slider"ব্যবহার করতে পারেন। - লাইভ অঞ্চলগুলি স্ক্রীন রিডারদের বলে "পৃষ্ঠার এই এলাকায়, যেকোনও পরিবর্তন যা ব্যবহারকারীকে বলার যোগ্য।"
- ল্যান্ডমার্ক (এইচটিএমএল এখন সমতুল্য আছে)। এগুলি কিছুটা শিরোনামের মতো, যাতে তারা স্ক্রিন রিডার ব্যবহারকারীদের তারা যা চায় তা দ্রুত খুঁজে পেতে সহায়তা করে। যাইহোক, তারা আলাদা যে তারা সমগ্র সম্পর্কিত এলাকা ধারণ করে। পছন্দ করুন, "এই ধারকটি পৃষ্ঠার প্রধান এলাকা" এবং "এই ধারকটি এখানে একটি নেভিগেশন প্যানেল"।
সংযোজন 3: একটি অ্যাক্সেসিবিলিটি API কী?
একটি অ্যাক্সেসিবিলিটি API হল কীভাবে একজন স্ক্রিন রিডার বা অন্য AT জানে যে পৃষ্ঠায় কী আছে এবং এই মুহূর্তে কী ঘটছে। উদাহরণ MSAA, IA2, এবং UIA অন্তর্ভুক্ত। এবং যে শুধু উইন্ডোজ! একটি অ্যাক্সেসিবিলিটি API এর দুটি অংশ রয়েছে:
- বস্তুর একটি "বৃক্ষ" যা একটি ধারক শ্রেণিবিন্যাসের প্রতিনিধিত্ব করে। এগুলি রাশিয়ান নেস্টিং পুতুলের মতো, তবে প্রতিটি পুতুলে একাধিক অন্যান্য পুতুল থাকতে পারে। উদাহরণস্বরূপ, একটি নথিতে একগুচ্ছ অনুচ্ছেদ থাকতে পারে এবং একটি অনুচ্ছেদে পাঠ্য, ছবি, লিঙ্ক, বোল্ডফেস ইত্যাদি থাকতে পারে৷ অবজেক্ট ট্রির প্রতিটি আইটেমের ভূমিকা (আমি কী?), একটি নাম/লেবেলের মতো বৈশিষ্ট্য থাকতে পারে , একটি ব্যবহারকারী-প্রবেশ করা মান, একটি বিবরণ, পাশাপাশি বুলিয়ান অবস্থা যেমন ফোকাসযোগ্য, ফোকাস করা, প্রয়োজনীয়, চেক করা। ARIA এই বৈশিষ্ট্যগুলির যেকোনো একটিকে ওভাররাইড করতে পারে৷ স্ক্রিন রিডার ব্যবহারকারীকে ভার্চুয়াল বাফার মোডে নেভিগেট করতে সাহায্য করতে ট্রি ব্যবহার করে, যেমন "পরবর্তী শিরোনামে যান দয়া করে"।
- গাছের পরিবর্তনের বর্ণনা দিয়ে ঘটতে থাকা ইভেন্টগুলির একটি সিরিজ, যেমন "ফোকাস এখন এখানে আছে!"। স্ক্রিন রিডার ইভেন্ট ব্যবহার করে ব্যবহারকারীকে জানাতে কি ঘটেছে। যখন গুরুত্বপূর্ণ HTML বা ARIA মার্কআপ পরিবর্তিত হয়, তখন স্ক্রিন রিডারকে কিছু পরিবর্তন হয়েছে তা বলার জন্য একটি ইভেন্ট চালু করা হয়।
সাধারণত লেখকরা শুধু HTML ব্যবহার করেন, যা এই অ্যাক্সেসিবিলিটি API-তে সুন্দরভাবে ম্যাপ করে। যখন HTML যথেষ্ট না হয়, তখন ARIA ব্যবহার করা হয় এবং স্ক্রীন রিডারে অবজেক্ট ট্রি বা ইভেন্ট পাঠানোর আগে ব্রাউজার HTML শব্দার্থকে ওভাররাইড করে।