ALT অ্যাট্রিবিউট
alt
অ্যাট্রিবিউট ট্যাগ (বলতে গেলে, একটি সেট সংজ্ঞায়িত করা হয় img
, area
এবং ঐচ্ছিকরূপে জন্য input
এবং applet
) আপনি বস্তুর জন্য একটি টেক্সট সমতুল্য প্রদান করতে মঞ্জুরি দিতে।
একটি পাঠ্য সমতুল্য আপনার ওয়েব সাইট এবং এর দর্শকদের জন্য নিম্নলিখিত সাধারণ পরিস্থিতিতে নিম্নলিখিত সুবিধাগুলি নিয়ে আসে:
- আজকাল, ওয়েব ব্রাউজারগুলি খুব বিস্তৃত ক্ষমতা সহ বিভিন্ন প্ল্যাটফর্মগুলিতে উপলব্ধ; কিছু কিছু বা শুধুমাত্র চিত্রের ধরণের একটি সীমিত সেটগুলিতে চিত্র প্রদর্শন করতে পারে না; কিছু চিত্র লোড না করার জন্য কনফিগার করা যেতে পারে। যদি আপনার কোডটির চিত্রগুলিতে Alt বৈশিষ্ট্য সেট থাকে তবে এই ব্রাউজারগুলির বেশিরভাগই চিত্রগুলির পরিবর্তে আপনি যে বর্ণনা দিয়েছেন তা প্রদর্শন করবে
- আপনার দর্শকদের মধ্যে কেউ চিত্র দেখতে পাচ্ছেন না, সেগুলি অন্ধ, বর্ণ-অন্ধ, নিম্ন-দৃষ্টিশক্তি হোক; আপনার পৃষ্ঠায় কী আছে সে সম্পর্কে ভাল ধারণা পেতে people ব্যক্তির উপর নির্ভর করতে পারে এমন ব্যক্তিদের জন্য Alt গুণাবলী দুর্দান্ত সাহায্যকারী
- অনুসন্ধান ইঞ্জিনের বটগুলি উপরের দুটি বিভাগের সাথে সম্পর্কিত: আপনি যদি চান যে আপনার ওয়েবসাইটটি যেমন প্রযোজ্য তেমনি এটিও যথাযথভাবে তালিকাভুক্ত করা হোক তবে সেগুলি আপনার পৃষ্ঠাগুলির গুরুত্বপূর্ণ বিভাগটি মিস করবে না তা নিশ্চিত করতে Alt বৈশিষ্ট্যটি ব্যবহার করুন।
শিরোনাম গুন
এই কৌশলটির উদ্দেশ্য হ'ল ব্যবহারকারীদের প্রসঙ্গে সংবেদনশীল সহায়তা প্রদান করা হয় যেহেতু তারা এ-তে সহায়তা সম্পর্কিত তথ্য সরবরাহ করে ফর্মগুলিতে ডেটা প্রবেশ করে title
বৈশিষ্ট্যে করা। সাহায্যে ফর্ম্যাট তথ্য বা ইনপুট উদাহরণ অন্তর্ভুক্ত থাকতে পারে।
উদাহরণ 1: একটি পুলডাউন মেনু যা কোনও অনুসন্ধানের পরিধি সীমাবদ্ধ করে
একটি অনুসন্ধান ফর্ম অনুসন্ধানের সুযোগ সীমাবদ্ধ করতে একটি পুলডাউন মেনু ব্যবহার করে। পুলডাউন মেনু তত্ক্ষণাত অনুসন্ধান শব্দটি প্রবেশ করতে ব্যবহৃত পাঠ্য ক্ষেত্রের সংলগ্ন। অনুসন্ধান ক্ষেত্র এবং পুলডাউন মেনুর মধ্যে সম্পর্ক এমন ব্যবহারকারীদের কাছে স্পষ্ট যে ভিজ্যুয়াল ডিজাইনটি দেখতে পারে, যার কাছে দৃশ্যমান লেবেলের জায়গা নেই। title
অ্যাট্রিবিউট সনাক্ত করতে ব্যবহৃত হয় select
মেনু। title
অ্যাট্রিবিউট স্ক্রীন রিডার দ্বারা উচ্চারিত হতে পারে বা পর্দা ম্যাগনিফায়ারের ব্যবহার মানুষের জন্য একটি টুল টিপ হিসেবে প্রদর্শিত।
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
...
</select>
উদাহরণ 2: একটি ফোন নম্বরটির জন্য ইনপুট ক্ষেত্রগুলি
একটি ওয়েব পৃষ্ঠায় মার্কিন যুক্তরাষ্ট্রের ফোন নম্বর প্রবেশের জন্য নিয়ন্ত্রণ রয়েছে, যার সাথে ক্ষেত্রের কোড, এক্সচেঞ্জ এবং শেষ চারটি সংখ্যার জন্য তিনটি ক্ষেত্র রয়েছে।
<fieldset>
<legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset>
উদাহরণ 3: একটি অনুসন্ধান কার্য
একটি ওয়েব পৃষ্ঠায় একটি পাঠ্য ক্ষেত্র রয়েছে যেখানে ব্যবহারকারী অনুসন্ধানের জন্য শর্তাদি এবং অনুসন্ধান সম্পাদনের জন্য "অনুসন্ধান" লেবেলযুক্ত একটি বোতাম প্রবেশ করতে পারে। title
অ্যাট্রিবিউট ফর্ম নিয়ন্ত্রণ সনাক্ত করতে ব্যবহৃত হয় এবং বাটন টেক্সট ক্ষেত্রের পর ডান অবস্থিত যাতে এটি ব্যবহারকারীকে স্পষ্ট যে টেক্সট ক্ষেত্রের যেখানে অনুসন্ধান শব্দ লেখা উচিত নয়।
<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>
উদাহরণ 4: ফর্ম নিয়ন্ত্রণের একটি ডাটা টেবিল
একটি ডেটা টেবিল একটি ডেটা টেবিলের সেই কক্ষের জন্য কলাম এবং সারি শিরোনামগুলির সাথে প্রতিটি নিয়ন্ত্রণ সংযুক্ত করা দরকার। শিরোনাম (বা অফ-স্ক্রিন LABEL) ব্যতীত অ-ভিজ্যুয়াল ব্যবহারকারীদের ফর্মের মাধ্যমে ট্যাব করার সময় তাদের সহায়ক প্রযুক্তি ব্যবহার করে সারি / কলাম শিরোনামের মানগুলির জন্য বিরতি দেওয়া এবং জিজ্ঞাসাবাদ করা কঠিন is
উদাহরণস্বরূপ, একটি জরিপ ফর্মের প্রথম সারিতে চারটি কলাম শিরোনাম রয়েছে: প্রশ্ন, সম্মতি, অনিশ্চিত, অসম্মতি। প্রতিটি নীচের প্রতিটি সারিতে তিনটি কলামে পছন্দের উত্তরের সাথে সম্পর্কিত প্রতিটি ঘরে একটি প্রশ্ন এবং একটি রেডিও বোতাম রয়েছে। প্রতিটি রেডিও বোতামের শিরোনাম বৈশিষ্ট্যটি উত্তর পছন্দ (কলাম শিরোলেখ) এবং একটি বিভাজক হিসাবে হাইফেন বা কোলন সহ প্রশ্নের (সারি শিরোনাম) সংক্ষেপণ।
আইএমজি এলিমেন্ট
MDN এ উল্লিখিত অনুমোদিত বৈশিষ্ট্য ।
alt
crossorigin
decoding
height
importance
(পরীক্ষামূলক এপিআই)
intrinsicsize
(পরীক্ষামূলক এপিআই)
ismap
referrerpolicy
(পরীক্ষামূলক এপিআই)
src
srcset
width
usemap
যেমন আপনি দেখতে পারেন title
বৈশিষ্ট্যের ভিতরে img
উপাদানগুলির অনুমতি নেই । আমি alt
অ্যাট্রিবিউট ব্যবহার করব এবং প্রয়োজন হলে আমি বৈশিষ্ট্যের :hover
পরিবর্তে সিএসএস (উদাহরণ: সিউডো ক্লাস ) ব্যবহার করব title
।