আরিয়া: বিষ নাকি প্রতিষেধক?

Aaron Leventhal

ARIA কি?

ARIA ওয়েব লেখকদের একটি বিকল্প বাস্তবতা তৈরি করতে দেয়, শুধুমাত্র স্ক্রিন রিডাররা দেখে।

কখনও কখনও ওয়েব সামগ্রীতে কী ঘটছে সে সম্পর্কে পাঠকদের কাছে সত্য বা এমনকি সরাসরি "মিথ্যা" প্রসারিত করা প্রয়োজন। উদাহরণস্বরূপ, "ফোকাস সত্যিই এখানে আছে!" অথবা "এটি সত্যিই একটি স্লাইডার!"। এটি আপনার ওয়ার্কবেঞ্চে সরঞ্জাম এবং উইজেটের উপরে জাদুকরী স্টিকি নোট যুক্ত করার মতো। এই জাদুকরী স্টিকি নোটগুলি তাদের উপর যা লেখা আছে তা সবাইকে বিশ্বাস করে।

যখন একটি জাদুকরী স্টিকি নোট বিদ্যমান থাকে, এটি হয় প্রতিটি টুল কি বা করে সে সম্পর্কে আমাদের বিশ্বাসকে অগ্রাহ্য করে। উদাহরণস্বরূপ, যদি আপনি ARIA যোগ করেন যাতে বলা হয় "এই জিনিসটি এখানে একটি আঠালো বন্দুক!"। যদিও এটি একটি খালি নীল বাক্স বসা, যাদুকরী স্টিকি নোট আমাদের বলে যে এটি একটি আঠালো বন্দুক। আমরা যোগ করতে পারি, "এবং এটি 30% পূর্ণ!"। স্ক্রিন রিডার এখন রিপোর্ট করে যে একটি 30% সম্পূর্ণ আঠালো বন্দুক রয়েছে।

এর সমতুল্য ওয়েব হল এর ভিতরে একটি চিত্র সহ একটি প্লেইন div নেওয়া এবং ARIA ব্যবহার করে বলতে হবে যে এটি 100 এর মধ্যে 30 মানের একটি স্লাইডার। ARIA div একটি স্লাইডার করে না; এটা শুধু স্ক্রিন রিডারকে বলে যে এটা একটা।

ARIA একটি ওয়েব পৃষ্ঠার চেহারা, বা মাউস বা কীবোর্ড ব্যবহারকারীর আচরণকে প্রভাবিত করে না। শুধুমাত্র সহায়ক প্রযুক্তির ব্যবহারকারীরাই ARIA এর প্রভাব লক্ষ্য করেন। ওয়েব ডেভেলপাররা যেকোন ব্যবহারকারীকে প্রভাবিত না করেই যেকোন নির্বিচারে ARIA যোগ করতে পারে যারা সহায়ক প্রযুক্তি চালাচ্ছে না।

আপনি এটি সঠিকভাবে পড়েছেন: ARIA আসলে কীবোর্ড ফোকাস বা ট্যাব অর্ডারে কিছু করে না। যে সব HTML করা হয়, কখনও কখনও জাভাস্ক্রিপ্ট বিট সঙ্গে tweaked.

ARIA কিভাবে কাজ করে?

প্রতিটি উপাদান সম্পর্কে তথ্যের জন্য ব্রাউজারগুলিকে একটি স্ক্রিন রিডার বা অন্যান্য সহায়ক প্রযুক্তি দ্বারা জিজ্ঞাসা করা হয়। যখন ARIA একটি উপাদানে উপস্থিত থাকে, তখন ব্রাউজার তথ্য গ্রহণ করে এবং সেই উপাদান সম্পর্কে স্ক্রিন রিডারকে যা বলে তা পরিবর্তন করে।

এখানে ARIA এর কিছু সাধারণ ব্যবহার রয়েছে।

• স্বয়ংসম্পূর্ণ, একটি গাছ বা একটি স্প্রেডশীটের মতো বিশেষ উপাদানগুলি যোগ করুন যা HTML-এ বিদ্যমান নেই৷
• HTML-এ বিদ্যমান উপাদানগুলি যোগ করুন, কিন্তু লেখক সিদ্ধান্ত নিয়েছেন যে তাদের পুনরায় উদ্ভাবন করা উচিত, সম্ভবত কারণ তারা আদর্শ উপাদানটির আচরণ বা চেহারা পরিবর্তন করতে চেয়েছিল৷ উদাহরণস্বরূপ, একটি HTML <input type="range"> উপাদান মূলত একটি স্লাইডার, কিন্তু লেখকরা এটিকে অন্যরকম দেখতে চান৷
  • বেশিরভাগ ক্ষেত্রে, এটি সিএসএস দিয়ে সমাধান করা যেতে পারে। যাইহোক, range জন্য, CSS বিশ্রী। লেখকরা তাদের নিজস্ব স্লাইডার তৈরি করতে পারেন এবং aria-valuenow এর সাথে role="slider" ব্যবহার করে কীবোর্ডকে বলতে পারেন বর্তমান মান কী।
• একটি পৃষ্ঠার একটি এলাকায় প্রাসঙ্গিক পরিবর্তন সম্পর্কে স্ক্রিন পাঠকদের বলতে লাইভ অঞ্চলগুলি অন্তর্ভুক্ত করুন৷
• ল্যান্ডমার্ক তৈরি করুন, যেমন শিরোনাম। ল্যান্ডমার্ক স্ক্রিন রিডার ব্যবহারকারীদের তারা যা চায় তা দ্রুত খুঁজে পেতে সাহায্য করে। ল্যান্ডমার্কে একটি সম্পূর্ণ সম্পর্কিত এলাকা থাকতে পারে। উদাহরণস্বরূপ, "এই ধারকটি পৃষ্ঠার প্রধান এলাকা" এবং "এই ধারকটি এখানে একটি নেভিগেশন প্যানেল"।

কেন ARIA?

এটি ইতিমধ্যে কাজ করে এমন HTML-এ কিছু ARIA যোগ করা কার্যকর হতে পারে। উদাহরণস্বরূপ, আমরা একটি ভুল ইনপুটের জন্য একটি ত্রুটি বার্তা সতর্কতা নির্দেশ করতে একটি ফর্ম নিয়ন্ত্রণ চাই। অথবা আমরা একটি টেক্সট ইনপুট নির্দিষ্ট ব্যবহার নির্দেশ করতে চাই. এই টুইকগুলি সাধারণ ওয়েবসাইটগুলিকে স্ক্রিন রিডারের সাথে আরও ব্যবহারযোগ্য করে তুলতে পারে।

মেনু বারের উদাহরণ

ধরা যাক স্থানীয় ওয়েব স্টোর আমাদের প্রয়োজনীয় সমস্ত উইজেট বিক্রি করে না। কিন্তু, আমরা ম্যাকগাইভার । আমরা অন্য উইজেট থেকে আমাদের নিজস্ব উইজেট উদ্ভাবন করতে পারি! এটি একটি ওয়েব লেখকের মতো যাকে একটি মেনু বার করতে হবে।

<nav> উপাদানটি বিদ্যমান থাকাকালীন, মেনু বারগুলি প্রায়শই ডিভ, ছবি, বোতাম, ক্লিক হ্যান্ডলার, কীপ্রেস হ্যান্ডেল এবং ARIA ব্যবহার করে একত্রিত করা হয়।

সমর্থন মাউস ব্যবহারকারীদের

আসুন একসাথে একটি মেনু বার তৈরি করি। আমরা divs নামক জেনেরিক বক্স এলিমেন্টে একগুচ্ছ আইটেম দেখাই। যে কোনো সময় আমাদের ব্যবহারকারী একটি div-এ ক্লিক করে, এটি সংশ্লিষ্ট কমান্ডটি কার্যকর করে। দুর্দান্ত, এটি মাউস ক্লিকার লোকেদের জন্য কাজ করে!

পরবর্তী, আমরা এটা সুন্দর চেহারা. আমরা উপাদানগুলিকে সুন্দরভাবে লাইন আপ করতে এবং তাদের চারপাশে ভিজ্যুয়াল রূপরেখা রাখতে CSS ব্যবহার করি। আমরা এটিকে অন্যান্য মেনু বারের মতো যথেষ্ট দেখাই যা দর্শনার্থীরা স্বজ্ঞাতভাবে জানে যে এটি একটি মেনু বার এবং এটি কীভাবে ব্যবহার করতে হয়। আমাদের মেনু বার এমনকি মাউস শেষ হয়ে যাওয়া যে কোনো আইটেমে একটি ভিন্ন পটভূমির রঙ ব্যবহার করে, ব্যবহারকারীকে কিছু সহায়ক ভিজ্যুয়াল প্রতিক্রিয়া দেয়।

কিছু মেনু আইটেম বাবা. তারা শিশু সাবমেনুস তৈরি করে। যখনই ব্যবহারকারী এইগুলির একটিতে হোভার করে তখন আমরা একটি অ্যানিমেশন শুরু করি যা চাইল্ড সাবমেনুকে স্লাইড করে দেয়।

ওয়েবে অনেক জিনিসের ক্ষেত্রে এটি স্বাভাবিকের মতোই বেশ দুর্গম।

আমাদের মেনু বার কীবোর্ড অ্যাক্সেসযোগ্য করুন

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

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

• ব্যবহারকারী যদি একটি তীর কী টিপে, আসুন আমাদের নিজস্ব অভ্যন্তরীণ মেনু বারের ব্লুপ্রিন্টগুলি দেখুন এবং নতুন সক্রিয় মেনু আইটেমটি কী হওয়া উচিত তা নির্ধারণ করি। আমরা যেকোন বর্তমান হাইলাইটগুলি সাফ করব এবং নতুন মেনু আইটেমটি হাইলাইট করব যাতে দৃষ্টিগ্রাহ্য ব্যবহারকারী চাক্ষুষভাবে জানতে পারে যে তারা কোথায়। ব্রাউজারকে স্বাভাবিক ক্রিয়া সম্পাদন করা থেকে বিরত রাখতে ওয়েব পৃষ্ঠাটিকে event.preventDefault() কল করা উচিত (এই ক্ষেত্রে পৃষ্ঠাটি স্ক্রোল করা)।
• ব্যবহারকারী যদি এন্টার কী টিপে, তাহলে আমরা এটিকে একটি ক্লিকের মতোই ব্যবহার করতে পারি এবং উপযুক্ত ক্রিয়া সম্পাদন করতে পারি (অথবা অন্য মেনু খুলতেও)।
• যদি ব্যবহারকারী একটি কী টিপে যা অন্য কিছু করা উচিত, তাহলে এটিকে পৃষ্ঠায় ফেরত পাঠান। উদাহরণস্বরূপ, আমাদের মেনু বারে ট্যাব কী দরকার নেই, তাই এটিকে পিছনে ফেলে দিন! এই সঠিক পেতে কঠিন. উদাহরণস্বরূপ, মেনু বারে তীর কীগুলির প্রয়োজন, কিন্তু Alt + তীর বা কমান্ড + তীর নয়। আপনার ব্রাউজার ট্যাবের ওয়েব ইতিহাসের পূর্ববর্তী এবং পরবর্তী পৃষ্ঠায় যাওয়ার জন্য এগুলি শর্টকাট৷ লেখক সতর্ক না হলে, মেনু বার সেগুলি খেয়ে ফেলবে। এই ধরনের বাগ অনেক ঘটে, এবং আমরা এখনও ARIA দিয়ে শুরু করিনি!

আমাদের মেনু বারে স্ক্রিন রিডার অ্যাক্সেস

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

কিন্তু এটা কোন ন্যায্য! মেনু বার দেখা ব্যবহারকারীর জন্য ঠিক কাজ করে।

উদ্ধারের জন্য ARIA. ARIA আমাদের স্ক্রিন রিডারের কাছে ভান করতে দেয় যে ফোকাস একটি মেনু বারে রয়েছে। লেখক সবকিছু ঠিকঠাক করলে, আমাদের কাস্টম মেনু বারটি স্ক্রিন রিডারের দিকে তাকাবে যেমন ডেস্কটপ অ্যাপ্লিকেশনের মেনু বারের মতো।

আমাদের প্রথম ARIA মিথ্যা হল aria-activedescendant বৈশিষ্ট্য। সক্রিয় মেনু আইটেমের আইডিতে অ্যাট্রিবিউট সেট করুন, যখনই এটি পরিবর্তন হয় তখন এটি আপডেট করার বিষয়ে সতর্ক থাকুন। উদাহরণস্বরূপ, aria-activedescendant="settings-menuitem" । এর ফলে স্ক্রিন রিডার আমাদের ARIA সক্রিয় আইটেমটিকে ফোকাস হিসাবে বিবেচনা করে, যা উচ্চস্বরে পড়া হয় বা ব্রেইল ডিসপ্লেতে দেখানো হয়।

aria-activedescendant ব্যবহার করে ফোকাস করা মেনু বার থেকে একটি নির্দিষ্ট মেনু আইটেমের দিকে নির্দেশ করার জন্য, স্ক্রিন রিডার এখন জানে যে ব্যবহারকারী কোথায় সরে গেছে, কিন্তু বস্তু সম্পর্কে আর কিছুই নয়। যাইহোক এই div জিনিস কি? এখানেই রোল অ্যাট্রিবিউটটি আসে। আমরা সম্পূর্ণ জিনিসের জন্য ধারণ করা উপাদানটিতে role="menubar" ব্যবহার করি, তারপর আমরা আইটেমগুলির গ্রুপগুলিতে role="menu" এবং … drumroll … পৃথক মেনু আইটেমগুলিতে role="menuitem" ব্যবহার করি।

এবং যদি মেনুইটেম একটি শিশু মেনু হতে পারে? ব্যবহারকারী এটা জানতে হবে. একজন দর্শনীয় ব্যবহারকারীর জন্য, মেনুর শেষে একটি ত্রিভুজের একটি ছোট ছবি থাকতে পারে, কিন্তু স্ক্রিন রিডার অন্তত এই সময়ে কীভাবে স্বয়ংক্রিয়ভাবে ছবিগুলি পড়তে হয় তা জানে না৷ আমরা প্রতিটি প্রসারণযোগ্য মেনুতে aria-expanded="false" যোগ করতে পারি যাতে বোঝা যায় যে এমন কিছু আছে যা প্রসারিত করা যেতে পারে, এবং এটি প্রসারিত নয়। উপরন্তু, লেখককে img ত্রিভুজটিতে role="none" লিখতে হবে যে এটি শুধুমাত্র সৌন্দর্যের উদ্দেশ্যে। এটি স্ক্রিন রিডারকে অপ্রয়োজনীয় ছবি সম্পর্কে কিছু বলতে বাধা দেয়।

কীবোর্ড বাগগুলি ঠিক করুন

যদিও কীবোর্ড অ্যাক্সেস মূল HTML এর একটি অংশ, এটি ওভাররাইট করা সহজ। যেমন:

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

লেখক পরিচিত নিদর্শন অনুসরণ করা উচিত. আরও তথ্যের জন্য সম্পদ বিভাগ দেখুন।

খাঁটি কীবোর্ড অ্যাক্সেসের সমস্যাগুলির জন্য, স্ক্রিন রিডার ছাড়া বা ভার্চুয়াল ব্রাউজার মোড বন্ধ করেও চেষ্টা করা দরকারী। আপনি স্ক্রিন রিডার ছাড়াই কীবোর্ড বাগগুলি আবিষ্কার করতে পারেন, কারণ কীবোর্ড অ্যাক্সেস HTML এর সাথে প্রয়োগ করা হয়, ARIA নয়৷ সর্বোপরি, ARIA কীবোর্ড বা মাউসের আচরণকে প্রভাবিত করে না; পরিবর্তে, এটি ওয়েব পৃষ্ঠায় কী আছে, বর্তমানে কী ফোকাস করা হয়েছে ইত্যাদি সম্পর্কে স্ক্রিন রিডারের কাছে মিথ্যা।

কীবোর্ড বাগগুলি প্রায় সবসময়ই ওয়েব সামগ্রীতে একটি বাগ, বিশেষ করে তাদের HTML এবং JavaScript-এ, 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 সংস্করণ পায়৷

অতিরিক্ত সম্পদ

W3C এর ARIA অথরিং প্র্যাকটিস প্রতিটি উদাহরণের গুরুত্বপূর্ণ কীবোর্ড নেভিগেশন বৈশিষ্ট্যগুলিকে নথিভুক্ত করে এবং কার্যকরী JavaScript, CSS এবং ARIA প্রদান করে। উদাহরণগুলি আজকে কী কাজ করে তার উপর ফোকাস করা হয় এবং মোবাইল কভার করে না।

একটি অ্যাক্সেসিবিলিটি API কি?

একটি অ্যাক্সেসিবিলিটি API হল একটি স্ক্রিন রিডার বা অন্যান্য সহায়ক প্রযুক্তি কীভাবে পৃষ্ঠায় কী আছে এবং কী ঘটছে তা জানে৷ উদাহরণ MSAA, IA2, এবং UIA অন্তর্ভুক্ত। একটি অ্যাক্সেসিবিলিটি API এর দুটি অংশ রয়েছে:

• বস্তুর একটি "বৃক্ষ" যা একটি ধারক শ্রেণিবিন্যাসের প্রতিনিধিত্ব করে। উদাহরণস্বরূপ, একটি নথিতে একগুচ্ছ অনুচ্ছেদ থাকতে পারে। একটি অনুচ্ছেদে পাঠ্য, চিত্র, লিঙ্ক এবং পাঠ্য সজ্জা থাকতে পারে। অবজেক্ট ট্রির প্রতিটি আইটেমের বৈশিষ্ট্য থাকতে পারে, যেমন ভূমিকা (আমি কী?), একটি নাম বা লেবেল, একটি ব্যবহারকারী-প্রবেশ করা মান, একটি বিবরণ এবং বুলিয়ান স্টেট, যেমন ফোকাসযোগ্য, ফোকাস করা, প্রয়োজনীয়, চেক করা। ARIA এই বৈশিষ্ট্যগুলির যেকোনো একটিকে ওভাররাইড করতে পারে৷
  • স্ক্রীন রিডাররা ট্রি ব্যবহার করে ব্যবহারকারীদের ভার্চুয়াল বাফার মোডে নেভিগেট করতে সাহায্য করে, যেমন, "পরবর্তী শিরোনামে যান, অনুগ্রহ করে"।
• গাছের পরিবর্তনের বর্ণনা দিয়ে ঘটতে থাকা ইভেন্টগুলির একটি সিরিজ, যেমন "ফোকাস এখন এখানে আছে!"। স্ক্রিন রিডার ইভেন্ট ব্যবহার করে ব্যবহারকারীকে জানাতে এইমাত্র কি ঘটেছে। যখন গুরুত্বপূর্ণ HTML বা ARIA মার্কআপ পরিবর্তিত হয়, তখন স্ক্রিন রিডারকে কিছু পরিবর্তন হয়েছে তা বলার জন্য একটি ইভেন্ট চালু করা হয়।

এই অ্যাক্সেসিবিলিটি APIগুলিতে HTML ম্যাপ সুন্দরভাবে তৈরি করে। যখন HTML যথেষ্ট না হয়, তখন ARIA যোগ করা যেতে পারে যাতে ব্রাউজার স্ক্রীন রিডারে অবজেক্ট ট্রি বা ইভেন্ট পাঠানোর আগে HTML শব্দার্থকে ওভাররাইড করে।

Aaron Leventhal

ARIA কি?

ARIA ওয়েব লেখকদের একটি বিকল্প বাস্তবতা তৈরি করতে দেয়, শুধুমাত্র স্ক্রিন রিডাররা দেখে।

কখনও কখনও ওয়েব সামগ্রীতে কী ঘটছে সে সম্পর্কে পাঠকদের কাছে সত্য বা এমনকি সরাসরি "মিথ্যা" প্রসারিত করা প্রয়োজন। উদাহরণস্বরূপ, "ফোকাস সত্যিই এখানে আছে!" অথবা "এটি সত্যিই একটি স্লাইডার!"। এটি আপনার ওয়ার্কবেঞ্চে সরঞ্জাম এবং উইজেটের উপরে জাদুকরী স্টিকি নোট যুক্ত করার মতো। এই জাদুকরী স্টিকি নোটগুলি তাদের উপর যা লেখা আছে তা সবাইকে বিশ্বাস করে।

যখন একটি জাদুকরী স্টিকি নোট বিদ্যমান থাকে, এটি হয় প্রতিটি টুল কি বা করে সে সম্পর্কে আমাদের বিশ্বাসকে অগ্রাহ্য করে। উদাহরণস্বরূপ, যদি আপনি ARIA যোগ করেন যাতে বলা হয় "এই জিনিসটি এখানে একটি আঠালো বন্দুক!"। যদিও এটি একটি খালি নীল বাক্স বসা, যাদুকরী স্টিকি নোট আমাদের বলে যে এটি একটি আঠালো বন্দুক। আমরা যোগ করতে পারি, "এবং এটি 30% পূর্ণ!"। স্ক্রিন রিডার এখন রিপোর্ট করে যে একটি 30% সম্পূর্ণ আঠালো বন্দুক রয়েছে।

এর সমতুল্য ওয়েব হল এর ভিতরে একটি চিত্র সহ একটি প্লেইন div নেওয়া এবং ARIA ব্যবহার করে বলতে হবে যে এটি 100 এর মধ্যে 30 মানের একটি স্লাইডার। ARIA div একটি স্লাইডার করে না; এটা শুধু স্ক্রিন রিডারকে বলে যে এটা একটা।

ARIA একটি ওয়েব পৃষ্ঠার চেহারা, বা মাউস বা কীবোর্ড ব্যবহারকারীর আচরণকে প্রভাবিত করে না। শুধুমাত্র সহায়ক প্রযুক্তির ব্যবহারকারীরাই ARIA এর প্রভাব লক্ষ্য করেন। ওয়েব ডেভেলপাররা যেকোন ব্যবহারকারীকে প্রভাবিত না করেই যেকোন নির্বিচারে ARIA যোগ করতে পারে যারা সহায়ক প্রযুক্তি চালাচ্ছে না।

আপনি এটি সঠিকভাবে পড়েছেন: ARIA আসলে কীবোর্ড ফোকাস বা ট্যাব অর্ডারে কিছু করে না। যে সব HTML করা হয়, কখনও কখনও জাভাস্ক্রিপ্ট বিট সঙ্গে tweaked.

ARIA কিভাবে কাজ করে?

প্রতিটি উপাদান সম্পর্কে তথ্যের জন্য ব্রাউজারগুলিকে একটি স্ক্রিন রিডার বা অন্যান্য সহায়ক প্রযুক্তি দ্বারা জিজ্ঞাসা করা হয়। যখন ARIA একটি উপাদানে উপস্থিত থাকে, তখন ব্রাউজার তথ্য গ্রহণ করে এবং সেই উপাদান সম্পর্কে স্ক্রিন রিডারকে যা বলে তা পরিবর্তন করে।

এখানে ARIA এর কিছু সাধারণ ব্যবহার রয়েছে।

• স্বয়ংসম্পূর্ণ, একটি গাছ বা একটি স্প্রেডশীটের মতো বিশেষ উপাদানগুলি যোগ করুন যা HTML-এ বিদ্যমান নেই৷
• HTML-এ বিদ্যমান উপাদানগুলি যোগ করুন, কিন্তু লেখক সিদ্ধান্ত নিয়েছেন যে তাদের পুনরায় উদ্ভাবন করা উচিত, সম্ভবত কারণ তারা আদর্শ উপাদানটির আচরণ বা চেহারা পরিবর্তন করতে চেয়েছিল৷ উদাহরণস্বরূপ, একটি HTML <input type="range"> উপাদান মূলত একটি স্লাইডার, কিন্তু লেখকরা এটিকে অন্যরকম দেখতে চান৷
  • বেশিরভাগ ক্ষেত্রে, এটি সিএসএস দিয়ে সমাধান করা যেতে পারে। যাইহোক, range জন্য, CSS বিশ্রী। লেখকরা তাদের নিজস্ব স্লাইডার তৈরি করতে পারেন এবং aria-valuenow এর সাথে role="slider" ব্যবহার করে কীবোর্ডকে বলতে পারেন বর্তমান মান কী।
• একটি পৃষ্ঠার একটি এলাকায় প্রাসঙ্গিক পরিবর্তন সম্পর্কে স্ক্রিন পাঠকদের বলতে লাইভ অঞ্চলগুলি অন্তর্ভুক্ত করুন৷
• ল্যান্ডমার্ক তৈরি করুন, যেমন শিরোনাম। ল্যান্ডমার্ক স্ক্রিন রিডার ব্যবহারকারীদের তারা যা চায় তা দ্রুত খুঁজে পেতে সাহায্য করে। ল্যান্ডমার্কে একটি সম্পূর্ণ সম্পর্কিত এলাকা থাকতে পারে। উদাহরণস্বরূপ, "এই ধারকটি পৃষ্ঠার প্রধান এলাকা" এবং "এই ধারকটি এখানে একটি নেভিগেশন প্যানেল"।

কেন ARIA?

এটি ইতিমধ্যে কাজ করে এমন HTML-এ কিছু ARIA যোগ করা কার্যকর হতে পারে। উদাহরণস্বরূপ, আমরা একটি ভুল ইনপুটের জন্য একটি ত্রুটি বার্তা সতর্কতা নির্দেশ করতে একটি ফর্ম নিয়ন্ত্রণ চাই। অথবা আমরা একটি টেক্সট ইনপুট নির্দিষ্ট ব্যবহার নির্দেশ করতে চাই. এই টুইকগুলি সাধারণ ওয়েবসাইটগুলিকে স্ক্রিন রিডারের সাথে আরও ব্যবহারযোগ্য করে তুলতে পারে।

মেনু বারের উদাহরণ

ধরা যাক স্থানীয় ওয়েব স্টোর আমাদের প্রয়োজনীয় সমস্ত উইজেট বিক্রি করে না। কিন্তু, আমরা ম্যাকগাইভার । আমরা অন্য উইজেট থেকে আমাদের নিজস্ব উইজেট উদ্ভাবন করতে পারি! এটি একটি ওয়েব লেখকের মতো যাকে একটি মেনু বার করতে হবে।

<nav> উপাদানটি বিদ্যমান থাকাকালীন, মেনু বারগুলি প্রায়শই ডিভ, ছবি, বোতাম, ক্লিক হ্যান্ডলার, কীপ্রেস হ্যান্ডেল এবং ARIA ব্যবহার করে একত্রিত করা হয়।

সমর্থন মাউস ব্যবহারকারীদের

আসুন একসাথে একটি মেনু বার তৈরি করি। আমরা divs নামক জেনেরিক বক্স এলিমেন্টে একগুচ্ছ আইটেম দেখাই। যে কোনো সময় আমাদের ব্যবহারকারী একটি div-এ ক্লিক করে, এটি সংশ্লিষ্ট কমান্ডটি কার্যকর করে। দুর্দান্ত, এটি মাউস ক্লিকার লোকেদের জন্য কাজ করে!

পরবর্তী, আমরা এটা সুন্দর চেহারা. আমরা উপাদানগুলিকে সুন্দরভাবে লাইন আপ করতে এবং তাদের চারপাশে ভিজ্যুয়াল রূপরেখা রাখতে CSS ব্যবহার করি। আমরা এটিকে অন্যান্য মেনু বারের মতো যথেষ্ট দেখাই যা দর্শনার্থীরা স্বজ্ঞাতভাবে জানে যে এটি একটি মেনু বার এবং এটি কীভাবে ব্যবহার করতে হয়। আমাদের মেনু বার এমনকি মাউস শেষ হয়ে যাওয়া যে কোনো আইটেমে একটি ভিন্ন পটভূমির রঙ ব্যবহার করে, ব্যবহারকারীকে কিছু সহায়ক ভিজ্যুয়াল প্রতিক্রিয়া দেয়।

কিছু মেনু আইটেম বাবা. তারা শিশু সাবমেনুস তৈরি করে। যখনই ব্যবহারকারী এইগুলির একটিতে হোভার করে তখনই আমরা একটি অ্যানিমেশন শুরু করি যা চাইল্ড সাবমেনুকে স্লাইড করে দেয়।

ওয়েবে অনেক জিনিসের ক্ষেত্রে এটি স্বাভাবিকের মতোই বেশ দুর্গম।

আমাদের মেনু বার কীবোর্ড অ্যাক্সেসযোগ্য করুন

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

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

• ব্যবহারকারী যদি একটি তীর কী টিপে, আসুন আমাদের নিজস্ব অভ্যন্তরীণ মেনু বারের ব্লুপ্রিন্টগুলি দেখুন এবং নতুন সক্রিয় মেনু আইটেমটি কী হওয়া উচিত তা নির্ধারণ করি। আমরা যেকোন বর্তমান হাইলাইটগুলি সাফ করব এবং নতুন মেনু আইটেমটি হাইলাইট করব যাতে দৃষ্টিগ্রাহ্য ব্যবহারকারী চাক্ষুষভাবে জানতে পারে যে তারা কোথায়। ব্রাউজারকে স্বাভাবিক ক্রিয়া সম্পাদন করা থেকে বিরত রাখতে ওয়েব পৃষ্ঠাটিকে event.preventDefault() কল করা উচিত (এই ক্ষেত্রে পৃষ্ঠাটি স্ক্রোল করা)।
• ব্যবহারকারী যদি এন্টার কী টিপে, তাহলে আমরা এটিকে একটি ক্লিকের মতোই ব্যবহার করতে পারি এবং উপযুক্ত ক্রিয়া সম্পাদন করতে পারি (অথবা অন্য মেনু খুলতেও)।
• যদি ব্যবহারকারী একটি কী টিপে যা অন্য কিছু করা উচিত, তাহলে এটিকে পৃষ্ঠায় ফেরত পাঠান। উদাহরণস্বরূপ, আমাদের মেনু বারে ট্যাব কী দরকার নেই, তাই এটিকে পিছনে ফেলে দিন! এই সঠিক পেতে কঠিন. উদাহরণস্বরূপ, মেনু বারে তীর কীগুলির প্রয়োজন, কিন্তু Alt + তীর বা কমান্ড + তীর নয়। আপনার ব্রাউজার ট্যাবের ওয়েব ইতিহাসের পূর্ববর্তী এবং পরবর্তী পৃষ্ঠায় যাওয়ার জন্য এগুলি শর্টকাট৷ লেখক সতর্ক না হলে, মেনু বার সেগুলি খেয়ে ফেলবে। এই ধরনের বাগ অনেক ঘটে, এবং আমরা এখনও ARIA দিয়ে শুরু করিনি!

আমাদের মেনু বারে স্ক্রিন রিডার অ্যাক্সেস

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

কিন্তু এটা কোন ন্যায্য! মেনু বার দেখা ব্যবহারকারীর জন্য ঠিক কাজ করে।

উদ্ধারের জন্য ARIA. ARIA আমাদের স্ক্রিন রিডারের কাছে ভান করতে দেয় যে ফোকাস একটি মেনু বারে রয়েছে। লেখক সবকিছু ঠিকঠাক করলে, আমাদের কাস্টম মেনু বারটি স্ক্রিন রিডারের দিকে তাকাবে যেমন ডেস্কটপ অ্যাপ্লিকেশনের মেনু বারের মতো।

আমাদের প্রথম ARIA মিথ্যা হল aria-activedescendant বৈশিষ্ট্য। সক্রিয় মেনু আইটেমের আইডিতে অ্যাট্রিবিউট সেট করুন, যখনই এটি পরিবর্তন হয় তখন এটি আপডেট করার বিষয়ে সতর্ক থাকুন। উদাহরণস্বরূপ, aria-activedescendant="settings-menuitem" । এর ফলে স্ক্রিন রিডার আমাদের ARIA সক্রিয় আইটেমটিকে ফোকাস হিসেবে বিবেচনা করে, যেটি জোরে পড়া হয় বা ব্রেইল ডিসপ্লেতে দেখানো হয়।

aria-activedescendant ব্যবহার করে ফোকাস করা মেনু বার থেকে একটি নির্দিষ্ট মেনু আইটেমের দিকে নির্দেশ করার জন্য, স্ক্রিন রিডার এখন জানে যে ব্যবহারকারী কোথায় সরে গেছে, কিন্তু বস্তু সম্পর্কে আর কিছুই নয়। যাইহোক এই div জিনিস কি? এখানেই রোল অ্যাট্রিবিউটটি আসে। আমরা সম্পূর্ণ জিনিসের জন্য ধারণ করা উপাদানটিতে role="menubar" ব্যবহার করি, তারপর আমরা আইটেমগুলির গ্রুপগুলিতে role="menu" এবং … drumroll … পৃথক মেনু আইটেমগুলিতে role="menuitem" ব্যবহার করি।

এবং যদি মেনুইটেম একটি শিশু মেনু হতে পারে? ব্যবহারকারী এটা জানতে হবে. একজন দর্শনীয় ব্যবহারকারীর জন্য, মেনুর শেষে একটি ত্রিভুজের একটি ছোট ছবি থাকতে পারে, কিন্তু স্ক্রিন রিডার অন্তত এই সময়ে কীভাবে স্বয়ংক্রিয়ভাবে ছবিগুলি পড়তে হয় তা জানে না৷ আমরা প্রতিটি প্রসারণযোগ্য মেনুতে aria-expanded="false" যোগ করতে পারি যাতে বোঝা যায় যে এমন কিছু আছে যা প্রসারিত করা যেতে পারে, এবং এটি প্রসারিত নয়। উপরন্তু, লেখককে img ত্রিভুজটিতে role="none" লিখতে হবে যে এটি শুধুমাত্র সৌন্দর্যের উদ্দেশ্যে। এটি স্ক্রিন রিডারকে অপ্রয়োজনীয় ছবি সম্পর্কে কিছু বলতে বাধা দেয়।

কীবোর্ড বাগগুলি ঠিক করুন

যদিও কীবোর্ড অ্যাক্সেস মূল HTML এর একটি অংশ, এটি ওভাররাইট করা সহজ। যেমন:

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

লেখক পরিচিত নিদর্শন অনুসরণ করা উচিত. আরও তথ্যের জন্য সম্পদ বিভাগ দেখুন।

খাঁটি কীবোর্ড অ্যাক্সেসের সমস্যাগুলির জন্য, স্ক্রিন রিডার ছাড়া বা ভার্চুয়াল ব্রাউজার মোড বন্ধ করেও চেষ্টা করা দরকারী। আপনি স্ক্রিন রিডার ছাড়াই কীবোর্ড বাগগুলি আবিষ্কার করতে পারেন, কারণ কীবোর্ড অ্যাক্সেস HTML এর সাথে প্রয়োগ করা হয়, ARIA নয়৷ সর্বোপরি, ARIA কীবোর্ড বা মাউসের আচরণকে প্রভাবিত করে না; পরিবর্তে, এটি ওয়েব পৃষ্ঠায় কী আছে, বর্তমানে কী ফোকাস করা হয়েছে ইত্যাদি সম্পর্কে স্ক্রিন রিডারের কাছে মিথ্যা।

কীবোর্ড বাগগুলি প্রায় সবসময়ই ওয়েব সামগ্রীতে একটি বাগ, বিশেষ করে তাদের HTML এবং JavaScript-এ, 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 সংস্করণ পায়৷

অতিরিক্ত সম্পদ

W3C এর ARIA অথরিং প্র্যাকটিস প্রতিটি উদাহরণের গুরুত্বপূর্ণ কীবোর্ড নেভিগেশন বৈশিষ্ট্যগুলিকে নথিভুক্ত করে এবং কার্যকরী JavaScript, CSS এবং ARIA প্রদান করে। উদাহরণগুলি আজকে কী কাজ করে তার উপর ফোকাস করা হয় এবং মোবাইল কভার করে না।

একটি অ্যাক্সেসিবিলিটি API কি?

একটি অ্যাক্সেসিবিলিটি API হল একটি স্ক্রিন রিডার বা অন্যান্য সহায়ক প্রযুক্তি কীভাবে পৃষ্ঠায় কী আছে এবং কী ঘটছে তা জানে৷ উদাহরণ MSAA, IA2, এবং UIA অন্তর্ভুক্ত। একটি অ্যাক্সেসিবিলিটি API এর দুটি অংশ রয়েছে:

• বস্তুর একটি "বৃক্ষ" যা একটি ধারক শ্রেণিবিন্যাসের প্রতিনিধিত্ব করে। উদাহরণস্বরূপ, একটি নথিতে একগুচ্ছ অনুচ্ছেদ থাকতে পারে। একটি অনুচ্ছেদে পাঠ্য, চিত্র, লিঙ্ক এবং পাঠ্য সজ্জা থাকতে পারে। অবজেক্ট ট্রির প্রতিটি আইটেমের বৈশিষ্ট্য থাকতে পারে, যেমন ভূমিকা (আমি কী?), একটি নাম বা লেবেল, একটি ব্যবহারকারী-প্রবেশ করা মান, একটি বিবরণ এবং বুলিয়ান স্টেট, যেমন ফোকাসযোগ্য, ফোকাস করা, প্রয়োজনীয়, চেক করা। ARIA এই বৈশিষ্ট্যগুলির যেকোনো একটিকে ওভাররাইড করতে পারে৷
  • স্ক্রীন রিডাররা ট্রি ব্যবহার করে ব্যবহারকারীদের ভার্চুয়াল বাফার মোডে নেভিগেট করতে সাহায্য করে, যেমন, "পরবর্তী শিরোনামে যান, অনুগ্রহ করে"।
• গাছের পরিবর্তনের বর্ণনা দিয়ে ঘটতে থাকা ইভেন্টগুলির একটি সিরিজ, যেমন "ফোকাস এখন এখানে আছে!"। স্ক্রিন রিডার ইভেন্ট ব্যবহার করে ব্যবহারকারীকে জানাতে এইমাত্র কি ঘটেছে। যখন গুরুত্বপূর্ণ HTML বা ARIA মার্কআপ পরিবর্তিত হয়, তখন স্ক্রিন রিডারকে কিছু পরিবর্তন হয়েছে তা বলার জন্য একটি ইভেন্ট চালু করা হয়।

এই অ্যাক্সেসিবিলিটি APIগুলিতে HTML ম্যাপ সুন্দরভাবে তৈরি করে। যখন HTML যথেষ্ট না হয়, তখন ARIA যোগ করা যেতে পারে যাতে ব্রাউজার স্ক্রীন রিডারে অবজেক্ট ট্রি বা ইভেন্ট পাঠানোর আগে HTML শব্দার্থকে ওভাররাইড করে।

Aaron Leventhal

ARIA কি?

ARIA ওয়েব লেখকদের একটি বিকল্প বাস্তবতা তৈরি করতে দেয়, শুধুমাত্র স্ক্রিন রিডাররা দেখে।

কখনও কখনও ওয়েব সামগ্রীতে কী ঘটছে সে সম্পর্কে পাঠকদের কাছে সত্য বা এমনকি সরাসরি "মিথ্যা" প্রসারিত করা প্রয়োজন। উদাহরণস্বরূপ, "ফোকাস সত্যিই এখানে আছে!" অথবা "এটি সত্যিই একটি স্লাইডার!"। এটি আপনার ওয়ার্কবেঞ্চে সরঞ্জাম এবং উইজেটের উপরে জাদুকরী স্টিকি নোট যুক্ত করার মতো। এই জাদুকরী স্টিকি নোটগুলি তাদের উপর যা লেখা আছে তা সবাইকে বিশ্বাস করে।

যখন একটি জাদুকরী স্টিকি নোট বিদ্যমান থাকে, এটি হয় প্রতিটি টুল কি বা করে সে সম্পর্কে আমাদের বিশ্বাসকে অগ্রাহ্য করে। উদাহরণস্বরূপ, যদি আপনি ARIA যোগ করেন যাতে বলা হয় "এই জিনিসটি এখানে একটি আঠালো বন্দুক!"। যদিও এটি একটি খালি নীল বাক্স বসা, যাদুকরী স্টিকি নোট আমাদের বলে যে এটি একটি আঠালো বন্দুক। আমরা যোগ করতে পারি, "এবং এটি 30% পূর্ণ!"। স্ক্রিন রিডার এখন রিপোর্ট করে যে একটি 30% সম্পূর্ণ আঠালো বন্দুক রয়েছে।

এর সমতুল্য ওয়েব হল এর ভিতরে একটি চিত্র সহ একটি প্লেইন div নেওয়া এবং ARIA ব্যবহার করে বলতে হবে যে এটি 100 এর মধ্যে 30 মানের একটি স্লাইডার। ARIA div একটি স্লাইডার করে না; এটা শুধু স্ক্রিন রিডারকে বলে যে এটা একটা।

ARIA একটি ওয়েব পৃষ্ঠার চেহারা, বা মাউস বা কীবোর্ড ব্যবহারকারীর আচরণকে প্রভাবিত করে না। শুধুমাত্র সহায়ক প্রযুক্তির ব্যবহারকারীরাই ARIA এর প্রভাব লক্ষ্য করেন। ওয়েব ডেভেলপাররা যেকোন ব্যবহারকারীকে প্রভাবিত না করেই যেকোন নির্বিচারে ARIA যোগ করতে পারে যারা সহায়ক প্রযুক্তি চালাচ্ছে না।

আপনি এটি সঠিকভাবে পড়েছেন: ARIA আসলে কীবোর্ড ফোকাস বা ট্যাব অর্ডারে কিছু করে না। যে সব HTML করা হয়, কখনও কখনও জাভাস্ক্রিপ্ট বিট সঙ্গে tweaked.

ARIA কিভাবে কাজ করে?

প্রতিটি উপাদান সম্পর্কে তথ্যের জন্য ব্রাউজারগুলিকে একটি স্ক্রিন রিডার বা অন্যান্য সহায়ক প্রযুক্তি দ্বারা জিজ্ঞাসা করা হয়। যখন ARIA একটি উপাদানে উপস্থিত থাকে, তখন ব্রাউজার তথ্য গ্রহণ করে এবং সেই উপাদান সম্পর্কে স্ক্রিন রিডারকে যা বলে তা পরিবর্তন করে।

এখানে ARIA এর কিছু সাধারণ ব্যবহার রয়েছে।

• স্বয়ংসম্পূর্ণ, একটি গাছ বা স্প্রেডশীটের মতো বিশেষ উপাদানগুলি যোগ করুন যা HTML-এ বিদ্যমান নেই৷
• HTML-এ বিদ্যমান উপাদানগুলি যোগ করুন, কিন্তু লেখক সিদ্ধান্ত নিয়েছেন যে তাদের পুনরায় উদ্ভাবন করা উচিত, সম্ভবত কারণ তারা আদর্শ উপাদানটির আচরণ বা চেহারা পরিবর্তন করতে চেয়েছিল৷ উদাহরণস্বরূপ, একটি HTML <input type="range"> উপাদান মূলত একটি স্লাইডার, কিন্তু লেখকরা এটিকে অন্যরকম দেখতে চান৷
  • বেশিরভাগ ক্ষেত্রে, এটি সিএসএস দিয়ে সমাধান করা যেতে পারে। যাইহোক, range জন্য, CSS বিশ্রী। লেখকরা তাদের নিজস্ব স্লাইডার তৈরি করতে পারেন এবং aria-valuenow এর সাথে role="slider" ব্যবহার করে কীবোর্ডকে বলতে পারেন বর্তমান মান কী।
• একটি পৃষ্ঠার একটি এলাকায় প্রাসঙ্গিক পরিবর্তন সম্পর্কে স্ক্রিন পাঠকদের বলতে লাইভ অঞ্চলগুলি অন্তর্ভুক্ত করুন৷
• ল্যান্ডমার্ক তৈরি করুন, যেমন শিরোনাম। ল্যান্ডমার্ক স্ক্রিন রিডার ব্যবহারকারীদের তারা যা চায় তা দ্রুত খুঁজে পেতে সাহায্য করে। ল্যান্ডমার্কে একটি সম্পূর্ণ সম্পর্কিত এলাকা থাকতে পারে। উদাহরণস্বরূপ, "এই ধারকটি পৃষ্ঠার প্রধান এলাকা" এবং "এই ধারকটি এখানে একটি নেভিগেশন প্যানেল"।

কেন ARIA?

এটি ইতিমধ্যে কাজ করে এমন HTML-এ কিছু ARIA যোগ করা কার্যকর হতে পারে। উদাহরণস্বরূপ, আমরা একটি ভুল ইনপুটের জন্য একটি ত্রুটি বার্তা সতর্কতা নির্দেশ করতে একটি ফর্ম নিয়ন্ত্রণ চাই। অথবা আমরা একটি টেক্সট ইনপুট নির্দিষ্ট ব্যবহার নির্দেশ করতে চাই. এই টুইকগুলি সাধারণ ওয়েবসাইটগুলিকে স্ক্রিন রিডারের সাথে আরও ব্যবহারযোগ্য করে তুলতে পারে।

মেনু বারের উদাহরণ

ধরা যাক স্থানীয় ওয়েব স্টোর আমাদের প্রয়োজনীয় সমস্ত উইজেট বিক্রি করে না। কিন্তু, আমরা ম্যাকগাইভার । আমরা অন্য উইজেট থেকে আমাদের নিজস্ব উইজেট উদ্ভাবন করতে পারি! এটি একটি ওয়েব লেখকের মতো যাকে একটি মেনু বার করতে হবে।

<nav> উপাদানটি বিদ্যমান থাকাকালীন, মেনু বারগুলি প্রায়শই ডিভ, ছবি, বোতাম, ক্লিক হ্যান্ডলার, কীপ্রেস হ্যান্ডেল এবং ARIA ব্যবহার করে একত্রিত করা হয়।

সমর্থন মাউস ব্যবহারকারীদের

আসুন একসাথে একটি মেনু বার তৈরি করি। আমরা divs নামক জেনেরিক বক্স এলিমেন্টে একগুচ্ছ আইটেম দেখাই। যে কোনো সময় আমাদের ব্যবহারকারী একটি div-এ ক্লিক করে, এটি সংশ্লিষ্ট কমান্ডটি কার্যকর করে। দুর্দান্ত, এটি মাউস ক্লিকার লোকেদের জন্য কাজ করে!

পরবর্তী, আমরা এটা সুন্দর চেহারা. আমরা উপাদানগুলিকে সুন্দরভাবে লাইন আপ করতে এবং তাদের চারপাশে ভিজ্যুয়াল রূপরেখা রাখতে CSS ব্যবহার করি। আমরা এটিকে অন্যান্য মেনু বারের মতো যথেষ্ট দেখাই যা দর্শনার্থীরা স্বজ্ঞাতভাবে জানে যে এটি একটি মেনু বার এবং এটি কীভাবে ব্যবহার করতে হয়। আমাদের মেনু বার এমনকি মাউস শেষ হয়ে যাওয়া যে কোনো আইটেমে একটি ভিন্ন পটভূমির রঙ ব্যবহার করে, ব্যবহারকারীকে কিছু সহায়ক ভিজ্যুয়াল প্রতিক্রিয়া দেয়।

কিছু মেনু আইটেম বাবা. তারা শিশু সাবমেনুস তৈরি করে। যখনই ব্যবহারকারী এইগুলির একটিতে হোভার করে তখনই আমরা একটি অ্যানিমেশন শুরু করি যা চাইল্ড সাবমেনুকে স্লাইড করে দেয়।

ওয়েবে অনেক জিনিসের ক্ষেত্রে এটি স্বাভাবিকের মতোই বেশ দুর্গম।

আমাদের মেনু বার কীবোর্ড অ্যাক্সেসযোগ্য করুন

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

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

• যদি ব্যবহারকারী কোনও তীর কী টিপুন তবে আসুন আমাদের নিজস্ব অভ্যন্তরীণ মেনু বার ব্লুপ্রিন্টগুলি দেখুন এবং নতুন সক্রিয় মেনু আইটেমটি কী হওয়া উচিত তা স্থির করুন। আমরা যে কোনও বর্তমান হাইলাইটগুলি সাফ করব এবং নতুন মেনু আইটেমটি হাইলাইট করব যাতে দর্শনীয় ব্যবহারকারীরা দৃশ্যমানভাবে জানেন যে তারা কোথায়। ওয়েব পৃষ্ঠাটি তখন ব্রাউজারটিকে সাধারণ ক্রিয়া সম্পাদন করতে বাধা দেওয়ার জন্য event.preventDefault() কল করা উচিত (এই ক্ষেত্রে পৃষ্ঠাটি স্ক্রোলিং করা)।
• যদি ব্যবহারকারী এন্টার কীটি টিপে তবে আমরা এটিকে ঠিক একটি ক্লিকের মতোই চিকিত্সা করতে পারি এবং উপযুক্ত ক্রিয়াটি সম্পাদন করতে পারি (বা এমনকি অন্য কোনও মেনুও খুলুন)।
• যদি ব্যবহারকারী কোনও কী টিপুন যা অন্য কিছু করা উচিত, তবে এটি পৃষ্ঠায় ফেরত পাঠান। উদাহরণস্বরূপ, আমাদের মেনু বারের ট্যাব কীটির দরকার নেই, তাই এটি পিছনে ফেলে দিন! এটি সঠিক হওয়া শক্ত। উদাহরণস্বরূপ, মেনু বারের জন্য তীর কীগুলির প্রয়োজন, তবে Alt + তীর বা কমান্ড + তীর নয়। সেগুলি আপনার ব্রাউজার ট্যাবের ওয়েব ইতিহাসের পূর্ববর্তী এবং পরবর্তী পৃষ্ঠায় যাওয়ার জন্য শর্টকাট। লেখক যদি সাবধান না হন তবে মেনু বার সেগুলি খাবে। এই ধরণের বাগটি অনেক কিছু ঘটে, এবং আমরা এখনও আরিয়া দিয়ে শুরু করি নি!

আমাদের মেনু বারে স্ক্রিন পাঠক অ্যাক্সেস

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

তবে এটা কোন ফর্সা! মেনু বারটি দর্শনীয় ব্যবহারকারীর জন্য ঠিক সূক্ষ্ম কাজ করে।

আরিয়া উদ্ধার করতে। আরিয়া আমাদের স্ক্রিন রিডারকে ভান করতে দেয় যে ফোকাস একটি মেনু বারে রয়েছে। লেখক যদি সবকিছু ঠিকঠাক করেন তবে আমাদের কাস্টম মেনু বারটি ডেস্কটপ অ্যাপ্লিকেশনটিতে মেনু বারের মতো স্ক্রিন রিডারকে দেখবে।

আমাদের প্রথম আরিয়া মিথ্যাটি হ'ল aria-activedescendant বৈশিষ্ট্য। সক্রিয় মেনু আইটেমের আইডিতে বৈশিষ্ট্যটি সেট করুন, যখনই এটি পরিবর্তিত হয় এটি আপডেট করার জন্য সতর্কতা অবলম্বন করুন। উদাহরণস্বরূপ, aria-activedescendant="settings-menuitem" । এটি স্ক্রিন পাঠককে আমাদের আরিয়া সক্রিয় আইটেমটিকে ফোকাস হিসাবে বিবেচনা করে, যা উচ্চস্বরে পড়া বা ব্রেইল ডিসপ্লেতে প্রদর্শিত হয়।

ফোকাসড মেনু বার থেকে একটি নির্দিষ্ট মেনু আইটেমটিতে নির্দেশ করার জন্য aria-activedescendant ব্যবহার করে, স্ক্রিন পাঠক এখন জানেন যে ব্যবহারকারী কোথায় চলে গেছে, তবে অবজেক্টটি সম্পর্কে অন্য কিছুই নয়। যাইহোক এই ডিভ জিনিস কি? role="menubar" ভূমিকা role="menu" role="menuitem" We

এবং যদি মেনুইটেম কোনও শিশু মেনুতে নিয়ে যেতে পারে? ব্যবহারকারীর এটি জানতে হবে। কোনও দৃষ্টিশক্তি ব্যবহারকারীর জন্য, মেনুটির শেষে একটি ত্রিভুজের একটি ছোট্ট ছবি থাকতে পারে তবে স্ক্রিন পাঠক কীভাবে স্বয়ংক্রিয়ভাবে চিত্রগুলি পড়তে হয় তা জানেন না, কমপক্ষে এই মুহুর্তে। আমরা প্রতিটি প্রসারণযোগ্য মেনুইটেমের উপর aria-expanded="false" যুক্ত করতে পারি যে এটি এমন কিছু রয়েছে যা প্রসারিত করা যায় এবং এটি প্রসারিত হয় না। অধিকন্তু, লেখকের img ত্রিভুজটিতে role="none" রাখা উচিত যাতে এটি কেবল সৌন্দর্যের উদ্দেশ্যে। এটি স্ক্রিন পাঠককে চিত্রটি সম্পর্কে কিছু বলতে বাধা দেয় যা অপ্রয়োজনীয় হবে।

কীবোর্ড বাগগুলি ঠিক করুন

যদিও কীবোর্ড অ্যাক্সেস মূল এইচটিএমএল এর একটি অংশ, এটি ওভাররাইট করা সহজ। যেমন:

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

লেখকদের জ্ঞাত নিদর্শনগুলি অনুসরণ করা উচিত। আরও তথ্যের জন্য সংস্থান বিভাগটি দেখুন।

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

কীবোর্ড বাগগুলি প্রায় সর্বদা ওয়েব সামগ্রীতে একটি বাগ, বিশেষত তাদের এইচটিএমএল এবং জাভাস্ক্রিপ্টে, এআরআইএতে নয়।

কেন অনেক আছে?

একজন লেখক আরিয়াকে ভুল পেতে পারে এমন অনেকগুলি উপায় রয়েছে। প্রতিটি ভুল হয় সম্পূর্ণ ভাঙ্গন বা সূক্ষ্ম পার্থক্যের দিকে পরিচালিত করে। সূক্ষ্ম সমস্যাগুলি আরও খারাপ হতে পারে, কারণ প্রকাশের আগে লেখক তাদের ধরার সম্ভাবনা কম।

সর্বোপরি, যদি না লেখক অভিজ্ঞ স্ক্রিন রিডার ব্যবহারকারী না হন তবে আরিয়ায় কিছু ভুল হতে চলেছে। আমাদের মেনু বারের উদাহরণে, লেখক ভাবতে পারেন যে "মেনুইটেম" সঠিক ছিল তখন "বিকল্প" ভূমিকাটি ব্যবহার করা উচিত। তারা aria-expanded ব্যবহার করতে ভুলে যেতে পারে, সঠিক সময়ে aria-activedescendant সেট করতে এবং পরিষ্কার করতে ভুলে যেতে পারে বা অন্য মেনুযুক্ত মেনু বার রাখতে ভুলে যেতে পারে। এবং মেনু আইটেম গণনা সম্পর্কে কি? সাধারণত মেনু আইটেমগুলি স্ক্রিন পাঠকদের দ্বারা "5 এর আইটেম 3" এর মতো কিছু সহ উপস্থাপন করা হয় যাতে ব্যবহারকারীরা জানেন যে তারা কোথায় আছেন। এটি সাধারণত ব্রাউজার দ্বারা স্বয়ংক্রিয়ভাবে গণনা করা হয়, তবে কিছু ক্ষেত্রে এবং কিছু ব্রাউজারে-স্ক্রিন রিডার সংমিশ্রণে ভুল সংখ্যাগুলি গণনা করা যেতে পারে এবং লেখককে aria-posinset এবং aria-setsize সাথে এই সংখ্যাগুলি ওভাররাইড করতে হবে।

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

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

সারাংশ

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

আরিয়া একটি মার্কআপ স্তর যা অন্যান্য পছন্দগুলিকে ওভাররাইড করে। যখন কোনও স্ক্রিন রিডার জিজ্ঞাসা করে যে কী ঘটছে, যদি এআরআইএ বিদ্যমান থাকে, ব্যবহারকারী সত্যের আরিয়া সংস্করণ পান।

অতিরিক্ত সম্পদ

ডাব্লু 3 সি এর এআরআইএ রাইটিং অনুশীলনগুলি প্রতিটি উদাহরণের গুরুত্বপূর্ণ কীবোর্ড নেভিগেশন বৈশিষ্ট্যগুলি নথি করে এবং ওয়ার্কিং জাভাস্ক্রিপ্ট, সিএসএস এবং এআরআইএ সরবরাহ করে। উদাহরণগুলি আজ কী কাজ করে তার দিকে মনোনিবেশ করা হয় এবং মোবাইলটি কভার করে না।

একটি অ্যাক্সেসিবিলিটি এপিআই কী?

একটি অ্যাক্সেসিবিলিটি এপিআই হ'ল কীভাবে কোনও স্ক্রিন রিডার বা অন্যান্য সহায়ক প্রযুক্তি জানে যে পৃষ্ঠায় কী রয়েছে এবং কী ঘটছে। উদাহরণগুলির মধ্যে এমএসএএ, আইএ 2 এবং ইউআইএ অন্তর্ভুক্ত রয়েছে। অ্যাক্সেসিবিলিটি এপিআইয়ের দুটি অংশ রয়েছে:

• অবজেক্টগুলির একটি "গাছ" যা একটি ধারক শ্রেণিবিন্যাসকে উপস্থাপন করে। উদাহরণস্বরূপ, একটি নথিতে অনুচ্ছেদের একগুচ্ছ থাকতে পারে। একটি অনুচ্ছেদে পাঠ্য, চিত্র, লিঙ্ক এবং পাঠ্য সজ্জা থাকতে পারে। অবজেক্ট ট্রি এর প্রতিটি আইটেমের বৈশিষ্ট্য থাকতে পারে যেমন ভূমিকা (আমি কী?), একটি নাম বা লেবেল, একটি ব্যবহারকারী-প্রবেশের মান, একটি বিবরণ এবং বুলিয়ান রাজ্যগুলি যেমন ফোকাসযোগ্য, ফোকাসযুক্ত, প্রয়োজনীয়, চেক করা। আরিয়া এই বৈশিষ্ট্যগুলির যে কোনও একটিকে ওভাররাইড করতে পারে।
  • স্ক্রিন পাঠকরা গাছটি ভার্চুয়াল বাফার মোডে নেভিগেট করতে সহায়তা করতে গাছটি ব্যবহার করেন, যেমন, "পরবর্তী শিরোনামে যান, দয়া করে"।
• "ফোকাস এখন এখানে শেষ হয়েছে!" এর মতো গাছের পরিবর্তনগুলি বর্ণনা করে এমন একটি সিরিজ ইভেন্টগুলি ঘটে। স্ক্রিন রিডার ব্যবহারকারীকে সবেমাত্র কী ঘটেছে তা জানাতে ইভেন্টগুলি ব্যবহার করে। যখন গুরুত্বপূর্ণ এইচটিএমএল বা আরিয়া মার্কআপ পরিবর্তন হয়, তখন স্ক্রিন পাঠককে কিছু পরিবর্তন করার জন্য একটি ইভেন্ট বরখাস্ত করা হয়।

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

Aaron Leventhal

ARIA কি?

আরিয়া ওয়েব লেখকদের একটি বিকল্প বাস্তবতা তৈরি করতে দেয়, কেবল স্ক্রিন পাঠকদের দ্বারা দেখা।

কখনও কখনও ওয়েব সামগ্রীতে কী ঘটছে সে সম্পর্কে পাঠকদের স্ক্রিন করতে সত্য বা এমনকি একেবারে "মিথ্যা" প্রসারিত করা প্রয়োজন। উদাহরণস্বরূপ, "ফোকাস সত্যিই এখানে!" বা "এটি সত্যিই একটি স্লাইডার!"। এটি আপনার ওয়ার্কবেঞ্চে সরঞ্জাম এবং উইজেটগুলির শীর্ষে যাদুকরী স্টিকি নোট যুক্ত করার মতো। এই যাদুকরী স্টিকি নোটগুলি প্রত্যেককে তাদের উপর কী লেখা আছে তা বিশ্বাস করে।

যখন কোনও যাদুকরী স্টিকি নোট বিদ্যমান থাকে, এটি হয় প্রতিটি সরঞ্জাম কী বা কী করে সে সম্পর্কে আমাদের বিশ্বাসকে ওভাররাইড করে। উদাহরণস্বরূপ, আপনি যদি আরিয়াকে যুক্ত করেন যা বলে যে "এই জিনিসটি এখানে একটি আঠালো বন্দুক!"। যদিও এটি একটি খালি নীল বাক্স বসে আছে, জাদুকরী স্টিকি নোটটি আমাদের জানায় যে এটি একটি আঠালো বন্দুক। আমরা আরও যোগ করতে পারি, "এবং এটি 30% পূর্ণ!"। স্ক্রিন রিডার এখন জানিয়েছে যে 30% পূর্ণ আঠালো বন্দুক রয়েছে।

এর সমতুল্য ওয়েবটি হ'ল এর অভ্যন্তরের একটি চিত্র সহ একটি সরল div গ্রহণ করা এবং এটি 100 এর মধ্যে 30 এর মূল্যতে স্লাইডার বলে আরিয়াকে ব্যবহার করে। আরিয়া div স্লাইডার করে না; এটি কেবল পর্দার পাঠককে এটি বলতে বলে।

আরিয়া কোনও ওয়েব পৃষ্ঠার উপস্থিতি বা মাউস বা কীবোর্ড ব্যবহারকারীর জন্য আচরণকে প্রভাবিত করে না। কেবলমাত্র সহায়ক প্রযুক্তির ব্যবহারকারীরা আরিয়ার প্রভাব লক্ষ্য করেন। ওয়েব বিকাশকারীরা কোনও সহায়ক প্রযুক্তি চালাচ্ছেন না এমন ব্যবহারকারীদের প্রভাবিত না করে কোনও স্বেচ্ছাসেবী আরিয়া যুক্ত করতে পারেন।

আপনি এটি ঠিক পড়েছেন: আরিয়া আসলে কীবোর্ড ফোকাস বা ট্যাব অর্ডারটিতে কিছু করে না। এগুলি এইচটিএমএলে সম্পন্ন হয়েছে, কখনও কখনও জাভাস্ক্রিপ্টের বিট দিয়ে টুইট করা হয়।

আরিয়া কীভাবে কাজ করে?

ব্রাউজারগুলি প্রতিটি উপাদান সম্পর্কে তথ্যের জন্য একটি স্ক্রিন রিডার বা অন্যান্য সহায়ক প্রযুক্তি দ্বারা জিজ্ঞাসা করা হয়। আরিয়া যখন কোনও উপাদানটিতে উপস্থিত থাকে, ব্রাউজারটি তথ্য গ্রহণ করে এবং এটি স্ক্রিন রিডারকে সেই উপাদানটি সম্পর্কে যা বলে তা পরিবর্তন করে।

এখানে আরিয়ার কিছু সাধারণ ব্যবহার রয়েছে।

• এইচটিএমএলে বিদ্যমান নেই এমন বিশেষ উপাদানগুলি যুক্ত করুন, যেমন অটো কমপ্লিট, একটি গাছ বা স্প্রেডশিটের মতো।
• এইচটিএমএলে বিদ্যমান উপাদানগুলি যুক্ত করুন, তবে লেখক সিদ্ধান্ত নিয়েছেন যে তাদের পুনরায় উদ্ভাবন করা উচিত, সম্ভবত তারা স্ট্যান্ডার্ড উপাদানটির আচরণ বা উপস্থিতি পরিবর্তন করতে চেয়েছিল। উদাহরণস্বরূপ, একটি এইচটিএমএল <input type="range"> উপাদানটি মূলত একটি স্লাইডার, তবে লেখকরা এটিকে আলাদা দেখাতে চান।
  • বেশিরভাগ ক্ষেত্রে, এটি সিএসএসের সাথে সম্বোধন করা যেতে পারে। তবে range জন্য, সিএসএস বিশ্রী। লেখকরা তাদের নিজস্ব স্লাইডার তৈরি করতে পারেন এবং role="slider" ব্যবহার করতে পারেন aria-valuenow সাথে কীবোর্ডটি বর্তমান মানটি কী তা জানাতে।
• কোনও পৃষ্ঠার কোনও অঞ্চলে প্রাসঙ্গিক পরিবর্তন সম্পর্কে স্ক্রিন পাঠকদের বলার জন্য লাইভ অঞ্চলগুলি অন্তর্ভুক্ত করুন।
• শিরোনামগুলির মতো ল্যান্ডমার্কগুলি তৈরি করুন। ল্যান্ডমার্কগুলি স্ক্রিন রিডার ব্যবহারকারীদের তারা কী চায় তা দ্রুত খুঁজে পেতে সহায়তা করে। ল্যান্ডমার্কগুলিতে একটি সম্পূর্ণ সম্পর্কিত অঞ্চল থাকতে পারে। উদাহরণস্বরূপ, "এই ধারকটি পৃষ্ঠার প্রধান ক্ষেত্র" এবং "এখানে এই ধারকটি একটি নেভিগেশন প্যানেল"।

আরিয়া কেন?

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

মেনু বারের উদাহরণ

ধরা যাক স্থানীয় ওয়েব স্টোর আমাদের প্রয়োজনীয় সমস্ত উইজেট বিক্রি করে না। তবে, আমরা ম্যাকজিভার । আমরা কেবল অন্য উইজেটগুলি থেকে আমাদের নিজস্ব উইজেটগুলি আবিষ্কার করতে পারি! এটি এমন কোনও ওয়েব লেখকের সাথে বেশ মিল যা মেনু বার তৈরি করতে হবে।

<nav> উপাদানটি বিদ্যমান থাকাকালীন, মেনু বারগুলি প্রায়শই ডিভস, চিত্র, বোতামগুলি, হ্যান্ডলারগুলি, কীপ্রেস হ্যান্ডলগুলি এবং এআরআইএ ব্যবহার করে একসাথে আবদ্ধ হয়।

মাউস ব্যবহারকারীদের সমর্থন করুন

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

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

কিছু মেনু আইটেম বাবা -মা। তারা শিশু সাবমেনাস স্প্যান করে। যখনই ব্যবহারকারী এর মধ্যে একটিতে ঘোরাফেরা করে আমরা একটি অ্যানিমেশন শুরু করি যা শিশু সাবমেনু স্লাইড করে।

এটি সমস্ত বেশ অ্যাক্সেসযোগ্য, যেমন ওয়েবে অনেক কিছুর জন্য সাধারণ কেস।

আমাদের মেনু বার কীবোর্ড অ্যাক্সেসযোগ্য করুন

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

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

• যদি ব্যবহারকারী কোনও তীর কী টিপুন তবে আসুন আমাদের নিজস্ব অভ্যন্তরীণ মেনু বার ব্লুপ্রিন্টগুলি দেখুন এবং নতুন সক্রিয় মেনু আইটেমটি কী হওয়া উচিত তা স্থির করুন। আমরা যে কোনও বর্তমান হাইলাইটগুলি সাফ করব এবং নতুন মেনু আইটেমটি হাইলাইট করব যাতে দর্শনীয় ব্যবহারকারীরা দৃশ্যমানভাবে জানেন যে তারা কোথায়। ওয়েব পৃষ্ঠাটি তখন ব্রাউজারটিকে সাধারণ ক্রিয়া সম্পাদন করতে বাধা দেওয়ার জন্য event.preventDefault() কল করা উচিত (এই ক্ষেত্রে পৃষ্ঠাটি স্ক্রোলিং করা)।
• যদি ব্যবহারকারী এন্টার কীটি টিপে তবে আমরা এটিকে ঠিক একটি ক্লিকের মতোই চিকিত্সা করতে পারি এবং উপযুক্ত ক্রিয়াটি সম্পাদন করতে পারি (বা এমনকি অন্য কোনও মেনুও খুলুন)।
• যদি ব্যবহারকারী কোনও কী টিপুন যা অন্য কিছু করা উচিত, তবে এটি পৃষ্ঠায় ফেরত পাঠান। উদাহরণস্বরূপ, আমাদের মেনু বারের ট্যাব কীটির দরকার নেই, তাই এটি পিছনে ফেলে দিন! এটি সঠিক হওয়া শক্ত। উদাহরণস্বরূপ, মেনু বারের জন্য তীর কীগুলির প্রয়োজন, তবে Alt + তীর বা কমান্ড + তীর নয়। সেগুলি আপনার ব্রাউজার ট্যাবের ওয়েব ইতিহাসের পূর্ববর্তী এবং পরবর্তী পৃষ্ঠায় যাওয়ার জন্য শর্টকাট। লেখক যদি সাবধান না হন তবে মেনু বার সেগুলি খাবে। এই ধরণের বাগটি অনেক কিছু ঘটে, এবং আমরা এখনও আরিয়া দিয়ে শুরু করি নি!

আমাদের মেনু বারে স্ক্রিন পাঠক অ্যাক্সেস

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

তবে এটা কোন ফর্সা! মেনু বারটি দর্শনীয় ব্যবহারকারীর জন্য ঠিক সূক্ষ্ম কাজ করে।

আরিয়া উদ্ধার করতে। আরিয়া আমাদের স্ক্রিন রিডারকে ভান করতে দেয় যে ফোকাস একটি মেনু বারে রয়েছে। লেখক যদি সবকিছু ঠিকঠাক করেন তবে আমাদের কাস্টম মেনু বারটি ডেস্কটপ অ্যাপ্লিকেশনটিতে মেনু বারের মতো স্ক্রিন রিডারকে দেখবে।

আমাদের প্রথম আরিয়া মিথ্যাটি হ'ল aria-activedescendant বৈশিষ্ট্য। সক্রিয় মেনু আইটেমের আইডিতে বৈশিষ্ট্যটি সেট করুন, যখনই এটি পরিবর্তিত হয় এটি আপডেট করার জন্য সতর্কতা অবলম্বন করুন। উদাহরণস্বরূপ, aria-activedescendant="settings-menuitem" । এটি স্ক্রিন পাঠককে আমাদের আরিয়া সক্রিয় আইটেমটিকে ফোকাস হিসাবে বিবেচনা করে, যা উচ্চস্বরে পড়া বা ব্রেইল ডিসপ্লেতে প্রদর্শিত হয়।

ফোকাসড মেনু বার থেকে একটি নির্দিষ্ট মেনু আইটেমটিতে নির্দেশ করার জন্য aria-activedescendant ব্যবহার করে, স্ক্রিন পাঠক এখন জানেন যে ব্যবহারকারী কোথায় চলে গেছে, তবে অবজেক্টটি সম্পর্কে অন্য কিছুই নয়। যাইহোক এই ডিভ জিনিস কি? role="menubar" ভূমিকা role="menu" role="menuitem" We

এবং যদি মেনুইটেম কোনও শিশু মেনুতে নিয়ে যেতে পারে? ব্যবহারকারীর এটি জানতে হবে। কোনও দৃষ্টিশক্তি ব্যবহারকারীর জন্য, মেনুটির শেষে একটি ত্রিভুজের একটি ছোট্ট ছবি থাকতে পারে তবে স্ক্রিন পাঠক কীভাবে স্বয়ংক্রিয়ভাবে চিত্রগুলি পড়তে হয় তা জানেন না, কমপক্ষে এই মুহুর্তে। আমরা প্রতিটি প্রসারণযোগ্য মেনুইটেমের উপর aria-expanded="false" যুক্ত করতে পারি যে এটি এমন কিছু রয়েছে যা প্রসারিত করা যায় এবং এটি প্রসারিত হয় না। অধিকন্তু, লেখকের img ত্রিভুজটিতে role="none" রাখা উচিত যাতে এটি কেবল সৌন্দর্যের উদ্দেশ্যে। এটি স্ক্রিন পাঠককে চিত্রটি সম্পর্কে কিছু বলতে বাধা দেয় যা অপ্রয়োজনীয় হবে।

কীবোর্ড বাগগুলি ঠিক করুন

যদিও কীবোর্ড অ্যাক্সেস মূল এইচটিএমএল এর একটি অংশ, এটি ওভাররাইট করা সহজ। যেমন:

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

লেখকদের জ্ঞাত নিদর্শনগুলি অনুসরণ করা উচিত। আরও তথ্যের জন্য সংস্থান বিভাগটি দেখুন।

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

কীবোর্ড বাগগুলি প্রায় সর্বদা ওয়েব সামগ্রীতে একটি বাগ, বিশেষত তাদের এইচটিএমএল এবং জাভাস্ক্রিপ্টে, এআরআইএতে নয়।

কেন অনেক আছে?

একজন লেখক আরিয়াকে ভুল পেতে পারে এমন অনেকগুলি উপায় রয়েছে। প্রতিটি ভুল হয় সম্পূর্ণ ভাঙ্গন বা সূক্ষ্ম পার্থক্যের দিকে পরিচালিত করে। সূক্ষ্ম সমস্যাগুলি আরও খারাপ হতে পারে, কারণ প্রকাশের আগে লেখক তাদের ধরার সম্ভাবনা কম।

সর্বোপরি, যদি না লেখক অভিজ্ঞ স্ক্রিন রিডার ব্যবহারকারী না হন তবে আরিয়ায় কিছু ভুল হতে চলেছে। আমাদের মেনু বারের উদাহরণে, লেখক ভাবতে পারেন যে "মেনুইটেম" সঠিক ছিল তখন "বিকল্প" ভূমিকাটি ব্যবহার করা উচিত। তারা aria-expanded ব্যবহার করতে ভুলে যেতে পারে, সঠিক সময়ে aria-activedescendant সেট করতে এবং পরিষ্কার করতে ভুলে যেতে পারে বা অন্য মেনুযুক্ত মেনু বার রাখতে ভুলে যেতে পারে। এবং মেনু আইটেম গণনা সম্পর্কে কি? সাধারণত মেনু আইটেমগুলি স্ক্রিন পাঠকদের দ্বারা "5 এর আইটেম 3" এর মতো কিছু সহ উপস্থাপন করা হয় যাতে ব্যবহারকারীরা জানেন যে তারা কোথায় আছেন। এটি সাধারণত ব্রাউজার দ্বারা স্বয়ংক্রিয়ভাবে গণনা করা হয়, তবে কিছু ক্ষেত্রে এবং কিছু ব্রাউজারে-স্ক্রিন রিডার সংমিশ্রণে ভুল সংখ্যাগুলি গণনা করা যেতে পারে এবং লেখককে aria-posinset এবং aria-setsize সাথে এই সংখ্যাগুলি ওভাররাইড করতে হবে।

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

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

সারাংশ

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

আরিয়া একটি মার্কআপ স্তর যা অন্যান্য পছন্দগুলিকে ওভাররাইড করে। যখন কোনও স্ক্রিন রিডার জিজ্ঞাসা করে যে কী ঘটছে, যদি এআরআইএ বিদ্যমান থাকে, ব্যবহারকারী সত্যের আরিয়া সংস্করণ পান।

অতিরিক্ত সম্পদ

ডাব্লু 3 সি এর এআরআইএ রাইটিং অনুশীলনগুলি প্রতিটি উদাহরণের গুরুত্বপূর্ণ কীবোর্ড নেভিগেশন বৈশিষ্ট্যগুলি নথি করে এবং ওয়ার্কিং জাভাস্ক্রিপ্ট, সিএসএস এবং এআরআইএ সরবরাহ করে। উদাহরণগুলি আজ কী কাজ করে তার দিকে মনোনিবেশ করা হয় এবং মোবাইলটি কভার করে না।

একটি অ্যাক্সেসিবিলিটি এপিআই কী?

একটি অ্যাক্সেসিবিলিটি এপিআই হ'ল কীভাবে কোনও স্ক্রিন রিডার বা অন্যান্য সহায়ক প্রযুক্তি জানে যে পৃষ্ঠায় কী রয়েছে এবং কী ঘটছে। উদাহরণগুলির মধ্যে এমএসএএ, আইএ 2 এবং ইউআইএ অন্তর্ভুক্ত রয়েছে। অ্যাক্সেসিবিলিটি এপিআইয়ের দুটি অংশ রয়েছে:

• অবজেক্টগুলির একটি "গাছ" যা একটি ধারক শ্রেণিবিন্যাসকে উপস্থাপন করে। উদাহরণস্বরূপ, একটি নথিতে অনুচ্ছেদের একগুচ্ছ থাকতে পারে। একটি অনুচ্ছেদে পাঠ্য, চিত্র, লিঙ্ক এবং পাঠ্য সজ্জা থাকতে পারে। অবজেক্ট ট্রি এর প্রতিটি আইটেমের বৈশিষ্ট্য থাকতে পারে যেমন ভূমিকা (আমি কী?), একটি নাম বা লেবেল, একটি ব্যবহারকারী-প্রবেশের মান, একটি বিবরণ এবং বুলিয়ান রাজ্যগুলি যেমন ফোকাসযোগ্য, ফোকাসযুক্ত, প্রয়োজনীয়, চেক করা। আরিয়া এই বৈশিষ্ট্যগুলির যে কোনও একটিকে ওভাররাইড করতে পারে।
  • স্ক্রিন পাঠকরা গাছটি ভার্চুয়াল বাফার মোডে নেভিগেট করতে সহায়তা করতে গাছটি ব্যবহার করেন, যেমন, "পরবর্তী শিরোনামে যান, দয়া করে"।
• "ফোকাস এখন এখানে শেষ হয়েছে!" এর মতো গাছের পরিবর্তনগুলি বর্ণনা করে এমন একটি সিরিজ ইভেন্টগুলি ঘটে। স্ক্রিন রিডার ব্যবহারকারীকে সবেমাত্র কী ঘটেছে তা জানাতে ইভেন্টগুলি ব্যবহার করে। যখন গুরুত্বপূর্ণ এইচটিএমএল বা আরিয়া মার্কআপ পরিবর্তন হয়, তখন স্ক্রিন পাঠককে কিছু পরিবর্তন করার জন্য একটি ইভেন্ট বরখাস্ত করা হয়।

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