শব্দার্থবিদ্যা এবং স্ক্রিন রিডার

Rob Dodson

আপনি কি কখনো ভেবে দেখেছেন যে কীভাবে সহায়ক প্রযুক্তি, যেমন স্ক্রিন রিডার, ব্যবহারকারীদের কাছে কী ঘোষণা করতে জানে? উত্তর হল যে এই প্রযুক্তিগুলি বিকাশকারীদের উপর নির্ভর করে তাদের পৃষ্ঠাগুলিকে শব্দার্থিক HTML দিয়ে চিহ্নিত করে৷ কিন্তু শব্দার্থবিদ্যা কী এবং স্ক্রিন রিডাররা কীভাবে সেগুলি ব্যবহার করে?

সামর্থ্য এবং শব্দার্থবিদ্যা

শব্দার্থবিদ্যায় ডুব দেওয়ার আগে, আরেকটি শব্দ বোঝার জন্য এটি সহায়ক: affordances । একটি সামর্থ্য হল এমন কোন বস্তু যা তার ব্যবহারকারীকে একটি ক্রিয়া সম্পাদন করার সুযোগ দেয় বা প্রদান করে। একটি ক্লাসিক উদাহরণ হল চাপানি:

একটি চায়ের পাত্রের হাতল একটি প্রাকৃতিক সামর্থ্য।

এই চাপাতার একটি নির্দেশ ম্যানুয়াল প্রয়োজন নেই; পরিবর্তে, এর ভৌত নকশা ব্যবহারকারীকে জানিয়ে দেয় কিভাবে এটি পরিচালনা করা উচিত। এটির একটি হ্যান্ডেল রয়েছে এবং যেহেতু আপনি একই রকম হ্যান্ডেল সহ বিশ্বের অন্যান্য বস্তু দেখেছেন, তাই আপনি অনুমান করতে পারেন যে কীভাবে এটি বাছাই করা উচিত এবং এটি পরিচালনা করা উচিত।

যখন আমরা গ্রাফিকাল ইউজার ইন্টারফেস তৈরি করি, তখন আমরা আমাদের UI-তে ভিজ্যুয়াল সুবিধা যোগ করতে CSS-এর মতো জিনিস ব্যবহার করি। উদাহরণস্বরূপ, আপনি একটি বোতামকে একটি ড্রপ শ্যাডো এবং বর্ডার দিতে পারেন যাতে এটি বাস্তব জগতে একটি প্রকৃত বোতামের মতো হয়।

কিন্তু যদি একজন ব্যবহারকারী স্ক্রীন দেখতে না পান, তাহলে এই ভিজ্যুয়াল affordances তাদের জানানো হবে না। অতএব, আপনাকে নিশ্চিত করতে হবে যে আপনার UI এমনভাবে তৈরি করা হয়েছে যা সহায়ক প্রযুক্তিতে এই একই সুযোগ-সুবিধাগুলি প্রকাশ করতে পারে। একটি UI উপাদানের সামর্থ্যের এই অ-ভিজ্যুয়াল এক্সপোজারকে এর শব্দার্থবিদ্যা বলা হয়।

শব্দার্থিক HTML ব্যবহার করুন

সঠিক শব্দার্থ বোঝানোর সবচেয়ে সহজ উপায় হল শব্দার্থগতভাবে সমৃদ্ধ HTML উপাদান ব্যবহার করা।

CSS ব্যবহার করে, <div> এবং <button> উপাদানগুলিকে স্টাইল করা সম্ভব যাতে তারা একই ভিজ্যুয়াল সুবিধাগুলি প্রকাশ করে, কিন্তু স্ক্রিন রিডার ব্যবহার করার সময় দুটি অভিজ্ঞতা খুব আলাদা। একটি <div> শুধুমাত্র একটি সাধারণ গ্রুপিং উপাদান, তাই একজন স্ক্রিন রিডার শুধুমাত্র <div> এর পাঠ্য বিষয়বস্তু ঘোষণা করে। <button> একটি "বোতাম" হিসাবে ঘোষণা করা হয়, এটি ব্যবহারকারীর কাছে একটি শক্তিশালী সংকেত যে এটি এমন কিছু যা তারা যোগাযোগ করতে পারে।

এই সমস্যার সবচেয়ে সহজ এবং প্রায়শই সর্বোত্তম সমাধান হল কাস্টম ইন্টারেক্টিভ নিয়ন্ত্রণগুলি সম্পূর্ণভাবে এড়ানো। উদাহরণস্বরূপ, একটি <div> প্রতিস্থাপন করুন যা একটি বোতামের মতো কাজ করে একটি প্রকৃত <button> দিয়ে।

শব্দার্থগত বৈশিষ্ট্য এবং অ্যাক্সেসিবিলিটি ট্রি

সাধারণভাবে বলতে গেলে, প্রতিটি HTML উপাদানের নিম্নলিখিত কিছু শব্দার্থিক বৈশিষ্ট্য থাকবে:

• একটি ভূমিকা বা প্রকার
• একটি নাম
• একটি মান (ঐচ্ছিক)
• একটি রাষ্ট্র (ঐচ্ছিক)

একটি উপাদানের ভূমিকা তার ধরন বর্ণনা করে, উদাহরণস্বরূপ, "বোতাম," "ইনপুট" বা এমনকি div এবং span উপাদানগুলির মতো জিনিসগুলির জন্য "গ্রুপ"।

একটি উপাদানের নাম তার গণনাকৃত লেবেল। স্ক্রিন রিডাররা সাধারণত একটি উপাদানের নাম ঘোষণা করে এবং এর ভূমিকা অনুসরণ করে, যেমন "সাইন আপ, বোতাম।" অ্যালগরিদম যা একটি উপাদানের নামের কারণ নির্ধারণ করে যেমন উপাদানের ভিতরে কোনো পাঠ্য বিষয়বস্তু আছে কিনা, title বা placeholder মতো বৈশিষ্ট্য আছে কিনা, উপাদানটি প্রকৃত <label> উপাদানের সাথে যুক্ত কিনা, এবং যদি উপাদানটির কোনো ARIA বৈশিষ্ট্য রয়েছে যেমন aria-label এবং aria-labelledby ।

কিছু উপাদানের একটি মান থাকতে পারে । উদাহরণস্বরূপ, <input type="text"> একটি মান থাকতে পারে যা ব্যবহারকারী পাঠ্য ক্ষেত্রে যা টাইপ করেছে তা প্রতিফলিত করে।

কিছু উপাদানের একটি রাষ্ট্র থাকতে পারে , যা তাদের বর্তমান অবস্থা প্রকাশ করে। উদাহরণস্বরূপ, একটি <select> উপাদানটি খোলা বা বন্ধ কিনা তার উপর নির্ভর করে, একটি প্রসারিত বা একটি ভেঙে যাওয়া অবস্থায় হতে পারে।

অ্যাক্সেসিবিলিটি গাছ

DOM-এর প্রতিটি নোডের জন্য, ব্রাউজার নোডটি শব্দার্থগতভাবে "আকর্ষণীয়" কিনা তা নির্ধারণ করে এবং অ্যাক্সেসিবিলিটি ট্রিতে এটি যোগ করে। যখন সহায়ক প্রযুক্তি, একটি স্ক্রিন রিডারের মতো, ব্যবহারকারীকে একটি বিকল্প UI প্রদান করে, তখন এটি প্রায়শই এই অ্যাক্সেসিবিলিটি ট্রিতে হেঁটে তা করে।

দ্রষ্টব্য: ব্রাউজারগুলি প্রায়শই অ্যাক্সেসিবিলিটি ট্রি থেকে div এবং span মতো শব্দার্থগতভাবে অরুচিহীন নোডগুলি সরিয়ে দেয়, বিশেষত যদি সেগুলি কেবল তাদের বাচ্চাদের CSS এর সাথে অবস্থান করার জন্য ব্যবহার করা হয়। উদাহরণস্বরূপ, যদি আপনার কাছে 5টি div উপাদানের ভিতরে একটি button থাকে, তাহলে ব্রাউজার শব্দ কমাতে মাঝখানের কিছু div উপাদান ছাঁটাই করতে পারে।

Chrome এর DevTools ব্যবহার করে আপনি একটি উপাদানের শব্দার্থিক বৈশিষ্ট্যগুলি পরিদর্শন করতে পারেন এবং অ্যাক্সেসিবিলিটি ট্রিতে এর অবস্থান অন্বেষণ করতে পারেন৷

পরবর্তী পদক্ষেপ

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