আরিয়া-লেবেল কী এবং আমি কীভাবে এটি ব্যবহার করব?

321

কয়েক ঘন্টা আগে আমি আরিয়া-লেবেল বৈশিষ্ট্য সম্পর্কে পড়েছিলাম , যা:

একটি স্ট্রিং মান সংজ্ঞায়িত করে যা বর্তমান উপাদানটিকে লেবেল করে।

তবে আমার মতে titleএট্রিবিউটটি করার কথা ছিল। কিছু উদাহরণ এবং ব্যাখ্যা পেতে আমি মজিলা বিকাশকারী নেটওয়ার্কে আরও তাকালাম , তবে কেবলমাত্র আমি খুঁজে পেলাম

<button aria-label="Close" onclick="myDialog.close()">X</button>

যা আমাকে কোনও লেবেল সরবরাহ করে না (তাই আমি ধারণা করি আমি ধারণাটি ভুল বুঝেছি)। আমি এখানে জিসফিল এ চেষ্টা করেছিলাম ।

সুতরাং আমার প্রশ্নটি হল: আমার কেন দরকার aria-labelএবং আমি এটি কীভাবে ব্যবহার করব?

html assistive-technology

— সালভাদোর ডালি
সূত্র

3

আপনি যে সংস্থানটি সংযুক্ত করেছেন তার দিকে তাকিয়ে মনে হচ্ছে aria-labelআপনি শিরোনাম বৈশিষ্ট্যের দ্বারা সরবরাহিত সরঞ্জামদণ্ডটি দেখাতে না চাইলে এটি ব্যবহার করা যেতে পারে: যে ক্ষেত্রে দৃশ্যমান লেবেল বা দৃশ্যমান টুলটিপটি অনাকাঙ্ক্ষিত হয় সেখানে লেখকগণ ম্যাক্সেসের অ্যাক্সেসযোগ্য নামটি সেট করে এরিয়া-লেবেল ব্যবহার করে উপাদান

— ফ্যাব্রিজিও ক্যাল্ডেরান

13

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

— এরিক ডি'সুজা

<h1> উপাদানটির ভিতরে প্রকৃত দৃশ্যমান পাঠ্য খুব সংক্ষিপ্ত হয়ে গেলে এবং সম্পূর্ণ পাঠ্যটি দৃশ্যমান হওয়ার জন্য এটি আকাঙ্ক্ষিত নয়, এমন কি আরও বর্ণনামূলক <h1> পাঠ্যের জন্য আরিয়া-লেবেল ব্যবহার করা উপযুক্ত কিনা তা কি কেউ জানেন? এই থ্রেডের উদাহরণগুলিতে একটি লেবেল ব্যবহার করা যেতে পারে। তবে লেবেলগুলি শিরোনামগুলিতে প্রযোজ্য নয় যে কারণে আমি জিজ্ঞাসা করি

— হ্যালো ওয়ার্ল্ড

আপনি কেবলমাত্র অনুরূপ অনুরোধটিই জিজ্ঞাসা করছেন হ'ল "দীর্ঘমেয়াদী" সম্পত্তি (কেবল চিত্রগুলির জন্য) এর জন্য আরও তথ্যের প্রয়োজন - ভাবতে পারবেন না যে পাঠ্যের জন্য এটি একটি ছিল কারণ এটি সর্বদা বর্ণনামূলক হওয়া উচিত Im - @ হেলো ওয়ার্ল্ড

— জেমি প্যাটারসন

426

এটি সহায়ক বৈশিষ্ট্য (যেমন স্ক্রিন পাঠক) অন্য কোনও বেনামে এইচটিএমএল উপাদানগুলির সাথে একটি লেবেল সংযুক্ত করার জন্য ডিজাইন করা একটি বৈশিষ্ট্য ।

সুতরাং <label>উপাদান আছে:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

<label>স্পষ্টভাবে তাদের নাম টাইপ করা ব্যবহারকারী বলে inputবক্স যেখানে id="fmUserName"।

aria-labelঅনেকটা একই কাজ করে তবে এটি সেই ক্ষেত্রে রয়েছে যেখানে labelস্ক্রিনে থাকা ব্যবহারিক বা পছন্দসই নয় । এমডিএন উদাহরণ নিন :

<button aria-label="Close" onclick="myDialog.close()">X</button>`

এই বোতামটি ডায়ালগটি বন্ধ করে দেবে বলে বেশিরভাগ লোকেরা দৃষ্টিভঙ্গি করতে পারবেন। সহায়ক প্রযুক্তি ব্যবহার করে একজন অন্ধ ব্যক্তি কেবল "এক্স" জোরে জোরে পড়তে শুনতে পাবে, যার অর্থ ভিজ্যুয়াল ক্লুগুলি ছাড়া বেশি নয়। aria-labelবোতামটি কী করবে তা স্পষ্টভাবে তাদের জানায়।

— অলি হজসন
সূত্র

4

ব্যাখ্যার জন্য ধন্যবাদ, তবে কীভাবে তিনি শুনতে পাবেন? আমার ব্রাউজারে (ক্রোম) এটি শুনতে আমি কী করতে পারি? এবং একজন অন্ধ ব্যক্তি কীভাবে এই বোতামটি নির্বাচন করতে পারে যদি এটি কোথায় থাকে তবে তার কী নেই?

— সালভাদোর ডালি

1

আমার ধারণা, ChromeVox এর মতো কোনও এক্সটেনশন শুরু করার জন্য ভাল জায়গা হবে? যদিও আমি এটি কখনও ব্যবহার করি নি। তারা ব্যবহারকারীর কাছে উচ্চস্বরে স্ক্রিনটি পড়ে কাজ করে, এইচটিএমএল থেকে সংকেত গ্রহণ করে (যেমন h1একটির চেয়ে বেশি জোর দেওয়া উচিত p, aএটি স্পষ্টভাবে একটি লিঙ্ক , ফর্ম somewhere কোথাও তথ্য প্রবেশ করানোর ইঙ্গিত দেয়, aria-*বৈশিষ্ট্যগুলি উপাদানগুলি কী করে ইত্যাদি আরও সংকেত দেয় ইত্যাদি) ।

— অলি হজসন

2

এই বিশেষ ক্ষেত্রে, আমি এটি একটি শিরোনামে যুক্ত করব attribute।

— এক্সটি

3

ChromeVox ছাড়াও, এনভিডিএ রয়েছে । উভয়ই ইনস্টল করা এবং শুরু করা মোটামুটি সহজ এবং মাস্টার করা বেশ কঠিন।

— ivarni

1

@ সালভাদোরডালি - কেবল তথ্যের জন্য। মোবাইল অন্ধ ব্যক্তি অ্যান্ড্রয়েড মোবাইলের জন্য অ্যাক্সেসযোগ্যতার সরঞ্জাম সক্ষম করতে পারে এটি টকব্যাক এবং আইওএস মোবাইলের জন্য এটি ভয়েসওভার। এটি ব্যবহার করে, পৃষ্ঠাটি প্রতিটি লাইনে পঠনযোগ্যভাবে পঠিত হয়।

— রাহুল জে রেন

71

আপনি যে উদাহরণটি দিয়েছেন তাতে আপনি পুরোপুরি ঠিক বলেছেন, আপনাকে শিরোনামের বৈশিষ্ট্যটি নির্ধারণ করতে হবে।

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

বোতাম দ্বারা পরিচালিত ক্রিয়াকে তথ্য দেওয়ার জন্য "এক্স" পর্যাপ্ত পরিমাণে নেই (কম্পিউটারের জ্ঞান নেই এমন ব্যক্তির কথা চিন্তা করুন)। এর অর্থ হতে পারে "বন্ধ", "মুছুন", "বাতিল", "হ্রাস", একটি অদ্ভুত ক্রস, একটি ডুডল, কিছুই নয়।

ডাব্লু 3 সি এর aria-labelপরিবর্তে titleএখানে বৈশিষ্ট্যটিকে প্রচার করে বলে মনে হচ্ছে : http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 একই উদাহরণে, আপনি দেখতে পারেন প্রযুক্তিটি সমর্থনটিতে স্ট্যান্ডার্ড ব্রাউজারগুলি অন্তর্ভুক্ত নয়: http://www.w3.org/WAI/WCAG20/T কৌশল / ua-notes/ aria#ARIA14

প্রকৃতপক্ষে aria-label, এই সঠিক পরিস্থিতিতে কোনও ক্রিয়াকে আরও প্রসঙ্গ দেওয়ার জন্য ব্যবহৃত হতে পারে:

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

  <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>

— আদম
সূত্র

35

আপনি যদি ব্যবহারিকভাবে কীভাবে aria-labelসহায়তা করেন তা যদি আপনি জানতে চান .. তবে পদক্ষেপগুলি অনুসরণ করুন ... আপনি এটি নিজের দ্বারা পেয়ে যাবেন ..

কোডের নীচে থাকা একটি এইচটিএমএল পৃষ্ঠা তৈরি করুন

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <button title="Close"> X </button>
    <br />
    <br />
    <br />
    <br />
    <button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>

এখন, আপনার একটি ভার্চুয়াল স্ক্রিন রিডার এমুলেটর দরকার যা পার্থক্যটি পর্যবেক্ষণ করতে ব্রাউজারে চলবে। সুতরাং, Chrome ব্রাউজার ব্যবহারকারীরা ইনস্টল করতে পারেন ChromeVox এক্সটেনশন এবং Mozilla ব্যবহারকারীদের সাথে যেতে পারেন বিষদাঁত স্ক্রিন রিডার addin

ইনস্টলেশন শেষ হয়ে গেলে, আপনার কানে হেডফোন রাখুন, এইচটিএমএল পৃষ্ঠাটি খুলুন এবং উভয় বোতামে ফোকাস করুন (ট্যাব টিপে টিপ দিয়ে) একের পর এক .. এবং আপনি শুনতে পাচ্ছেন .. উপর দৃষ্টি নিবদ্ধ রেখে first x button.. আপনাকে কেবল বলবে x button.. তবে এর ক্ষেত্রে second x button.. আপনি কেবল শুনবেন back to the page button..

আমি আশা করি আপনি এখন এটি ভাল পেয়েছি !!

— Moumit
সূত্র

1

একটি গুরুত্বপূর্ণ বিষয় হ'ল titleবৈশিষ্ট্যটি এড়ানো হয়, এমনকি প্রথম বোতামেও। আরও তথ্য: silktide.com/…

— স্পিনএক্সএক্সএক্স

2

এটা কি এখনও আছে? এখনও প্রদান করা ভাল title এবং aria-label ?

— কামাফেদার

2

আমি ঠিক তাই চেয়েছিলাম আমি কেবল এটি দেখতে এবং শুনতে চেয়েছিলাম যে এটি বাস্তব জগতে কীভাবে কাজ করে এবং chromevoxমনোমুগ্ধের মতো কাজ করে এবং আরিয়া-লেবেল্ডি ক্ষেত্রগুলি আবৃত্তি করবে। ধন্যবাদ।

— রাজ রাজেশ্বর সিং রাঠোর

7

পূর্বশর্তঃ

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

আরিয়া চাক্ষুষভাবে কিছুই পরিবর্তন করে না। (ডিজাইনারদেরও আরিয়া ভয় পান)।

Aria লেবেল

স্ক্রিন রিডার ব্যবহারকারীদের কাছে আরিয়া-লেবেল বৈশিষ্ট্যটি লেবেল যোগাযোগ করতে ব্যবহৃত হয়। সাধারণত অনুসন্ধান ইনপুট ক্ষেত্রে ভিজ্যুয়াল লেবেল থাকে না (ডিজাইনারদের ধন্যবাদ)। স্ক্রিন রিডার ব্যবহারকারীদের কাছে নিয়ন্ত্রণের লেবেল যোগাযোগ করতে আরিয়া-লেবেল ব্যবহার করা যেতে পারে

ব্যবহারবিধি:

<input type="edit" aria-label="search" placeholder="search">

আবেদনের কোনও দৃশ্য পরিবর্তন নেই। তবে স্ক্রিন পাঠকরা নিয়ন্ত্রণের উদ্দেশ্য বুঝতে পারেন

Aria-labelledby

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

পন্থা 1:

<span id="sd">Search</span>

<input type="text" aria-labelledby="sd">

পদ্ধতির 2:

স্ক্রিন রিডার ব্যবহারকারীদের জন্য দুটি লেবেল একত্রিত করতে আরিয়া-লেবেল্ডবি ব্যবহার করা যেতে পারে

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">

— ndioewbnc
সূত্র

3

দ্য titleমাউস উপাদান ঝুলে হয় অ্যাট্রিবিউটে একটি টুলটিপ প্রদর্শন করা হয়। যদিও এটি দুর্দান্ত সংযোজন, তবুও এটি এমন লোকদের সহায়তা করে না যারা মাউসটি ব্যবহার করতে পারে না (চলাফেরার অক্ষমতার কারণে) বা এই সরঞ্জামটিপটি দেখতে পারে না এমন লোকেদের (উদাহরণস্বরূপ: চাক্ষুষ অক্ষমতাযুক্ত ব্যক্তি বা স্ক্রিন রিডার ব্যবহারকারী লোক)।

এই হিসাবে, এখানে মনের মত মনোভাব সমস্ত ব্যবহারকারীদের পরিবেশন করা হবে। আমি উভয় titleএবং aria-labelবৈশিষ্ট্যগুলি যুক্ত করব (বিভিন্ন ধরণের ব্যবহারকারী এবং ওয়েবের বিভিন্ন ধরণের ব্যবহার পরিবেশন করা)।

এখানে একটি গভীর নিবন্ধ যা গভীরতার সাথে ব্যাখ্যা aria-labelকরে

— lucalanca
সূত্র