একটি স্ক্রিন রিডার ব্যবহারকারীর কাছে একটি কথ্য UI উপস্থাপন করার জন্য, অর্থপূর্ণ উপাদানগুলির যথাযথ লেবেল বা পাঠ্য বিকল্প থাকতে হবে। একটি লেবেল বা পাঠ্য বিকল্প একটি উপাদানকে তার অ্যাক্সেসযোগ্য নাম দেয়, যা অ্যাক্সেসিবিলিটি ট্রিতে উপাদানের শব্দার্থবিদ্যা প্রকাশ করার জন্য মূল বৈশিষ্ট্যগুলির মধ্যে একটি।
যখন কোনও উপাদানের নাম উপাদানের ভূমিকার সাথে একত্রিত করা হয়, তখন এটি ব্যবহারকারীকে প্রসঙ্গ দেয় যাতে তারা বুঝতে পারে যে তারা কোন ধরণের উপাদানের সাথে ইন্টারঅ্যাক্ট করছে এবং পৃষ্ঠায় এটি কীভাবে উপস্থাপন করা হয়েছে। যদি কোনও নাম উপস্থিত না থাকে, তবে একটি স্ক্রিন রিডার কেবল উপাদানটির ভূমিকা ঘোষণা করে। কল্পনা করুন যে আপনি একটি পৃষ্ঠা নেভিগেট করার চেষ্টা করছেন এবং কোনও অতিরিক্ত প্রসঙ্গ ছাড়াই "বোতাম," "চেকবক্স," "চিত্র" শুনতে পাচ্ছেন। এই কারণেই একটি ভাল, অ্যাক্সেসযোগ্য অভিজ্ঞতার জন্য লেবেলিং এবং পাঠ্য বিকল্পগুলি অত্যন্ত গুরুত্বপূর্ণ।
একটি উপাদানের নাম পরীক্ষা করুন
আপনি Chrome এর DevTools-এ একটি উপাদানের অ্যাক্সেসযোগ্য নাম পরীক্ষা করতে পারেন:
- একটি এলিমেন্টের উপর ডান-ক্লিক করুন এবং Inspect নির্বাচন করুন। এটি DevTools Elements প্যানেলটি খুলবে।
- এলিমেন্টস প্যানেলে, অ্যাক্সেসিবিলিটি প্যানটি খুঁজুন। এটি একটি
»প্রতীকের আড়ালে লুকানো থাকতে পারে। - কম্পিউটেড প্রোপার্টিজ ড্রপ-ডাউনে, Name প্রোপার্টিটি খুঁজুন।
আপনি যদি 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 টেক্সট লেখা একটু শিল্প, তবে আপনি কয়েকটি নির্দেশিকা অনুসরণ করতে পারেন:
- ছবিটিতে এমন কোন বিষয়বস্তু আছে কিনা তা নির্ধারণ করুন যা অন্যথায় আশেপাশের লেখাটি পড়ে অর্জন করা কঠিন হবে।
- যদি তাই হয়, তাহলে যতটা সম্ভব সংক্ষিপ্তভাবে বিষয়বস্তু প্রকাশ করুন।
যদি ছবিটি সাজসজ্জার কাজ করে এবং কোনও কার্যকর সামগ্রী প্রদান না করে, তাহলে অ্যাক্সেসিবিলিটি ট্রি থেকে এটি অপসারণের জন্য আপনি এটিকে একটি খালি 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> উপাদান, যা সাধারণত Flash, 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>.
এটি বিশেষ করে স্ক্রিন রিডারদের জন্য সহায়ক যারা পৃষ্ঠার সমস্ত লিঙ্ক তালিকাভুক্ত করার জন্য শর্টকাট অফার করে। যদি লিঙ্কগুলি পুনরাবৃত্তিমূলক ফিলার টেক্সটে পূর্ণ থাকে, তাহলে এই শর্টকাটগুলি অনেক কম কার্যকর হয়ে যায়:
লেবেল ফর্ম উপাদান
একটি লেবেলকে একটি ফর্ম এলিমেন্টের সাথে সংযুক্ত করার দুটি উপায় আছে, যেমন একটি চেকবক্স। এই দুটি পদ্ধতির যেকোনো একটির মাধ্যমে লেবেল টেক্সট চেকবক্সের জন্য একটি ক্লিক টার্গেটে পরিণত হয়, যা মাউস বা টাচস্ক্রিন ব্যবহারকারীদের জন্যও সহায়ক। একটি এলিমেন্টের সাথে একটি লেবেল সংযুক্ত করতে, যেটি হল:
- একটি লেবেল এলিমেন্টের ভিতরে ইনপুট এলিমেন্ট রাখুন।
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- অথবা অ্যাট্রিবিউটের
forলেবেল ব্যবহার করুন এবং এলিমেন্টেরidদেখুন
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
যখন চেকবক্সটি সঠিকভাবে লেবেল করা থাকে, তখন স্ক্রিন রিডার রিপোর্ট করতে পারে যে উপাদানটিতে চেকবক্সের ভূমিকা রয়েছে, এটি একটি চেক করা অবস্থায় রয়েছে এবং এর নাম "প্রচারমূলক অফার গ্রহণ করবেন?" যেমন এই ভয়েসওভার উদাহরণে দেখানো হয়েছে:
