এইচটিএমএল 5 এআরআইএ কী?


249

এইচটিএমএল 5 এআরআইএ কী? কীভাবে এটি প্রয়োগ করা যায় তা আমি বুঝতে পারি না।


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

আমি এটি ফেসবুকের এইচটিএমএলে দেখেছি।
নির্বাচক

উত্তর:


213

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

এআরআইএ স্পেকের একটি উদাহরণ এখানে:

<ul role="menubar">

  <!-- Rule 2A: "File" label via aria-labelledby -->
  <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
    <ul role="menu">

      <!-- Rule 2C: "New" label via Namefrom:contents -->
      <li role="menuitem" aria-haspopup="false">New</li>
      <li role="menuitem" aria-haspopup="false">Open…</li>
      ...
    </ul>
  </li>
  ...
</ul>

roleবাইরের <ul>উপাদানটির বৈশিষ্ট্যটি নোট করুন । এই বৈশিষ্ট্যটি ব্রাউজারের মাধ্যমে কীভাবে স্ক্রিনে মার্কআপ রেন্ডার হয় তা কোনওভাবেই প্রভাব ফেলবে না; তবে, ব্রাউজারগুলি যা এআরআইএ সমর্থন করে তারা রেন্ডারযুক্ত ইউআই উপাদানটিতে ওএস-নির্দিষ্ট অ্যাক্সেসিবিলিটি তথ্য যুক্ত করবে, যাতে স্ক্রিন রিডার এটিকে মেনু হিসাবে ব্যাখ্যা করতে পারে এবং শেষ-ব্যবহারকারীর বুঝতে যথেষ্ট প্রসঙ্গে এটি জোরে জোরে পড়তে পারে (উদাহরণস্বরূপ, একটি স্পষ্ট "মেনু" অডিও ইঙ্গিত) এবং এটির সাথে ইন্টারঅ্যাক্ট করতে সক্ষম (উদাহরণস্বরূপ, ভয়েস নেভিগেশন)।


11
ডেটা অ্যাট্রিবিউট এবং আরিয়ার মধ্যে পার্থক্য কী?
জ্যাকমাহিনী

55
ariaবিশেষত অ্যাক্সেসযোগ্যতার জন্য, এবং এলোমেলো ডেটা সঞ্চয় করার জন্য ব্যবহার করা উচিত নয়। dataএলোমেলো ডেটার জন্য অ্যাপ্লিকেশনটির নোডের সাথে সংযুক্ত হওয়া দরকার।
ফ্রেঞ্চি পেনভ

2
দয়া করে মনে রাখবেন: role="menu"এবং "menuitem"এপিপিএসের জন্য সঠিক (যেমন মেনুযুক্ত সফ্টওয়্যার File > Openবা এর মতো Edit > Copy to clipboard। একটি ক্লাসিকাল ওয়েবসাইটের জন্য সম্ভবত সাধারণত <ul>(= ডিফল্টরূপে ভূমিকা তালিকা) থাকা ভাল কারণ আপনি কেবল অন্য ওয়েবপৃষ্ঠাতে লিঙ্ক সরবরাহ করছেন এবং এর মতো কোনও কার্য নেই like "সংরক্ষণ করুন" বা "অনুলিপি / পেস্ট" you আপনি যদি ব্যবহার করছেন role="menu"তবে আপনার কীবোর্ডের তীরচিহ্নগুলির সাথে
ওফস ডি'ও

62

এআরআইএ মানে অ্যাক্সেসযোগ্য সমৃদ্ধ ইন্টারনেট অ্যাপ্লিকেশন।

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

এবং যদি আপনি ভাবছেন যে ডাব্লুআইএআইএআরআই কি, এটি একই জিনিস।

দয়া করে ডাব্লুআইএআই-এআরআইএ এবং এআরআইএ শর্তাদি নোট করুন। তবে ডাব্লুএআইএর উত্সটি স্বীকার করার জন্য ডাব্লুআইএআইএআরআই ব্যবহার করা আরও সঠিক।

ডাব্লুআইআই = ওয়েব অ্যাক্সেসিবিলিটি উদ্যোগ ia

এর চেহারা থেকে, এআরআইএ সহায়ক প্রযুক্তি এবং বেশিরভাগ স্ক্রিন রিডিংয়ের জন্য ব্যবহৃত হয়।

আপনি এই নিবন্ধটি পড়লে আপনার বেশিরভাগ সন্দেহ মুছে যাবে

http://www.w3.org/TR/aria-in-html/


23

এটা কি?

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

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

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

এর ব্যতিক্রম হ'ল ডকুমেন্ট ল্যান্ডমার্কের ভূমিকা, যা প্রশ্নে থাকা উপাদানটির আসল অর্থ পরিবর্তন করে না, তবে একটি নথিতে এই নির্দিষ্ট স্থান সম্পর্কে তথ্য সরবরাহ করে।

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

এটা কি না?

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

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

আমি কখন এটি ব্যবহার করব না?

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


13

এআরআইএ কী?

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

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

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

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


7

আমি এআরআইএ সম্পর্কিত আরও কিছু প্রশ্ন চালিয়েছি। তবে বিষয়বস্তু এই প্রশ্নের জন্য আরও আশাব্যঞ্জক বলে মনে হচ্ছে। সেগুলি ভাগ করতে চাই

এআরআইএ কী?

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

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

আর এআরআইএ লাইভের জন্য এটি আপনার টিউব ভিডিওটি দেখুন ।


ছোট সংশোধন: শব্দার্থক এইচটিএমএল 5 উপাদানগুলি ব্যবহার করার সময়, আপনি কেবল তখনই তাদের সম্পর্কিত ভূমিকাটি নির্ধারণ করতে হবে যদি আপনি নির্বাচিত উপাদানটির শব্দার্থবিজ্ঞান যথেষ্ট তথ্য না দেয়। অন্য কথায়, যদি আপনার কাছে নেভ উপাদান থাকে তবে ভূমিকা = "নেভিগেশন" যুক্ত করার দরকার নেই, কারণ উপাদানটি পছন্দ থেকে ইতিমধ্যে পরিষ্কার। তবে সাইটটি অনুসন্ধানের জন্য যদি আপনার কাছে একটি ইনপুট উপাদান থাকে তবে আপনার ভূমিকা = "অনুসন্ধান" যুক্ত করা উচিত কারণ ইনপুট উপাদানগুলি অনুসন্ধান ব্যতীত অন্য অনেক কিছুর জন্য ব্যবহৃত হয় এবং এটি সেই নির্দিষ্ট ইনপুটটিকে অনুসন্ধানের ভূমিকা হিসাবে চিহ্নিত করে।
ব্রেণ্যনৌং
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.