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 শব্দার্থকে ওভাররাইড করে।