লেবেল এবং টেক্সট বিকল্প

রব ডডসন

একটি স্ক্রিন রিডার ব্যবহারকারীর কাছে একটি কথ্য UI উপস্থাপন করার জন্য, অর্থপূর্ণ উপাদানগুলির যথাযথ লেবেল বা পাঠ্য বিকল্প থাকতে হবে৷ একটি লেবেল বা টেক্সট বিকল্প একটি উপাদানকে তার অ্যাক্সেসযোগ্য নাম দেয়, যা অ্যাক্সেসিবিলিটি ট্রিতে এলিমেন্টের শব্দার্থ প্রকাশের মূল বৈশিষ্ট্যগুলির মধ্যে একটি।

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

একটি উপাদানের নাম পরিদর্শন করুন

Chrome এর DevTools ব্যবহার করে একটি উপাদানের অ্যাক্সেসযোগ্য নাম চেক করা সহজ:

  1. একটি উপাদানের উপর ডান-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন। এটি DevTools Elements প্যানেল খোলে।
  2. উপাদান প্যানেলে, অ্যাক্সেসিবিলিটি প্যানেলটি সন্ধান করুন। এটি একটি » ​​প্রতীকের পিছনে লুকিয়ে থাকতে পারে।
  3. কম্পিউটেড প্রোপার্টি ড্রপডাউনে, নাম বৈশিষ্ট্যটি সন্ধান করুন।
DevTools অ্যাক্সেসিবিলিটি ফলক একটি বোতামের জন্য গণনা করা নাম দেখাচ্ছে।

আপনি alt টেক্সট সহ একটি img বা একটি label সহ একটি input দেখছেন না কেন, এই সমস্ত পরিস্থিতির ফলাফল একই হয়: একটি উপাদানকে তার অ্যাক্সেসযোগ্য নাম দেওয়া৷

অনুপস্থিত নাম পরীক্ষা করুন

একটি উপাদানের প্রকারের উপর নির্ভর করে একটি অ্যাক্সেসযোগ্য নাম যোগ করার বিভিন্ন উপায় রয়েছে৷ নিম্নলিখিত সারণীতে সবচেয়ে সাধারণ উপাদানের প্রকারগুলি তালিকাভুক্ত করা হয়েছে যেগুলির অ্যাক্সেসযোগ্য নাম এবং কীভাবে সেগুলি যুক্ত করতে হবে তার ব্যাখ্যার লিঙ্কগুলির প্রয়োজন৷

উপাদান প্রকার কিভাবে একটি নাম যোগ করতে হয়
HTML নথি নথি এবং ফ্রেম লেবেল করুন
<frame> বা <iframe> উপাদান নথি এবং ফ্রেম লেবেল করুন
ছবির উপাদান ছবি এবং বস্তুর জন্য পাঠ্য বিকল্প অন্তর্ভুক্ত করুন
<input type="image"> উপাদান ছবি এবং বস্তুর জন্য পাঠ্য বিকল্প অন্তর্ভুক্ত করুন
<object> উপাদান ছবি এবং বস্তুর জন্য পাঠ্য বিকল্প অন্তর্ভুক্ত করুন
বোতাম লেবেল বোতাম এবং লিঙ্ক
লিঙ্ক লেবেল বোতাম এবং লিঙ্ক
ফর্ম উপাদান লেবেল ফর্ম উপাদান

নথি এবং ফ্রেম লেবেল করুন

প্রতিটি পৃষ্ঠায় একটি title উপাদান থাকা উচিত যা সংক্ষিপ্তভাবে ব্যাখ্যা করে যে পৃষ্ঠাটি কী। title উপাদান পৃষ্ঠাটিকে তার অ্যাক্সেসযোগ্য নাম দেয়। যখন একটি স্ক্রিন রিডার পৃষ্ঠায় প্রবেশ করে, এটি প্রথম পাঠ্য যা ঘোষণা করা হয়।

উদাহরণস্বরূপ, নীচের পৃষ্ঠাটির শিরোনাম রয়েছে "মেরি'স ম্যাপেল বার ফাস্ট-বেকিং রেসিপি":

<!doctype html>
  <html lang="en">
    <head>
      <title>Mary's Maple Bar Fast-Baking Recipe</title>
    </head>
  <body>
    …
  </body>
</html>

একইভাবে, যেকোনো frame বা iframe উপাদানের title বৈশিষ্ট্য থাকা উচিত:

<iframe title="An interactive map of San Francisco" src="…"></iframe>

যদিও একটি iframe এর বিষয়বস্তুতে তাদের নিজস্ব অভ্যন্তরীণ title উপাদান থাকতে পারে, একটি স্ক্রিন রিডার সাধারণত ফ্রেমের সীমানায় থামে এবং উপাদানটির ভূমিকা ঘোষণা করে—"ফ্রেম"—এবং title বৈশিষ্ট্য দ্বারা প্রদত্ত এর অ্যাক্সেসযোগ্য নাম। এটি ব্যবহারকারীকে সিদ্ধান্ত নিতে দেয় যে তারা ফ্রেমে প্রবেশ করতে চায় বা এটি বাইপাস করতে চায়।

ছবি এবং বস্তুর জন্য পাঠ্য বিকল্প অন্তর্ভুক্ত করুন

একটি img এর সাথে সবসময় একটি alt অ্যাট্রিবিউট থাকা উচিত যাতে ইমেজটিকে অ্যাক্সেসযোগ্য নাম দেওয়া যায়। ইমেজ লোড করতে ব্যর্থ হলে, alt টেক্সট একটি স্থানধারক হিসাবে ব্যবহার করা হয় যাতে ব্যবহারকারীরা বুঝতে পারে যে ছবিটি কী বোঝাতে চাইছিল।

ভাল alt টেক্সট লেখা একটি শিল্পের বিট, কিন্তু আপনি অনুসরণ করতে পারেন কিছু নির্দেশিকা আছে:

  1. চিত্রটি এমন সামগ্রী সরবরাহ করে কিনা তা নির্ধারণ করুন যা অন্যথায় পার্শ্ববর্তী পাঠ্য পড়ার থেকে অর্জন করা কঠিন হবে।
  2. যদি তাই হয়, যতটা সম্ভব সংক্ষিপ্তভাবে বিষয়বস্তু জানান।

যদি চিত্রটি সাজসজ্জা হিসাবে কাজ করে এবং কোনও দরকারী বিষয়বস্তু প্রদান না করে, আপনি এটিকে অ্যাক্সেসিবিলিটি ট্রি থেকে সরানোর জন্য একটি খালি alt="" বৈশিষ্ট্য দিতে পারেন।

একটি লিঙ্কে মোড়ানো একটি চিত্রটি img এর alt বৈশিষ্ট্য ব্যবহার করা উচিত যেখানে ব্যবহারকারীরা লিঙ্কটিতে ক্লিক করলে কোথায় নেভিগেট করবেন তা বর্ণনা করতে হবে:

<a href="https://en.wikipedia.org/wiki/Google">
  <img alt="Google's wikipedia page" src="google-logo.jpg">
</a>

একইভাবে, যদি একটি <input type="image"> একটি ইমেজ বোতাম তৈরি করতে এলিমেন্ট ব্যবহার করা হয়, তাহলে এতে alt টেক্সট থাকা উচিত যা ব্যবহারকারী বোতামে ক্লিক করার সময় ঘটে যাওয়া ক্রিয়া বর্ণনা করে:

<form>
  <label>
    Username:
    <input type="text">
  </label>
  <input type="image" alt="Sign in" src="./sign-in-button.png">
</form>

এমবেডেড বস্তু

<object> উপাদান, যা সাধারণত ফ্ল্যাশ, PDF, বা ActiveX-এর মতো এম্বেডের জন্য ব্যবহৃত হয়, এছাড়াও বিকল্প পাঠ্য থাকা উচিত। চিত্রের অনুরূপ, উপাদানটি রেন্ডার করতে ব্যর্থ হলে এই পাঠ্যটি প্রদর্শিত হয়। বিকল্প পাঠ্যটি object উপাদানের ভিতরে নিয়মিত পাঠ্য হিসাবে যায়, যেমন নীচের "বার্ষিক প্রতিবেদন":

<object type="application/pdf" data="/report.pdf">
Annual report.
</object>

একটি সাইটের অভিজ্ঞতার জন্য বোতাম এবং লিঙ্কগুলি প্রায়শই গুরুত্বপূর্ণ, এবং উভয়েরই ভাল অ্যাক্সেসযোগ্য নাম থাকা গুরুত্বপূর্ণ৷

বোতাম

একটি button উপাদান সর্বদা তার পাঠ্য সামগ্রী ব্যবহার করে তার অ্যাক্সেসযোগ্য নাম গণনা করার চেষ্টা করে। একটি form অংশ নয় এমন বোতামগুলির জন্য, একটি ভাল অ্যাক্সেসযোগ্য নাম তৈরি করার জন্য পাঠ্য বিষয়বস্তু হিসাবে একটি স্পষ্ট পদক্ষেপ লিখতে হবে।

<button>Book Room</button>

একটি 'বুক রুম' বোতাম সহ একটি মোবাইল ফর্ম।

এই নিয়মের একটি সাধারণ ব্যতিক্রম হল আইকন বোতাম। একটি আইকন বোতাম বোতামটির জন্য পাঠ্য সামগ্রী সরবরাহ করতে একটি চিত্র বা একটি আইকন ফন্ট ব্যবহার করতে পারে। উদাহরণ স্বরূপ, টেক্সট ফরম্যাট করার জন্য আপনি যা দেখছেন ইজ হোয়াট ইউ গেট (WYSIWYG) সম্পাদকে ব্যবহৃত বোতামগুলি সাধারণত শুধুমাত্র গ্রাফিক চিহ্ন হয়:

একটি বাম সারিবদ্ধ আইকন বোতাম।

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

<button aria-label="Left align"></button>

বোতামের মতো, লিঙ্কগুলি প্রাথমিকভাবে তাদের পাঠ্য সামগ্রী থেকে তাদের অ্যাক্সেসযোগ্য নাম পায়। একটি লিঙ্ক তৈরি করার সময় একটি চমৎকার কৌশল হল "এখানে" বা "আরো পড়ুন" এর মতো শব্দের পরিবর্তে সবচেয়ে অর্থপূর্ণ পাঠ্যটি লিঙ্কটিতেই রাখা।

যথেষ্ট বর্ণনামূলক নয়
Check out our guide to web performance <a href="/guide">here</a>.
দরকারী বিষয়বস্তু!
Check out <a href="/guide">our guide to web performance</a>.

এটি স্ক্রিন রিডারদের জন্য বিশেষভাবে সহায়ক যারা পৃষ্ঠার সমস্ত লিঙ্ক তালিকাভুক্ত করার জন্য শর্টকাট অফার করে। যদি লিঙ্কগুলি পুনরাবৃত্ত ফিলার টেক্সটে পূর্ণ থাকে, তাহলে এই শর্টকাটগুলি অনেক কম কার্যকর হবে:

ভয়েসওভারের লিঙ্ক মেনু 'এখানে' শব্দ দিয়ে ভরা।
ভয়েসওভারের উদাহরণ, macOS-এর জন্য একটি স্ক্রিন রিডার, লিঙ্ক মেনু দ্বারা নেভিগেট দেখায়।

লেবেল ফর্ম উপাদান

একটি ফর্ম উপাদান যেমন একটি চেকবক্সের সাথে একটি লেবেল সংযুক্ত করার দুটি উপায় রয়েছে৷ যেকোন একটি পদ্ধতির কারণে লেবেল টেক্সট চেকবক্সের জন্য একটি ক্লিক টার্গেটে পরিণত হয়, যা মাউস বা টাচস্ক্রিন ব্যবহারকারীদের জন্যও সহায়ক। একটি উপাদানের সাথে একটি লেবেল সংযুক্ত করতে, হয়:

  • একটি লেবেল উপাদানের ভিতরে ইনপুট উপাদান রাখুন
<label>
  <input type="checkbox">Receive promotional offers?</input>
</label>
  • অথবা অ্যাট্রিবিউটের for লেবেল ব্যবহার করুন এবং উপাদানের id উল্লেখ করুন
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>

যখন চেকবক্সটি সঠিকভাবে লেবেল করা হয়, তখন স্ক্রিন রিডার রিপোর্ট করতে পারে যে উপাদানটিতে চেকবক্সের ভূমিকা রয়েছে, এটি একটি চেক করা অবস্থায় রয়েছে এবং "প্রচারমূলক অফারগুলি পান?" নীচের ভয়েসওভার উদাহরণের মত:

ভয়েসওভার টেক্সট আউটপুট 'প্রচারমূলক অফার গ্রহণ করবেন?'

TODO: DevSite - চিন্তা করুন এবং মূল্যায়ন পরীক্ষা করুন