এইচটিএমএল 'লুকানো' এবং 'আরিয়া-লুকানো' বৈশিষ্ট্যের মধ্যে পার্থক্য কী?


256

অ্যাংুলার মেটেরিয়াল নিয়ে কাজ করার সময় আমি আরিয়া অ্যাট্রিবিউটটি দেখছি। কেউ আমাকে ব্যাখ্যা করতে পারেন, আরিয়া উপসর্গটির অর্থ কী? তবে সবচেয়ে বড় কথা আমি যা বোঝার চেষ্টা করছি তা হ'ল পার্থক্য aria-hiddenএবং hiddenগুণাবলীর মধ্যে পার্থক্য ।


1
আমি এখানে কিছু ব্যাখ্যা পেয়েছি: paciellogroup.com/blog/2012/05/…
আব্দুল

উত্তর:


363

এআরআইএ (অ্যাক্সেসযোগ্য সমৃদ্ধ ইন্টারনেট অ্যাপ্লিকেশন) ওয়েব সামগ্রী এবং ওয়েব অ্যাপ্লিকেশনগুলিকে প্রতিবন্ধী ব্যক্তিদের আরও অ্যাক্সেসযোগ্য করার জন্য একটি উপায় সংজ্ঞায়িত করে।

hiddenএইচটিএমএল 5 এ বৈশিষ্ট্যটি নতুন এবং ব্রাউজারগুলিকে উপাদানটি প্রদর্শন না করার জন্য বলে । aria-hiddenসম্পত্তি বলে স্ক্রিন-পাঠকদের যদি তারা উপাদান উপেক্ষা করা উচিত নয়। আরও বিশদে বিশদটি দেখুন:

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

এই মানদণ্ডগুলি ব্যবহার করে অক্ষম ব্যক্তিদের ওয়েবে ব্যবহার করা আরও সহজ করে তুলতে পারে।


4
সুতরাং আপনি যদি গোপন বৈশিষ্ট্যটি ব্যবহার করেন তবে পর্দা পাঠক এখনও পড়বেন?
ড্যানিয়েল কোবে

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

23
@ AndreiBârsan @ ড্যানিয়েলকোব আমার মনে হয় আন্দ্রেই "ভুল" বলে অভিহিত করেছেন। (তাঁর মন্তব্যের বাকী অংশটি সত্যবাদী)) hiddenস্ক্রিন রিডারটিকে ট্যাগের সামগ্রীগুলি অ্যাক্সেস করা থেকে বিরত রাখা উচিত should
eenblam

6
সম্পর্কে আপনার উত্তর aria-hiddenসঠিক; তবে আপনি hiddenএটিকে আলাদা করার বিষয়ে কিছুই বলেননি aria-hidden। দুর্ভাগ্যক্রমে এটি সেরা উত্তর is আপনার উত্তর সম্পর্কে আরও পুঙ্খানুপুঙ্খ হতে দয়া করে।
পেগুজ

1
আপনার উত্তরটি গুণাবলীর প্রভাবগুলি ব্যাখ্যা করে , তবে তার অর্থ নয় । আপনি অ্যাক্সেসযোগ্যতা গাছ বা কোনও উপাদানের অস্থায়ী প্রাসঙ্গিকতা সম্পর্কে কিছুই উল্লেখ করেন না। আরও তথ্যের জন্য চশমা পড়ুন। [এইচটিএমএল 5.2 , এআরআইএ 1.1 ]
ছারভে

40

একটি লুকানো বৈশিষ্ট্য হ'ল বুলিয়ান বৈশিষ্ট্য (সত্য / মিথ্যা)। যখন এই বৈশিষ্ট্যটি কোনও উপাদানটিতে ব্যবহার করা হয়, তখন এটি সেই উপাদানটির সাথে সমস্ত প্রাসঙ্গিকতা সরিয়ে দেয়। যখন কোনও ব্যবহারকারী এইচটিএমএল পৃষ্ঠাটি দেখেন, তখন লুকানো বৈশিষ্ট্যযুক্ত উপাদানগুলি দৃশ্যমান হওয়া উচিত নয়।

উদাহরণ:

    <p hidden>You can't see this</p>

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

উদাহরণ:

    <p aria-hidden="true">You can't see this</p>

এই একবার দেখুন । এটি আপনার সমস্ত প্রশ্নের উত্তর দেওয়া উচিত।

দ্রষ্টব্য: এআরআইএ হ'ল অ্যাক্সেসযোগ্য সমৃদ্ধ ইন্টারনেট অ্যাপ্লিকেশন

সূত্র: প্যাসিলো গ্রুপ


25
এটি সম্পূর্ণরূপে সঠিক নয় (এমনকি সরকারী ডকুমেন্টেশনও এখানে কিছুটা বিরক্তিকর)। এর সাথে একটি উপাদান aria-hidden="true"ব্রাউজারে এখনও দৃশ্যমান, তবে স্ক্রিন পাঠকদের মতো অ্যাক্সেসযোগ্যতার সরঞ্জামগুলিতে অদৃশ্য।
আন্দ্রেই বার্সান

aria-hiddenঅ্যাক্সেসিবিলিটি সরঞ্জামগুলির সাহায্যে আপনার ওয়েবসাইট ব্যবহার করে লোকের কাছ থেকে উপাদানটি আড়াল করতে ব্যবহার করা হয়।
লুক ব্রাউন

13

অর্থগত পার্থক্য

এইচটিএমএল 5.2 অনুসারে :

যখন কোনও উপাদানের উপর নির্দিষ্ট করা হয়, [ hidden বৈশিষ্ট্য] নির্দেশ করে যে উপাদানটি এখনও পৃষ্ঠার বর্তমান অবস্থার সাথে সরাসরি প্রাসঙ্গিক নয়, বা এটি আর পৃষ্ঠার অন্যান্য অংশগুলির দ্বারা পুনঃব্যবহারের বিষয়বস্তু হিসাবে ঘোষিত করতে ব্যবহৃত হচ্ছে ব্যবহারকারী দ্বারা সরাসরি অ্যাক্সেস করার বিরোধিতা।

উদাহরণগুলির মধ্যে এমন একটি ট্যাব তালিকা অন্তর্ভুক্ত রয়েছে যেখানে কিছু প্যানেল প্রকাশিত হয় না বা কোনও লগ-ইন স্ক্রিন যা কোনও ব্যবহারকারী লগ ইন করার পরে চলে যায় I

অন্যদিকে, এআরআইএ ১.১ বলেছেন:

[ aria-hiddenরাষ্ট্র] নির্দেশ করে যে কোনও উপাদান অ্যাক্সেসযোগ্যতা এপিআই-তে প্রকাশিত হয়েছে কিনা।

অন্য কথায়, সহ উপাদানগুলি অ্যাক্সেসিবিলিটি ট্রিaria-hidden="true" থেকে সরিয়ে ফেলা হয় , যা বেশিরভাগ সহায়ক প্রযুক্তি সম্মান দেয় এবং এর সাথে উপাদানগুলি অবশ্যই গাছের সংস্পর্শে আসবে। অ্যাট্রিবিউট ব্যতীত উপাদানগুলি "অপরিজ্ঞাত (ডিফল্ট)" অবস্থায় থাকে, যার অর্থ ব্যবহারকারী এজেন্টরা এর উপস্থাপনের ভিত্তিতে গাছটিতে এটি প্রকাশ করতে পারে to উদাহরণস্বরূপ কোনও ব্যবহারকারী এজেন্ট যদি এর পাঠ্য রঙটি এর পটভূমির রঙের সাথে মেলে তবে এটি সরিয়ে ফেলার সিদ্ধান্ত নিতে পারে।aria-hidden="false"aria-hidden

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

কার্যকর পার্থক্য

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

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

সহ উপাদানগুলি aria-hidden="true"অ্যাক্সেসযোগ্যতা গাছের সংস্পর্শে আসে না, উদাহরণস্বরূপ, স্ক্রিন পাঠকরা তাদের ঘোষণা করবেন না। এই কৌশলটি সাবধানতার সাথে ব্যবহার করা উচিত, কারণ এটি বিভিন্ন ব্যবহারকারীর জন্য বিভিন্ন অভিজ্ঞতা সরবরাহ করবে: অ্যাক্সেসযোগ্য ব্যবহারকারী এজেন্টগুলি তাদের ঘোষণা / রেন্ডার করে না, তবে তারা এখনও ভিজ্যুয়াল এজেন্টগুলিতে রেন্ডার করা হয়। সঠিকভাবে সম্পন্ন করার সময় এটি একটি ভাল জিনিস হতে পারে তবে এটির অপব্যবহারের সম্ভাবনা রয়েছে।

সিনট্যাক্টিক পার্থক্য

শেষ অবধি, দুটি বৈশিষ্ট্যের মধ্যে সিনট্যাক্সের মধ্যে পার্থক্য রয়েছে।

hiddenএকটি হল বুলিয়ান অ্যাট্রিবিউট অর্থ যদি অ্যাট্রিবিউট উপস্থিত এটা সত্য-নির্বিশেষে এটা হতে পারে যাই হোক না কেন মান আছে-এবং যদি অ্যাট্রিবিউট অনুপস্থিত একে মিথ্যা হয়। সত্যিকারের ক্ষেত্রে, সর্বোত্তম অনুশীলন হ'ল হয় কোনও মানই ( <div hidden>...</div>) বা খালি স্ট্রিংয়ের মান ( <div hidden="">...</div>) ব্যবহার করা নয়। আমি প্রস্তাব দিচ্ছি নাhidden="true" কারণ কেউ আপনার কোডটি পড়ছেন / আপডেট করছেন hidden="false"তার বিপরীত প্রভাব পড়তে পারে যা কেবল ভুল।

aria-hiddenবিপরীতে, একটি গুনযুক্ত বৈশিষ্ট্য , মানগুলির একটি সীমাবদ্ধ তালিকার একটিকে মঞ্জুরি দেয়। তাহলে aria-hiddenঅ্যাট্রিবিউট উপস্থিত থাকলে, তার মান হওয়া আবশ্যক পারেন "true"বা "false"। আপনি যদি "অপরিজ্ঞাত (ডিফল্ট)" রাষ্ট্র চান তবে বৈশিষ্ট্যটি পুরোপুরি সরিয়ে ফেলুন।


আরও পঠন: https://github.com/chharvey/chharvey.github.io/wiki/ হিডেন- কনটেন্ট


1
প্যাকিয়েলো গ্রুপ, ২০১২-এর এই পোস্টটি বলেছে: "আরিয়া-লুকানো = মিথ্যা এমন কোনও ব্রাউজারে ম্যাপ করা হয়নি যা আরিয়া-লুকানো সমর্থন করে, সুতরাং এর ব্যবহারের কোনও অর্থ নেই বা অন্য কথায় এর অনুপস্থিতির মতো একই অর্থ রয়েছে।" এখনও যদি বিষয়টি নিশ্চিত না হয় তবে সাবধানতা হিসাবে যুক্ত করা। আমি আমার সিএসএস থেকে আমার এ 11 ভি ভিউ রাজ্যগুলি আলাদাভাবে বর্ণনা করতে চাই তবে এরিয়া-লুকানো দ্বারা এটি সম্ভব কিনা তা নিশ্চিত নয়। বিকাশকারী.প্যাসিওলোগ্রোপ.
com

-1

মিথ্যাতে আরিয়া-লুকানো সেট করা এবং এটি উপাদানটিতে টগল করা। শো () আমার পক্ষে কাজ করেছিল।

যেমন

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

এবং ফিরে লুকিয়ে যখন

$(span).attr('aria-hidden', 'true');
$(span).hide();
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.