আপনি কি কখনও ভেবে দেখেছেন যে স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তি কীভাবে ব্যবহারকারীদের কাছে কী ঘোষণা করতে পারে? উত্তর হল, এই প্রযুক্তিগুলি ডেভেলপারদের তাদের পৃষ্ঠাগুলিকে শব্দার্থিক HTML দিয়ে চিহ্নিত করার উপর নির্ভর করে। কিন্তু শব্দার্থবিদ্যা কী এবং স্ক্রিন রিডাররা কীভাবে এগুলি ব্যবহার করে?
সামর্থ্য এবং শব্দার্থবিদ্যা
শব্দার্থবিদ্যায় ডুব দেওয়ার আগে, affordances বোঝাটা সহায়ক। affordance হলো এমন যেকোনো বস্তু যা তার ব্যবহারকারীকে একটি ক্রিয়া সম্পাদনের সুযোগ দেয়। এর একটি ক্লাসিক উদাহরণ হল চায়ের পাত্র:
এই চা-পাতার জন্য কোনও নির্দেশিকা ম্যানুয়াল প্রয়োজন নেই। বরং, এর ভৌত নকশা ব্যবহারকারীকে বোঝায় যে এটি কীভাবে পরিচালনা করা উচিত। এর একটি হাতল আছে, এবং যেহেতু আপনি বিশ্বের অন্যান্য জিনিসপত্রেও একই রকম হাতল দেখেছেন, তাই আপনি অনুমান করতে পারেন যে আপনার এটি কীভাবে তুলে নেওয়া উচিত এবং কীভাবে পরিচালনা করা উচিত।
যখন আমরা গ্রাফিক্যাল ইউজার ইন্টারফেস তৈরি করি, তখন আমরা আমাদের ইন্টারফেসে ভিজ্যুয়াল সুবিধা যোগ করার জন্য CSS ব্যবহার করি। উদাহরণস্বরূপ, আপনি একটি বোতামকে একটি ড্রপ শ্যাডো এবং বর্ডার দিতে পারেন যাতে এটি বাস্তব জগতের একটি আসল বোতামের মতো দেখায়।
কিন্তু যারা স্ক্রিন দেখতে পান না, তাদের কাছে এই ভিজ্যুয়াল সুবিধাগুলি পৌঁছে দেওয়া হয় না। অতএব, আপনাকে নিশ্চিত করতে হবে যে আপনার ইন্টারফেসটি এমনভাবে তৈরি করা হয়েছে যাতে সহায়ক প্রযুক্তিতেও এই সুবিধাগুলি পৌঁছে দেওয়া যায়। একটি 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"> একটি মান থাকতে পারে যা ব্যবহারকারী টেক্সট ফিল্ডে যা টাইপ করেছেন তা প্রতিফলিত করে।
কিছু এলিমেন্টের একটি state ও থাকতে পারে , যা তাদের বর্তমান অবস্থা প্রকাশ করে। উদাহরণস্বরূপ, একটি <select> এলিমেন্ট খোলা বা বন্ধ কিনা তার উপর নির্ভর করে প্রসারিত বা ধসে পড়া অবস্থায় থাকতে পারে।
অ্যাক্সেসিবিলিটি ট্রি
DOM-এর প্রতিটি নোডের জন্য, ব্রাউজার নির্ধারণ করে যে নোডটি শব্দার্থগতভাবে "আকর্ষণীয়" কিনা এবং এটি অ্যাক্সেসিবিলিটি ট্রিতে যোগ করে। যখন সহায়ক প্রযুক্তি, যেমন একটি স্ক্রিন রিডার, ব্যবহারকারীকে একটি বিকল্প UI প্রদান করে, তখন এটি প্রায়শই এই অ্যাক্সেসিবিলিটি ট্রিতে হেঁটে তা করে।
Chrome DevTools এর সাহায্যে, আপনি একটি উপাদানের শব্দার্থিক বৈশিষ্ট্যগুলি পরিদর্শন করতে পারেন এবং অ্যাক্সেসিবিলিটি ট্রিতে এর অবস্থান অন্বেষণ করতে পারেন।
পরবর্তী পদক্ষেপ
একবার আপনি শব্দার্থবিদ্যা সম্পর্কে কিছুটা জানতে পারলে এবং স্ক্রিন রিডার নেভিগেশনে কীভাবে এগুলো সাহায্য করে, আপনি ভিন্নভাবে তৈরি করা পৃষ্ঠাগুলি দেখে সাহায্য করতে পারবেন না। পরবর্তী বিভাগে, আমরা এক ধাপ পিছিয়ে যাব এবং বিবেচনা করব কিভাবে কার্যকর শিরোনাম এবং ল্যান্ডমার্ক ব্যবহার করে একটি পৃষ্ঠার সম্পূর্ণ রূপরেখা প্রকাশ করা যায়।